2024年7月更新
お問い合わせページにメールフォームを設置したいとき、よく使われているプラグインが『Contact Form 7』です。
簡単な操作と柔軟なカスタマイズで高い人気を誇ります。
しかし入力内容の確認画面・送信完了画面（サンクスページ）を付けたい場合、『Contact Form 7』にはその機能がありません。
そこで、プラグイン『Contact Form 7 Multi-Step Forms』を使用し、確認画面と送信完了画面を作成します。
プラグイン『Contact Form 7』・『Contact Form 7 Multi-Step Forms』の使い方をまとめて解説。
お問い合わせ・入力内容の確認・送信完了の3ページにスムーズに遷移するお問い合わせフォームを作成できます。
Contact Form 7の設定
『Contact Form 7』は視覚的にわかりやすく、WordPressサイト作成では大人気のプラグインです。
基本的なフォームは簡単に設定できますが、よりカスタマイズしたい場合はContact Form 7公式サイトや作者によるサポートフォーラムが参考になります。
プラグインのインストール
プラグインの新規追加画面で Contact Form 7 と検索し、
今すぐインストールをクリック。
インストールが済むと現れる有効化ボタンをクリックします。
フォーム作成
左側メニューにお問い合わせが追加されます。
クリックして開いたページの新規追加をクリックします。
［ここにタイトルを入力］部分に『お問い合わせフォーム』等、わかりやすい名称を入力します。
ここで設定したタイトルは、固定ページに表示する際のショートコード名です。
フォーム一覧の画面に表示される名称でもあります。
日本語使用可なのでわかりやすいものを設定します。
フォームタブを選択し、内容を記入していきます。
あらかじめ項目が入力されていますがまずは削除します。
あとでデザインをカスタマイズしやすくするため、
<table>タグのセルに項目を入れていきます。
<th>に項目名、<td>に入力エリアの設定をします。
<th>は<label></label>の間に項目名を入力、
<td>に入力エリアを挿入します。
入力エリアの種類は、フォームタグから選びます。
<table>
<tr>
<th><label>お名前</label></th>
<td>[text* your-name]</td>
</tr>
<tr>入力エリアのフォームタグ設定方法
<td></td>の間にカーソルを合わせ、上に並んでいるフォームタグから選びます。
例）テキストフォームタグを選択した場合
フォームタグ生成画面
- 項目タイプで必須項目にチェックすると、フォームの入力エリアが空欄の場合にアラートを表示します。
- 名前はメールタグです。わかりやすい名称にします。
- ID属性 クラス属性は必要に応じて入力してください。
- ほかは空欄でかまいません。
記入が終わったらタグを挿入ボタンをクリックしてください。
名前で設定したメールタグは自動返信メールやデータベースなどに使用するので、わかりやすい英数記号で作成します。
フォームタグ生成画面で必須項目にチェックを入れた場合、フォームを利用するユーザーに必須入力だとわかりやすいように文字やアイコンをつけます。
今回は項目名の前に『必須』の文字を入れ、CSSでデザインをカスタマイズできるようにクラス名を設定しました。
入力エリアに例文を入れる場合は、placeholderを使用します。
<table>
<tr>
<th>
<label><span class="ast01">必須</span>お名前</label>
</th>
<td>[text* your-name placeholder"氏名"]</td>
</tr>セルを増やし、他の項目も設定します。
それぞれ目的にあったフォームタグを設定してください。
クラス設定
すべて入力し終わったら<table>タグを再確認し、
最上部と最下部に<div></div>を入れてください。
CSSでデザインをカスタマイズするため、<div>にクラス名を設定します。必要に応じて他のタグにもクラスを設定してください。
終わったら最下部の保存ボタンをクリックしてください。
制作例はここをクリック
<div class="formdesign">
<table>
<tr>
<th><label><span class="ast01">必須</span>お名前</label></th>
<td>[text* your-name placeholder"氏名"]</td>
</tr>
<tr>
<th><label><span class="ast01">必須</span>お名前ふりがな</label></th>
<td>[text* your-name-fu placeholder"おなまえ"]</td>
</tr>
<tr>
<th><label><span class="ast01">必須</span>メールアドレス</label></th>
<td>[email* your-email autocomplete:email]</td>
</tr>
<tr>
<th><label><span class="ast02">任意</span>電話番号</label></th>
<td>[tel your-tel]</td>
</tr>
<tr>
<th><label><span class="ast02">任意</span>貴社名</label></th>
<td>[text your-corp]</td>
</tr>
<tr>
<th><label><span class="ast02">任意</span>郵便番号</label></th>
<td>[text your-zipcode]</td>
</tr>
<tr>
<th><label><span class="ast02">任意</span>住所</label></th>
<td>[text your-address]</td>
</tr>
<tr>
<th><label><span class="ast02">任意</span>番地・建物名等</label></th>
<td>[text your-addressx]</td>
</tr>
<tr>
<th style="vertical-align:top;"><label for="namefield" style="padding-top:0.5em;"><span class="ast01">必須</span>お問い合わせ内容</label></th>
<td>[textarea* your-message]</td>
</tr>
</table>
</div>郵便番号を入力したら自動で住所フォームに市区町村まで入力される機能を付けたい場合は『YubinBango』ライブラリを設定します。
こちらで解説していますので、この時点で設定しておくと後の工程がスムーズです。
固定ページ作成
WordPressの固定ページで、お問い合わせページ・フォーム入力の確認画面・フォーム送信完了画面の3ページを作成します。
固定ページ内にショートコードを貼ることで、メールフォームを表示することができます。
お問い合わせページ作成
固定ページを新規作成し、タイトルを『お問い合わせ』等
わかりやすい名称にします。
タイトルの下に［ショートコード］ブロックを追加します。
例ではメールフォームの上に段落ブロックを追加し、フォームについての一文をつけています。
コンタクトフォームの一覧画面に戻り、先ほど作成したお問い合わせフォームのショートコードをコピーします。
固定ページに戻り、［ショートコード］ブロックに貼り付けます。
固定ページ『お問い合わせ』を下書き保存または公開します。
URL（パーマリンク）を『contact』等、わかりやすい名称にします。
URL（パーマリンク）は確認画面や送信終了画面の遷移にも使用するので、わかりやすい英数字で作成します。
固定ページ『お問い合わせ』をプレビューしながら、CSSでデザインをカスタマイズします。
フォーム作成のクラス設定で設定したクラスにCSSスタイルを当てます。
CSSは固定ページ内や追加CSSなど、わかりやすい場所に設置します。
フォームの確認ページ作成
固定ページ『お問い合わせ』を複製し、
タイトルを『お問い合わせフォーム 確認』等
わかりやすい名称にします。
ショートコードはあとで書き換えるので、この時点ではそのままにしておきます。
例ではメールフォームの上の一文を確認画面用に書き換えています。
固定ページ『お問い合わせフォーム 確認』を下書き保存または公開します。
URL（パーマリンク）を『contact-confirm』等、わかりやすい名称にします。
送信完了ページ作成
固定ページ『お問い合わせ』を複製し、
タイトルを『お問い合わせフォーム 送信完了』等
わかりやすい名称にします。
ショートコードを削除し、かわりに送信完了メッセージに書き換えます。
固定ページ『お問い合わせフォーム 送信完了』を下書き保存または公開します。
URL（パーマリンク）を『contact-thanks』等、わかりやすい名称にします。
Contact Form 7 Multi-Step Formsを設定
フォーム入力の確認画面・フォーム送信完了画面に遷移するため、プラグイン『Contact Form 7 Multi-Step Forms』を設定します。
Contact Form 7 Multi-Step Forms公式サイト・サポートフォーラムはこちら。
プラグインのインストール
プラグインの新規追加画面で Contact Form 7 Multi-Step Forms と検索し、
今すぐインストールをクリック。
インストールが済むと現れる有効化ボタンをクリックします。
フォームを複製して確認画面フォームを作成
コンタクトフォームの一覧画面で『お問い合わせフォーム』の下の［複製］をクリックし、複製します。
タイトルが『お問い合わせフォーム_copy』になっているので
『お問い合わせフォーム確認画面』等、わかりやすい名称に変更します。
確認画面フォームにボタンを設置
戻るボタンを設置
フォームの最下部</table>の直下に<div></div>を作成します。ボタンのデザインをCSSでカスタマイズできるように、クラスを設定しておきます。
<div></div>の間にカーソルを合わせ［previous］フォームタグをクリックすると、フォームタグ生成画面が開きます。
フォームタグ生成画面
Labelに『戻る』と入力します。
※ “戻る”は任意の文字に変更できます。例：修正する など
他は空欄でかまいません。
入力が終わったらInsert Tagボタンをクリックしてください。
フォームに［previous “戻る”］が挿入されました。
送信ボタンを設置
［previous “戻る”］の後ろにカーソルを合わせ［multistep］フォームタグをクリックすると、フォームタグ生成画面が開きます。
フォームタグ生成画面
- 名称はメールタグです。わかりやすい名称にします。
- Last Step Send Emailにチェックしてください。
- Next Page URLに固定ページで作成した送信完了ページのURLを入れます。例では/contact-thanksとしています。
記入が終わったらInsert Tagボタンをクリックしてください。
フォームに［multistep multistep-soushin last_step send_email “/contact-thanks”］が挿入されました。
戻るボタンと送信ボタンを横並びにしたい場合は、
コードを改行しないでください。
ページ上部のショートコードをコピーし、
固定ページ『お問い合わせフォーム 確認』を開きます。
固定ページを作成したときにそのままにしておいた「ショートコード］ブロックに上書きします。
固定ページ『お問い合わせフォーム 確認』をプレビューしながら、戻るボタンと送信ボタンのデザインをCSSでカスタマイズします。
フォーム画面に確認ボタンを設置
確認ボタンを設置
コンタクトフォームの一覧画面で『お問い合わせフォーム』を開きます。
フォームの最下部</table>の直下に<div></div>を作成します。ボタンのデザインをCSSでカスタマイズできるように、クラスを設定しておきます。
<div></div>の間にカーソルを合わせ［previous］フォームタグをクリックすると、フォームタグ生成画面が開きます。
フォームタグ生成画面
- 名称はメールタグです。わかりやすい名称にします。
- First Stepにチェックしてください。
- Next Page URLに固定ページで作成したフォームの確認ページのURLを入れます。例では/contact-confirmとしています。
記入が終わったらInsert Tagボタンをクリックしてください。
フォームに［multistep multistep-next first_step “/contact-confirm”］が挿入されました。
このままだとボタンに表示される文字列がないので
［submit “入力内容の確認”］を追加してください。
※”入力内容の確認”は任意の文字に変えてください。
固定ページ『お問い合わせフォーム』をプレビューしながら、確認ボタンのデザインをCSSでカスタマイズします。
自動送信メールを設定
Contact Form 7の機能を使い、サイト管理者にフォーム入力内容を知らせる通知メールの設定と、
ユーザーがフォームの送信ボタンをクリックすると届く自動返信メール（サンクスメール）の設定をします。
お問い合わせフォーム画面の設定
コンタクトフォームの一覧画面で『お問い合わせフォーム』を開きます。
［メール］タブをクリックし、入力エリア内の文字をすべて削除し空欄にします。
最下部の保存ボタンをクリックします。
このときエラー表示が出ますが無視してください。
［メッセージ］タブをクリックします。
［入力内容に不備が見つかった］入力エリアの文章を書き替えます。
必須項目が空欄の場合に表示される文章なので、
『必須項目は必ず入力してください』等、必須であることがわかりやすい文章に書き替えます。
他の項目の文章もそれぞれ入力内容に合わせて書き替えます。
最下部の保存ボタンをクリックします。
お問い合わせフォーム確認画面の設定
コンタクトフォームの一覧画面で『お問い合わせフォーム確認画面』を開きます。
［メール］タブをクリックし、管理者向け通知メールと入力したユーザーに届く自動送信メールを設定します。
- 送信先
-
お問い合わせがあったことが送信されるメールアドレスを入力します。
デフォルトの[_site_admin_email]はWordPressを設定したメールアドレスです。
お問い合わせ担当のアドレスやinfoのアドレスに変更すると良いでしょう。 - 送信元
-
デフォルトのまま[_site_title]<xxx@xxx.xx>でも良いですが、
[_site_title]の部分は任意で変更可なので『お問い合わせフォーム』『求人募集フォーム』等、フォームの用途に沿ったものに変更しましょう。
※<xxx@xxx.xx>の部分は変更しないでください。偽装メール扱いになる可能性があります。 - 題名
-
デフォルトは[_site_title] “[your-subject]”ですが、すべて削除し『お問い合わせがあります』等の担当者にわかりやすいタイトルにします。
- 追加ヘッダー
-
返信先アドレスの設定です。デフォルトのReply-To: [your-email]のままでかまいません。
- メッセージ本文
-
メールフォームに入力された内容を反映させるため、メールタグを使用して本文を作ります。
デフォルトの内容を書き換えていきます。以下、[ ]がメールタグです。例）
メールフォームにお問い合わせがあります。
お名前：[your-name]
メールアドレス：[your-email]
お問い合わせ内容：[your-message]等、フォームで設定した項目名と入力エリアのメールタグを記入します。
メールタグの部分に入力エリアに入力された内容が挿入されます。
自動送信メール（サンクスメール）の設定
お問い合わせフォームに入力したユーザーに向けて送信されるメールの設定です。
ページ下部のメール (2) を使用をチェックしてください。
上と同様のフォームが現れます。
- 送信先
-
デフォルトの[your-email]にします。
※エラー表示が出ても無視します。 - 送信元
-
デフォルトの[_site_title]<xxx@xxx.xx>の [_site_title]の部分を変更しましょう。
『お問い合わせ担当』『◯◯会社 お問い合わせ係』等、受け取ったユーザーにわかりやすい名前にします。
※<xxx@xxx.xx>の部分は変更しないでください。偽装メール扱いになる可能性があります。 - 題名
-
デフォルトの[_site_title] “[your-subject]”をすべて削除し
『お問い合わせを受け付けました ◯◯会社』等、わかりやすく安心感のある（迷惑メールにならないような）タイトルにしましょう。 - 追加ヘッダー
-
デフォルトの[_site_admin_email]はWordPressを設定したメールアドレスです。
お問い合わせ担当のメールアドレスやinfoのメールアドレスに変更すると良いでしょう。空欄のままでもかまいません。 - メッセージ本文
-
デフォルトの内容を書き換えます。
まずはお礼の文章など、次にお問い合わせ内容を再確認するために入力内容を記載します。例）
[your-name]様
お問い合わせありがとうございました。以下の内容で受け付けいたしました。
確認の上、担当よりご連絡をさせていただきます。
お客様のご入力内容
——————————————————
お名前：[your-name]
メールアドレス：[your-email]
お問い合わせ内容：[your-message]
——————————————————
※このメールはシステムからの自動返信です。返信は受付できませんのでご了承ください。等、フォームで設定した項目名と入力エリアのメールタグを記入します。
メールタグの部分に入力エリアに入力された内容が挿入されます。
以上で自動返信メールの設定は終了です。
最下部の保存ボタンをクリックしてください。
これで基本的なメールフォームができました。送受信テストをし、デバイスごとの動作やデザインの再確認をしましょう。
完成
メールフォームを設置したお問い合わせページのみをグローバルメニューにリンクします。
確認画面ページと送信完了ページは検索などで直接アクセスできないように、クローラー巡回をカットしておきましょう。
以上でメールフォーム・お問い合わせページは完成です。おつかれさまでした。
郵便番号入力だけで住所を自動入力できるライブラリ『YubinBango』はこちらで解説しています。
CONTACT
専門知識や独自ノウハウを持つ
株式会社フリーラジカルに
まとめてお任せください