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

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

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

 

「Contact Form7」(コンタクトフォーム 7)
というプラグインを使いますので
まず、インストールしておいてください。

インストールの仕方、どんなプラグインなのか詳しく
知りたい方は、まずこちらの記事をご覧ください。

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

 

この、コンタクトフォーム7というプラグインを使うと
初期設定では以下のようなお問い合わせフォームが作成されます。

 

この内容をカスタマイズして、
こんな内容に変更する方法をご案内します。

 

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

サンプルでは、

・お名前(文字入力)

・電話番号(電話番号入力)

・ご希望日時(日時選択)

・メールアドレス(メルアド入力)

・その他ご質問(自由入力)

をご用意しました。

実際に作成する場合は
必要に応じて変更してくださいね。

 

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

ContactForm7をインストールし、
有効にすると「お問い合わせ」メニューが増えています。

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

 

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

初期設定でいろいろ書いてあるので、
こちらをカスタマイズしていきます。

 

■ タイトル

 

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

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

 

 

■ フォーム

 

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

あらかじめ

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

というフォームが用意されているのですが
このままではちょっといまいちです。

自分がお問い合わせすることを考えると
「題名」をつけろと言われると
ちょっとめんどくさいですよね。

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

■ 題名を削除する

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

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

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

 

 

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

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

(お好きな言葉に変更してくださいね。
お客様にわかりやすければOKです)

【変更後】

 

 

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

フォームには、文字だけではなく
「電話番号専用」「メールアドレス専用」など
さまざまなフォームが用意されています。

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

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

 

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

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

よく、お問い合わせフォームで見かける、
「必須」設定のことです。

入力されていないと、送信できなくなります。

 

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

名前や番号は消したり変えたりもできますが、
手間が増えるのだけなので、このまま使ってしまうのが楽ですよ。

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

 

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

このように、入力欄を増やす時は
ボタンをクリックするだけで、コードが設定できるようになっています。

 

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

これじゃ、何を入れたらいいんだかわからないので
「お名前」や「メールアドレス」と同じように
「電話番号」と書き足してあげましょう。

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

【記入例】

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

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

または、<label> はなしで、以下の表記でもかまいません。

 電話番号 (必須)
[tel* tel-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】と書いてあるので
これを、それぞれの項目にコピペします。
(番号は皆さん毎回異なるので、ご確認ください)

【記入例】

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

 

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

 

お疲れ様でした。

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

 

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

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

 

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

 

お疲れ様でした!

もっとデザインに凝りたい、
お客様に確認メールを送りたい、という方のために
コピペでできるコードもご用意しました。

合わせてご覧ください。

コピペでできる!ContactForm7でかっこいいお問い合わせフォームを作る方法

 

WordPressに関するご質問にお答えします。
こちらのフォームから
お気軽にお寄せください^^
https://wp-firststep.com/questionbox/