conditional fields for contact form 7 動かない時の解決方法②

conditional fields for contact form 7が動かないので
プラグインを使わずJavaScriptで自作した備忘録

管理人
conditional fields for contact form 7 動かない時①に引き続き、私が管理しているお客様のサイトのconditional fields for contact form 7のプラグインの更新マークが付いていたのでポチッと更新した。
一応、念の為にcontact form 7の動作確認を行ったら、条件付き分岐が動かない。
困った。。。

管理人
これは前回とパターンが違うが、conditional fields for contact form 7のプラグインを使わずに、JavaScriptで書いて自作しようと思い、作ったものがコチラです。

conditional fields for contact form 7のプラグインを使わない条件付き分岐 DEMO

電話番号orメールアドレスをクリックしてみてください。(両方入力も出来ます。)

      

    必須 お名前

    必須 お返事の方法


    必須 題名

    必須 内容

    *DEMOなので送信してもどこにも届きません。

    contact form 7のフォームのHTML

    contact form 7のフォームに入れる
    <table class="CF7_table">
    <tr>
    <th><span class="CF7_req">必須</span> お名前</th>
    <td>[text* your-name watermark"お名前"] </td>
    </tr>
    <tr>
    <th><span class="CF7_req">必須</span> メールアドレス</th>
    <td>[email* your-email watermark"例:hogehoge@example.com"]</td>
    </tr>
    <tr>
    <tr>
    <th><span class="CF7_req">必須</span> 状態</th>
    <td>
    [checkbox* checkbox-440 use_label_element"電話番号" "メールアドレス"]

    <label class="phone-field" style="display:none;">
    [tel tel-field watermark"例:09012345678"]       
    </label>
    <label class="email-field" style="display:none;">
     [email email-field watermark"例:hogehoge@example.com"] </label>
    </td>  
    </tr>
    <tr>
    <th><span class="CF7_req">必須</span> 題名</th>
    <td>[text* your-subject watermark"例:○○について"]</td>
    </tr>
    <tr>
    <th><span class="CF7_req">必須</span> 内容</th>
    <td>[textarea your-message]</td>
    </tr>
    </table>
    [response] <p class="CF7_btn">[submit "送信する"]</p>

    contact form 7のメールに入れる部分

    contact form 7のメールに入れる
    差出人: [your-name] <[your-email]>
    題名: [your-subject]  
    状態:[checkbox-440] 電話番号:[tel-field] メールアドレス:[email-field] メッセージ本文:
    [your-message]  

    このメールは [_site_title] ([_site_url]) のお問い合わせフォームから送信されました

    contact form 7を設置したページのCSS

    contact form 7を設置したページの「カスタムCSS」に入れる
    img.alignnone, img.aligncenter {
    filter: drop-shadow(0px 0px 0px);
    }
    /*ContactForm7カスタマイズ*/
    table.CF7_table{
    width:90%;
    margin:0 auto;
    border: 3px solid #e5e5e5;
    background-color: #f3fafee8;
    }

    table.CF7_table tr{
    border-top: 1px solid #e5e5e5;
    }
    table.CF7_table td{
    max-width:500px;
    vertical-align: middle;
    border: 1px solid #3333333b;
    background: #fff;
    }
    table.CF7_table td p{
    margin-bottom:0;
    }
    table.CF7_table td input[type="date"]{
    border-color:#d8d8d8
    }
    table.CF7_table td input[type="email"]{
    border-color:#d8d8d8
    }
    table.CF7_table td textarea{
    border-color:#d8d8d8
    }

    .single .entry-content table.CF7_table,
    .page .entry-content table.CF7_table{
    display:table;
    }

    /*入力欄*/
    .CF7_table input, .CF7_table textarea {
    border: 1px solid #d8d8d8;
    }

    .CF7_table ::placeholder {
    color:#797979;
    }

    /*「必須」文字*/
    .CF7_req{
    font-size:.9em;
    padding: 5px;
    background: #f79034;/*オレンジ*/
    color: #fff;
    border-radius: 3px;
    margin-right:1em;
    }

    /*「任意」文字*/
    .CF7_unreq{
    font-size:.9em;
    padding: 5px;
    background: #bdbdbd;/*グレー*/
    color: #fff;
    border-radius: 3px;
    margin-right:1em;
    }
    /*追加変更セレクトタブ用*/
    .after-purchase-info{
    max-width:500px;
    }
    .after-purchase-info lavel{
    display:block;
    display: block;
    max-width: 450px;
    margin: 0 0 10px 20px;
    }
    /* タイトル列 */
    @media screen and (min-width: 768px){
    .CF7_table th{
    width:30%;/*横幅*/
    border: 1px solid #3333333b;
    text-align: left;
    background-color: #f3fafee8;
    }
    }

    /* レスポンシブ */
    @media screen and (max-width: 768px){
    table.CF7_table{
    width:95%;
    }
    .CF7_table tr, .CF7_table td, .CF7_table th{
    display: block;
    width: 100%;
    line-height:2.5em;
    background-color: #f3fafee8;
    }
    .CF7_table th{
    background-color:#ebedf5;
    text-align: left;
    background-color: #f3fafee8;
    }
    }

    /* 「送信する」ボタン */
    .wpcf7 input.wpcf7-submit {
    background-color:#f79034;/* オレンジ*/
    width: 60%;
    border:0;
    color:#fff;
    font-size:1.2em;
    font-weight:bold;
    margin:0 auto;
    }

    .CF7_btn{
    text-align:center;
    margin-top:20px;
    }

    .wpcf7-spinner{
    width:0;
    margin:0;
    }
    .wpcf7 form.sent .wpcf7-response-output {
    border-color: #46b450;
    text-align: center;
    color: red;
    font-weight: bold;
    }

    .phone-field input{
    margin-bottom:5px;
    }

    contact form 7を設置したページのカスタムJavaScript

    contact form 7を設置したページの「カスタムJavaScript」に入れる
    jQuery(document).ready(function($) {
    // Contact Form 7 のフォーム内の <p> と <br> タグを削除
    $('.CF7_table').find('p, br').each(function() {
    var content = $(this).contents();
    $(this).replaceWith(content);
    });

    // チェックボックスの状態が変わったときのイベントハンドラ
    $('input[name="checkbox-440[]"]').change(function() {
    // すべてのフィールドを非表示にし、入力をリセット
    $('.phone-field, .email-field').hide().find('input').val('');

    // チェックされているチェックボックスの数を確認
    var checkedBoxes = $('input[name="checkbox-440[]"]:checked');
    if (checkedBoxes.length === 2) {
    // 両方のチェックボックスが選択されている場合
    $('.phone-field, .email-field').show();
    } else {
    // 単一のチェックボックスが選択されている場合
    var selectedValue = checkedBoxes.val();
    if (selectedValue === '電話番号') {
    $('.phone-field').show();
    } else if (selectedValue === 'メールアドレス') {
    $('.email-field').show();
    }
    }
    });

    // 初期状態の設定
    $('input[name="checkbox-440[]"]:checked').change();
    });

    conditional fields for contact form 7が動かないので
    プラグインを使わずJavaScriptで
    条件付き分岐が動くようになった!

    管理人
    はっきり言って
    conditional fields for contact form 7が動かないのを解決するよりも
    プラグインを使わずJavaScriptで条件付き分岐が動くようにする方が早かった!

    conditional fields for contact form 7が動かない
    違うパターン

    管理人
    conditional fields for contact form 7が動かない時
    違うパターンもご覧ください。

    conditional fields for contact form 7 動かない時の解決方法①
    conditional fields for contact form 7が動かないので プラグインを使わずJavaScriptで自作した備忘録 管理人conditional fields for contact form 7のプラグインの...