wordpress - 我可以在 Wordpress 中使用 Contact Form 7 插件设置条件字段吗？

Question

我想要的很简单。

用户可以选择 A 或 B，根据这一点，他们有不同的字段要填写。

我找不到这样做的方法，我只找到了 1.0 版本的 hack（当前是 2.4.6）

Answer 1

1. 这个问题最初应该发布在Stack Overflow 的 Wordpress 页面下。你可能会得到一个更快的答案。:)

2. 这是答案。:D

我知道这个问题在很久以前就被问过了，但我也找到了解决方案，因为我自己也在寻找这个问题。因此，对于其他可能也在寻找解决方案的人来说，这就是答案。下面列出的链接帮助了我很多。

“使用联系表 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

@jules-colle 的 CF7 Conditional fields 显然是一个很棒的解决方案。

但是，如果您想有条件地显示/隐藏一两个字段，添加一些内联 js 效果很好。

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

如需进一步阅读和更多示例，请查看我关于此主题的文章。

Answer 5

如果您想要的不仅仅是隐藏/显示元素，您可以查看我的这篇文章：这是使用 jQuery 在 CF7 中模拟条件字段的方法。

有关您可以做什么的真实示例，您可以查看此站点，选择“Richiedi quotazione”选项卡。该网站是意大利语的，但很容易给你一个想法......

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

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

前提是您在孩子主题上安全地工作，所以如果您仍然不这样做，现在就去做！

该代码引用了一个潜在的子主题 url/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 */

STEP 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步：将 jQueryCond1.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 6

您可以将此插件用于联系表格7。

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

此插件将条件逻辑添加到联系表 7。

如果您编辑 CF7 表单，您将看到一个名为“条件字段组”的附加标签。默认情况下，您在开始和结束标记之间放置的所有内容都将被隐藏。添加字段组后，单击保存并转到“条件字段”选项卡以创建一个或多个使组出现的条件。

你也可以看到这个联系表格 7 条件字段教程的视频

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