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.

begin by creating your form and adding your fields.

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.

add the multiple choice field above the layout field. This field will allow the code to make the choice of if it should show or hide a layout field

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

add_action( 'wp_head', function() {
    /* 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 {
      display: block;

// Conditional logic for a field
function wpf_dev_caregiver_check() {
    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' );

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.

with this snippet, the layout field will be hidden 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.

Please remember to update the field and form IDs to make sure your snippet runs as expected for the correct form and fields.

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

the layout field will then show when the caregiver option is selected from the multiple choice field

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