Better Contact Form

This is more of an idea for UX improvement rather than a complete solution¹. 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. allow the user to easily copy the email address and use it any way they please²
4. if your visitor uses an email in the form, send them a confirmation email
5. 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 = "[email protected]";
  ...
<a href=\"http://YOURSITE.COM\">

In index.html:

  <a id="contactmelink" onclick="javascript:sendEmail();" href="mailto:[email protected]">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):

• simple
• fancy

---

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

² This is useful for people who can't/don't change their default email clients. Think of someone clicking an email link, having to wait a few seconds while Outlook loads, then they go back to your site, right-click the link and copy the email.

---

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 them 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 their name in the message.