How to hide email address in html form

There are a few ways to hide an email address in an HTML form:

  1. Use the mailto protocol: Instead of displaying the email address directly, you can use the mailto protocol to create a link that opens the user's default email client. For example:

    <a href="mailto:[email protected]">Contact Us</a>

    This way, the email address is not displayed directly, but the user can still click on the link to send an email.

  2. Use JavaScript to encode the email address: You can use JavaScript to encode the email address using a technique called "obfuscation". This involves replacing special characters with HTML entities or using a JavaScript function to encode the email address. For example:

    <script>
    var email = "[email protected]";
    document.getElementById("email").innerHTML = email.replace(/./g, function(c) {
     return "&#x" + c.charCodeAt(0).toString(16) + ";";
    });
    </script>
    <div id="email"></div>

    This code replaces each character in the email address with its corresponding HTML entity, making it difficult for bots to extract the email address.

  3. Use a third-party service: There are several third-party services that offer email obfuscation tools, such as ReCaptcha or Google's Invisible reCAPTCHA. These services can help you hide your email address while still allowing users to contact you.

  4. Use a CSS trick: You can use CSS to hide the email address by setting its display property to none. For example:

    <span style="display: none;">[email protected]</span>

    This way, the email address is still present in the HTML code, but it is not displayed to the user.

  5. Use a server-side solution: If you have access to your server-side code, you can use a server-side language like PHP or Python to encode the email address before sending it to the client. For example:

    <?php
    $email = "[email protected]";
    echo "<a href='mailto:". str_replace("@", "&#64;", $email). "'>Contact Us</a>";
    ?>

    This code replaces the @ symbol with its corresponding HTML entity, making it difficult for bots to extract the email address.

Remember that while these methods can help hide your email address, they are not foolproof and may not prevent determined bots from extracting the email address.