Here we have the same form blocks and pipeline as in Getting Started - Your First Form and in Tabbed Forms, The only difference is that our form is split it into two distinct steps.

There are many ways to implement multi step forms. In this example, for the first step we render just the input blocks for that step. Then in each subsequent step the previously shown input blocks are persisted (Initial Value) and hidden (Behaviour) and the new input blocks for that step are shown. The Submit button block for each step is only rendered in that step.

Our inputs for the second step (and any subsequent steps) are not rendered in step 1 (or any previous steps)

Over multiple steps, the hidden part of the form grows behind the scenes. The validity of all previously submitted steps is checked with each step. In effect, the accumulated hidden input blocks are used as browser-side storage until our final step is submitted.

Try the form below. Feel free to submit the form as often as you want. The form is saved to your session, but the data is not saved or logged anywhere else. All it does is validate the inputs and return a success or error message. The session data facilitates persistence of some inputs, so you only need to enter your name and email once. You can also see your most recent form submission presented using Form Reform Display.

Progress

The progress bar is a Form State Percentage Progress block provided by Form Reform Display. This block is configurable to show form states as a percentage width of the progress bar with options for adding labels or percentages and how each stage of progress.

Pipeline notes

The pipelines shown below are front-end non-editable versions of the pipelines used to handle the above form. You can expand any stages to view the details. The submitted form is only saved to your session.

The common processing of Validation and Spam Detection has been moved into a macro.

The Condition If section towards the end each pipeline is to add a display of any UTM tags, as described in Example - Tracking UTM tags. If you are not using Form Reform UTM, you can ignore that part of thes pipelines.

In Edit Mode

In edit mode, the blocks for the form look something like the screengrab below. We have the same Form Reform blocks as in Getting Started - Your first form with the addition of an extra submit block for 'Next'. The Message, Honeypot and Captcha blocks at the top of the form and common to both form steps. We then split the form into two steps using a combination of Do not render and Hide when configured in the Behaviour tab of each individual block edit dialogue.

In general, all step 2 blocks are not rendered in step 1.

The step 1 submit 'Next' block is not rendered in step 2. We don't need its pipline once step 1 is completed.

Then all step 1 blocks are hidden in step 2 as a convenient way of preserving their data. That isn't essential, because Form Reform can incrementally update a submitted form record, its just convenient here.

More than 2 steps

When installed, Form Reform is configured with 5 arbitrary form steps in addition to the message states. These form steps do not need to be used in sequence, other than a form always begins in Step 1.

If you need more steps, the number can be configured in application/config/ at jl_form_reform.visibility_states.max_form_steps.

Saving data

In this example, we maintained step 1 data by persisting the inputs and keeping them hidden through step 2. The form submission is then saved with all data at the end.