Follow these 9 best practices to elevate your form game!
Forms are ubiquitous – they’re in almost every app we work on. Though not the sexiest, the critical functionality they provide warrants some time spent designing them well. Follow these guidelines to help you build elegant, intuitive forms for your next project!
1. Use one column
Single column forms provide a clear path for the user to scan and complete them. Multiple columns can feel disjointed, making it easier to skip a field. A single column offers a cleaner layout, faster completion rates, and a better experience for the user. It’s also more easily adapted to mobile.
There’s one exception to this rule - fields that are closely related. In that case, they can be set inline.
2. Organize information logically
Don’t just add fields haphazardly! Organize them in a way that flows logically and reflects the user's perspective, rather than that of the database. Group like fields together through flow or with explicit sections.
Logical groups of information can also show where to break apart a larger form into smaller chunks (see the next tip).
3. Limit the length
Large forms can become unwieldy, and there are ways we can improve the user experience by simplifying them. Always evaluate if a field is necessary; if it’s not, get rid of it. Then consider breaking your form out into sections. This helps the user process information in small, logical sections.
4. Make proper use of labels
Labels are important – use them! And consider the following when you do:
Position
Labels should be positioned directly above the input field, aligned to the left.
Spacing
To make the label/ input field association clear, spacing should be minimal. Greater spacing should be given between the input field and the successive label.
Label input widget
Associating the label with its respective input ensures mandatory field flags and validation errors are correctly displayed to the user. On the label, remember to set the “Input Widget” property.
5. Make proper use of input types
Using the correct input type leads to better data and a better user experience. Here are the most common form components, and their respective use cases:
Radio buttons
When selecting a single option from a list that is small (~ <6 options), or requires greater visibility.
Dropdown
When selecting a single option from a list that is large (~ >6 options), or has a recommended default option.
Multiple Checkboxes
When selecting one or many options from a list.
Single Checkbox
When specifying a boolean value for a single field. Examples include setting something as active, “remember me”, or accepting the terms of the agreement.
Input
When entering free form text or numeric information.
Text Area
When entering long-form text that requires several rows of input space.
6. Validate data with the form widget
Group your input fields and buttons inside the “Form Widget”. This allows you to take advantage of built-in customizations and validation UI.
Set “Built-in Validations” to yes on the submit button to activate the built-in client-side validations. This checks two things: mandatory field completion and data type compliance.
In addition to the built-in validations, you might want to consider creating additional custom validations based on your unique needs and business logic.
7. Denote mandatory fields
Input widgets have a mandatory field. This provides not just data validation, but important visual cues to the user (an asterisk next to the label and highlighting on validation error).
Mandatory fields in the database will default to mandatory in the input widget, but this can be configured. Be sure that any required fields are set as such.
8. Clearly define actions
Forms need actions! Here are a few things to consider when designing action buttons:
Action type
Forms generally have a primary action, and one or more secondary actions.
Primary actions could include:
- progressing the step
- submitting the form
Secondary actions could include:
- saving
- going back a step
- cancelling
Style
Primary actions should be styled with greater emphasis than secondary ones.
Specificity
Don't be vague! A specific phrase for your primary action is generally better. Consider rewording to clearly indicate the action that will be taken.
9. Provide user confirmation
Once a form is submitted feedback should be provided to the user, be it positive (a success message), or negative (an error in saving or sending). If there is an error, make the feedback message specific enough that the user understands what went wrong and what they need to do next.
