New! Mobile Healthcare White Paper Download Now

Formstack's Ultimate Guide to Online Form Design

Follow these tips to create beautifully designed forms and get the responses you need.

Introduction

Nothing hurts conversions more than an ugly form. Clashing colors, unreadable fonts, and clunky fields can make a person reconsider giving you their information. However, by following a few key design principles, you can reassure your users and get the answers you need. Read on for web form design tips that will help you create an enjoyable user experience and collect more submissions.


Form Length: Shorter or Longer?

A classic debate in form design is whether to make your forms short or long. The answer? Go as short as possible.

Short Form Example

Short forms work better because:

  • They are less intimidating. People don’t like filling out long forms.
  • They are easier to complete on mobile. The less scrolling, the better.
  • They force you to reconsider your questions and cut out the fluff.
Long Form Example

3 Ways to Tackle Long Forms

Sometimes a long form is necessary if you need to gather a lot of information. If you’re worried about length, here are three tricks you can use to create forms that appear shorter and less daunting.

1. Embrace the multi-step form.

Break long forms into smaller chunks. People will feel less overwhelmed, and it’s been continually proven that multi-step forms perform better than single-step forms.

2. Let users track their progress.

Some people become anxious when they don’t know how long a task will take to complete. Include a progress bar on your form to prevent those people from dropping off.

3. Simplify your form with logic.

Create the illusion that your form is shorter than it really is via conditional logic. This lets you show or hide questions based on how someone responds to fields on the form.

Conditional Logic Example:


Field Types: Optimizing Your Questions in 5 Steps

Questions lie at the heart of your form. The fields you use to gather information affect usability and how people perceive you. Follow these quick steps to make sure you’re providing people with a simple and inviting form experience.

Step 1

Group related questions into sections or steps if your form has more than six fields. This will guide users through the form and improve the overall flow.

Step 2

Don’t ask unnecessary questions. People don’t like giving out private information, so be certain you’re only asking for the information you truly need.

Did you know?

It took $12 million in lost profit for Expedia to discover the cost of a confusing field. Asking consumers to provide a "company name" when buying a travel package is a perfect example of how jarring an irrelevant question can be.

Step 3

Know when it's appropriate to use radio buttons, checkboxes, and dropdown fields.

Use radio buttons when only one answer can be chosen.

Use checkboxes when multiple options can be chosen.

Use a dropdown if there are 5 or more options and only one can be chosen.

Step 4

Vertically stack radio buttons and checkboxes. Single column forms are easier to visually process, and they are less challenging to fill out on mobile.

Step 5

Use copy to guide your users and show them how to fill out a field correctly. Field labels also give you the opportunity to explain why you need certain types of information.

Have you considered this?

Selectable images have become a popular question format because they tend to have high engagement. If it serves your form’s purpose well, try adding a selectable image question and see how it affects your response rates.


Form Branding: A Quick Checklist

The way your form looks has a huge impact on user perception. Don’t turn people away with ugly design. Here’s a simple checklist you can follow to create forms that look branded and professional.

Avoid fonts that are difficult to read. Opt for legible fonts like Verdana and Georgia.

Use images and gifs! Highly visual content consistently performs better than simple text.

Use color to incite action. It's been proven that colors affect people’s decisions in many ways.

Use quick form CSS hacks to enhance your design and nail your company branding.

Bad Form Design Example
Good Form Design Example

Submit Buttons: The Gateway to Conversions

After you’ve tweaked your form’s length, questions, and overall look, it’s time to finish strong with an awesome submit button. Since this is your call-to-action, it’s one of the most pivotal elements on your form. How you design and position your submit button can mean the difference between getting a ton of submissions or getting only a handful.

To help you optimize your submit button, we’ve put together a 4-part email series that’s packed with recommendations on:

Color Icon

Color

Color Icon

Copy

Size Icon

Size

CSS Icon

Form CSS

Sign up below to get these form design tips delivered straight to your inbox.

Get Tips on Submit Buttons and Form CSS