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.
When and how to use it
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.