Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

A better contact form.

branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

README.md

Better Contact Form

A better contact form experience

This is more of an idea for UX improvement rather than a complete solution1. My proposal is to:

  1. allow your visitors to include any form of contact (eg: phone number or Twitter handle instead of an email)

  2. include an option to use user's email client

  3. if your visitor uses an email in the form, send him or her a confirmation email

  4. omit the form reset button (https://www.w3.org/Bugs/Public/show_bug.cgi?id=9406)

A big thanks to Ayelet who helped me fix an annoying bug!

To try the form, download the code from this repository and update the following files to use your email address and website:

In mail.php:

$recipient = "your@email.com";
...
<a href=\"http://YOURSITE.COM\">

In index.html:

<a id="contactmelink" onclick="javascript:sendEmail();" href="mailto:your@email.com">Send me an email</a>

I am including two versions of the form, a simple one and a fancier one that uses Twitter Bootstrap (Apache License: https://github.com/twbs/bootstrap/blob/master/LICENSE). You can preview them here (forms are not configured, so they will not send any emails):


1 The mail script will try to prevent email injection by removing certain characters that allow adding CC and BCC email addresses. Also, HTML tags will be stripped. For more details see

function str_sanitize($str, $allow_nl)

in mail.php.

Furthermore, I am using a very simple implementation of the honeypot technique to prevent spam. You can read more about this method here: http://nedbatchelder.com/text/stopbots.html (or just google it). In a nutshell: you are creating a hidden input field, here called fullname. The email.php script will check if the field was filled out (bots don't process CSS, so to them it will be visible).

One drawback of this technique is that the hidden field is visible to people using screen readers (or certain browsers), to which one simple solution is to use something like "Ignore this field, thank you" for a title.

Again, this is not a complete solution, so please feel free to implement your own security method(s) here.

Also, you might want to check for empty fields (the form allows to send an empty message).


Assorted Feedback and Suggestions

Your multi-source contact info field cannot possibly reliably detect whether the user is entering a twitter, email, website, or other contact information. Not even with matching against strings/regex. You're gonna run into people putting unverifiable junk in that box, and people who don't specify what source the contact is from. The traditional way is to send an email to the address to see if it works.

The use cases of this form don't require this. This form suits best personal websites where the visitor trying to get in touch with you is very likely to want to include proper contact information.

You should look into APIs like http://www.fullcontact.com/developer that can find all of a user's social accounts just given his email.

If you wanna see some "advanced" forms, check out http://wufoo.com

The contact forms I made are just examples/blueprints, so I am intentionally keeping them simple. The real point is to show the UX ideas: the "multi-source contact info field", an option to use user's email client instead of forcing him or her to use the form and sending a confirmation email, if possible.

You can actually use wufoo.com while following these principles.

The actual forms only serve as a "clickable" example, which I think would be better than a mockup screenshot.

A Few Good Tips I Didn't Implement

  • The Name field is not really necessary, as it will likely be included in the email or the person's Twitter page. The visitor can also easily include his or her name in the message.
Something went wrong with that request. Please try again.