How to Conditionally Show the Submit Button

Introduction

Would you like to conditionally show the Submit button based on answers from inside your form? You can already use Conditional Logic to show or hide certain form fields, however, a submit button will still display on the form.

By using PHP and JavaScript, we can create conditional logic for a submit button that will only display if a particular question was answered with a particular answer.

Creating the form

First, we’re going to create our form and add our fields. This form will ask our visitors if they would like to donate. If Yes is selected more form fields will display that we are currently hiding with conditional logic and the Submit button will appear. If they select No then the page will be redirected to a Thank You page we will create in another step.

So our form will contain a Multiple Choice form field for the Yes/No question as well as the form fields currently hidden with conditional logic such as Name, Email and Single Item price that is User Defined so that they can enter the amount they want to donate.

For assistance with creating a form, please review this article.

create the form and add your fields

Using Conditional Logic

We’re not going to show any fields or the submit button unless the user has answered Yes to the first question on the form.

In order to hide the fields until Yes is selected, you’ll need to set up conditional logic on the Name, Email and Single Item form fields that will hide these fields unless the user has selected Yes from the first question on the form.

set up your conditional logic to show the field if Yes is selected to the question

If you need some help in understanding conditional logic, please see this documentation.

Creating the Thank You page

Your next step is to create a page that will redirect your visitors. Our page will be called Thank You.

create a page for your redirect

Adding the code snippet

Now it’s time to add the snippet to your site. If you need any assistance in adding code snippets, please see this tutorial.

/**
 * Conditionally show the submit button
 *
 * @link https://wpforms.com/developers/https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
 *
 */

add_action( 'wp_head', function () { ?>
 
    <style>

    /* CSS hide submit button on page load */
    #wpforms-form-530 .wpforms-submit-container .wpforms-submit {
            visibility:hidden;
        }

    #wpforms-form-530 .wpforms-submit-container .wpforms-submit.show-submit {
            visibility:visible;
        }
 
    </style>
 
<?php } );
 
 
// Conditional logic for Submit button
function wpf_dev_form_redirect() {
    ?>
    <script>
        jQuery(function($){
            $("form#wpforms-form-530").click(function(){
                var selectedval = $(".wpforms-form input[type='radio']:checked").val();
                if(selectedval == "No"){
                    window.location = "/thank-you";
                }
                if(selectedval == "Yes"){
                    $(".wpforms-submit").addClass("show-submit");
                }
            });
        });
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_redirect', 10 );

In the CSS and the code itself, you’ll see a reference to the number 530. This is the form ID we’ve used for this tutorial. You’ll need to update this to match the form ID from your form.

If the user completes the form but selects No from the Multiple Choice field, they will be redirected to the Thank You page we created in our previous steps.

The /thank-you is our site’s relative link. So if you created a page called Thanks, your window.location would be /thanks

If the user selects Yes, the remaining form fields will show including the submit button.

Now you have completed how to conditionally show the submit button using the code above.

And that’s all you need to conditionally show the submit button on your form! Would you like to learn more about changing the color of the submit button? Take a look at our article on How to Change the Submit Button Color.

Action Reference: wpforms_wp_footer_end

FAQ

Q: Can I use this snippet for the Dropdown field?

A: The code snippet above applies to only Checkbox fields, however to use a similar code for dropdown fields, use the code snippet shown below. Just remember to change your form ID (form#wpforms-form-2103), your field ID (#wpforms-2103-field_3) and what your choice name/value is (selectedval == “First Choice”).

/**
 * Conditionally show the submit button
 *
 * @link https://wpforms.com/developers/https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
 *
 */

add_action( 'wp_head', function () { ?>
  
    <style>

    /* CSS hide submit button on page load */
    #wpforms-form-2103 .wpforms-submit-container .wpforms-submit {
            visibility:hidden;
        }
  
    #wpforms-form-2103 .wpforms-submit-container .wpforms-submit.show-submit {
            visibility:visible;
        }
  
    </style>
  
<?php } );
  
  
// Conditional logic for Submit button
function wpf_dev_form_redirect() {
    ?>
    <script>
        jQuery(function($){
            $("form#wpforms-form-2103").on('change', function () {
                var selectedval = $( "#wpforms-2103-field_3 option:selected" ).text();              
                  if(selectedval == "First Choice"){
                    $(".wpforms-submit").removeClass("show-submit");
                }
                else{
                    $(".wpforms-submit").addClass("show-submit");
                }
            });
           });
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_redirect', 10 );

Q: Can this be used for the Next and Previous Page Break Buttons too?

A: To use this same functionality for Page Break buttons, you would just need to change the .wpforms-submit to button.wpforms-page-next. So the complete code snippet would look something like this.

/**
 * Conditionally show the submit button
 *
 * @link https://wpforms.com/developers/https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
 *
 */

add_action( 'wp_head', function () { ?>

<style>

    /* CSS hide submit button on page load */
    #wpforms-form-612 button.wpforms-page-next {
        visibility: hidden;
    }
 
    #wpforms-form-612 button.wpforms-page-next.show-next {
        visibility: visible;
    }
 
</style>

<?php } );


