WordPressでセミナーのお申込みページを作ってみよう 【コンタクトフォーム7】

WordPressでセミナーのお申込みページを作ってみよう

お問い合わせフォームのプラグイン、
「Contact Form7」を応用して
セミナーなどの「お申込みページ」
作る方法をご紹介しますね。

 

まずは、プラグインを使いますので
Contact Form7を入れていない方は
インストールしておいてください。

インストールの仕方、プラグインについて
詳しくはこちらの記事をご覧ください。

【コンタクトフォーム7】お問い合わせフォームの作り方 お手軽編【プラグイン解説】

 

それでは、設定をカスタマイズしていきましょう。

セミナーのお申込みページを作る方法

まずは、”必要な情報”を整理しましょう。

必要なのはセミナーの詳細と、
お客様に入力いただく項目です。

 

必要な情報を整理する

仮に、こんなセミナーを行うとします。

1)セミナー名:
「WordPressの便利な使い方セミナー」

2)日時:
7月21日(土)13:00~17:00
7月22日(日)13:00~17:00

3)金額:¥5,400(税込) 

 

お客様に入力してほしい情報は

・お名前
・メールアドレス
・電話番号
・希望日時
・その他ご質問(あれば)

と、仮定します。

 

コンタクトフォームに設定する

内容が決まったら、
プラグインに設定していきましょう。

メニューの「お問い合わせ」から
「新規追加」を選んでください。

 

 

すると、フォームの登録メニューが出てきます。

 

まずは、タイトルを入力、という欄に
お申込みページのタイトルを入力します。
(自分に分かればなんでも大丈夫です)

 

続いて、フォームに何を乗せるか?を編集していきます。

あらかじめ

・お名前
・メールアドレス
・題名
・メッセージ本文
・送信ボタン

が用意されていますが、

「題名」はいらないので消してしまいましょう。

■ 題名を削除する

 

下の図に示した

<label> 題名
</label>

という部分を削除してください。

ーーーーーーーー

ーーーーーーーー

 

■ 「メッセージ本文」を書きなおす

つづいて、「メッセージ本文」と書かれている文字を
「その他ご質問(あれば)」に書き直します。

【変更後】

■ 電話番号入力欄をつける

お名前とメールアドレスの間をクリックして
電話番号欄を入力したいところにカーソルを置いておきます。

フォーム、というタイトルの下に、たくさんボタンが並んでいるので
その中から「電話番号」をクリックしてください。

 

すると、電話番号用の登録メニューが出てきます。

ここの項目タイプに「必須項目」がありますので
お客様に必ず入力してほしい情報の時はチェックを入れてください。

この時、名前に「tel-650」などと、自動的に番号が割り振られます
変更もできますが、手間も増えるのでこのまま使いましょう。

チェックを入れたら、右下の青い「タグを挿入」ボタンを押します。

 

すると、電話番号用のタグが入ります。

このままだと、お名前、とメールアドレスの間に
電話番号入力用の枠だけができた状態です。

 

なので、上下の「お名前」や「メールアドレス」と同じように

<label>という表記で、「電話番号」と書き足してあげましょう。

こんな表記になります。

<label> 電話番号 (必須)
[tel* tel-650]</label>

(番号が違うので、コピペする方は番号を変えてくださいね)

 

 

■ セミナー日時の選択肢を作る

選択肢を作るには、

ラジオボタン と ドロップダウンメニュー があります。

ラジオボタンはこんな感じ
丸いボタンにチェックをつけるタイプです。

 

ドロップダウンメニューは、こんなかんじ
クリックすると選択肢が開くタイプです。

どちらでもお好みでかまいせんが、
ラジオボタンの方が、選択肢を一覧で比較できて、
お客様が操作するときわかりやすく、間違いが防げるのでおすすめですよ。

 

〇ラジオボタンの作り方

選択肢を入力したいところ、この場合は
電話番号とご質問の間をクリックして

フォームのボタンから「ラジオボタン」をクリックします。

 

すると、ラジオボタン詳細メニューが出てきます。

