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

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

conditional fields for contact form 7のプラグインの更新マークが付いていたのでポチッと更新した。
一応、念の為にcontact form 7の動作確認を行ったら、条件付き分岐が動かない。
困った。。。

まず、どう解決するか検索するも良い情報が見つからない。

conditional fields for contact form 7のダウングレード

今まで動いていたバージョンにダウングレードする事にした。
conditional fields for contact form 7のプラグインのサイトに行き、古いバージョンをダウングレードしてきてプラグインを入れ直したが、それでも動かない。

プラグインの相性が原因か？

何が原因なのか、全てのプラグインをOFFにして確認したが、それでもconditional fields for contact form 7の条件付き分岐は動かない。

JavaScriptのエラー？CSS？

contact form 7を設置しているパージを確認するとJavaScriptのエラーが出ているようだ。
テーマのJavaScriptの触った部分を全て削除して再度確認したが、それでもconditional fields for contact form 7の条件付き分岐は動かない。
念の為に、子テーマの中の追加CSSも全て削除して再度確認したが、それでもconditional fields for contact form 7の条件付き分岐は動かない。

もう、お手上げ状態だ！

それなら、conditional fields for contact form 7のプラグインを使わずに、JavaScriptで書いて自作しようと思い、作ったものがコチラです。

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

◯購入後のお問合せをクリックしてみてください。

必須お名前
必須メールアドレス
必須状態	購入前のお問合せ購入後のお問合せ　　必須購入されたテンプレートを選択してください。必須テンプレートを使用しているドメイン
必須題名
必須内容

＊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>
<th><span class="CF7_req">必須</span> 状態</th>
<td>
[radio radio-768 use_label_element default:1 "購入前のお問合せ " "購入後のお問合せ "] <div class="after-purchase-info" style="display: none;">
<lavel>
</lavel>
<lavel>
[select menu-680 include_blank "demo1""demo2""demo3""demo4"] </lavel>
</font>
</div>
</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 class:form-submit "送信する"]</p>

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

contact form 7のメールに入れる

差出人: [your-name] <[your-email]>
題名: [your-subject] 　
[radio-768]（[menu-680]）
　
メッセージ本文:
[your-message] 　
—
このメールは [_site_title] ([_site_url]) のお問い合わせフォームから送信されました

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

contact form 7を設置したページの「カスタムCSS」に入れる

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

/*入力してください非表示*/
.wpcf7-form-control-wrap {
> .wpcf7-not-valid-tip {
display: none;
margin-top: 10px;
}
&.is-show {
> .wpcf7-not-valid-tip {
display: block;
}
}
}
/* タイトル列 */
@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;
}
@media screen and (max-width: 768px){
.wpcf7 input.wpcf7-submit {
font-size: 14px;
}
}

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

contact form 7を設置したページの「カスタムJavaScript」に入れる

jQuery(document).ready(function($) {
// Contact Form 7 のフォームのtabel対して操作を行います
$('.CF7_table').each(function() {
// フォーム内のすべての <p> タグを削除します
$(this).find('p').each(function() {
// <p> タグの内容を取得します
var pContent = $(this).contents();
// <p> タグをその内容で置き換えます
$(this).replaceWith(pContent);
});
});
// ラジオボタンの選択が変更されたときのイベントハンドラー
$('input[name="radio-768"]').change(function() {
// "購入後のお問合せ" が選択されているかチェック
if ($('input[name="radio-768"]:checked').val() === '購入後のお問合せ') {
$('.after-purchase-info').show(); // 購入後の情報を表示
} else {
$('.after-purchase-info').hide(); // それ以外では非表示
$('select[name="menu-680"]').val(''); // セレクトボックスの値を空に設定
}
});

// ページ読み込み時に初期状態を設定
if ($('input[name="radio-768"]:checked').val() === '購入後のお問合せ') {
$('.after-purchase-info').show();
} else {
$('.after-purchase-info').hide();
$('select[name="menu-680"]').val(''); // セレクトボックスの値を空に設定
}
});
//送信ボタンを押した時のみバリデーションメッセージ表示
jQuery(".form-submit").click(function () {
jQuery(".wpcf7-form-control-wrap").addClass("is-show");
});