6,800 views
この記事は最終更新から 2208日 が経過しています。
1. やりたいこと
WORDPRESS上で 「お問い合わせ」 ページを実装するには Contact Form 7 がとっても便利だ。
これを使って実装した「お問い合わせ」ページで、
「上記の内容で送信します。」
と書いたチェックボックスの ON/OFF により [送信] ボタンの有効/無効を切り替えたい。
2. やってみる
※所望の機能を実現できたが、これが正しい方法かどうかはわからない…
(1) チェックボックスと送信ボタンに IDを付与する。
コンタクトフォームの編集画面で、以下の 2要素に IDを付与する。
1) 送信確認チェックボックス : chk_ok
2) 送信ボタン : exec-send
[acceptance acceptance-128 id:chk_ok] 上記の内容で送信します。 [/acceptance] [submit id:exec-send "送信"]
(2) チェックボックス操作時に送信ボタンの状態を切り替える。
これは JavaScriptで記述する。
記述場所は以下の二つのどちらでもよい。
方法1) コンタクトフォームのショートコードを貼り付けた固定ページに記述する。
方法2) 外部の jsファイルに書いて functions.php で add_action(‘wp_enqueue_scripts’, xxxxx) する。
jQuery(function() { jQuery('#chk_ok').on('click', function() { SetConditionOfSubmit(); }); }); function SetConditionOfSubmit(){ var chk = jQuery('#chk_ok').prop('checked'); jQuery('#exec-send').attr('disabled', !chk); }
(3) ページ表示時の送信ボタンの初期状態を「無効」にする。
コンタクトフォームのショートコードを貼り付けた固定ページに以下を記述する。
<script>SetConditionOfSubmit();</script>
3. できた!
再度書くが…
※これが正しい方法かどうかはわからない…
Contact Form 7に何かスマートな方法が用意されている気がする。