Web Design: Email

All things involving website email

Table of Contents:
*mailto: Links
*Hiding email address
   -CAPTCHA
   -Browser Encoding
   -Javascript & Php
   -CSS Pseudo-Classes

mailto: Links

Regular mailto: links
Spaces between words should be replaced by %20 to ensure that the browser will display the text properly.

Hiding email address from spam bots

Either don’t put it on the web page or take the necessary precautions. 

Source:
http://www.labnol.org/internet/hide-email-address-web-pages/28364/
http://www.w3schools.com/php/php_secure_mail.asp

CAPTCHA
Google’s reCAPTCHA service. It hide your email address behind a CAPTCHA image that requires user interface.

Browser Encoded Address
You can also encode email addresses in the browser. The encoded html mailto: address shows up on the client side as actual email address and copies accordingly.

*online encoder: http://ctrlq.org/encode/
-Just type the email address you want to encode.
-Copy the code we provide.
-Paste the code where the address should be.

my encoded yahoo email: kayakchic432@yahoo.com

Insert html a:link:
<a href="mailto:&#107;&#97;&#121;&#97;&#107;&#99;&#104;&#105;&#99;&#52;&#51;&#50;&#64;&#121;&#97;&#104;&#111;&#111;&#46;&#99;&#111;&#109;
" target="_top">
Send Mail</a>


Hide Email through CSS pseudo-classes

UnSelectable:
You can use the ::before and ::after pseudo-elements in CSS to insert the email username and domain name on either sides of the @ symbol. The bots, which are generally blind to CSS, will only see the @ sign while browsers will render the complete email address which, in this case, is john@gmail.com. The downside with the above approach is that users won’t be able to select and copy your email address on the web page, they’ll have to write it down manually.

<style>
  my-email::after {
    content: attr(data-domain);
  }
  my-email::before {
    content: attr(data-user) "\0040";
  }
</style>

<!-- Set data-user and data-domain as your
       email username and domain respectively -->

<my-email data-user="john" data-domain="gmail.com"></my-email>


Selectable:
If you would prefer to use pseudo-elements but with a more user-friendly style that allows selection, you can try an alternate approach with all the email characters but the “@” symbol are selectable.

<style>
  .domain::before {
    content: "\0040";    /* Unicode character for @ symbol */
  }
</style>

john<span class="domain">abc.com</span>


Javascript

Obfuscate Email through JavaScript using the ‘onclick’ event. You can create a regular mailto hyperlink for your email address but replace some of the characters – like the dot and the @ sign – with text. Then add an onclick event to this hyperlink that will substitute the text with the actual symbols.

<a href = "mailto:johnATgmailDOTcom"
   onclick = "this.href=this.href
              .replace(/AT/,'&#64;')
              .replace(/DOT/,'&#46;')"
>Contact Me</a>


Random Array

Split your email address into multiple parts and create an array in JavaScript out of these parts. Next join these parts in the correct order and use the .innerHTML property to add the email address to the web page.

<span id="email"></span>

<script>
  var parts = ["john", "abc", "com", "&#46;", "&#64;"];
  var email = parts[0] + parts[4] + parts[1] + parts[3] + parts[2];
  document.getElementById("email").innerHTML=email;
</script>


WordPress + PHP

If you are on WordPress, you can also consider using the built-in antispambot() function to encode your email address. The function will encode the characters in your address to their HTML character entity (the letter a becomes &#97; and the @ symbol becomes &#64;) though they will render correctly in the browser.

<?php echo antispambot("john@abc.com"); ?>


PHP Secure E-mails

PHP Stopping E-mail Injections: The best way to stop e-mail injections is to validate the input. The code below is the same as in the previous chapter, but now we have added an input validator that checks the "from" field in the form.  Code uses PHP filters to validate input:
-The FILTER_SANITIZE_EMAIL filter removes all illegal e-mail characters from a string
-The FILTER_VALIDATE_EMAIL filter validates value as an e-mail address

<html>
<body>
<?php
function spamcheck($field) {
  // Sanitize e-mail address
  $field=filter_var($field, FILTER_SANITIZE_EMAIL);
  // Validate e-mail address
  if(filter_var($field, FILTER_VALIDATE_EMAIL)) {
    return TRUE;
  } else {
    return FALSE;
  }
}
?>

<h2>Feedback Form</h2>
<?php
// display form if user has not clicked submit
if (!isset($_POST["submit"])) {
  ?>
  <form method="post" action="<?php echo $_SERVER["PHP_SELF"];?>">
  From: <input type="text" name="from"><br>
  Subject: <input type="text" name="subject"><br>
  Message: <textarea rows="10" cols="40" name="message"></textarea><br>
  <input type="submit" name="submit" value="Submit Feedback">
  </form>
  <?php
} else {  // the user has submitted the form
  // Check if the "from" input field is filled out
  if (isset($_POST["from"])) {
    // Check if "from" email address is valid
    $mailcheck = spamcheck($_POST["from"]);
    if ($mailcheck==FALSE) {
      echo "Invalid input";
    } else {
      $from = $_POST["from"]; // sender
      $subject = $_POST["subject"];
      $message = $_POST["message"];
      // message lines should not exceed 70 characters (PHP rule), so wrap it
      $message = wordwrap($message, 70);
      // send mail
      mail("webmaster@example.com",$subject,$message,"From: $from\n");
      echo "Thank you for sending us feedback";
    }
  }
}
?>
</body>
</html>