Easy Method

ラクして稼ぐを研究するメディア

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

お仕事のご依頼について

WordPressカスタマイズ・WEBコンサルティングの
ご依頼についてはコチラ!

Facebookはこちら(友達申請歓迎です)

https://www.facebook.com/inafukukazuya

Twitterはこちら(フォロー歓迎です)

https://twitter.com/Inafuku_Kazuya

 - WEB制作, WordPress

スポンサードリンク







follow us in feedly

  関連記事

AdvancedCustomFieldsで文字数制限を行う方法

はじめに Advanced Custom Fieldsで文字数制限ってどうやるん …

WordPressの固定ページのデザインをページ毎に変更する方法

はじめに WordPressの固定ページのデザインをページ毎に変更したいと思った …

WordPressブログ構築ワークショップの個人レッスンをしてきました

はじめに 先日知人の森田さんからWordPressブログ構築ワークショップについ …

未経験者がWordPressプログラマのフリーランスになる方法(STEP1)

28歳の時に会社を辞めてから、WordPress専門のWEBプログラマとして活動 …

つくるートさんのセミナーに参加してきました

コチラの記事もいかがですか? 関連記事はありません。

no image
WordPressのテーマをセキュリティチェックできる!無料プラグインAntiVirus!

はじめに WordPressは沢山のテーマがあります。 デザインに優れいているも …

WordPressにContact Form 7を設定して問い合わせフォームを作る方法

はじめに あなたは自分に興味を持っている人がコンタクトできるように お問い合わせ …

no image
カスタム投稿タイプでカテゴリーのスラッグやカテゴリー名を取得、表示する方法

はじめに WordPressでカスタム投稿を使用する際に、カテゴリーのスラッグや …

フォントの扱い方も学べる!おしゃれなフリーフォントと飾りパーツの素材集

はじめに どういうデザインの時に、どういうフォントを使えば良いのか?悩む時ありま …

東京の池袋にて「WordPressで簡単にHPを作ろう会」というセミナーを開催しました

はじめに 東京で「WordPressで簡単にHPを作ろう会」という セミナーを開 …