Blueprint by Tiny
Return to Tiny.cloud
Return to Tiny.cloudTry TinyMCE for Free
Search by
Abstract illustration of an online form with multiple text fields and button.

Form design best practices

Ben Long

July 7th, 2020

Written by

Ben Long
Ben Long

Category

Design & UX

These days, almost every website has a form. Forms are one of the most important elements on a web page or app because they allow data to flow from the user into a database or to a service provider.

Good form design is an important part of the user experience. Improving your forms can reduce friction, reduce time to complete them, increase conversions, and help your users feel more comfortable submitting their information. Bad design can cost your business leads and revenue as confused users make mistakes or abandon your site altogether.

But what does a good form look like? Let’s cover some of the do’s and don’ts so you can make sure you conform to the latest form best practices across all the big issues, including UX, mobile design, accessibility, and conversion.

Considerations for accessibility

Key accessibility considerations take into account vision and cognitive impairments, as well as limitations with dexterity. You need to ensure people can use your form with screen readers and speech inputs, and complete your form using just a keyboard, if required. It’s also important to 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:

By the way, when you’re seeking textual input from users, remember that some WYSIWYG HTML editors, like TinyMCE, handle many of your accessibility requirements for you.

Considerations for mobile

Giant yellow cut out hands touching smartphone screen.

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

We’ve discussed the importance of designing mobile-specific solutions in our blogs on the new TinyMCE mobile experience, why mobile accessibility is more important than ever, and mobile workforces in 2020.

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

Person sitting at a reflective black table uses a stylus on a laptop screen.

Many mobile and accessibility best practices are also great for UX in general (not just for people with disabilities). The following list includes a blend of form best practices for mobile, accessibility, and UX/conversion:

  • 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
  • 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)
  • 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
  • Increase contrast on buttons and fields - Give fields a thick, colored outline and ensure the button stands out clearly from the background
  • Provide instructions - Include some copy that explains how to use the form
  • 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
  • Use fieldset - Fieldset can help contain checkboxes and radio buttons in a group, underneath a label
  • Use alt text on image buttons - If you don’t describe what the button does, screen readers will simply state “button”
  • 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
  • State invalid fields - Use the aria-invalid="true" attribute so that screen readers announce “invalid” when selecting the fields that failed validation
  • Place validation messages inline - Make it easy for users to fix their answers by placing error messages next to the relevant form field
  • 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
  • Enable tabs - Let your users tab to the next form field to help speed up the process and make it possible for keyboard-only users to use your form
  • Keep it simple - Fewer fields with only the most critical information will lead to more people completing your form (it’ll also make it easier to use on mobile)
  • 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
  • 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
  • Left-align it - Use left-aligned form text to reduce the eye movement and time needed to complete your form
  • Title your form - Use a heading to describe what your form does to reduce user uncertainty
  • 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
  • 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
  • Break up long forms with multiple steps - Avoid overwhelming the user by breaking up your form and showing a “next” button
  • Show progress - If using a multi-step form, show a progress bar so your user can estimate how many questions are remaining
  • Use action-oriented buttons - Words like “submit”, “send”, “next”, and “complete” help the user know what will happen next
  • Make your buttons stand out - Use high-contrasting or bold colors to help make your buttons more visible
  • 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

More info on form placeholder text best practices

Form placeholder text has been prone to misuse over the last few years. Some designers like to use placeholder text exclusively (with no other labeling text), as it can create a cleaner look. But disappearing placeholder text (especially when it disappears as soon as the user clicks inside the field to start typing) can lead to confusion if there’s nothing else labeling your form fields. There are also concerns around accessibility requirements such as color contrast, and how sometimes the user has to delete the placeholder text before they type, which can be really annoying.

Demo of placeholder text in TinyMCE.

In TinyMCE, we use placeholder text that doesn’t disappear when you click inside the text editor - only when you start typing. Our color contrast is AA compliant, doesn’t require you to delete it yourself, and we use the aria-placeholder attribute. Find out more about how to use placeholder text in TinyMCE.

Your text entry options and TinyMCE

When you’re designing forms for text entry, you have a range of options when it comes to input field types. 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. Get started with an API key and check out these articles on how to integrate it with your favorite frameworks:

WYSIWYG HTML editing with TinyMCE in the Bootstrap framework.

How do you design your forms?

We’d love to know what rules you follow when it comes to designing your forms. Let’s continue the conversation over on Twitter. Tag us @joinTiny and let us know what you think.

DesignForms
Ben Long
byBen Long

Developer Advocate at Tiny. Computer scientist turned storyteller. Reminisces about programming on the MicroBee. Writes picture books for kids. Also the wearer of rad shoes. “Science isn’t finished until you share the story.”

Related Articles

  • Designer working on a laptop
    Design & UX

    When we design for disability, we all benefit

    by Robert Collings in Design & UX
Subscribe for the latest insights served straight to your inbox. Delivered weekly.

Deploy TinyMCE in just 6 lines of code

Built to scale. Developed in open source. Designed to innovate.

Begin with your FREE API Key
Tiny Editor