How To Build an HTML Contact Form

A big challenge when coding an HTML contact form is choosing a reliable backend language. There are a ton of different options that we’ll cover today, including a couple of tutorials.

In one tutorial I’ll explain how to build a contact form reliant on MailThis as a backend. You don’t need PHP or Python, or even a web server! MailThis can take requests from any page with a properly structured form and deliver crisp e-mails in a jiffy. In the next tutorial, I’ll cover how to code a guided registration form using jQuery.

First, the MailThis contact form tutorial:

mailthis custom api form
Live DemoDownload Source Code

Getting Started

MailThis is completely free to use and even has documentation on their website. I’ll be covering many core features, but one thing I won’t do is setup an email alias.

Since your e-mail address goes inside the POST form URL(ex: mailthis.to/youremail@gmail.com), it’s very easy for a spammer or spambot to examine your code and start spamming the address.

MailThis can provide a free alias which masks your real email in the form’s code. I would highly recommend doing this for every live project using MailThis.

To do so visit the homepage and setup your preferred e-mail with an alias username.

create alias email mailthis

Next we’ll create the form itself. You’ll notice MailThis provides a sample form, but I’ve coded my own with some extra features.

Building the Form

Since the exact syntax is very important, I’ve broken down my source into two blocks of code for explanation. Here’s the first part:

<form action="http://mailthis.to/youremailhere@gmail.com" method="post">

  <div class="inputblock">
    <label for="email">Email Address:</label>
    <input type="email" name="email" id="name" class="txt">
  </div>

  <div class="inputblock">
    <label for="_subject">Subject</label>
    <div class="select-style">
    <select name="_subject">
      <option value="General Inquiry">General Inquiry</option>
      <option value="Support">Support</option>
      <option value="Advertising">Advertising</option>
      <option value="Press or Media">Press or Media</option>
    </select>
    </div>
  </div>
  
  <div class="inputblock">
    <label for="message">Message:</label>
    <textarea cols="40" rows="8" name="message" class="txt"></textarea>
  </div>

The form action attribute must be set to this specific syntax, always using a POST command. Simply replace the email address with your own(or specifically your new alias).

Each input field has a naming convention which must be maintained. An input with the name email holds the sender’s e-mail(the “from” field).

An input with the name _subject contains the message subject. MailThis suggests creating a hidden input with this value, but I’ve taken it one step further with a dropdown menu. This allows users to select a subject from a predefined list of your choosing.

The subject itself can also be set manually, or added to an input text field instead. No matter what you choose just make sure the field’s value attribute contains the exact text you want for the e-mail subject line.

Then finally a textarea with the name message contains the body message. All HTML characters still remain so users can e-mail you hyperlinks by writing HTML code.

  <input type="hidden" name="_replyto" value="%email">
  <input type="hidden" name="_valid[email]" value="valid_email">
  <input type="hidden" name="_valid[message]" value="min_length[10]">
  <!-- OPTIONAL REDIRECT
  <input type="hidden" name="_after" value="http://vandelaydesign.com/demo/mailthis/success.html">
  -->
  
  <div class="inputblock">
    <input type="submit" class="submit-btn" value="Send Message">
  </div>
  
</form>

Here’s the second half of the form. The only other visible input is a submit button which actually sends the form data to MailThis’ server.

All other input types are hidden because they don’t require user input. These are actually rules for how each form input should behave, also called validation fields in the MailThis documentation.

validation field mailthis table

Visit the MailThis webpage to find a table full of these validation fields with proper syntax. My demo has 3 active validation fields with an optional 4th you can use in your own projects.

The first field _replyto sets the e-mail’s replyto address. Most people want to reply directly to the person who sent the e-mail, and we can pull this info directly from their email input with the syntax %email.

Next I have two fields with the name _valid using suffix codes for which inputs are being targeted. For example my first validity check targets the input with a name of email. The value check is valid_email which should be self-explanatory.

