Can I have conditional fields using Contact Form 7 plugin in Wordpress?

Question

What I want is simple.

User can select A or B and depending on this, they have different fields to fill.

I can't find a way on doing this, I've only found a hack for the 1.0 version (current is 2.4.6)

Fransen

Answer 1

1. This question should have been posted under Stack Overflow's Wordpress page initially. You probably would have gotten a quicker answer. :)

2. Here is the answer. :D

I know this question was asked quite a while back but I have also found a solution to it as I was looking for this myself. So here is the answer for anyone else who might also be looking for a solution. The link listed below has helped me tons.

"Show / Hide Fields Conditionally with Contact Form 7"

Socialistic

Answer 2

I've just written a WordPress plugin that adds conditional logic to Contact Form 7.

The source code is on github: https://github.com/pwkip/contact-form-7-conditional-fields

You can download the plugin from the wordpress repository here: https://wordpress.org/plugins/cf7-conditional-fields/

Narthex

I just installed this Plugin, it works like a charm! – Justle

Answer 3

This changed with CF7 4.1 release around 1/2015. Details on the changes can be found here - http://contactform7.com/2015/01/06/contact-form-7-41-beta/

Code should look something like this -

add_filter( 'wpcf7_validate_text', 'your_validation_filter_func', 10, 2 );
add_filter( 'wpcf7_validate_text*', 'your_validation_filter_func', 10, 2 );

function your_validation_filter_func( $result, $tag ) {
    $name = $tag['name'];

    if ( $name === 'full-address' ) {
        $value = isset( $_POST[$name] )
        ? trim( wp_unslash( strtr( (string) $_POST[$name], "\n", " " ) ) )
        : '';

        $recipient = isset( $_POST['recipient'] ) ? $_POST['recipient'] : '' ;
        if(strlen($value) === 0 && ($recipient == 'Maintenance Inquiries' || $recipient == 'Resident Accounts') ) {
            $result->invalidate( $tag, 'Please input address for this inquiry type' );
        }
    }

    return $result;
}

Curlew

If you want to correctly validate your fields server side and not solely rely on client side validation only (which is problematic) then this is the correct way in which to conduct conditional/additional validation on specific fields in your form. +1 – Consider

Answer 4

The CF7 Conditional fields by @jules-colle is an obvious awesome solution.

However, if you want to conditionally show/hide one or two fields, adding some inline js works very well.

Here is an example copy of the CF7 form builder:

<label> Your Name (required)
[text* your-name] </label>

<label> Your Email (required)
[email* your-email] </label>

<label> Your Favorite Color
[select drop-down-menu id:FavoriteColorDropDown "Pink" "Red" "Purple" "Other"] </label>

<label id="EnterFavoriteColorLabel"> Please Specify Your Favorite Color
[text favorite-color] </label>

[submit "Send"]

<script language="javascript" type="text/javascript">
// Hide the favorite-color text field by default
document.getElementById("EnterFavoriteColorLabel").style.display = 'none';
// On every 'Change' of the drop down with the ID "FavoriteColorDropDown" call the displayTextField function
document.getElementById("FavoriteColorDropDown").addEventListener("change", displayTextField);
  function displayTextField() {
    // Get the value of the selected drop down
    var dropDownText = document.getElementById("FavoriteColorDropDown").value;
    // If selected text matches 'Other', display the text field.
    if (dropDownText == "Other") {
      document.getElementById("EnterFavoriteColorLabel").style.display = 'block';
    } else {
      document.getElementById("EnterFavoriteColorLabel").style.display = 'none';
    }
  }
</script>

For further reading and more examples, check my article on this topic.

Silverpoint

Answer 5

You can check this article of mine, if you want something more than simply hide/show elements: This is how to have simulated conditional fields in CF7 with jQuery.

For a real-life sample of what you can do, you can check this site selecting the tab "Richiedi quotazione". The site is in Italian, but easily gives you an idea...

Back to my article, the example given is based on the assumption you can have complex conditions in real-life cases (e.g.: you sell products that can be standard, but can also be tailored).

• Standard products will let users select a product code to which correspond pre-set shape, width and height, and then let the user input only the desired lenght. I also want a preview of shapes to be shown.
• Custom products will have users define shape, width, height and lenght.

Premise is that you work safely on your child-theme, so if you still don't, do it now!

The code refers to an ipotetical child theme url /wp-content/themes/myTheme-child and to its subdirectories /catalogue and /js within the domain my-domain.it. You will have to change these values accordingly to your wordpress installation.

