Handling 'mailto:' links in a user-friendly way


'Mailto:' links are great as long as the user has their email client configured on their computer. If they don't, they'll likely be prompted by their OS's default email application to setup their accout. Sometimes, this is too much for the user and they choose to give up and not send their message at all.

Well designed contact forms are universally accessible to all users. They put in their email address, sometimes their name and their message. They hit the send button and off their message goes. Unfortunately, they'll likely have no record of their message or the address to which their message was sent.

On the SFASU website, I wrote a bit of JavaScript (with jQuery and jQuery UI) to let visitors choose if they want to use their email client or use our standard contact form when they click a 'mailto:' link. Here's how it works:

  1. Use 'mailto:' when creating email address links
  2. When a user clicks on an email address link, intercept the action via JavaScript and display a dialog box with two options; "Use the contact form" or "Use my email client"
    1. If the user chooses "Use the contact form" redirect them to the form with the relevant email address pre-populated in the query string
    2. If the user chooses "Use my email client" fallback to the browser's default behavior

To see a simplified working example, check out this jsFiddle.