If you’re looking for a free multipage form builder for WordPress, Caldera Forms provides multi-page forms as a core feature. Before you start, let’s have a look at the difference between multipage forms and multiple forms.
Multi-Page Forms vs Connected Forms
Multi-page forms allow you to divide sections of your form, and require validation between each step. Advancing between pages does not create a submission. This makes moving between pages very quick, but limits the flexibility of multi-page forms. On the other hand, Connected Forms, which are provided by an add-on, are multiple forms linked together in one sequence. Connected Forms allow for partial form submissions and for conditional logic between forms in the sequence.
Add A Page To Your Form
In the Caldera Forms layout builder, click the Add Page button to add an additional page to your form. Once you click this button, you will see a toggle on the top of the layout button to move between pages. Use this toggle to move between pages. You can also drag field over the toggle to move them into another page.
When you add a 2nd page to your form, you will also see the Pages tab appear as an option in the lower tab bar. In the pages tab, you can enable page breadcrumbs and change the names for your pages.
Move Fields Between Pages In Multi-Page Forms
Caldera Forms allows you to create multi-page forms. In the grid-based editor, you can drag fields between the pages as needed.
Click to see the demo.
Use Radio Fields To Advance Page In A Multi-Page Caldera Form
Caldera Forms supports multi-page forms. Normally you add a next page button to each page and your site visitor clicks that button to move to the next page. But it’s also possible, with a little custom jQuery to make it so as soon as someone selects a radio field option, the page change is triggered. This is useful for creating survey forms that have one question per page with Caldera Forms.
This article is a short explanation of how to accomplish this.
Using Custom JavaScript With Caldera Forms
If you’re not familiar with jQuery or adding custom JavaScript in WordPress, you should review these two articles from our blog first:
The Code
This is the code to make this work. In order to implement this, you will need to change the form ID to match your form. Int he example code, this is setup to work with a form with the ID CF594939554ca46. You should change that to match your form’s ID. Note that the last line hides all of the next page buttons, making selecting the radio the only way to advance the form. You can remove that line if you want the buttons to remain visible.
It is very important that you have a next field button on each page. This code triggers a click on that button, but does not replace its role in causing the page to change.
Submit The Form On Radio Selection
The previous code example only advanced the page when a radio button was selected. This expanded example checks if the current page is the last page, and if so, submits the form when a radio field is changed on the last page. Keep in mind you must have a submit button on the last page. This code will hide that button, but — like the next page buttons — they must still be there.