Inicio - Documentación - POM Theme - 06 Forms - Multi-step forms and submission behavior

Multi-step forms and submission behavior

Use steps when a form is too long or conceptually complex for one screen. A good multi-step form groups related questions, communicates progress, and lets visitors understand what will happen after submission.

Do not split a short form merely to make it look interactive. Each step should have a clear purpose.

Plan the steps

Write the step outline before moving fields. For an application form, a useful structure might be:

  1. Contact details
  2. Project information
  3. Files
  4. Review and consent

Place easy, low-risk questions first. Put sensitive or demanding questions only where they are needed and explain why they are requested.

Add and organize steps

  1. Open the form under Forms → All Forms.
  2. Open Builder.
  3. Add a step.
  4. Enter its visible label and, when useful, a short description.
  5. Move or add rows inside the step.
  6. Repeat until every field belongs to the correct stage.
  7. Reorder the steps and verify the mobile reading order.
  8. Save the form.

A POM multi-step form with labeled steps

Configure step navigation

Open Messages/Behavior → Design options and choose how progress should be presented:

  • Show stepper above the form
  • Show dots below the form
  • Show current step text

Review Previous button, Next button, and Submit button. Prefer clear actions:

  • Continue for moving forward;
  • Back for returning;
  • Submit application for the final action.

Do not label an intermediate button “Submit” if no data is sent yet.

Validation across steps

Required and field-specific validation should prevent a visitor from leaving a step until its visible fields are valid. Test:

  • moving forward with missing required fields;
  • correcting an error and continuing;
  • moving backward without losing values;
  • conditional fields that appear after an earlier answer;
  • the final submission with every branch.

If a conditional field exists on a later step, test every path that can reveal or hide it.

Choose the success behavior

The form can show a success message or use a configured post-submission action. Select the simplest behavior that meets the goal.

Show a message

Use a success message when the visitor should stay on the same page. Include:

  • confirmation that the submission was received;
  • the expected response time or next step;
  • a link only when it is genuinely useful.

Redirect

Use a redirect when the visitor needs a separate confirmation page, download, account area, or next-stage workflow. Use a complete, trusted URL and test it while signed out.

Form Action URL

Use Form Action URL (GET) or Form Action URL (POST) only when the destination owns the submission. These modes bypass POM storage, notifications, the Webhook tab, Google Drive uploads, and post creation. They are not redirect settings.

Prevent accidental repeat submissions

The behavior settings can disable the form after a successful submission and show a loading indicator. These options help visitors understand that their action is being processed.

Also consider:

  • enabling reCAPTCHA for public or abuse-prone forms;
  • keeping the submit label visible during loading;
  • scrolling to the success message when a long form completes;
  • avoiding custom scripts that submit the same form twice.

Styling a multi-step form

Choose the standard or alternate form style and keep visual cues consistent with the rest of the site. Check:

  • progress contrast;
  • active and completed step states;
  • button order;
  • long step labels;
  • mobile wrapping;
  • keyboard focus after a step changes.

Multi-step form progress and navigation on the frontend

Go-live checks

  • [ ] Each step has one understandable purpose.
  • [ ] Step labels are short and meaningful.
  • [ ] Back and Continue preserve entered values.
  • [ ] Validation focuses or identifies the field that needs attention.
  • [ ] Conditional branches work across steps.
  • [ ] The final button clearly describes the submission.
  • [ ] The success message or redirect works while signed out.
  • [ ] The form remains usable on a narrow mobile screen.

Related guides