// Conditional logic for Next button
function wpf_dev_form_redirect() {
?>
<script>
    jQuery(function($) {
        $("form#wpforms-form-612").click(function() {
            var selectedval = $(".wpforms-form input[type='radio']:checked").val();
            if (selectedval == "No") {
                window.location = "/thank-you";
            }
            if (selectedval == "Yes") {
                $("button.wpforms-page-next").addClass("show-next");
            }
        });
    });
 
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_redirect', 10 );

Q: What if I have more than one Multiple Choice field on the page?

A: If you have more than one Yes or No question, you can identify the script by specifying the field ID. For example, if you have three Multiple Choice fields on a page, your script would look like this.

/**
 * Conditionally show the submit button
 *
 * @link https://wpforms.com/developers/https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
 *
 */

add_action( 'wp_head', function () { ?>
  
    <style>

    /* CSS hide submit button on page load */
    #wpforms-form-89 .wpforms-submit-container .wpforms-submit {
            visibility:hidden;
        }
  
    #wpforms-form-89 .wpforms-submit-container .wpforms-submit.show-submit {
            visibility:visible;
        }
  
    </style>
  
<?php } );
  
  
// Conditional logic for Submit button
function wpf_dev_form_redirect() {
    ?>
    <script>
        jQuery(function($){
            // Form ID 89
            $("form#wpforms-form-89").click(function(){
                // Form ID 89 and Field ID 4
                var selectedval = $("div#wpforms-89-field_4-container input[type='radio']:checked").val();
                if(selectedval == "Yes"){
                    window.location = "/thank-you";
                }
                if(selectedval == "No"){
                    $(".wpforms-submit").addClass("show-submit");
                }
            });
        });
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_redirect', 10 );

Our form ID is 89 and the the only Multiple Choice field we want to use in our code is 4. Therefore we’re setting a variable to evaulte with $("div#wpforms-89-field_4-container input[type='radio']:checked")

Q: Can I just disable the submit button until all fields have a value?

A: You can do this of course, this snippet will allow the submit button to be completed but will not validate phone numbers, email addresses etc. This snippet will only look for any value before allowing the submit button to be clicked.

/**
 * Conditionally show the submit button
 *
 * @link https://wpforms.com/developers/https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
 *
 */

function wpf_dev_disable_submit_validation() {
    ?>
    <script type="text/javascript">
	jQuery(function () {
		
		// Disable the submit button with the ID of #wpforms-submit-727, change the 727 to match your form ID
		jQuery('#wpforms-submit-727').attr('disabled', true);
		
		// Look and listen for any change on the form ID 727, change the 727 to match your form ID
		jQuery('#wpforms-form-727').change(function () {
			
			// List all field IDs into this section using the && to join them
			if (jQuery('#wpforms-727-field_0').val() != '' && jQuery('#wpforms-727-field_1').val() != '' && jQuery('#wpforms-727-field_2').val() != '') {
				
				// If all of those field IDs have values, the submit button can be clicked
				jQuery('#wpforms-submit-727').attr('disabled', false);
			} else {
				
				// Otherwise, the submit button for this form remains disabled
				jQuery('#wpforms-submit-727').attr('disabled', true);
			}
		});
	 });
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_disable_submit_validation', 1);

You just need to make sure the 727 matches your form ID and that you’ve listed out each field ID on this form. If you need help in finding the form or field ID numbers, please see this tutorial.

Q: What if I want to compare more than one choice for a field?

A: If you have more than one field you want to compare, you would just use the PHP equivalent for the or operator.

This example is using a simple reservation form with the Checkbox field for the user to select their requested time. If the user selects 8:00 – 9:00am, 9:00 – 10:00am, or 10:00 – 11:00am, they will be redirected to the Thank You page as these slots are already taken.

/**
 * Conditionally show the submit button
 *
 * @link https://wpforms.com/developers/https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
 *
 */
 
add_action( 'wp_head', function () { ?>
  
    <style>
 
    /* CSS hide submit button on page load */
    #wpforms-form-530 .wpforms-submit-container .wpforms-submit {
            visibility:hidden;
        }
 
    #wpforms-form-530 .wpforms-submit-container .wpforms-submit.show-submit {
            visibility:visible;
        }
  
    </style>
  
<?php } );
  
  
// Conditional logic for Submit button
function wpf_dev_form_redirect() {
    ?>
    <script>
        jQuery(function($){
            $("form#wpforms-form-530").click(function(){
                var selectedval = $(".wpforms-form input[type='checkbox']:checked").val();
				if ( selectedval == "8:00 - 9:00am" || selectedval == "9:00 - 10:00am" || selectedval == "10:00 - 11:00am" ) {
					window.location = "/thank-you";
				}
				
				if ( selectedval == "11:00 - 12:00pm" || selectedval == "12:00 - 1:00pm" || selectedval == "1:00 - 2:00pm" ) {
					$(".wpforms-submit").addClass("show-submit");
				}
            });
        });
    </script>
    <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_redirect', 10 );

To learn more about PHP comparison operators, please check out their documentation on this subject here.