STEP 1: build your contact form. For the given example, I built one: it assumes you have a myCatalogue.pdf file into the /catalogue subdirectory of your child theme. Here it is...

        <div class="myForm">
     <fieldset name="customerInfo">
      <ul class="selfClearCont">
        <li><label for="your-name">Name (*):</label><br />
        [text* your-name class:size-full default:user_first_name]</li>
        <li><label for="your-email">E-mail (*):</label><br />
        [email* your-email class:size-full default:user_email]</li>
        <li><label for="your-tel">Telephone number:</label><br />
        [text your-tel class:size-full]</li>
      </ul>
     </fieldset>

      <p><strong>Subject: Quote request</strong></p>

      <hr class="myHr selfClearCont"/>

      <fieldset name="productType">
      <p><label for="product-type">Product type (*):</label><br />
      [select* productType include_blank "Standard" "Customized"]</p>
      </fieldset>

      <div id="standardProduct">
       <fieldset name="productCode">
        <ul class="selfClearCont">
          <li class="floatLi"><label for="productCode">Product Code (*):</label><br />
          [select* productCode include_blank "TEC01" "TEC02" "TEC03" "--"] <span class="SmallerText"><a href="http://www.my-domain.it/wp-content/themes/myTheme-child/catalogue/myCatalogue.pdf" title="Product catalogue with codes" target="_blank">Product catalogue</a></span></li>
          <li id="productShape" class="floatLi lastFloatLi"></li>
        </ul>
       </fieldset>
      </div>

      <div id="customProduct">
       <fieldset name="productShape">
        <p><label for="productShape">Upload a shape image:</label><br />
        [file productShape limit:1mb filetypes:bmp|cdr|dvg|dxf|gif|jpg|pdf|png|svg]<br />
        <span class="SmallerText">(bmp, cdr, dvg, dxf, gif, jpg, pdf, png, svg)</span></p>
       </fieldset>
      </div>

      <div id="productDimensions">
       <fieldset name="productDimensions">
        <ul class="selfClearCont">
          <li class="floatLi"><label for="productWidth">Width (*):</label><span class="labelSusbt infoSubst">Width (*):</span><br />
          [number* productWidth min:0 class:size-small]<span class="my-form-control size-small infoSubst lockedSubst widthSubst"></span><span class="SmallerText" style="margin-left:3px;">cm</span></li>
          <li class="floatLi"><label for="productHeight">Height (*):</label><span class="labelSusbt infoSubst">Height (*):</span><br />
          [number* productHeight min:0 class:size-small]<span class="my-form-control size-small infoSubst lockedSubst heightSubst"></span><span class="SmallerText" style="margin-left:3px;">cm</span></li>
          <li class="floatLi lastFloatLi"><label for="productLenght">Lenght (*):</label><br />
          [number* productLenght min:0 class:size-small]<span class="SmallerText" style="margin-left:3px;">cm</span></li>
        </ul>
       </fieldset>
      </div>

      <hr class="myHr selfClearCont"/>

      <fieldset name="otherInfo">
      <p><label for="your-message">Notes e messages:</label><br />
      [textarea your-message class:size-full]</p>

      <p><strong>By selecting this checbox</strong> [acceptance Privacy default:off] (*) I accept your privacy policy.</p>

      <p><label for="MyCaptchac">Captcha (*):</label><br />
      <span class="MyCaptchac">[captchac captcha size:m]</span> <span class="MyCaptchar">[captchar captcha class:size-small]</span></p>
      </fieldset>

      <p>[submit "Send"]</p>
    </div>

