Fix [email protected] on Avada sites with Cloudflare

I’ve seen this issue on a few customer sites but not with consistency (e.g., using similar plugins or settings). Luckily, this is an issue that you can troubleshoot and address without code.

By default, any new sites added to Cloudflare automatically have its Scrape Shield enabled. This includes email obfuscation, where the server replaces any email addresses on the page with [email protected]. Once the page is loaded to the visitor’s browser, JavaScript swaps it for the actual email address after the visitor passes Cloudflare’s security checks.

Cloudflare published a detailed article on the email address obissue here.

In short, this is for your protection. Websites are continuously scraped by bots for contact details (phone numbers and email addresses), which are sold as leads for email marketing. But to make it easy for customers to reach you, you need to publish these details on your website.

Cloudflare automatically hides these details from bots, and only displays it to visitors who pass security checks. This functionality is part of its Scrape Shield, which protects email addresses, and also prevents your images from being used on other sites with links, chewing at your website’s bandwidth.

This is enabled by default to any sites added to Cloudflare.

You entered [email protected] on your website, and linked it so visitors can click on it and contact you.

When someone visits your website, Cloudflare replaces all email addresses on with [email protected]. Once the page is loaded to the visitor’s browser, a bit of JavaScript swaps it back to [email protected] after they pass Cloudflare’s security checks (ensuring they aren’t just a bot, scraping your site for content).

Simply applying the fix and hoping it’s the right one isn’t always the best way to troubleshoot. It’s important to know why something is happening before fixing it. So the first step is to identify the problem.

According to their article, Cloudflare will only swap [email protected] for your email address if it is in a properly formed link tag in this format:

Email obfuscation will not work if:

1. the HTML link is not properly formatted,
2. the email address is inside one of the following tags:
   script
   noscript
   textarea
   xmp
   head
3. the MIME type is not text/html or application/xhtml+xml.
4. the page includes a template tag (anywhere)
5. cache-control is set to no-transform
6. the HTML is added after the page is rendered (e.g., by a worker)

1. In the Avada Live Editor, edit the element and select Text to view the source.
   
2. If your link looks similar to our example, your formatting is good and we can move to the next step. This may vary if you’re using other elements (e.g., Title which has a dedicated link field).
3. If your link does not look like this, to troubleshoot, add a text box and copy our example to your page to troubleshoot. (save it, and view it in another tab).
4. Remember to clear your server cache if you’re viewing this on a different device (to ensure you aren’t viewing an old cached copy).

This example uses Google Chrome, but should be similar in other browsers:

1. Visit the page on your website that should show your email address and find [email protected] on the page.
2. Right-click on it, and select Inspect. This will open Chrome’s Developer Tools and show you the HTML of your page.
   
3. Check the parent elements of the link for one of Cloudflare’s disallowed tags (script, noscript, textarea, xmp, head). In our the example the email link is in the footer, and everything looks fine, so we can move to step 3 which is the most likely candidate.
4. To close Chrome Developer Tools, hit F12 on your keyboard, or click on the X in the top-right corner of the Developer Tools add-in.

1. Visit the page where you see [email protected]
2. View the HTML source of the page by right-clicking on the page and selecting View page source (or hit CTRL+U on your keyboard)
3. Search for <template by hitting CTRL+F on your keyboard, enter <template and hit ENTER
4. Our search yielded this:
   
   where I can clearly see that there is a <template tag and it appears to be related to WooCommerce, and appears to be linked to quick view.

In our case, we have WooCommerce installed and Avada appears to be rendering a template tag that could be causing the issue.

To fix this, visit:

• Avada > Global Options > WooCommerce > General WooCommerce
• Find Quick View on that page and toggle it to Off
  
• Save Changes on Avada Global Options
• Visit the page where you saw [email protected] before and refresh the page.
• To verify this on a different device, clear your server cache and refresh the page on the other device.

If you’re not using WooCommerce, or if you want to continue using WooCommerce Product Quick View, or if the steps above simply did not resolve your problem, you can disable Cloudflare’s email obfuscation and use a WordPress plugin to provide similar protection.

1. Log into your Cloudflare Dashboard
2. Select Websites in the left navigation and click on the correct website.
3. In the left navigation, select Security > Settings
4. Scroll to Email Address Obfuscation and toggle it to Off.
5. Clear the cache (Caching > Configuration > Purge All) to clear Cloudflare’s caches for this website.

I’ve used Till Krüss’s Email Address Encoder plugin successfully on a few WordPress websites and can recommend it.

You can install it by searching for Email Address Encoder in the plugin repository through your website or visit the official website for more information.

Troubleshooting issues on WordPress websites can be tricky due to the number of plugins, PHP version, hosting platform and other variables. We hope that this guide helped you find a solution, and gives you the skills to more effectively troubleshooting issues in the future.