Form design best practices

Completing forms has almost become an expected part of most websites. When the form design is good, your customers are happy. But when the form design is bad, they generally bounce off your site. But exactly what does a good form look like?

It’s as straightforward as this: Good forms help to build trust, and bad forms cost business leads and revenue. Therefore, improving your forms helps to reduce friction, reduces time–to–complete, and increases conversions. So, let’s explore what's involved in building great forms.

This post covers some basic form design principles and form layout best practices, as well as the do’s and don’ts of all the big areas of concern: UX, mobile design, accessibility, and conversion.

What makes up good form design?

The single factor that defines good form design is whether the form is easy or hard to use and/or complete. You can measure ease of use with different completion or satisfaction ratings, but to actually improve ease-of-use, the following basic principles need to be applied:

• Decide on the exact purpose of the form – It’s all too easy to try and achieve too many goals with one form.
• Choose the best order of items – You can A/B test the order to find the best sequence.
• Make sure the entry method is clear – Whether it's a simple text entry or selection from a set of options.

These are just a sample of what’s required for good form design. There’s actually a lot more to consider to improve your form, and to apply form design principles across different use cases.

Key form design principles

The following list includes a blend of general form design principles and best practices for general form design.

Form design principles and the actual form text

1. Provide instructions – Include some copy that explains how to use the form.
2. Start with what’s easy – Ask the easy questions first (like their name) because once users invest time in your form, they’re less likely to abandon it.
3. Make some fields optional – If some fields ask for information that’s “nice to have” (like a phone number), make them optional so that users can choose how much personal info they share.
4. Keep error messages friendly – Pay attention to the tone of your error messages and ensure they’re positive, helpful, and don’t blame the user.
5. Use placeholders appropriately – Provide permanent labels so that users don’t have to rely on placeholders that disappear once they start typing, and instead use placeholders as examples or hints.
6. Provide details – Allow users to click on a (?) icon next to a field to read more about what it means or why you need that information.
7. Use action-oriented buttons – Words like “submit”, “send”, “next”, and “complete” help the user know what will happen next.

Form design principles and appearances

1. Increase contrast on buttons and fields – Give fields a thick, colored outline and ensure the button stands out clearly from the background.
2. Use fieldsets – Fieldsets can help contain checkboxes and radio buttons in a group, underneath a label.
3. Avoid timeouts – Allow the user to take as much time as they need to fill out your form, with the option to disable or extend time limits.
4. Use alt text on image buttons – If you don’t describe what the button does, screen readers will simply state “button”.
5. Show progress – If using a multi–step form, show a progress bar so your user can estimate how many questions are remaining.

Other important form design principles

1. State required fields – Since some screen readers don’t announce the asterisk character, include “required” in the label and/or apply the aria–required="true" attribute or HTML required attribute so that screen readers announce it.
2. State invalid fields – Use the aria–invalid="true" attribute so that screen readers announce “invalid” when selecting the fields that failed validation.
3. User reCAPTCHAs not CAPTCHAs – The “I’m not a robot” tick box is a lot more effective at preventing spam and less annoying to users than translating the scrambled letters and numbers in an image.
4. Enable tabs – Let your users tab to the next form field to help speed up the process and make it possible for the keyboard – only users to use your form.

Form layout best practices

When you’re designing forms for text entry, you have a range of options when it comes to input field types, and how to layout the elements that make up the form.

NOTE: If possible the best principle when looking closely at form layout best practices is keep it simple. Fewer fields (with only the most critical information) leads to more people completing your form. And it’ll be easier to use the form on mobile.

1. Link IDs and labels – Give each input an ID and use this as the label, providing this context for screen readers, and increasing the target size for easier selection.
2. Define the HTML input types – Make it possible for users to autofill your form and display the most suitable mobile keyword with defined input types (e.g., text, date, email, phone). 
3. Place validation messages inline – Make it easy for users to fix their answers by placing error messages next to the relevant form field.
4. Stick to one column – Single-column forms are easier to use and users are more likely to fill them out, although it can make sense to have related form fields positioned inline. 
5. Left-align it – Use left-aligned form text to reduce the eye movement and time needed to complete your form.
6. Title your form – Use a heading to describe what your form does to reduce user uncertainty.
7. Break up long forms with multiple steps – Avoid overwhelming the user by breaking up your form and showing a “next” button.
8. Make your buttons stand out – Use high–contrasting or bold colors to help make your buttons more visible.

Form accessibility best practices

Key accessibility considerations take into account vision and cognitive impairments, as well as dexterity limitations. You need the following as a minimum:

1. Ensure your form works with screen readers and speech inputs
2. Confirm that your form can be completed using just a keyboard
3. Make sure your form is easy to understand with clear expectations, and that buttons and controls are large and easy to select.

Here are some more resources on accessibility for forms:

• W3.org’s Web Forms
• Web AIM’s General Form Accessibility Guide
• Web AIM’s Form Controls Guide

Considerations for mobile

When designing and adapting your forms for mobile, you need to take into account a few things, like:

• Smaller screen sizes – Responsive design is important to help your form adapt to smaller phone screens.
• Larger buttons and fields – Despite the smaller screen size, it’s important to ensure your buttons and fields don’t scale down too much, as users will be selecting them with a finger or thumb, instead of a tiny mouse pointer.
• Slower typing – On–screen keyboards aren’t as quick to use as physical ones, so it’s important to reduce the amount of typing needed.
• Different user environments – Since users may access your form in brightly lit, outdoor areas, it’s even more important to ensure high text and field contrast.

NOTE: Mobile–specific solutions are important, and the TinyMCE mobile experience is designed to adapt to the different devices and screen sizes available.

Considerations for UX and conversion

User experience (UX) design considers the user’s whole experience of your product (or form, in this case). It includes accessibility, function, and usability (which we’ve already touched on), as well as design and enjoyment. All these things come together to help meet users needs and goals when using your form. Naturally, when you improve your UX, you’re much more likely to see conversion rates go up.

When assessing your form’s UX and conversion opportunities, it’s a good idea to look at the data. Review heat maps and conversion rates to see where users are getting stuck, make a change that you think will work, and monitor any changes you make to discover what actually works.

Form design best practices further resources

One of the developers in our community, Marty Friedel, recently shared his own thoughts and insights on this in his article about form design and your text entry input field options. 

Depending on the scenario and what you need, your best option could be to use a WYSIWYG HTML editor like TinyMCE. The TinyMCE rich text editor is easily integrated into your forms and applications:

• Enhance Bootstrap forms with WYSIWYG editing
• Enhance React forms with a rich text editor
• Create an Angular reactive form with a rich text editor
• Add a rich text editor to a simple Vue project

What form design principles do you follow? You can reach out, and continue the conversation through TinyMCE’s social media (tag us @joinTiny) and let us know what you think.