「Contact Form 7」プラグインを使ったフォームで確認画面とデイトピッカーを使用したときに、ちょっと工夫が必要だったのでメモ。
確認画面の追加は「Contact Form 7 add confirm」プラグインを
デイトピッカーの追加は「Contact Form 7 Datepicker」プラグインを使用した。
確認画面でデイトピッカーが入力できてしまう
確認画面に遷移すると親切にもフォーム入力ができないようにしてくれているが、デイトピッカーだけは入力できてしまった。
これは、どちらのプラグインもサードパーティ性だから、確認画面プラグインはデイトピッカーの入力を想定していないのではないかと思う。
このままでは使えないので修正することにした。
確認画面でデイトピッカーを無効化する方法
jsファイルに以下のコードを記述すればOK。できればフッターに記述する。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | /*-------------------------------------------------------------------------------- デイトピッカーの処理 --------------------------------------------------------------------------------*/ // 確認画面では入力させないように無効化 document.addEventListener( 'wpcf7submit', function( event ) { switch ( event.detail.status ) { case 'wpcf7c_confirmed': $( ".wpcf7-datetime" ).datepicker( "disable" ); break; } }, false ); // 戻って編集ボタンが押されたら、デイトピッカーを有効化 $(".wpcf7c-btn-back").on("click", function(){ $( ".wpcf7-datetime" ).datepicker( "enable" ); return false; }); |
説明
手順は2つ。
まずは、確認画面でデイトピッカーを無効化する処理を行う。
次に、戻るボタンを押されたときを考慮して、戻り時にはデイトピッカーを有効化する処理を行う。
ちなみに、時間なしで日付のみのデイトピッカーを使っている場合は、.wpcf7-datetimeの部分を.wpcf7-dateにしたらOK。
バージョンとか
「WordPress」5.2.3
「Contact Form 7」5.1.4
「Contact Form 7 add confirm」5.1
「Contact Form 7 Datepicker」2.6.0