ContactForm7を使ってWordPressの予約システムを作ってみた PART2(カレンダー機能実装編)

datepicker00

2年ほど前に「ContactForm7を使ってWordPressの予約システムを作ってみた PART1」という記事を書いてました。

すっかり忘れてたんだけど、カレンダー機能がFirefoxで付けられないか?調べて次回書きます。と言っておきながら2年放置してました。

そこで、2年越しにカレンダー機能実装編を書きたいと思います。
(前回の記事を読んでから、こちらをご確認ください。)

また、2年経ってますのでContactForm7の画面が若干変わってます。前回の記事がわかる方には特に説明も必要ないと思うので、そのまま進めてしまいます。

カレンダー機能実装編

といっても、あまり難しいことはありません。「Contact Form 7 Datepicker」という別のプラグインが用意されてます。まずはこちらをインストールします。

前回作った予約フォームを確認するとボタンが増えているのが分かります。

datepicker01

まずは「フォーム」の右下にある[datatime]ボタンをクリックします。
そうするとフォームタグの生成画面が表示されます。

まずはnameと書かれた所をyoyakuに変更します。

日付が日本式ではないのでdate-formatの入力欄をyy/mm/ddに変更します。

時間が必要ない方はdate-formatの入力欄を空にします。

その後、[タグを挿入]ボタンをクリックします。
そうすると[タグを挿入]ボタンの左側にある、
タグが挿入されます。

datepicker02

タグが挿入されます。今回時間は必要ないので、時間を予約日に変更。
タグも挿入されたタグに変更します。

datepicker03

次にメールタブをクリックします。
ここも同じですね。時間を予約日に変更します。
予約日の下は先ほどのフォーム生成タグの右下に書いてあるように[yoyaku]にします。

datepicker04

ちなみに、[Datepicker Theme]タブをクリックするとカレンダーのデザインを変更できる画面が表示されます。

datepicker05

操作が完了したら完了画面をクリックします。Part1で作った物を改良された方は、そのまま予約フォームページを確認します。

下記のようにカレンダーが表示されます。

datepicker06

最後に

この予約フォームを使えば、自分宛に予約日の入った予約システムを作る事ができます。
これで最低限の予約フォームは完成です。

この次は予約してくれたお客様に自動返信を入れたいですね。そこで次回は

ContactForm7を使ってWordPressの予約システムを作ってみた PART3(自動返信機能の実装)です。

お楽しみに!

Pocket