Question

我想要的很简单。

用户可以选择A或B，并根据此情况，填写不同的字段。

我找不到这样做的方法，我只发现1.0版本的黑客（当前是2.4.6）

Answer 1

此问题最初应在Stack Overflow's Wordpress page下发布。你可能会得到一个更快的答案。：）
这是答案。：d

我知道这个问题已经被问过了一段时间，但我也找到了解决方案，因为我自己正在寻找这个问题。所以这里是其他可能正在寻找解决方案的人的答案。下面列出的链接帮助了我。

"Show / Hide Fields Conditionally with Contact Form 7"

Answer 2

我刚刚写了一个WordPress插件，它将条件逻辑添加到Contact Form 7。

源代码位于github：https://github.com/pwkip/contact-form-7-conditional-fields

您可以从wordpress存储库下载插件：https://wordpress.org/plugins/cf7-conditional-fields/

Answer 3

这在2015年1月左右的CF7 4.1版本中发生了变化。有关变更的详细信息，请点击此处 - http://contactform7.com/2015/01/06/contact-form-7-41-beta/

代码看起来应该是这样的 -

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;
}

Answer 4

您可以查看我的这篇文章，如果您想要的不仅仅是隐藏/显示元素：This is how to have simulated conditional fields in CF7 with jQuery。

有关您可以执行的操作的真实示例，您可以选中 this site 选择“Richiedi quotazione”标签。该网站是意大利语，但很容易给你一个想法...

回到我的文章，给出的例子是基于这样的假设：在现实生活中你可以有复杂的条件（例如：你销售的产品可以是标准的，但也可以定制）。

标准产品会让用户选择产品代码对应预先设定的形状，宽度和高度，然后让用户只输入所需的长度。我还想要预览要显示的形状。
自定义产品将让用户定义形状，宽度，高度和 lenght。

前提是你安全地使用你的孩子主题，所以如果你还没有，那么现在就去做吧！

代码指的是ipotetical子主题网址/wp-content/themes/myTheme-child及其子域/catalogue和/js域内的my-domain.it。您必须根据wordpress安装相应地更改这些值。

第1步：建立您的联系表单。对于给定的示例，我构建了一个：它假设您有一个myCatalogue.pdf文件到您的子主题的/catalogue子目录中。这是......

        <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>

第2步：使用适当的CSS指令集设置联系表单的样式。我的包含一些指令来管理我通过jQuery添加的类。这是......

        /* 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 */

第3步：记下一些管理脏工作的功能。我负责检查条件，显示/隐藏适当的字段，预设值，用灰色信息框替换预设字段，显示产品形状的预览。您必须将其Cond1.js保存到子主题的/js子目录中，才能使其与给定示例一起使用。您还需要将一些.jpg保存到子主题的/catalogue子目录中，以使产品形状预览正常工作。这是代码......

        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();
        }          
      });  

    });

第4步：将您需要的页面/帖子或网页/帖子上的jQuery Cond1.js文件排入队列。我准备了以下代码添加到您的子主题的functions.php：它假设您将表单放入页面ID 1;根据您的需要改变这一点。这是代码......

 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' );

就是这样。

Answer 5

@ jules-colle的CF7条件字段是一个非常棒的解决方案。

但是，如果要有条件地显示/隐藏一个或两个字段，添加一些内联j非常有效。

以下是CF7表单构建器的示例副本：

<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>

如需进一步阅读和更多示例，请在此主题上查看my article。

我可以在Wordpress中使用Contact Form 7插件获得条件字段吗？

5 个答案: