ContactForm7を使ってWordPressの予約システムを作ってみた PART1

シェアする

はじめに

「WordPress 予約システム」で検索されている方が少しづつ増えてきました。(この記事)

そこで、お問い合わせフォームによく使われるContactForm7を使って予約システムをかんたんに作ってみました。

操作手順

▼まずは管理画面から左の「お問い合わせ」をクリックして、ContactForm7のリストを表示します。
上に「新規追加」がありますので、そこをクリックします。

contact-reserved

▼デフォルトの言語を使用する(日本語)の「新規追加」を選択しましょう。

contact-reserved02

▼無題の新しいフォームが作られます。無題にカーソルを合わせて「予約フォーム」に変更しましょう。

contact-reserved03

▼下のフォームが「予約システム」の構築部分になります。「タグの作成」をクリックしてください。ここが部品を表します。

必要最低限のお問い合わせ項目は出来ているので「予約日」と「時間」を作りたいと思います。まずは「日付」をクリックします。

contact-reserved04

▼日付の入力欄が表示されます。まずは「必須入力の項目ですか?」にチェックを入れます。次に茶色のコードをコピーします。このコードが日付の入力欄になります。

コピーしたコードは左のフォーム欄に追加します。ここは初歩のhtmlが必要になります。他のを真似して書けばいいですが、上の文字には日付とか予約日など適した文章を入れてください。

contact-reserved05

▼日付が終わったら次は時間です。「タグの作成」を再度クリックして「ドロップダウン・メニュー」を選択します。基本操作は先ほどと同じですが、今回は時間設定が必要になります。

選択項目に時間を入力します。1行ごとに分けて入力する必要がありますので、画像のように入力してみます。

入力後に茶色部分をクリックすると入力した部分が反映されます。後は日付と同じ要領でフォームに追加します。

contact-reserved06

▼次にメール文書についてです。茶色の項目の下に緑の項目があります。メール文章にはこの緑を使いましょう。フォームに追加するのと同じようにメッセージ本文に追加してみてください。

こちらはhtml不要です。

contact-reserved07

▼一番上の青い「保存」ボタンをクリックします。そうすると茶色いコードが表示されます。このコードをコピーしましょう。

contact-reserved08

▼固定ページで「新規追加」をしましょう。題名は予約フォームなどわかりやすい名前をつけます。

タブは「テキスト」にします。入力欄には先ほどのコードを貼付けましょう。そして公開します。

contact-reserved09

▼そうすると先ほど制作した予約フォームが表示されます。予約日や時間も表示されますね。

contact-reserved10

▼予約日はこんな感じ。

contact-reserved11

▼時間はこんな感じです。

contact-reserved12

さいごに

ただ、Firefoxで見るとカレンダーが表示されないんですね。。。orz

ContactForm7にはカレンダーのプラグインもあるみたいなので、次はこれも一緒に試してみたいと思います。長くなったので今日はこの辺です。

WordPress関連書籍

お問い合わせ

KazuyaStudioでは「WordPress」を中心に「WEB制作」「システム開発」など請け負っています。お気軽にお問い合わせください。

お問い合わせはこちら

下記ボタンから「いいね」「ツイート」をお願いします。

スポンサーリンク

シェアする

フォローする

スポンサーリンク