You don’t have to write a single line of JavaScript or anything to get these validations working. MailThis handles everything with pre-built validation checks.

I’m using a similar check on the message field with a value of min_length[10]. Again hopefully self-explanatory, this forces users to enter at least 10 characters into their e-mail message before it’ll be considered valid.

Lastly I have a hidden input stored in an HTML comment. The name is _after which behaves as a redirect field. Instead of loading the default MailThis sent page, you can instead devise your own “email sent successfully” page.

The benefit is that you’ll keep visitors on your domain rather than redirecting them over to MailThis. It’s not necessary for the sake of my demo, but in a real-world project it could be very useful.

To find more of these validation checks visit the MailThis documentation to see if there’s anything else you could implement.

Final E-mail Confirmation

Once the form is complete you can try sending an e-mail to yourself, but you’ll receive a message like this:

verify mailthis email

It’s just a security measure to prevent spam and only happens once.

An e-mail will be sent to the form address with a confirmation link. Click the link and you’ll be all set.

success verified email message

When you’re doing this for a client’s website be sure to guide them through this initial setup. It only needs to be done once and might be confusing to people who wouldn’t know what to do when encountering such a message(webmasters or end users).

mailthis custom api form
Live DemoDownload Source Code

Next, Coding a Guided Registration Form with jQuery:

In this tutorial I want to demonstrate how we can build such an interface with CSS and jQuery. We can embed hidden form tips which only display when the user has focused on a particular field. These hints can be used to denote syntax, such as the required length of usernames or passwords. But it’s a great usability tactic which livens up even the most dull websites.

guided-registration-form-preview-image

Live DemoDownload Source Code

Building the Webpage

We can start by coding just the standard HTML5 markup for the registration form. In my header I’ve got a reference to an external stylesheet styles.css along with a unique JavaScript file regform.js. We will use both of these to add our custom code, along with the most recent copy of jQuery.

<link rel="stylesheet" type="text/css" media="all" href="styles.css">
<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" language="javascript" src="regform.js"></script>

To keep the layout simple I’ve placed the whole form inside a wrapper div with the margin: 0 auto; property setup. The form itself doesn’t tie into any backend – the action attribute points back to index.html passing data via POST.

<div id="form-container">
	<form id="register" name="register" action="index.html" method="post">
	  <h3>100% free, and account registration only takes 60 seconds!</h3>

	  <div class="row">
	    <label for="username">Enter a Username ?</label>
	    <input type="text" id="username" name="username" class="reg-input tiny" autocomplete="off" tabindex="1">
	    <div class="note"><span id="note-username">Minimum of 3 characters to a max of 20.</span></div>
	  </div>

To encapsulate the row areas I’ve divided the form into separate div classes. Each row contains a small label along with the input field on the right-hand side. After this I’m using another div with the class .note to hide a block element of form hints.

I’m using a number of additional attributes in the HTML to make the form easier for mobile users. autocomplete=”off” turns off the typical browser suggestion history which can be quite annoying at times. Also the tabindex attribute is setup +1 for each of the input fields in sequential order.

Stylin’ with CSS

The attached stylesheet is small but very manageable for this interface. First I’m using some really simple resets to remove margins, padding, and modulate font sizes between all browsers.

* { margin: 0; padding: 0; outline: none; }
body { font-size: 62.5%; height: 101%; background: #edf8ef; padding-bottom: 45px; font-family: Arial, Tahoma, sans-serif; }

img { border: 0; }

h2 { font-size: 1.9em; color: #5b83b4; margin-bottom: 12px; }
h3 { font-size: 1.65em; line-height: 1.8em; font-weight: normal; letter-spacing: -0.07em; color: #849669; margin-bottom: 20px; }
p { font-size: 1.2em; line-height: 1.3em; margin-bottom: 10px; }

#wrapper { width: 850px; margin: 0 auto; margin-top: 25px; background: #fff; border-radius: 6px; -webkit-border-radius: 6px; -moz-border-radius: 6px; padding: 20px 14px; }

#form-container { background: #d6f4cb; padding: 6px 15px; }

The labels and inputs inside each row are positioned carefully using inline-block. This will keep their display property with margins/padding while still holding the two elements next to each other. In the next block of code you’ll see I also setup 2 different classes for the text fields – one regular length and the other that’s a bit shorter. We can target both of these in jQuery later on.

.row { display: block; margin-bottom: 10px;  }

.row label { display: inline-block; font-size: 1.3em; color: #78815a; width: 220px; font-family: Georgia, Times New Roman, serif; text-shadow: 1px 1px 0px #f1f9ea; }
.row .reg-input { padding: 4px 8px; width: 500px; font-size: 1.2em; border: 1px solid #c0c0c0; color: #979797; margin-bottom: 8px; }
.row .reg-input:focus {
color: #818181;
border-color: #b3c2db;
box-shadow: 0 0 7px rgba(150, 175, 210, 0.8);
-moz-box-shadow: 0 0 7px rgba(150, 175, 210, 0.8);
-webkit-box-shadow: 0 0 7px rgba(150, 175, 210, 0.8);
}

.row select, .row option { color: #979797; }

.row .reg-input.tiny { width: 265px; }

I’m using some additional effects on the focus event for each input. CSS3 includes dynamic box-shadow effects which look great as you tab through the different inputs. For the select menus I’m trying to keep them much simpler so they just float next to each other.

Custom Buttons

The only other interesting bit of CSS code is designing the submit button. Thanks to such wide browser support we can build CSS3 gradients which require no images and can scale properly regardless of screen resolution. In our form design I’ve stuck with the green color scheme but it’s so easy to change the hexadecimal values tuned with your own layout.

form #submit {
	display: block;
	outline: none;
	cursor: pointer;
	text-align: center;
	text-decoration: none;
	margin-top: 20px;
	margin-bottom: 12px;
	font: 14px/100% Arial, Helvetica, sans-serif;
	padding: .5em 2em .55em;
	text-shadow: 0 1px 1px rgba(0,0,0,.3);
	-webkit-border-radius: .5em;
	-moz-border-radius: .5em;
	border-radius: .5em;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
	color: #fef4e9;
	border: solid 1px #99d235;
	background: #9beb46;
	background: -webkit-gradient(linear, left top, left bottom, from(#8efa1a), to(#86c944));
	background: -moz-linear-gradient(top,  #8efa1a,  #86c944);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#8efa1a', endColorstr='#86c944');
}

form #submit:hover {
	background: #8ce028;
	background: -webkit-gradient(linear, left top, left bottom, from(#9be72f), to(#93db4d));
	background: -moz-linear-gradient(top,  #9be72f,  #93db4d);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9be72f', endColorstr='#93db4d');
}

form #submit:active {
	color: #ddf9ba;
	border-color: #98b95d;
	background: -webkit-gradient(linear, left top, left bottom, from(#9dcc6a), to(#7bac41));
	background: -moz-linear-gradient(top,  #9dcc6a,  #7bac41);
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dcc6a', endColorstr='#7bac41');
}

One last note in the CSS file is how we’ve setup the small icons appearing on each note element. You can update these to display an error or success check mark as the user validates each field. For this demo it’s a lot easier just focusing on the informational fields without full validity. But the different classes are already included within the stylesheet if needed.

Dynamic jQuery

For the last part of our model let’s look into the regform.js file and see how to code these hints. I’ll break down the block into two sections for the focus and blur event handlers.

$(document).ready(function() {
  $(".reg-input, .sel-input").focus(function() {
    var theinput = $(this).attr("id");
	var thenote  = "#note-"+theinput;

	$(thenote).fadeIn("fast");
  });

The selector I’m using will target both the regular inputs and the select menus. I haven’t included anything for the birthday section because it would change on each of the different day/month/year selections.

Each note has an internal span ID in the form of #note-ID where the ID value is the associated input field’s name. This is the value we setup in the variable thenote and we can use this to quickly select the internal span to fade in and out.

  $(".reg-input").blur(function(){
	var theinput = $(this).attr("id");
	var thenote  = "#note-"+theinput;
	var currval  = $(this).val();

	if(currval == "" || currval == " ") {
	  $(thenote).fadeOut("fast");
	} else {
	  // we do nothin
	}
  });
});

For the blur event handler I’ve added a bit more logic into the equation. The new variable currval gets the value of the currently targeted input before the user removes their focus. We can then check if the form is totally blank and re-hide the info field. Otherwise if the field has value we can keep the text displayed as a cautious reminder(makes proofreading handy!).

And that should be all we need to get this running! The JavaScript actually isn’t too confusing but for new scripters it may take some references to the jQuery docs. Feel free to test out the live demo and download my source code which you can play around with on your own. Live DemoDownload Source Code

Now, Let’s Cover Other Resources:

There are a number of resources available that have been created to make it easier for designers, developers, and website owners to quickly and easily create attractive, usable forms without the need to code. In this post we’ll look at some of the best options available.

The resources featured in this post include some free options and a number of paid options. Most of the paid options include a lot of features, and in many cases the ability to integrate your forms with PayPal or other payment gateways.

Formstack

With Formstack you can create standard contact forms, set up surveys, accept donations, manage event registrations and more. The form builder will allow you to easily create forms without the need for coding, and Formstack helps you to manage the data that is collected through the forms (store in a database, export to Excel, or use the API). You can even use a payment integration feature. The paid plans range from $39 – $249 per month.

formstack-contact-form

Wufoo

Wufoo’s HTML form builder makes it easy to create contact forms, surveys, registrations, and online payments forms. You can choose from an existing template or customize it to meet your needs. Wufoo also includes some useful reporting tools to help you analyze the data that is being collected. A free plan is available that allows for 1 user, 3 forms, 3 reports, 10 fields, and 100 entries per month (with some limited features). Paid plans range from $14.95 – $69.95 per month.

wufoo-contact-form

Formsite

FormSite has over 100 pre-built forms that can easily be customized to meet your own needs. You can create contact forms, surveys, registration forms, order forms, and more. There is a free account available that allows you to manage 5 forms and 10 submissions per month. The lowest-priced ad-free plan costs $24.95 per month.

formsite-contact-form

MachForm

MachForm helps you to create PHP forms without the need to code. It is a self-hosted solution option that stores all form submissions in a MySQL database. A single-site license costs $59 and an unlimited license costs $249.

machform-contact-form

Form Assembly

Form Assembly allows you to create a wide variety of forms, including contact forms, registration forms, and order forms. There is a free 14 day trial that will allow you to try out the service.

formassembly-contact-form

WordPress Plugin Form Options:

For WordPress users and developers there are a number of plugins that will help you to create forms. Here is a look at some of the best.

Gravity Forms

Gravity Forms is a premium plugin for WordPress ($39 for single-site license) that makes it quick and easy to create forms for a variety of purposes. You can use the forms to create posts (for user-submitted content), create auto responders, and you can manage form submissions through the WordPress dashboard.

gravity-forms-contact-form

Contact Form 7

Contact Form 7 is a very popular plugin and is a great choice for creating standard contact forms. It’s fairly easy to setup and create your own forms, and to insert them into a post or page. You can also customize the emails that you’ll receive when a visitor completes the form.

contact7-contact-form

Fast and Secure Contact Form

Fast and Secure Contact Form will allow you to set up general contact forms and protect them from spammers with CAPTCHAs and Akismet support.

fast-contact-form

 For More on Contact Forms, See:

Start Your Own Freelance Business!

Learn how I went from a corporate employee to owning my own freelance business and blog. Sign up for my email newsletter and get a FREE copy of my Ebook plus a coupon for 10% off your first billing cycle on any Vandelay Premier plan!

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads.