Submitting a form Flows

Keep data and feedback clear from entry to completion.

11 checks · 3 content groups

Checklist contents

Review progress

Step by step in flow

Track status, feedback, and next actions every step of the way.

Clearly state what the submit button will doUse a label that describes the results of the form and place the button in an easy-to-find location after the fields to be entered.

Try interacting

Report processing and avoid duplicate sendingOnce clicked, shows progress and prevents duplicate operations while waiting for results.

Try interacting

Confirm the form has been receivedSuccess messages should state the result and next steps, not just close the form.

Try interacting

Keep data when sending failsExplain the issue and allow retry so users don't have to re-enter content.

Try interacting

Indicates the field that needs editingWhen data is not valid, state how to correct each field and call attention to the first error.

Try interacting

Start the task

Compare information and presentation in context of use.

Explain the information to be sentLabel, distinguish required fields, and indicate formatting before users enter.Send with wrong data, lose network, then resend after correction. Keep valid data, clearly indicate processing, and confirm results once; avoid creating two requests when pressing repeat.Example The form says "Failed to send. Your content is still kept" with a "Try sending again" button; Delete or move the page only after it has been successfully received.Only the correct error needs to be correctedAttach instructions to each field and bring focus to the appropriate error after the invalid submission.Use buttons with a clear purposePlace buttons after fields and record actions like sending a request or registering.

Feedback and results

Try the operation, change the status and continue working.

Report sending is processingRespond immediately after pressing and prevent duplicate requests without results.Keep data in case of errorsDistinguish input errors from system errors and try again without forcing the entire input.Confirm with next stepClearly state receipt of information, results or waiting time and what the user can do next.

Progress is saved automatically in this browser.

GUIDANCE

How to review

Test the form on submission errors and on successful submissions

Send with wrong data, lose network, then resend after correction. Keep valid data, clearly indicate processing, and confirm results once; avoid creating two requests when pressing repeat.

EXAMPLES

Usage examples

Keep content after connection error

The form says "Failed to send. Your content is still kept" with a "Try sending again" button; Delete or move the page only after it has been successfully received.

Submitting a form Flows

Step by step in flow

Start the task

Feedback and results

How to review

Test the form on submission errors and on successful submissions

Usage examples

Keep content after connection error

Find a checklist

No checklists found