In this tutorial, you will understand how to build a multi page form in Chronoforms6, please make sure you are familiar with how Chronoforms6 works by checking previous tutorials.
The first step is to make sure that you have Chronoforms6 installed on your Joomla or WordPress website.
In the forms manager, click New > Advanced form.
Enter the form title then click the "Designer" tab to open it, drag a button to section "one".
Click the "Setup" tab to open it.
The 2 sections on the right side area the form events, each form has 2 events standing for 2 pages, a page displayed when the form is loaded ("load" event), and another after the form is sent ("submit" event).
Now let's say that we want to have a 3 pages form, 2 pages for fields and 1 page for submit confirmation, we will need 3 events.
Scroll down and in the "Event name" field enter the name of the new event, it should not have any spaces or special characters, we will call it "page2" then click the "Add event" button.
Drag the new event using the yellow sorting icon to be after the "load" event, this is optional but just to keep our events structure in order.
Drag a "Custom code" action into the page2 event, then open the settings and enter any text, like "this is page 2", then drag another "Custom code" action in the "submit" event and add the text "this is final page", then save the form.
Open the form preview to test the form, click the send button on the first page, you will notice that you are getting the last page with the "this is final page" text.
This is because the "load" page is current configured to send the data to the "submit" page directly, we need to add page2 in between them.
open the form "Setup" tab, then open the "Display section" settings under the "load" event, set the "Event name" to "page2" then save the form.
Open the form preview to test the form, click the send button on the first page, you will notice that you are getting the page2 text, you have successfully managed to connect the first 2 pages together, now we need to connect the 3rd page.
Before connecting the 3rd page, we need to add some fields to the 2nd page, for this we need to create a new section under the "Deisgner", enter the section name "two" then click "add section", then drag a text field and a button to the new section.
Under the form "Setup", drag a "Display section" action to the "page2" event, then open the settings, change the "section names" to "two", and set the "Event name" to "submit".
Save the form and test it, you should now have a 3 pages form working.
