How to Safely Share Your Email Address on a Website

Now, spam is flooding. If you want to share your contact information and don't want to be overwhelmed by spam, you need a solution. I had this problem a few months ago. While researching how to solve this problem, I found some interesting solutions. Only one of them perfectly satisfies my needs.

This article will show you how to easily protect your email address from spam bots using a variety of ways. You can choose the right method according to your needs.

Catalog

html { scroll-behavior: smooth; } - Traditional method

• HTML Method
• HTML and CSS methods
• JavaScript Method
• Inline form method
• Conclusion

Traditional method

Suppose you have a website. You want to share your contact information, not just share your social links. The email address must exist. Very simple, right? You can enter the following:

<code><a href="https://www.php.cn/link/7c3b08f1b6142bceb956851f1a45442b">发送电子邮件给我</a></code>

Then style it according to your preferences.

OK, even if this solution works, it has a problem. It makes your email address visible to everyone, including website crawlers and various spam bots. This means your inbox can be overwhelmed with a lot of unwanted spam, such as promotional offers and even some phishing activities.

We are looking for a compromise. We want to make it difficult for bots to get our email address, but it is as simple as possible for the average user.

The solution is confusion.

Confusing is a practice that makes something difficult to understand. This strategy is used for source code for a number of reasons. One of the reasons is to hide the purpose of source code to make tampering or reverse engineering more difficult. We will first look at different solutions based on confusion ideas.

HTML Method

We can think of robots as software that browses and crawls web pages. After the bot obtains the HTML document, it interprets the contents and extracts the information. This extraction process is called network crawl. If the bot is looking for a pattern that matches the email format, we can try to disguise it by using a different format. For example, we can use HTML comments:

<code><p>如果您想联系我，请发送电子邮件至 email@address.com</p></code>

It looks messy, but users will see an email address like this:

<code>如果您想联系我，请发送电子邮件至 [email protected]</code>

Pros:

• Easy to set up.
• It works with JavaScript disabled.
• Assisted technology can read it.

Disadvantages:

• Spam bots can skip known sequences, such as comments.
• It does not work with mailto: link.

HTML and CSS methods

What if we use CSS's style feature to remove something that is only used to fool spam bots? Suppose we have the same content as before, but this time we put a span element in it:

<code><a href="https://www.php.cn/link/7c3b08f1b6142bceb956851f1a45442b">发送电子邮件给我</a></code>

Then we use the following CSS style rules:

<code><p>如果您想联系我，请发送电子邮件至 email@address.com</p></code>

End users will only see:

<code>如果您想联系我，请发送电子邮件至 [email protected]</code>

…This is what we really care about.

Pros:

• It works with JavaScript disabled.
• Robs are more difficult to obtain email addresses.
• Assisted technology can read it.

Disadvantages:

• It does not work with mailto: link.

JavaScript Method

In this example, we use JavaScript to make our email address unreadable. Then, after the page loads, JavaScript makes the email address readable again. This way our users can get an email address.

The easiest solution uses the Base64 encoding algorithm to decode email addresses. First, we need to encode the email address as Base64. We can do this using some websites like Base64Encode.org. Enter your email address as follows:

Then, click the button to encode. Using these lines of JavaScript, we decode the email address and set the href attribute in the HTML link:

<code><p>如果您想联系我，请发送电子邮件至 PLEASE GO AWAY! email@address.com</p>。</code>

Then we have to make sure the email link is included in the tag, like this:

<code>span.blockspam {
  display: none;
}</code>

We use the atob method to decode a string of Base64 encoded data. Another approach is to use some basic encryption algorithms, such as Caesar cipher, which is easy to implement in JavaScript.

Pros:

• Robots are more difficult to obtain email addresses, especially when using encryption algorithms.
• It works for mailto: link.
• Assisted technology can read it.

Disadvantages:

• JavaScript must be enabled on the browser, otherwise the link will be empty.

Inline form method

Contact forms are available everywhere. You've definitely used at least one of them. If you want people to contact you directly, one of the possible solutions is to implement the contact form service on your website.

Formspree is an example of a service that provides all the benefits of contact form without worrying about server-side code. The same goes for Wufoo. In fact, there are many services you can consider using to process your contact form submissions.

The first step to using any form service is to register and create an account. Of course, pricing will vary, and the functions provided between different services will also vary. However, most services provide you with an HTML snippet to embed the forms you create into any website or application. Here is an example I extracted directly from the form I created in my Formspring account

<code>如果您想联系我，请发送电子邮件至 [email protected]。</code>

Your email: Your message: Sent on the first line, you should customize the action based on your endpoint. This form is very basic, but you can add as many fields as you want.

Note the hidden input marks in line 9. This input tag helps you filter content submitted by regular users and bots. In fact, if the backend of Formspree sees a commit that fills in that input, it will discard it. The average user won't do this, so it must be a robot.

Pros:

• Your email address is secure because it is not public.
• It works with Javascript disabled.

Disadvantages:

• Rely on third-party services (this may be a plus, depending on your needs)

This solution has one more drawback, but I removed it from the list because it is very subjective and depends on your use case. With this solution, you will not share your email address. You are giving people the means to contact you. What if people want to email you? What if people are looking for your email address and they don’t need a contact form? In this case, the contact form can be an overly tough solution.

Conclusion

We have reached the end! In this tutorial, we discuss different solutions to the online email sharing problem. We introduced different ideas, including online services such as HTML code, JavaScript and even Formspree to build contact forms. By the end of this tutorial, you should understand all the pros and cons of the displayed strategy. Now you can choose the most appropriate strategy based on your specific use case.

The above is the detailed content of How to Safely Share Your Email Address on a Website. For more information, please follow other related articles on the PHP Chinese website!