Flow
A form can help a user achieve anything from creating an account to subscribing to a newsletter. They are often the last step of a user's journey, so should be quick and easy to complete.
Steps
Reset
Show button to submit
Below the form fields, a button to submit the information needs to be present.
You can change the copy to fit the form e.g. the button can say “Subscribe” if someone is providing their email address to receive emails.
Show loading state after submission
The user must see the form is in the process of being submitted.
Note: also make sure your hover state is considered before they press the button!
Show success message when it submits
The form was submitted! Let’s communicate that back to the user with a clear success message.
If it doesn't, show an error message
Sometimes, things don’t work out. If the form can’t submit, because of invalid information or another error, that also needs to be shown.
An error may occur because of the wrong information
If the criteria for a text field isn’t met, the form can fail to submit due to that error, and must be detailed.
