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
1
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.
2
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!
3
Show success message when it submits
The form was submitted! Letβs communicate that back to the user with a clear success message.
4
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.
5
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.