Clarity is essential for an effective form that will be easy and quick to fill out. Therefore, the fewer confusing things in the form, the better.
One such ambiguity is a button on a form with a disabled state until all fields are filled out. To the user, this looks like a non-working form. Therefore, it is better to avoid this kind of solution.
To be honest, it doesn't make sense to use any disabled-buttons at all in the interface. It shows a weak design.
If something isn't used, doesn't click, doesn't make sense — it shouldn't be on the screen. Any disabled thing looks like a cheap plastic plug, and it just means that the designer was a little lazy to implement this point differently and smarter.
Sometimes it seems as if there is nothing to do without a disabled button. And it must be, for example, until the user has agreed to the terms and policies of the service. In fact, you don't need it here either.
It's impossible to guess the button is disabled because I didn't click the checkboxes. It is more likely to raise questions that I have done something wrong and some other fields are filled out incorrectly.
There is no need to make the user ask questions. It causes a bad user experience. Checkboxes agreeing to the terms and policies of the service are always next to the action button. So there is no problem if you show an error message for them if the user forgets to click them.
It's definitely better than having a disabled button and having the user sit in front of the screen thinking: what didn't I fill in? It's better not to think but to click.
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.
In long and complex forms, it's a good idea to visually highlight the final button. This allows it not to get lost among other form controls, especially when the form has other buttons that add fields or data.
The final action can be highlighted in various ways, for example, by placing it on a different background from the entire form.
Sometimes the final button may be larger than the other buttons in the form. Or it may even be different in style from them.
Of course, you have to be careful not to overdo it. The final action should remain part of the form, not appear to be separate and unrelated. Otherwise, a new problem will appear, and the user will be stumped at the end of the form.
When the button adds data or new fields, placing it to the right of the input field is better. This gives a clear structure within the form and for the data to appear in the right place.
Usually the form already has a main button that performs the primary action. Therefore, it is better to use a less bright and secondary button to add data.
The rule is simple: the form has only one button that can be primary and performs the main action. Everything else is secondary.
When a form has multiple actions, it's best to arrange them in a row by priority of importance. This will make buttons and action links more readable, understandable, and help reduce the risk of accidental clicks.
When a form has multiple actions or steps, it is good practice to duplicate the secondary action next to the form title.
The 'Forgot password' link should be placed contextually to the password input 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.
It's always a good idea to make the password recovery link visible and obvious. A huge number of users use it.
