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.