How To Make a Multi-Step Form With Tirenoa Forms

A multi-step form shows only part of its fields at a time. The visitor fills in one step, clicks a button, and the next step appears. Long forms such as quote requests or applications feel shorter this way, and each step can be checked before the visitor moves on.

Any form built under Tirenoa › Forms can be turned into a multi-step form. You do it with a special item called Form Step, one button per step, and the Step Progress tab of the form’s settings.

In this article: Split the Form Into Steps · Add a Button to Every Step · Show the Progress · How the Form Behaves for Visitors · Test Before You Publish · Related

The Form Step item is not in the normal element list. It sits between containers and marks where a step begins.

1. Go to Tirenoa › Forms and edit your form.
2. Add a container at the place where a step should begin. In the window that opens, switch to the Special tab and click Form Step.
3. A step marker appears in the form. Click its pen icon and enter a Title and, if you like, an Icon. Both are used by the step navigation.
4. Put the containers with the fields of that step below the marker.
5. Repeat for every further step, then save the form.

Everything between one step marker and the next belongs to one step. If there are containers above the first marker, they form a first step of their own, without title and icon. To give every step a title, start the form with a step marker.

To remove a step, click the trash icon of its marker. The fields stay; they simply join the step above.

Each step needs its own Submit / Button element with Button Type set to Submit. The same button type does two different jobs, depending on where it is:

• In every step except the last, it checks the fields of the current step and then shows the next step. Nothing is sent yet. Label it, for example, Next or Continue.
• In the last step, it sends the whole form. Label it Send or Submit.

For a way back, add a normal Button element to a step and set its link to #previousStep. In the link option’s dynamic content list this is the entry Previous Step. A link to #nextStep (Next Step) behaves like the submit button of the step.

Two more button types help in long forms: Reset Form Step empties the fields of the current step only, and Save Form Data stores what was typed in the visitor’s browser and fills it in again on the next visit.

Note: A step without a submit button is a dead end: the visitor cannot move on. Check every step.

Open the Step Progress tab in the Tirenoa Form Options box below the editor and choose a style under Form Steps Navigation:

Step Type places the navigation Above or Below the form. The remaining options on the tab are design settings and only appear for the style you chose.

• Timeline: Steps Icons/Numbers shows either the icon of each step marker or a running number. Steps Title shows or hides the titles, Steps Title Position places them. Colors come in three states: normal, Active and Completed. Step Separator and the separator options style the line between the points.
• Progress bar: Progress Text switches the percentage on or off. Height, colors, border radius and striped filling follow the global settings of the Progress Bar element unless you change them here.

If you set Steps Title to no, the titles are still read out by screen readers. So give every step a meaningful title even when it is not visible.

• Only the first step is visible when the page loads.
• Required fields are checked step by step. A visitor cannot leave a step while one of its required fields is empty or invalid.
• When a step changes, the page scrolls to the top of the form if it is not in view.
• The form is sent once, from the last step, with the fields of all steps. Entries, notification emails and all other actions work exactly as in a one-page form.
• When the result comes back, the form switches to the step that contains the Notice element, so the message is always visible. A form without a Notice element returns to the first step.

Put the Notice element with your success and error messages in the last step, next to the final button, so the visitor stays where they are. A reCAPTCHA or Turnstile field also belongs in the last step.

1. Open a page that shows the form and go through every step as a visitor.
2. Leave a required field empty in each step and check that the form stops you there.
3. Use the back button, if you added one, and check that your input is still in place.
4. Send the form and check the entry or the notification email: fields from all steps must be included.

• How To Use Tirenoa Forms – the basics of building and placing a form
• Submit / Button Element – the button that moves to the next step and sends the form
• Notice Element – shows the success or error message
• Progress Bar Element – its global settings are the defaults of the progress bar navigation