WP Forms conditional submit button

The code snippet below demonstrates how to create a conditional submit button for WP Forms using JavaScript. This functionality can be useful when you want to show or hide the submit button based on certain conditions, such as validating form fields or checking for specific values.

(function($) {
  $(document).ready(function() {
    // Replace 'form-id' with the ID of your WP Form
    var formId = 'form-id';

    // Replace 'field-id' with the ID of the field that triggers the condition
    var fieldId = 'field-id';

    // Replace 'condition-value' with the value that triggers the submit button
    var conditionValue = 'condition-value';

    // Replace 'submit-button-id' with the ID of your submit button
    var submitButtonId = 'submit-button-id';

    // Hide the submit button initially
    $('#' + submitButtonId).hide();

    // Show or hide the submit button based on the field value
    $('#' + formId).on('change', '#' + fieldId, function() {
      if ($(this).val() === conditionValue) {
        $('#' + submitButtonId).show();
      } else {
        $('#' + submitButtonId).hide();
      }
    });
  });
})(jQuery);

To use this code snippet, you need to replace the following placeholders:

• 'form-id' with the ID of your WP Form.
• 'field-id' with the ID of the field that triggers the condition.
• 'condition-value' with the value that triggers the submit button.
• 'submit-button-id' with the ID of your submit button.

This code snippet uses jQuery to listen for changes in the specified field. When the field value matches the specified condition value, the submit button is shown. Otherwise, it is hidden.

Examples

Example #1: Conditional Submit Button Based on Field Value

This use case demonstrates how to conditionally display a submit button on a WP Forms form based on the value of a specific field. In this example, we’ll show a submit button only if a checkbox field is checked.

add_filter( 'wpforms_submit_button', 'wpsnippets_conditional_submit_button', 10, 2 );
function wpsnippets_conditional_submit_button( $button, $form_data ) {
    $checkbox_field_id = 1; // Replace with the ID of your checkbox field

    if ( isset( $form_data['fields'][ $checkbox_field_id ] ) && $form_data['fields'][ $checkbox_field_id ]['value'] === '1' ) {
        return $button;
    }

    return '';
}

This code adds a filter to modify the submit button output of a WP Forms form. It checks if the checkbox field with the specified ID is checked, and if so, it returns the original submit button. Otherwise, it returns an empty string to hide the submit button.

Example #2: Conditional Submit Button Based on Multiple Field Values

This use case demonstrates how to conditionally display a submit button on a WP Forms form based on the values of multiple fields. In this example, we’ll show a submit button only if both a checkbox and a radio button are selected.

add_filter( 'wpforms_submit_button', 'wpsnippets_conditional_submit_button', 10, 2 );
function wpsnippets_conditional_submit_button( $button, $form_data ) {
    $checkbox_field_id = 1; // Replace with the ID of your checkbox field
    $radio_field_id = 2; // Replace with the ID of your radio button field

    if ( isset( $form_data['fields'][ $checkbox_field_id ] ) && isset( $form_data['fields'][ $radio_field_id ] ) &&
        $form_data['fields'][ $checkbox_field_id ]['value'] === '1' &&
        $form_data['fields'][ $radio_field_id ]['value'] === 'option1' ) {
        return $button;
    }

    return '';
}

This code is similar to the previous example, but it checks the values of both the checkbox and radio button fields. It returns the submit button if both fields have the expected values, otherwise it hides the submit button.

Example #3: Conditional Submit Button Based on Form ID

This use case demonstrates how to conditionally display a submit button on a WP Forms form based on the form ID. In this example, we’ll show a submit button only on a specific form with ID 5.

add_filter( 'wpforms_submit_button', 'wpsnippets_conditional_submit_button', 10, 2 );
function wpsnippets_conditional_submit_button( $button, $form_data ) {
    $target_form_id = 5; // Replace with the ID of your target form

    if ( $form_data['id'] === $target_form_id ) {
        return $button;
    }

    return '';
}

This code checks if the form ID matches the specified target form ID. If they match, it returns the submit button, otherwise it hides the submit button.