WordPress（ワードプレス）のお問い合わせプラグイン「Contact Form 7」に確認画面を追加する「contact-form7-confirm.js」でカレンダーの値も取得する方法です。
「Contact Form 7」とは？
「Contact Form 7」は、WordPressで最も有名なお問い合わせフォームのプラグインです。
日本人が作っているプラグインなので、色々と親切でわかりやすいです。
参考：Contact Form 7
「Contact Form 7」で確認画面を追加する方法
お問い合わせプラグイン「Contact Form 7」に確認画面を追加する方法にはいろいろありますが、こちらのページで紹介されている「contact-form7-confirm.js」を使う方法が理想的でした↓↓↓
参考：ContactForm 7 確認画面 をカスタマイズして、入力した値のみを表示
しかし、これだとカレンダーの数値が反映されないという問題があったので修正を加えました。
contact-form7-confirm.jsの修正
当方、PHP等がよくわからないので勘での作業になります。
おそらく間違えてる点もあると思うので参考程度にお願いします。
68行目の以下のコードを見つけます↓↓↓
} else if (child.get(0).tagName.toLowerCase() == ‘textarea’){
その上にこちらのコードを挿入します↓↓↓
} else if (child.hasClass(‘wpcf7-date’)){
jQuery(this)
.after(
jQuery(‘<span>’).addClass(‘wpcf7-form-control-wrap-confirm’)
);
child
.change(function(){
jQuery(this).parent().next().text(
jQuery(this).val()
);
})
.change()
;
次に214行あたりの以下のコードを探して↓↓↓
} else if (child.get(0).tagName.toLowerCase() == ‘textarea’){
その上に以下のコードを入れる↓↓↓
} else if (child.hasClass(‘wpcf7-date’)){
if (child.hasClass(‘wpcf7-validates-as-required’) && child.val().length == 0){
error.append(jQuery(‘<li>’).text(option.validates.required.before + title.replace(‘必須’, ”) + option.validates.required.after));
jQuery(this).addClass(‘error’);
つまり、カレンダーの数値を引き継ぐコードが入ってなかったんですね。
これで合っているかわかりませんが、とりあえず取得は出来ました。
参考にどうぞ。
Byさちお
