Wednesday 26 June 2013

Convert the Mailto Hyperlinks into a Contact Form

Websites use the mailto protocol to convert plain-text email addresses into hyperlinks. When someone clicks an hyperlinked email address,  it opens a new message in their default email program allowing them to quickly compose and send an email to that particular address.
Some website owners hide their email addresses but instead offer inline contact forms allowing visitors to reach them directly without having to use an external email program.
contact form

Convert Mailto Links into Contact Forms

SquareSend offers the best of both worlds. The service will auto-convert the mailto hyperlinks on your web page into inline contact forms and, to get this to work, all you have to do is insert a single line of JavaScript into your web template.
To get a taste of how this thing works, click my email address amit@labnol.org - this is a standard mailto link but instead of opening a message in your email program, you should see a modal contact form in the browser.
Getting started is easy. Create an account at SquareSend with the email address that you would like to use in your mailto links and then copy-paste the following snippet of JavaScript code into your blog /website template. That’s it.

  1. // Replace with your own email address
  2. Email Me: <a href="mailto:amit@labnol.org">amit@labnol.org</a>
  3.  
  4. // The SquareSend JavaScript will load asynchronously
  5. // without affecting the load time of your web page
  6.  
  7. <script type="text/javascript">
  8. (function() {
  9. var ss = document.createElement('script');
  10. ss.type = 'text/javascript'; ss.async = true;
  11. ss.src = document.location.protocol + '//squaresend.com/squaresend.js';
  12. var s = document.getElementsByTagName('script')[0];
  13. s.parentNode.insertBefore(ss, s);
  14. })();
  15. </script>
When someone contacts you via the SquareSend enabled mailto link, you’ll get a copy of the message in your primary mailbox and a copy will also be delivered to your SquareSend account. The service supports custom parameters allowing you to easily customize forms.


SquareSend is a freemium service. You can associate up to five different email addresses with your account and the free plan would allow you to receive up to 50 email messages per month.

Bonus Tip for WordPress users

The email address on your web page can be easily harvested by spam bots but if you are on WordPress, there’s a little-known function called antispambot that will hide your address behind HTML characters making it nearly invisible to spam bots.
  1. // This will appear as a regular email address to humans but spam
  2. // bots will only see some weird HTML characters
  3.  
  4. <a href='mailto:<?php echo antispambot("amit@labnol.org"); ?>'>
  5. <?php echo antispambot("amit@labnol.org"); ?>
  6. </a>
Just use the above snippet wherever you wish to display your email address and you should be safe. Human visitors will see the regular email address while bot will see some weird HTML characters.

No comments:

Post a Comment