STEP 2: style your contact form with an appropriate CSS set of directives. Mine contains some directives to manage classes I add via jQuery, too. Here it is...

        /* Contact Form 7 */

      .myForm {width: 300px;}

      .wpcf7-select.wpcf7-form-control,
      .wpcf7-select.my-form-control {  
        -moz-box-shadow: rgba(0,0,0,.2) 0 1px 4px inset;
        -webkit-box-shadow: rgba(0,0,0,.2) 0 1px 4px inset;
        box-shadow: rgba(0,0,0,.2) 0 1px 4px inset;
      }

      .wpcf7-text.wpcf7-form-control,
      .wpcf7-email.wpcf7-form-control,
      .wpcf7-number.wpcf7-form-control,
      .wpcf7-textarea.wpcf7-form-control,
      .my-form-control {  
        border: 1px solid #aaa;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;    
        border-radius: 5px;
        -moz-box-shadow: rgba(0,0,0,.2) 0 1px 4px inset;
        -webkit-box-shadow: rgba(0,0,0,.2) 0 1px 4px inset;
        box-shadow: rgba(0,0,0,.2) 0 1px 4px inset;
        height:1.4em;
        line-height: 1.20em;
      }

      textarea.wpcf7-textarea.wpcf7-form-control,
      textarea.my-form-control {height: auto; min-height: 100px; resize: vertical; }

      .wpcf7-form-control:focus {
        border: 1px solid #0000cc !important;
        outline: none;
        box-shadow: none;
        -moz-box-shadow: none;
        -webkit-box-shadow: none;
      }

      .wpcf7-form-control.floatCtrl,
      .my-form-control.floatCtrl {float:left;}

      .wpcf7-form-control.size-small,
      .my-form-control.size-small {width:44px;}

      .wpcf7-form-control.size-full,
      .my-form-control.size-full {width:100%;}

      img.productShape {width: 150px;}

      .lockedField,
      .infoSubst {display:none;}

      .infoSubst.lockedSubst {
        float: left;
        background-color:rgba(0,0,0,.2);
        font-family: Arial;
        font-size: 12.6666669845581px;
        padding-top: 1px;
        border: 1px solid #aaa;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;    
        border-radius: 5px;
        -moz-box-shadow: rgba(0,0,0,.2) 0 1px 4px inset;
        -webkit-box-shadow: rgba(0,0,0,.2) 0 1px 4px inset;
        box-shadow: rgba(0,0,0,.2) 0 1px 4px inset;
        height:1.4em;
        line-height: 1.20em;
      }

      /* CF7 Submit button */
      .wpcf7-submit.wpcf7-form-control {
        float: right;
        padding: .5em 2em;
        border: 1px solid #666;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;  
        border-radius: 10px;
        -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
        -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
        box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
        color: #fff;
        background: #0a0;
        font-size: 1em;
        line-height: 1em;
        font-weight: bold;
        opacity: .7;
        -webkit-appearance: none;
        -moz-transition: opacity .5s;
        -webkit-transition: opacity .5s;
        -o-transition: opacity .5s;
        transition: opacity .5s;
      }  

      .wpcf7-submit.wpcf7-form-control:hover,
      .wpcf7-submit.wpcf7-form-control:active {
        cursor: pointer;
        opacity: 1;  
      }

      .wpcf7-submit.wpcf7-form-control:active {  
        color: #333;
        background: #eee;
        -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
        -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
        box-shadow: 0 0 .5em rgba(0, 0, 0, .8) inset;
      }

      .wpcf7-submit.wpcf7-form-control:disabled {  
        -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
        -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
        box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
        color: #fff;
        background: #0a0;
        opacity: .7;
        cursor: not-allowed;
      }
      /* END of CF7 Submit button */
      /* END of Contact Form 7 */


      /* Clearing Classes */

      ul.selfClearCont {
        display: block;
        clear: both;
        padding: 0 !important;
        margin: 0 !important;
      }

      ul.selfClearCont li {
        list-style-type: none;
        padding: 0 0 10px 0 !important;
      }

      li.floatLi {
        list-style-type: none;
        display: inline-block;
        float: left;
        margin: 0 30px 0 0 !important;
      }

      li.floatLi.lastFloatLi {
        margin-right: 0px !important;
      }

      .selfClearCont:before,
      .selfClearCont:after {
        content:"";
        display:table;
      }

      .selfClearCont:after {
        clear:both;
      }

      .selfClearCont {
        zoom:1; /* For IE 6/7 (trigger hasLayout) */
      }

      /* END of Clearing Classes */

