7,407 views

この記事は最終更新から 2614日 が経過しています。

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に何かスマートな方法が用意されている気がする。