How to Design Forms: 6 Guidelines for Perfect Form Design

If you want to design great forms that generate responses, read on...

Jake Steelman
|
July 25, 2019
|
Tutorial

Forms are a great element that can help site visitors get in touch with your company. However, it’s important that your forms deliver a good user experience, otherwise, you’re giving the user a chance to click away from your site and fill out the competitor’s form. Today, we’re going to show you how to design great forms with 6 Guidelines for Perfect Form Design, so sit down, grab some popcorn, and enjoy as we show you the art of building beautiful, usable forms.

Image showing the different ways to style an input form, including labeling fields above input, don't use caps lock, use placeholders, use limiters, and size fields appropriately.

1. Build Great Input Fields

A form, essentially, is just a collection of input fields. Input fields can vary based upon the type of input you require from the user, including plain text, email addresses, and phone numbers, to name a few. When designing forms, great input field design is essential. Here are a few tips on how to design input fields:

  1. Input fields should have labels describing what type of input you require from the user, and these should always be placed above the field itself.
  2. Avoid uppercase when possible, as it makes the text difficult to read.
  3. Use placeholders inside the field to let the user know how to write their response.
  4. Use limiters to make the text easier to read, shown in the above image.
  5. Resize your fields according to the type of input they accept. For example, a Zip Code field shouldn’t be 80 characters wide when it only requires 5 characters.
Graphic showing how to deliver a better user experience through form fields, including add text to help clear up confusion, add a focus state to show which field is selected, and highlight and explain errors.

2. Deliver Good User Experience

Your form should deliver the best, most enjoyable experience for users, and you should try to eliminate any possibilities of confusion. If the user is easily confused by your form, you’re giving them a chance to click away and use a competitor’s contact form. Here are a few tips on how to build a better user experience in your forms. 

  1. Add help text next to the labels where users might get more confused.
  2. Add a focus state around the input fields to show the user which one is selected.
  3. Highlight and explain errors, so the user can understand what’s going wrong, and how to fix it. 
Graphic showing how to structure forms in a single column structure.

3. Use a Single Column Structure

When building forms, make sure to use a single-column structure. When a person is reading your page, their eyes start at the top of the page and move toward the bottom of the page, creating a visual momentum. By placing forms on top of each other, you make it easier for the user to read and understand what the form is asking for.

Consider placing your input fields as inline-block elements so that they stack above each other.

Graphic showing how to consolidate input fields.

4. Consolidate Input Fields

Attention spans are at an all-time low, and people don’t want to press more buttons than they have to. By consolidating forms, you reduce the number of actions the user has to take in order to provide input. For example, a ‘First Name’ and ‘Last Name’ field can be consolidated into a ‘Full Name’ field. 

Graphic showing how to group related sections

5. Group Related Sections

If your form is longer than most, consider grouping sections of the form that are related to each other and marking them with headings. Consider a payment form, which asks for quite a bit of input (name, address, phone, card details, shipping address, etc). You can group information on this form into personal information, billing information, and payment information, so the user knows the context of the information they’ll be inputting in the section.

Graphic showing how to space out sections properly.

‍6. Include Proper Spacing

Form spacing is a critical element that provides clarity and context to the user. Group your input fields and labels together, say with 4px to 8px of spacing between. Group those together with a slightly higher margin between them, say 12px to 16px. Group sections together with headings, as shown in the graphic above.

Element Six Design is an Oklahoma City web design agency with a mission to modernize the web. For more information, contact us here and we’ll reply to you within 24 hours.

We hope you’ve enjoyed reading our guide on how to design forms that are usable, beautiful, and elegant. For more unique stories and tutorials, follow us on Instagram, Twitter, and Facebook