Keep in mind that a single page form have other needs than a form that is a part of a multipage flow (wizard). For a single page form, the primary CTA button should be aligned to the left and to the right if the form is part of a multipage flow.
Try to gather items in logical groups (i.e. address, postal code and city) for an contextual understanding of what is needed in different sections.
Provide a clear heading of what is needed from the user in every step.
Forms are a great way to simplify complex processes while also being able to validate the requested input.
Keep it simple and down to a bare minimum of fields. Use the ability to show/hide parts of a form depending on the answer to a question.
In narrow resolutions such as for mobile; expand the input elements to make use of the whole viewport width - same applies with buttons as well.
There is no need to use the whole width of a wide viewport. Stack the form elements on top of each other in new rows instead of aligning them horizontally.
Do's and don'ts
- Make CTAs descriptive, State the intent.
- Grouping, By creating logical groups the user will make sense of the form much faster.
- Positive inline validation, Reinforce a positive behaviour while typing.
- Stack fields horizontally, keep it below two or three at the most.
- Make input fields too long, they should match what is required.
Template for desktop
Submit form template for desktop
Error form tempate for desktop
Template for mobile
Error form tempate for mobile
Form example from onboardning of corporate customers (June 2018)