DEV Community

irishgeoff22
irishgeoff22

Posted on • Edited on

Hide email address on website

Here a basic tutorial on use veilMail.io to hide email address from spammers using JavaScript. This method helps to protect your email address from being easily harvested by bots.

  1. Create a new HTML file:
    Start by creating a new HTML file for your web page. You can use a simple text editor like Notepad or any code editor of your choice.

  2. HTML Structure:
    Set up the basic structure of your HTML file.

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Your Website</title>
   </head>
   <body>
       <!-- Your website content will go here -->
   </body>
   </html>
Enter fullscreen mode Exit fullscreen mode
  1. Add the JavaScript code: Insert the following JavaScript code within the <head> tags of your HTML file.
   <script type="text/javascript">
       // Function to generate the email link
       function generateEmailLink() {
           var user = "your-email"; // Replace with your email username
           var domain = "your-domain.com"; // Replace with your email domain
           var mailtoLink = "mailto:" + user + "@" + domain;

           // Set the href attribute of the anchor tag to the mailto link
           document.getElementById("emailLink").setAttribute("href", mailtoLink);
           document.getElementById("emailLink").innerHTML = user + "@" + domain;
       }
   </script>
Enter fullscreen mode Exit fullscreen mode
  1. Insert the email link: In the <body> section of your HTML file, insert an anchor tag where you want the email address to appear.
   <p>Contact us at <a id="emailLink" href="#" onclick="generateEmailLink();">Loading...</a></p>
Enter fullscreen mode Exit fullscreen mode
  1. Call the function: At the end of your HTML file, call the generateEmailLink function to generate the email link.
   <script type="text/javascript">
       // Call the function to generate the email link
       generateEmailLink();
   </script>
Enter fullscreen mode Exit fullscreen mode
  1. Replace placeholder values:
    Replace "your-email" and "your-domain.com" in the JavaScript code with your actual email username and domain.

  2. Test your page:
    Save your HTML file and open it in a web browser to test if the email link is working correctly.

Remember that determined users can still find ways to extract email addresses from websites. This method simply adds a layer of protection against automated bots.

PRO TIP: Use VeilMail.io to hide email address from spammers

Top comments (0)