Contact Form 7の確認画面でデイトピッカーを無効化する方法

プラグイン

2019.09.17

「Contact Form 7」プラグインを使ったフォームで確認画面とデイトピッカーを使用したときに、ちょっと工夫が必要だったのでメモ。
確認画面の追加は「Contact Form 7 add confirm」プラグインを
デイトピッカーの追加は「Contact Form 7 Datepicker」プラグインを使用した。
 

確認画面でデイトピッカーが入力できてしまう

確認画面に遷移すると親切にもフォーム入力ができないようにしてくれているが、デイトピッカーだけは入力できてしまった。
これは、どちらのプラグインもサードパーティ性だから、確認画面プラグインはデイトピッカーの入力を想定していないのではないかと思う。
このままでは使えないので修正することにした。
 

確認画面でデイトピッカーを無効化する方法

jsファイルに以下のコードを記述すればOK。できればフッターに記述する。

説明
手順は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

タグ