web-dev-qa-db-ja.com

WordpressのContactForm 7プラグインを使用して条件付きフィールドを作成できますか？

私が欲しいのは簡単です。

ユーザーはAまたはBを選択でき、これに応じて、入力するフィールドが異なります。

これを行う方法が見つかりません。1.0バージョン（現在は2.4.6）のハックしか見つかりませんでした。

wordpress-plugincontact-form-7
7
Odys

  1. この質問は StackOverflowのWordpress page 最初に投稿されているはずです。おそらくもっと速い答えが得られたでしょう。:)

  2. これが答えです。 ：D

私はこの質問がかなり前に尋ねられたことを知っていますが、私はこれを自分で探していたので、それに対する解決策も見つけました。だからここに解決策を探しているかもしれない他の人のための答えがあります。以下にリストされているリンクは私を大いに助けてくれました。

"お問い合わせフォーム7で条件付きでフィールドを表示/非表示にする"

8
Nicole

Contact Form7に条件付きロジックを追加するWordPressプラグインを作成しました。

ソースコードはgithubにあります： https://github.com/pwkip/contact-form-7-conditional-fields

プラグインはwordpressリポジトリからダウンロードできます： https://wordpress.org/plugins/cf7-conditional-fields/

4
Jules Colle

これは、2015年1月頃のCF74.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;
}
3
johann s bark

単に要素を非表示/表示する以上のものが必要な場合は、私のこの記事を確認できます： これは、jQueryを使用してCF7で条件フィールドをシミュレートする方法です 。

実際にできることのサンプルについては、このサイトタブ「Richiediquotazione」を選択して確認できます。このサイトはイタリア語ですが、簡単にアイデアを得ることができます...

私の記事に戻ると、与えられた例は、実際のケースで複雑な条件が発生する可能性があるという仮定に基づいています（たとえば、標準であるが調整も可能な製品を販売している）。

  • 標準製品では、ユーザーは事前に設定された形状、幅、高さに対応する製品コードを選択し、必要な長さのみを入力できます。図形のプレビューも表示したい。
  • カスタム製品では、ユーザーが形状、幅、高さ、長さを定義します。

あなたがあなたの子供をテーマに安全に取り組むことを前提としているので、あなたがまだそうしないならば、今それをしてください！

このコードは、子テーマの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ディレクティブセットを使用して連絡先フォームのスタイルを設定します。 Mineには、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に追加する次のコードを準備しました。フォームをページID1に配置することを前提としています。必要に応じてこれを変更してください。これがコードです...

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

それで全部です。

1
p.castaldi

@ jules-colleによるCF7条件付きフィールドは、明らかに素晴らしいソリューションです。

ただし、1つまたは2つのフィールドを条件付きで表示/非表示にする場合は、インライン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>

詳細とその他の例については、このトピックの 私の記事 を確認してください。

0
Arun Basil Lal