Checklist Design
πŸ“ƒ Pages🧱 Elements🌊 FlowsπŸ’‘ TopicsπŸ–ŒοΈ Brand
πŸ‘‹ Check-Ins
Checklist Design
🏠 HomeπŸ“ƒ Pages🧱 Elements🌊 FlowsπŸ’‘ TopicsπŸ–ŒοΈ BrandπŸ›Ž Check-Ins
πŸ“¨

Submitting a form

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

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.

Related
pages
View all
Orange arrow indicating card for pages content is a link

πŸ‘‹

Sign up

☎️

Contact us

πŸ“Έ

Press

πŸ›’

Cart

🏒

Careers

Other
flows
View all
Pink arrow indicating card for flows content is a link

πŸ—‘οΈ

Deleting account

🏷️

Entering a promo code

🚨

Showing input error

Checklist Design
Created by George Hatzis
PagesElementsFlows
TopicsBrandApp
Check-InsAboutPrivacy
This website was made with Webflow (affiliate link).