STEP 3: write down some functions to manage the dirty job. Mine take care of checking the conditions, show/hide appropriate fields, pre-set values, substitute pre-set fields with grayed info boxes, show a preview of the product shape. You will have to save it as Cond1.js into the /js subdirectory of our child theme to make it work with the given example. You will also need to save some .jpg into the /catalogue subdirectory of your child theme for the product shape preview to work properly. And here's the code...

        jQuery.noConflict();
    jQuery(document).ready(function($) {

      /* auto-classes for form fields based on their name */  
      $(".wpcf7-form-control[name]").each(function() {
        var MyClass = $(this).attr("name");
        $(this).addClass (MyClass);
      });

      /* auto-classes for form labels based on their for */  
      $("label[for]").each(function() {
        var MyClass = $(this).attr("for");
        $(this).addClass (MyClass);
      });

      /* title for disabled submit button */ 
      $("input.wpcf7-submit").attr( "title", "Please accept our privacy policy to continue" );  
      $("input.Privacy").change(function() {
        if ($(this).prop('checked') == true) {
          $("input.wpcf7-submit").attr( "title", "Send your request" );
        }
        else {
          $("input.wpcf7-submit").attr( "title", "Please accept our privacy policy to continue" );
        }
      });

      function myCFReset() {
        $("#standardProduct, #customProduct, #productDimensions, .infoSubst").hide();
        $(".widthSubst, .heightSubst, #productShape").html("");
        $("input.productWidth, input.productHeight").val("").removeClass("lockedField");
        $("label.productWidth, label.productHeight").removeClass("lockedField");
        $("select.productCode, input.productLenght").val("").removeClass("floatCtrl");
      }

      myCFReset();

      $("select.productType").change(function() {
        if ($(this).val() == "Standard") {
          myCFReset();
          $("#standardProduct").show();
          $("input.productWidth, input.productHeight, label.productWidth, label.productHeight").addClass("lockedField");
          $("input.productLenght").addClass("floatCtrl");
        }
        else if ($(this).val() == "Customized") {
          myCFReset();
          $("select.productCode").val("--");
          $("#customProduct, #productDimensions").show();
        }
        else { 
          myCFReset();
        }
      });

      $("select.productCode").change(function() {
        if ($(this).val() == "" || $(this).val() == "--") {
          $("#productShape, .widthSubst, .heightSubst").html("");
          $("input.productWidth, input.productHeight, input.productLenght").val("");
          $("#productDimensions").hide();
        }
        else {
          var targetCode = $("select.productCode").val();
          var activeCodes = [
            "TEC01", 12, 5, "TEC02", 15, 4, "TEC03", 12, 3
          ]; 

          var ImgBaseURL = "http://www.my-domain.it/wp-content/themes/myTheme-child/catalogue/";
          var imageExt = ".jpg";
          var ImgURL = ImgBaseURL + targetCode + imageExt;
          var MyTitle = '<img class="productShape" title="Our product code '+ targetCode + '" ';
          var MyAlt = 'alt="Our product code '+ targetCode + '" ';
          var MySrc = 'src="'+ ImgURL + '" />';
          $("#productShape").html(MyTitle + MyAlt + MySrc);

          var id = $.inArray(targetCode, activeCodes);
          $("input.productWidth").val(activeCodes[id+1]);
          $("input.productHeight").val(activeCodes[id+2]);
          $(".widthSubst").html(activeCodes[id+1].toString());
          $(".heightSubst").html(activeCodes[id+2].toString());
          $(".infoSubst, #productDimensions").show();
        }          
      });  

    });

STEP 4: enqueue the jQuery Cond1.js file on the page/post or pages/posts you need. I prepared the following code to be added to the functions.php of your child theme: it assumes you put the form into page id 1; change this accordingly to your needs. Here's the code...

 function loadMyScripts() {

 /* Common scripts */

 // insert here the scripts you want for every page

 /* END of common scripts */

 /* Page-based scripts */
 $pageId = get_the_ID();
 $pageType = get_post_type();

 /* you can enqueue scripts based on post-type (e.g. for all product post-type)
 if($pageType == "product") {
  wp_enqueue_script('CondAll', get_stylesheet_directory_uri() . '/js/CondAll.js', array('jquery'));
 }

 or you can do it based on a particular post/page id
 if($pageId == "294") {
  wp_enqueue_script('Cond294', get_stylesheet_directory_uri() . '/js/Cond294.js', array('jquery'));
 }
 */

 /* for the example, we imagine to load a script called Cond1 for post id=1 */
 if($pageId == "1") {
  wp_enqueue_script('Cond1', get_stylesheet_directory_uri() . '/js/Cond1.js', array('jquery'));
 }
 /* END of page-based scripts */

 }

 add_action( 'wp_enqueue_scripts', 'loadMyScripts' );

That's all.

Tinnitus

Link only answers are generally frowned upon because they are subject to link rot, please edit your answer to include the relevant pieces of the linked resource – Copolymerize

Answer 6

You can use this plugin for contact form7.

https://wordpress.org/plugins/cf7-conditional-fields/

This plugin adds conditional logic to Contact Form 7.

If you edit your CF7 form, you will see an additional tag called “Conditional fields Group”. Everything you put between the start and end tag will be hidden by default. After you have added the field group(s), click Save and go to the “Conditional fields” tab to create one or more conditions that will make the group(s) appear.

And too you can see this video for Contact Form 7 Conditional Fields Tutorial

https://www.youtube.com/watch?v=1AQEmecb0l4

Clercq