Submitting a form 📨

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:

• 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.