Building Good Web Forms

Written by Chris Lucas on May 18, 2009

Posted in Form Hacks, Formstack Updates

In our first post in our five day series for Online Forms that Convert, we want to revisit the basics of building good web forms. Throughout this series we will be talking about different types of forms like contact forms, surveys, and order forms, but today we will be talking about form building in general.

Whether you are building an online survey or a simple contact form the first step in building web forms is understanding what information you need to collect and what information you want to collect. Getting this first step down is important because it allows you to understand just how long your form has to be to get all the data you need. Whether you are using Formstack or building the form on your own you need to remember that the longer the form is, you increase the chance of people not filling it out or abandoning it at some point while filling it out.

Multi-Page Forms

If you do need to collect a lot of data there are a few simple things that you can do to make the process a little easier for your users. Breaking your form up into sections or better yet multiple pages allows the user to fill out sections of the form without seeing a long scrolling page on their screen. Another tip, when using the Formstack form builder, is to use a “Progress Indicator“. This allows the user to quickly see how far they are in the process. Finally adding a Save and Resume link also allows your user to save the form while they are filling it out and come back at the point they stopped. One downfall to using a feature like this is that people often fail to come back and fill out your form, so use it sparingly.


Use Conditional Logic

Another great tool for building smart forms is Conditional Logic. Conditional Logic allows you to hide and show fields based on how users respond to questions. We like to think if it as the paper version of “skip this section if it does not pertain to you”.  By showing unnecessary questions to your users you only create longer forms and the chance that someone will not fill out your form.

Smart Routing and Confirmation Messages

What happens to your user once they fill out the form is an important step in how users interact with your site and your forms. After they hit the submit button they should not wonder “what now?”. Your user should get some sort of message notifying them that they have submitted the information and that you will be acting on that information.  In Formstack you can do this by setting up a Custom Confirmation Message. This allows you to create your own message and include things like external links to other pages within your site, information about the data they have just submitted and even a logo for a branded message. You can also use “Smart Routing” to customize the message based on how users answered certain questions. So for instance if they asked to recieve a quote vs sending more information you can create a message for each of those instances and better manage expectations.


Brand Your Forms

Finally, on of the most important aspects of using web forms, whether through an HTML form builder like Formstack or by another means, is to carry your branding across your website to your forms. We suggest people use our JavaScript embed option which allows people to cut and paste a few snippets of code and embed the form right on their page. This allows you to put the web form on your website and keeps your brand elements consistent across your entire site.

If you choose another option you can always use our Template Builder, which allows you to choose your forms background colors, add an image and even add custom CSS or HTML.

Remember that building forms is about creating the easiest way for users to fill out your form. Giving them a proper path to know what to complete and how to complete it is important. If you keep a few of these simple tips in mind you will be on your way to creating great web forms. Check back tomorrow as we continue our series and talk about using online forms on SEO and PPC Landing pages!