How to Show or Hide a Layout Field

Would you like to use conditional logic to show or hide a Layout Field? You may want to hide a Layout Field based on the answer to a question in your form. In this tutorial, we’re going to walk you through each step of this process to be able to show or hide a Layout Field.

Creating the form

First, we’ll begin by creating a new form and adding your fields. If you need any help with creating a new form, please review this helpful documentation.

For the purpose of this documentation, we’ve created a medical registration form, however, we want to hide the Caregiver section if the person completing the form is the patient. So we’ve added our Caregiver information inside a Layout Field and just before that, we added a Multiple Choice field to ask if the person completing the form is the patient or the caregiver.

Adding this field, the code snippet will be able to make the choice if it should show or hide the Layout Field based on the answer to this question.

Showing or hiding the Layout field

Now it’s time to add the snippet, if you need any assistance with how and where to add snippets, please review this tutorial.

/**
 * Show or hide a layout field using this conditional logic snippet
 *
 * @link  https://wpforms.com/developers/how-to-show-or-hide-a-layout-field/
 */

add_action( 'wp_head', function() {
  ?>
  <style>
    /* CSS hide this field on page load */
    #wpforms-form-2934 #wpforms-2934-field_34-container.wpforms-field.wpforms-field-layout {
      display: none;
    }

    /* CSS show this field if date conditional logic is true */
    #wpforms-form-2934 #wpforms-2934-field_34-container.wpforms-field.wpforms-field-layout.show-field {
      display: block;
    }
  </style>
  <?php
});

// Conditional logic for a field
function wpf_dev_caregiver_check() {
  ?>
  <script>
    jQuery(function($) {

      // Only fire this script when the field ID 35 for form ID 2934 is changed
      $(document).on( 'change', '#wpforms-2934-field_35-container', function() { 

        let val = $( '#wpforms-2934-field_35-container li.wpforms-selected > input').val();

        // Add conditions to hide or show the fields based on the selected choice
        // hide layout field is the patient is selected 
        if (val === 'Patient') {

          $( "#wpforms-form-2934 #wpforms-2934-field_34-container.wpforms-field.wpforms-field-layout" ).removeClass( 'show-field' ).addClass( 'no' );
        } else {

          // If Caregiver is selected, then we will show those important fields
          $( "#wpforms-form-2934 #wpforms-2934-field_34-container.wpforms-field.wpforms-field-layout" ).removeClass( 'no' ).addClass( 'show-field' );
        }
      });

    });
  </script>
  <?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_caregiver_check', 10 );

What this snippet will do first is hide a Layout Field containing the caregiver information until the choice has been made on the Multiple Choice field when the form first loads.

Inside this snippet, you’ll need to update some field IDs for the Layout Field and Mutliple Choice field, but you’ll also need to update the form ID. If you need help in finding these IDs, please check out this helpful guide. Our form ID is 2934Layout Field ID is 34, and the Multiple Choice field ID is 35.

When the Caregiver option is selected, you’ll then see the Layout Field load with the relevant fields.

And that’s it! Using this snippet you can now hide the Layout Field when a particular condition wasn’t complete in your form. Did you know you can use similar logic to show or hide a Submit button? Take a look at our tutorial on How to Conditionally Show the Submit Button.

Reference Action

wpforms_wp_footer_end