Contact Form 7 + jQuery datepicker で、任意の日付のみ選択可能にする方法


Contact Form 7を使った問い合わせフォームに、日付を指定するdatepickerを入れつつ、datepickerで選択できる日付を指定する方法。

用途例

旅行のガイド付きのプライベートツアーの申し込みで、日付を入力させる問い合わせ兼申し込みフォームを作りたい。日付には、催行日をチェックさせたい。催行日は管理者が指定できるようにしたい。

 

使うプラグイン

 

参考:

 

手順

  1. Contact Form 7とContact Form 7 Datepickerプラグインを入れる
  2. 問い合わせフォームを作り、Datepickerも入れる(id=”datepicker”)
  3. 作ったフォームを設置する固定ページを作る。ページのidかslugをメモしておく
  4. 固定ページにmeta boxを作って、日付を指定できるようなフォームを設置する。custom fieldとして保存する(tour_dates など)。add_meta_box()のサンプルコードを参考にすると良い。例えばこんな感じ
  5. このページのcontentsに、フォームのショートコードをはりつける。この状態で見ると、datepickerは全ての日付を選択できるはず
  6. functions.php に以下のようなコードを書く
  7. 固定ページを表示し、datepickerが指定した日のみ選択できることを確認する

 

こういったWordPressの開発やカスタマイズを承ります。お気軽にご相談ください。

button_contact

この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL