Contact forms should be readable and easy to understand for users. Today we will create a responsive contact form using jQuery Validate for your static website that doesn’t refresh the page, animates a small “Thank You” note, and sends messages to your Simple Form inbox using AJAX.
Simple Form is great if you can’t use a server side language like PHP, for instance on Github pages. I’m hosting my website on Github Pages, so this kind of service makes sense for me. There’s a plethora of tutorials covering server side contact forms so feel free to read more elsewhere.
##Getting Your Simple Form Access Tokens In order to start, you need to create an account through Simple Form. Be sure to save any emails they send you, there is no way to login except by your private api token. You will be issued two separate tokens, one to use on your website and one to view your messages.
Form API Code
Don’t give this URL to anyone! It’s your private token to send messages to your inbox.
Messages API Code
Bookmark this URL! You will not be able to see your messages if you don’t keep this URL. Simple Form does not currently have a login option.
##Creating the HTML5 Form Let’s start by creating our form using HTML. Nothing new here, but let’s refresh:
I’ve created my form, gave the inputs names, added some classes in order to manipulate individual fields with CSS, and added placeholder text. I’ve also placed the form inside a container to add structure. The names and the classes will come in handy with the styles and jQuery Validate.
##Giving the Form Some Style We want to make sure that the form is responsive so that it looks great on all devices so we’ll define the width as 100%. The idea is that you can put it into any container and will still look sharp across different grid systems. I’ve also added some Normalize and Reset styles.
I’ve created the basic structure and style of the form by giving the form padding, fluid widths to resize with the window, and some hover effects. I floated the first two inputs to give the form a cleaner design to separate inputs from the main message. I’ve also placed the submit button in the center inside of a div. The transitions defined on the form will dictate the way the form transitions, including hover and error message effects.
The form looks great, but it doesn’t validate with any error messages or actually send anything.
##Integrating jQuery Validate Let’s add validation by using jQuery Validate. Right out of the box, it gives us the ability to validate any part of our contact form. jQuery Validate is a robust plugin that allows for customization but for the sake of this tutorial, we’ll stick to the basic API.
This is the basic setup for the way in which Validate will check the form. Each of the names of the rules correspond with the form we created earlier. Each of the options are self-explanatory but feel free to look in the reference docs for more options.
Although the form validates, it’s automatically adding error messages to the HTML and doesn’t submit information to our messages inbox.
##Custom Error Styles I don’t particularly want the error messages to pop-up. I think my form is straightforward enough for people to know whether or not they are inputting information correctly. Instead of the default messages, I want the form to highlight fields that aren’t properly utilized with red borders.
By adding the errorPlacement attribute with empty parameters, the form no longer adds messages to the form. Validate will still add error classes to the form however, so we can add styles using that class.
Now the borders of our inputs will highlight red when the user enters bad information or click the “Submit” button without entering information.
##Sending JSON Data to Simple Form Through AJAX
Next, we need to actually send the information to our Simple Form service without refreshing the page or directing us to a new URL. By default, HTML forms will either refresh the page or allow you to redirect to a “Thank You” page. We want to stay right where we are. Simple Form luckily has AJAX and JSON integration so we can do just that.
We’ve added the AJAX call into the submitHandler of our Validation code. This basically tells the AJAX call to only submit after the Validation has been cleared. You’ll also notice the AJAX call has some specific parameters. Let’s break it down:
- In the URL, you’ll want to add your form api token, which is the private key sent to you in your email
- Simple Form requires you to use .serialize() on the data you provide through JSON
- We have a callback function that will alert the user that they’ve submitted the form
- We return false; to ensure that the page isn’t refreshed
It’s great that we can now send information to our mailbox, but I don’t particularly want an alert to annoy users when they submit the form. Let’s add a small “Thank You” note with jQuery’s animations.
##Adding a Thank You Note with Animations We want to hide the contact form and fade in the “Thank You”. I’ve created the HTML, which will be placed underneath the form and hidden with CSS. jQuery’s .fadeIn method will remove the hidden CSS and display the note as block.
##You Finished! Easy right? Maybe not, maybe you got snagged somewhere along the way. That’s okay, check out a working demo of the form so you can reference your work against mine. Thank you for following along and leave comments below if you have any questions.