Hide eMail Address from Spambots

Do you want to share WYSIWYG Web Builder tips, tricks, tutorials or useful HTML code? You can post it here...
(no questions or problems please, this section is not monitored by support).
Forum rules
This section is to share tips, tricks and tutorials related to WYSIWYG Web Builder.
Please do not post questions or problems here. They will not be answered.

PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901
Post Reply
martin.mattel
 
 
Posts: 83
Joined: Thu Oct 04, 2018 3:04 pm

Hide eMail Address from Spambots

Post by martin.mattel »

This is a small description how to hide an eMail address from spambots.

If you have a text object which contains an eMail address, you may want to show that eMail address normally in the browser, but make it hard for spambots or crawlers to parse it automatically.

There are a couple of ways doing so and all of them have their pros and cons, I will describe two of them:
  • An easy way of doing so is by creating a text object containing only the eMail address and let WWB convert it to an image. This is very convenient but can have three obstacles:
    - First you manually need to position that object into its proper place which can be challenging when having a responsive web design.
    - The second issue may raise that it may not work with all fonts. The image may be empty.
    - Third, when you change the font, you need to recreate that image.
  • The other way is to put components of the eMail address between the html <code></code> tag.
    Here is an example for doing so:
    <code>name</code><code>@</code><code>domain</code><code>.tld</code>
    Renders to: name@domain.tld
    The bot or crawler sees the code above and refuses.
    - This has the big benefit that you just continue how you write text and it stays part of your bigger text object.
    - The disadvantage is, that you have to disable html encoding in the text object settings, else the html tag added will be rendered as <code></code>.
    - Additionally, you need to add the following manually via wwb in the page html between <head></head>, to define the font for the code element, else the default family, most likely monospace is used:
    <style>
    code {
    font-family: "whatever you have used or want as font";
    }
    </style>
Post Reply