また、これもradio-731などと自動的に数字がつきますが、
このまま使いましょう。

「オプション」というところに選択肢を入力します。
2行目に入れると、2個目の選択肢になります。

【入力例】

 

タグを挿入、をクリックするとフォームに反映されます。

先ほどと同じくこのままだと、何の説明もなく唐突に
ラジオボタンが出てくるだけなので、

ご希望日時、などを書き添えてあげるとよいでしょう。

【記入例】太字が書き足した部分です。

<label> ご希望日時 (必須)</label>
[radio radio-731 default:1 “7月21日(土)13:00~17:00” “7月22日(日)13:00~17:00”]

するとこのような表示になります。

これでフォームが完成しました^^

いったん保存して、表示を確認してみましょう。

左下にある保存ボタンを押すと

 

フォームの上部に青くコードが表示されます。

↑この青い部分をコピーしておいてください。

これを、あらかじめ用意しておいた、固定ページに貼り付けます。

貼り付けたら、そのまま公開(またはプレビュー)してみてください。

その固定ページに、作ったフォームが表示されるようになりますよ^^

 

表示をチェックして、OKならフォームは完成です♪

フォームはできたので、次は
お問い合わせがあったときに、お知らせするメールの設定をします。

これを忘れていると、
せっかくお問い合わせが来ても、受け取れません。。

 

お知らせメールを設定する

「メール」をクリックすると
送信先などを設定する画面が出てきます。

 

送信先:お問い合わせがあったことを、
お知らせするメールをお届けする宛先です。

モザイクですみません(;^_^A

WordPressに登録しているメールアドレスが
自動的に入っているので、ほかのアドレスが良い方はここを変更してくださいね。

 

送信元:どこからメールが来たかを設定するところです。

初期設定では「お客様の名前」<wordpress@あなたのサイト名、というメールアドレス>になっています。

いきなり送信者が知らない方の名前だと、驚かれるかもしれないので
「お客様の名前」+様 などにしておくとわかりやすいですよ。

[your-name]、というのがお客様の名前が入るところなので、
[your-name]様 と、”]”のあとに”様”を入れてください。

 

題名:メールのタイトルを決めるところです。

初期設定では「あなたのサイト名」「お客様が入力した題名」が入るようになっています。

題名はお客様の入力の手間を省くために削除していますので、
ここは全部消して

「あなたのサイト名」にお問い合わせがありました」などと入力しておくとよいでしょう。

メッセージ本文

では肝心のメッセージ本文を編集していきましょう。

初期設定ではこうなっています。

まず、題名部分がいらないので削除しましょう。

 

つづいて、「電話番号」「ご希望日時」を追加します。

メール本文に、ご自身のわかりやすいところに
電話番号:、とご希望日時:と項目名をそのまま入力します。

 

 

続いて、画面の上の方を見てみると、
「メールタグ」というものが表示されています。

先ほど登録したときに見かけた番号です。

私の場合【tel-650】、【radio-731】と書いてあるので
これを、それぞれの項目にコピペします。
(番号は皆さん毎回異なるので、ご確認ください)

記入例

メールができたら完成です!!

完成したら、必ず自分で送信テストを

 

お疲れ様でした。

フォームができたら、自分で試しに入力してみてください。

 

設定が正しくできていれば、すぐにこんなメールが届いているはずです^^

 

長時間、おつかれさまでした!!

村重 敦子

「猫でもわかる!」くらい簡単にわかりやすく、WordPressの使い方をサポートする、WordPressソムリエです。デザインを学んだ後、なぜかレストランでワインサービスに従事。絵も描けるワインソムリエでした。その後大手通信会社に勤めIT・Webの各種サポートを経験。ソムリエもWebも常に「専門知識をお客様に合わせてわかりやすくご提案し、期待以上のサービスをする」ことをモットーとしています。テクニカルサポートの経験は、通算1,100人以上。現在はWebデザイン・ディレクターをしながら、ブログ集客をしたい方へWordPressの制作、使い方のレクチャーなどを行っています。

Follow me!