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.
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.
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.
Conditionally showing the Submit button
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/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.
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.
Reference Action
FAQ
Q: Can this be used for a Single Line Text field?
A: Absolutely! In this example, we’re using a multi page form that willl look for
/**
* Conditionally show the submit button
*
* @link 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-663 .wpforms-submit {
visibility: hidden;
}
#wpforms-form-663 .wpforms-submit-container .wpforms-submit.show-submit {
visibility: visible;
}
</style>
<?php } );
// Conditional logic for Submit button
function wpf_dev_form_redirect_text_area() {
?>
<script>
jQuery(function($){
// Form ID 663 and and Field ID 7
$( "#wpforms-663-field_7" ).change(function(){
var inputvalue = $( "div#wpforms-663-field_7-container input[type='text']" ).val();
var specificText ="Some Text Here"
if(inputvalue == specificText){
$( ".wpforms-submit" ).addClass( "show-submit" );
}
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_redirect_text_area', 10 );
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/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/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/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 only Multiple Choice field we want to use in our code is 4. Therefore we’re setting a variable to evaluate 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: Yes, however, it 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/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 in 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/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.
Q: Could I modify this to compare two dates together?
A: Absolutely! Let’s say you have two Date fields on your site. Date one would be the order date and date two would be the pickup date. But you don’t want to display the Submit button unless date two is greater than date one.
Please remember, for any assistance in how to add snippets, check out this tutorial.
/**
* Conditionally show the submit button if date 2 is greater than date 1
*
* @link 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-1899 .wpforms-submit-container .wpforms-submit {
visibility:hidden;
}
#wpforms-form-1899 .wpforms-submit-container .wpforms-submit.show-submit {
visibility:visible;
}
</style>
<?php } );
// Conditional logic for Submit button
function wpf_dev_compare_two_dates() {
?>
<script>
jQuery(function($){
// Only fire this script when date 2 has been selected
document.querySelector( "#wpforms-1899-field_33-container" ).onchange = function() {
// Set the first date picker variable
var oneDate = $( "input#wpforms-1899-field_32" ).val();
// Set the second date picker variable
var twoDate = $( "input#wpforms-1899-field_33" ).val();
// Now compare the 2 dates, show a message and keep the Submit button hidden
// if date 2 is less than date 1
if(twoDate < oneDate){
alert( "Please make sure that the pickup date is after the dropoff date" );
e.preventDefault();
e.stopPropagation();
}
else {
// since date 2 is greater than date 1, go ahead and show the submit button
$( ".wpforms-submit" ).addClass( "show-submit" );
}
}
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_compare_two_dates', 10 );
Every reference to 1899 in the above snippet is my form ID. the _32 and _33 are the field IDs for the 2 date pickers in my forms. You’ll need to update all of these IDs to match your own form and field IDs. For assistance in finding those, just review this tutorial.
Q: Can I prevent the user from continuing through the form based on a dropdown option?
A: Absolutely. For this example, we’ll display the Next and Previous buttons as expected, but if they select No on the form, we want to disable these buttons to not allow the user from continuing on with the form.
/**
* Conditionally show the Next button based on dropdown choice
*
* @link https://wpforms.com/developers/how-to-conditionally-show-the-submit-button/
*/
function wpf_dev_conditional_next_page() {
?>
<script>
jQuery(function($){
// Only run this on the form ID 727
$( "form#wpforms-form-727" ).on( 'change', function () {
// Look at the field ID 9 which is a dropdown to see what the user selected
var selectedval = $( "#wpforms-727-field_9 option:selected" ).text();
// If the user selects no from the dropdown, disable the Next button
if(selectedval == "No"){
$( ".wpforms-page-next" ).attr({disabled: "true"});
}
else {
// Otherwise, the next button for this form remains disabled
$( '.wpforms-page-next' ).attr('disabled', false);
}
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_conditional_next_page', 10 );
When you use this snippet, keep in mind that the user may not understand why the button is disabled and could cause confusion. Be sure to make the user understand the flow of your form when using this snippet.
Q: How can I prevent the Submit button unless a Number field is greater than or equal to 3?
A: When analyzing a numerical amount, you could use this snippet.
/**
* Check if amount entered on field ID 11 is greater than or equal to 3
*
* @link 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 ID 530
$( "form#wpforms-form-530" ).click(function(){
// Form ID 530 and Field ID 11
var selectedval = $( "div#wpforms-530-field_11-container input[type='number']" ).val();
if(selectedval <= "2"){
$( ".wpforms-submit" ).removeClass( "show-submit" );
}
if(selectedval >= "3"){
$( ".wpforms-submit" ).addClass( "show-submit" );
}
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_form_redirect', 10 );
Just remember to change the form ID from 530 to match your own form ID and also change the field ID _11 to match the field ID of your Number form field.