01Disabled button

Unambiguity is an important criterion for an effective form that will be easy and quick to fill out. Therefore, the less controversial points in the form, the better. One of these ambiguous factors is the button in the form, which has a disabled state until all fields are filled in. To the user, it looks like a non-working form. Therefore, it is better to avoid this solution.

A button with a disabled state can tell that a form is not working.
The form definitely works, the button has no disabled state.

02Align button in horizontal form

In a horizontal form, the button should be aligned to the left edge of the input fields, not to the edge of the labels. This will create vertical consistency and a single form reading line. The same can be done with the title of the form. Then the eye will simply glide over the form from top to bottom without wandering to the sides. The labels will be read by the peripheral vision.

The button is not aligned to the left edge of the input fields.
The button is aligned to the left edge of the input fields and so is the form title.

03The final button in a complex form

In long and complex forms, it's a good idea to visually highlight the final button, for example, with a background. This allows it not to get lost among other form controls. Especially when the form has other buttons that add fields or data.

The button is lost among other form controls.
The button is visually highlighted.

04Button for adding data

If clicking a button causes data to be added or appear under the input field, it is better to place the button to the right of the input field.

The button to add data is under the input field.
The button to add data is to the right of the input field.

05Forgot password

The "Forgot password" link should be placed contextually to the password field, so that it's as close to it as possible. If this link is at the beginning of the form, the user might not notice it.

The Forgot password link has no context.
Forgot password is next to the password field.

06Back button

The "Back" link is better placed at the beginning of the form and duplicated at the end of the form. Especially for long and complex forms. This will help the user navigate through the form at any given time.

The Back link and the button are in the right places.

07Multiple action buttons

When a form has multiple action buttons, it's best to arrange them in a row by priority of importance. This will make them more readable, understandable, and help reduce the risk of accidental clicks.

Stacked buttons are unwieldy and unreadable.
Buttons in a row by priority of importance.