Wizard
Instead of showing all the form sections at once and requiring scrolling, forms can be shown as a step by step wizard by adding the wizard attribute to it.
A wizard form is expected to be filled in the same order as the pages. The <livewire:statamic-form> tag will only read the form blueprint without any interpretation on its end.
As the website/form designer, you are in charge of deciding how everything will appear in the blueprint.
#Wizard's inner working
#Grouping fields into pages
The wizard attribute simply tells the tag to show 1 section of the form per page, instead of all the sections one after the other in the same view.
In order to build your pages, you only have to create the form sections as you would normally, and it is the tag that will build the pages from that
#Transition to the next page
When a wizard form is loaded for the first time on the page, only the first page is available for view. None of the step names, displayed at the top of the form, can be clicked yet.
You have to click onto the Next button for the following things to happen:
Everything filled so far is validated.
If the validation is successful, the form transitions to the next page.
The page that was just validated can now be clicked if users want to go back see how they filled the form so far.
As you progress into the form, more and more pages will become browsable. Only the pages that were not reached with a click on Next yet remain unclickable.
In the example above, only About you can be clicked to see the page. When you transition to Resume, then both About you and Resume can be clicked to see how they were filled so far.
Of course when you finally reach Policy, all 3 pages can be navigated to freely.
#Fields with validation that depends on other fields
Just like a regular form, you can select a validation rule on a field that depends on another field, such as required_if.
However, a field must always be placed after the field(s) it depends on. It can also be on the same page but it must never be on an earlier page, otherwise you risk making the page impossible to validate.
Let us illustrate with an example: you are creating a form where a user can leave a comment about your application. In that form, you add:
A toggle Client? that the user can tick to signify they are presently paying for your service.
A text field License# that the user need to fill if they have ticked Client?, and leave empty if not.
License# clearly depends on Client?, and it would make no sense to put the former on a page earlier than the latter.