Conditionally Showing the Next Button on a Specific Page

Would you like to hide the Next button on a specific form page and only display it after a user selects an option in a form field?

In this tutorial, we’ll walk you through how to achieve this using a small code snippet.

Adding the Code Snippet

This snippet is set up to work with field types like Multiple Choice where an option needs to be selected. You may need to adjust the jQuery selector for other field types.

First, you’ll need to add the following code snippet to your site.

If you need help adding custom code to your site, please check out our guide on adding custom PHP or JavaScript to your site.

Customizing the Code Snippet

In the code snippet above, you’ll need to replace 1000 with your actual form ID on line numbers 9, 14, and 24.

You’ll also need to replace 10 with the ID of the form field you want to use on line numbers 26 and 27.

If you need help finding your form ID, please review this guide on finding form and field IDs.

The code assumes you want to show/hide the Next button on page 2 of your form. If you want to target a different page, simply change the data-page attribute value.

And that’s it! With this code snippet in place, the Next button on the specified page will be hidden by default and will only appear once an option is selected in the designated form field.

Next, would you like to learn more about conditionally showing buttons? Take a look at our article on conditionally showing the submit button for more details.