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 building forms 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.

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.
Question Types

Choose from a variety of question types when building your form.

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

You’re probably familiar with the idea of 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.

field length

Make sure your form fields are long enough for your users’ answers.

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

  • Include ample white space in your forms
  • Use the same fonts, colors and images as your overall company branding
  • Stick to one-column layouts
  • 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.

images

Easily add images to your forms.

2. Use Preset Themes

If your form is a pretty common one, like 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.

Preset Themes

Start with a prebuilt theme to speed up the form building process.

3. Insert Custom CSS

If you’re a CSS whiz, the sky’s the limit for what you can create with your forms. You also have the option to style your forms in the Theme Editor, but there’s a lot you can do with Custom CSS in the Form Builder itself. If, for example, you wanted to change the color of the submit button from the default gray, you could easily do that with custom code.

See the GIF below for how to enter custom code, and here’s the actual code if you’d like to try it on your own forms:

 <style type="text/css">
.wForm input[type=button], .wForm input[type=submit] {
    background-color: #43bae1;
}
</style>
xbutton color

Follow these steps to make a quick button color change.

This post was inspired by our recent class on Form Building 101. You can watch the video of the class or sign up for our next class on Form Building 201, which will be held December 14.

Pin It on Pinterest

Share This