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

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 - 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.

// Replace with your own email address Email Me:
<a href=""></a>

// The SquareSend JavaScript will load asynchronously // without affecting the load time of your web page

<script type="text/javascript">
  (function () {
    var ss = document.createElement('script');
    ss.type = 'text/javascript';
    ss.async = true;
    ss.src = document.location.protocol + '//';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(ss, s);

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.

// This will appear as a regular email address to humans but spam
// bots will only see some weird HTML characters

<a href='mailto:<?php echo antispambot(""); ?>'>
	<?php echo antispambot(""); ?>

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.

If you aren’t on WordPress, see other ways to hide your email address on websites.

Amit Agarwal

Amit Agarwal

Google Developer Expert, Google Cloud Champion

Amit Agarwal is a Google Developer Expert in Google Workspace and Google Apps Script. He holds an engineering degree in Computer Science (I.I.T.) and is the first professional blogger in India.

Amit has developed several popular Google add-ons including Mail Merge for Gmail and Document Studio. Read more on Lifehacker and YourStory


Awards & Titles

Digital Inspiration has won several awards since it's launch in 2004.

Google Developer Expert

Google Developer Expert

Google awarded us the Google Developer Expert award recogizing our work in Google Workspace.

ProductHunt Golden Kitty

ProductHunt Golden Kitty

Our Gmail tool won the Lifehack of the Year award at ProductHunt Golden Kitty Awards in 2017.

Microsoft MVP Alumni

Microsoft MVP Alumni

Microsoft awarded us the Most Valuable Professional (MVP) title for 5 years in a row.

Google Cloud Champion

Google Cloud Champion

Google awarded us the Champion Innovator title recognizing our technical skill and expertise.

Email Newsletter

Sign up for our email newsletter to stay up to date.

We will never send any spam emails. Promise.