Form Building 101: Content, Usability, Design

Maybe you’ve never created a form in your life and you’re not sure where to start; maybe you’re a pro at form building. Or, maybe you’re somewhere in between. Whichever describes you, it’s always a good idea to refresh yourself on the basic tenets of how to build a website form every once in awhile.

In this post, we’ll go back to the basics of form building and cover all the most important aspects of creating a form that hits all your goals and knocks it out of the park in terms of form usability and design.

Follow best practices and pay attention to all the important aspects of form creation, whether you’re creating your first form or your 101st form.

How to Build a Website Form: Template or From Scratch?

In the form builder tool you use, there will likely be several options for how to create a form. If yours is a pretty common type of form (contact forms or order forms for example), you might be able to get away with using a template instead of making a form from scratch. If you know that you’ll solely be using Salesforce fields and will only need to send information directly to Salesforce (in the case of a web-to-lead form) try using our Salesforce Import Tool that lets you create simple forms based on Salesforce fields.

Constructing the Body of Your Form

Whatever the purpose of your form, one of the most important things to remain cognizant of  is that you’re using the right field type for each question. Here are a few common field types that we support in our form builder.

Question Types

  • Text Entry: Best for short-answer questions and pieces of information like name and email address.
  • Text Area: Best for essays or long-answer questions. Be careful with these! Too many large text boxes can be taxing on the user
  • Checkboxes and Radio Buttons: Some people confuse these two question types, but here’s the main difference: Multiple checkboxes support one or more selections from a group of options, whereas radio buttons support only one selection. Single checkboxes (think: email opt outs) represent yes/no questions.
  • Lists and Menus: Use lists and menus when presenting all the options in checkbox or radio button form would clutter the form. Be selective about when you use this question type though, because it can add unnecessary clicks for the user.
  • Attachments: Use these if you want your users to be able to upload a document such as a resume, cover letter, screenshot of a support issue, etc.

Amount of Questions

In addition to choosing the right field types, remember to err on the side of including fewer fields. You should aim to use just enough fields to get the information that you absolutely need but not so many that you annoy your audience or make them wonder why you’re asking for certain pieces of information.

Making it Easier on Yourself and Your Users

When you’re planning how to build a website form, you should always consider User Experience (UX) design. While this practice mainly benefits the user, it can also make your job simpler by reducing the amount of user mistakes that can arise when users don’t totally understanding what you’re asking for on a form or the proper format to put it in. The following elements in forms can reduce effort for you and your users.

1. Hints and Placeholder Text

It’s pretty common to see placeholder text designating what should be entered into a certain field (Name, Email Address, etc.). This practice can help guide your users through a form, but it might not be the best choice for less standard questions. According the Nielsen Norman Group, placeholder text can actually work against you if it disappears when your users click on a field, causing them to forget what was supposed to go in a field. Hints, popup boxes showing how to fill out a field, are another option to reduce confusion on the part of your users.

2. Validations and Limits

If you want users to enter their information in a specific format (using the XXX-XXX-XXXX format for a phone number for example) a validation can help make sure you get information in that state. You can also set a limit on the amounts that your users can enter in a certain field. These are just a few examples of controls you can place on your forms to standardize the data you receive.

3. Break long forms into multiple pages

With paper forms, you may want to use as few pieces of paper as possible, which often requires cramming multiple fields onto one page. With web forms, you don’t have the same space restrictions. It’s actually beneficial for your users if you break up overly long forms into a few pages to reduce the burden of endlessly scrolling and filling out a long form.

4. Use conditional fields to streamline the process for users

Do your users need to fill out every field on your forms? If some questions are optional based on user’s previous answers, include conditional fields so the questions only appear in certain cases. This makes forms shorter and eliminates unnecessary fields.

5. Make form fields long enough for the expected input

A mistake people sometimes make with their forms is not making the fields long enough for the information people will be most likely to enter. This makes for a clunky user experience. Resize your text boxes or change them into text areas if needed; just make sure your user has plenty of space for their answers.

Design Tips for Gorgeous, User-Friendly Forms

You don’t have to be a trained designer to learn how to build a website form, but design is an important consideration even for web form beginners. Here are some basic tips for designing your forms:

  • Don’t crowd form fields
  • Use the same fonts, colors and images as your overall company branding
  • Use fieldsets, groups, and pages to break forms up into manageable sections
  • Use repeatable sections and conditionals where possible to decrease form length
  • Make forms attractive and easy to understand and fill out

In addition to these, FormAssembly has many different options for ways that you can improve the look of your forms:

1. Add Images and Text

People respond well to visual information, and retain more of it then they do written information. A well-chosen picture can add a lot to your form, and it’s easy to do in the FormAssembly form builder.

2. Use Preset Themes

Want to know how to build a website form that’s fairly common? If you’re building a donation form, contact form or Stripe/Paypal payment form, you might want to start out with a premade template. This gives you a strong form framework that you can build on and customize to meet your needs.

3. Insert Custom CSS

While we don’t offer support for custom code, you can use CSS to style your forms. View some common code snippets in our knowledge base.

This post on learning how to build a website form was inspired by one of our classes You can sign up for other free classes on our website.

Like this blog? Download our web form design eBook for more stellar form building advice.

Don’t just collect data — leverage it.