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

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

WordPressで、
セミナー・イベントなどの
「お申込みページ」
作る方法を詳しく解説します。

 

「Contact Form7」というプラグインを使いますので
まず、インストールしておいてくださいね。

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

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

 

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

 

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

まずは、セミナーのお申し込みページに
何を掲載したらよいか?をまとめてみましょう。

簡単なメモなどでかまいませんよ。

 

必要なのは

・セミナーの詳細 と、
・欲しい情報(お客様に入力いただく項目) ですね。

 

以下のサンプルを参考に、まとめてみてください。

 

必要な情報を整理する

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

■セミナー詳細

・セミナー名:
「WordPressを自由自在に!カスタマイズセミナー」

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

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

■欲しい情報

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

 

 

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

内容がまとまったら、
プラグインで作っていきましょう

 

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

 

 

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

 

 

■ タイトル

まずは、タイトルを入力、という欄に
お申込みページのタイトルを入力します。

タイトルはお客様からは見えませんので
自分に分かればなんでも大丈夫です。

 

■ フォーム

フォームというのが、「お名前」「メールアドレス」など
お客様に入力していただく項目を作るところです。

このコンタクトフォーム7、というプラグインでは

あらかじめ

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

というフォームが用意されています。

そのまま使っても良いのですが
ここではオススメのカスタマイズ方法を
ご紹介していきますね。

入力フォームは、お客様が入力しやすいように
「必要最低限」にすることが望ましいです。

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

■ 題名を削除する

フォームには<label>・・・などと
コードと呼ばれるややこしいプログラムが書いてあります。

<label> 題名
[text your-subject] </label>

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

 

 

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

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

【変更後】

 

 

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

今度はフォームの項目を増やします。

順番はお好みでかまいませんが、
ここでは、お名前とメールアドレスの間に入れることにします。

電話番号欄を入力したいところをクリックして
カーソルを置いておきます。

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

 

すると、電話番号のフォームについて
詳しく設定するメニューが出てきます。

電話番号を必ず入力して欲しい場合には「必須項目」にチェックを入れます。

よく、お問い合わせフォームにある入力しないと先に進めない
「必須」という設定のことです。
(こういうやつ↓)

さてこの時、電話番号のフォーム名に「tel-650」などと、
自動的に番号が割り振られます

名前や番号は、消したり変えたりもできますが、
手間が増えるのだけなので、このまま使っちゃってかまいません。

続いて、右下の青い「タグを挿入」ボタンを押します。

 

すると、先ほどカーソルをおいておいた場所に
電話番号用の入力用のタグが入ります。

このように、フォームは直接入力しなくても
ボタンやメニューで設定できるようになっています。

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

これじゃ、何を入れたらいいんだかわかりませんね。

 

「お名前」や「メールアドレス」と同じように
「電話番号」と書き足してあげましょう。

タグの前に<label> 〜</label> と書くと
好きな文字を表示できるようになります。

【記入例】

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

※ここでは650でしたが、登録するごとに番号は異なるので
ご自身の番号に書き換えてくださいね。

 

 

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

選択肢を作るには、

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

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

 

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

どちらでもお好きな方をどうぞ。

どちらかと言うと、ラジオボタンの方が
クリックしなくても全部見れますし、
入力間違いも少ないので、おすすめです。

 

〇ラジオボタンの作り方

先ほどの電話番号と同じ要領です。

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

 

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

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

電話番号と違って、選択肢を詳しく入力しないといけませんね。
「オプション」というところに選択肢を入力します。

改行するだけで、2つ目、3つ目・・とラジオボタンを増やせますよ。

【入力例】

 

右下の「タグを挿入」ボタンををクリックすると
フォームに反映されます。

 

 

また、先ほどの電話番号と同じく

このままだと、何の説明もなく唐突に
ラジオボタンが出てくるだけなので、
ご希望日時、などを書き添えておきたいですね。

 

[radio radio-・・・の前に、ラベルをつけます。

【記入例】

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

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

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

 

では、いったん保存して
どんなページになったか、表示を確認してみましょう。


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

 

画面の上の方に、何やら青く「ショートコード」が表示されます。

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

これを、フォームを表示させたいところ
たとえば、専用の固定ページなどに貼り付けます。

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

こんなお申し込みフォームが表示されるようになりますよ^^

 

これで完了・・・・ではなくて(笑)

 

もう一つ大切な設定があります。

 

お申し込みがあった時のお知らせを
どこに届けるか、「メール」の設定です

これを忘れている方が意外と多い(笑)

 

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

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

 

送信先


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

画像はモザイクで隠していますが、
ここには、WordPressに登録しているメールアドレスが自動的に入っています。

お知らせメールを別に届けたい方は、ここをご都合の良いアドレスに変更してください。

 

送信元


お知らせメールの「送信者」の表示を変えるところです。

初期設定では、メールの送信者名が「お客様名」になっています。

知らない人からいきなりメールが来たように見えるので、
名前に「様」を出るようにするとわかりやすいですよ。

[your-name] の後に「様」をつけるだけでOKです。

[your-name] 

 ↓ ↓ ↓

[your-name]様 

 

 

題名

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

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

ここも、自分に届くメールなのでなんでも良いのですが、

ここはもう全部消して

「セミナー名」にお申し込みがありました」などに変えてしまうのがオススメです。

 

メッセージ本文


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

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

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

 

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

メール本文に、

「電話番号:」

「ご希望日時:」と項目名を直接入力します。

 

これも、ご自身のわかりやすいところ、どこでもOKです。

 

 

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

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

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

【記入例】

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

 

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

 

お疲れ様でした。

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

 

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

返信メールがちゃんとできていないと、
せっかくお申し込みがあっても内容が確認できなくなってしまいます。

 

テスト送信は必ず行ってくださいね^^

 

お疲れ様でした!

Follow me!

村重敦子

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