WordPressにメールフォームを設定しよう

お問い合わせページにメールフォームを設置したいとき、よく使われるプラグインが『Contact Form 7』です。
簡単な操作と柔軟なカスタマイズで高い人気を誇ります。
しかし『Contact Form 7』は確認画面・送信完了画面(サンクスページ)機能がありません。
そこでプラグイン『Contact Form 7 Multi-Step Forms』を使用し、確認画面と送信完了画面を作成します。
さらに、郵便番号で住所を自動入力するライブラリ『YubinBango』も解説します。

目次

『Contact Form 7』は視覚的にわかりやすく、WordPressサイト作成では大人気のプラグインです。
基本的なフォームは簡単に設定できますが、よりカスタマイズしたい場合はContact Form 7公式サイトや作者によるサポートフォーラムが参考になります。

プラグインのインストール

プラグインの新規追加画面で Contact Form 7 と検索し、
今すぐインストールをクリック。

インストールが済むと現れる有効化ボタンをクリックします。

フォーム作成

左側メニューにお問い合わせが追加されます。

クリックして開いたページの新規追加をクリックします。

左側メニューに「お問い合わせ」が追加されます。コンタクトフォームの右側の「新規追加」をクリック。

[ここにタイトルを入力]部分に『お問い合わせフォーム』等、わかりやすい名称を入力します。

Check

ここで設定したタイトルは、固定ページに表示する際のショートコード名です。
フォーム一覧の画面に表示される名称でもあります。
日本語使用可なのでわかりやすいものを設定します。

フォームタブを選択し、内容を記入していきます。
あらかじめ項目が入力されていますがまずは削除します。

あとでデザインをカスタマイズしやすくするため、
<table>タグのセルに項目を入れていきます。
<th>項目名<td>入力エリアの設定をします。


<th><label></label>の間項目名を入力、
<td>入力エリアを挿入します。
入力エリアの種類は、フォームタグから選びます。

<table>
  <tr>
    <th><label>お名前</label></th>
    <td>[text* your-name]</td>
  </tr>
  <tr>

<td></td>の間にカーソルを合わせ、上に並んでいるフォームタグから選びます。

例)テキストフォームタグを選択した場合

コンタクトフォームの編集
  • 項目タイプで必須項目にチェックすると、フォームの入力エリアが空欄の場合にアラートを表示します。
  • 名前はメールタグです。わかりやすい名称にします。
  • ID属性 クラス属性は必要に応じて入力してください。
  • ほかは空欄でかまいません。

記入が終わったらタグを挿入ボタンをクリックしてください。

Check

名前で設定したメールタグは自動返信メールやデータベースなどに使用するので、わかりやすい英数記号で作成します。

フォームタグ生成ウインドウ

フォームタグ生成画面で必須項目にチェックを入れた場合、フォームを利用するユーザーに必須入力だとわかりやすいように文字やアイコンをつけます。

今回は項目名の前に『必須』の文字を入れ、CSSでデザインをカスタマイズできるようにクラス名を設定しました。

入力エリアに例文を入れる場合は、placeholderを使用します。

<table>
 <tr>
  <th>
   <label><span class="ast01">必須</span>お名前</label>
  </th>
  <td>[text* your-name placeholder"氏名"]</td>
 </tr>

セルを増やし、他の項目も設定します。
それぞれ目的にあったフォームタグを設定してください。

参照:Contact Form 7公式サイト タグの使い方

クラス設定

すべて入力し終わったら<table>タグを再確認し、
最上部と最下部に<div></div>を入れてください。
CSSでデザインをカスタマイズするため、<div>にクラス名を設定します。必要に応じて他のタグにもクラスを設定してください。

終わったら最下部の保存ボタンをクリックしてください。

郵便番号を入力したら自動で住所フォームに市区町村まで反映させたい場合は、『YubinBango』ライブラリを設定します。
こちらで解説していますので、この時点で設定しておくとスムーズです。

WordPressの固定ページで、お問い合わせページ・フォーム入力の確認画面・フォーム送信完了画面の3ページを作成します。
固定ページ内にショートコードを貼ることで、メールフォームを表示することができます。

STEP

お問い合わせページ作成

固定ページを新規作成し、タイトルを『お問い合わせ』
わかりやすい名称にします。

タイトルの下に[ショートコード]ブロックを追加します。

例ではメールフォームの上に段落ブロックを追加し、フォームについての一文をつけています。

固定ページを新規作成

コンタクトフォームの一覧画面に戻り、先ほど作成したお問い合わせフォームのショートコードをコピーします。

お問い合わせフォームのショートコードをコピー

固定ページに戻り、[ショートコード]ブロックに貼り付けます。

ショートコードブロックに貼り付け

固定ページ『お問い合わせ』を下書き保存または公開します。
URL(パーマリンク)を『contact』等、わかりやすい名称にします。

Check

URL(パーマリンク)は確認画面や送信終了画面の遷移にも使用するので、わかりやすい英数記号で作成します。

固定ページ『お問い合わせ』をプレビューしながら、CSSでデザインをカスタマイズします。

フォーム作成のクラス設定で設定したクラスにCSSスタイルを当てます。
CSSは固定ページ内や追加CSSなど、わかりやすい場所に設置します。

STEP

フォームの確認ページ作成

固定ページ『お問い合わせ』を複製し、
タイトルを『お問い合わせフォーム 確認』
わかりやすい名称にします。

ショートコードはあとで書き換えるので、この時点ではそのままにしておきます。

例ではメールフォームの上の一文を確認画面用に書き換えています。

固定ページ『お問い合わせフォーム 確認』を下書き保存または公開します。
URL(パーマリンク)を『contact-confirm』等、わかりやすい名称にします。

STEP

送信完了ページ作成

固定ページ『お問い合わせ』を複製し、
タイトルを『お問い合わせフォーム 送信完了』
わかりやすい名称にします。

ショートコードを削除し、かわりに送信完了メッセージに書き換えます。

固定ページ『お問い合わせフォーム 送信完了』を下書き保存または公開します。
URL(パーマリンク)を『contact-thanks』等、わかりやすい名称にします。

フォーム入力の確認画面・フォーム送信完了画面に遷移するため、プラグイン『Contact Form 7 Multi-Step Forms』を設定します。
Contact Form 7 Multi-Step Forms公式サイト・サポートフォーラムはこちら。

STEP

プラグインのインストール

プラグインの新規追加画面で Contact Form 7 Multi-Step Forms と検索し、
今すぐインストールをクリック。

インストールが済むと現れる有効化ボタンをクリックします。

STEP

フォームをコピーして確認画面フォームを作成

コンタクトフォームの一覧画面で『お問い合わせフォーム』の下の[複製]をクリックし、複製します。

タイトルが『お問い合わせフォーム_copy』になっているので
『お問い合わせフォーム確認画面』等、わかりやすい名称に変更します。

STEP

お問い合わせフォーム確認画面にボタンを設置

戻るボタンを設置

フォームの最下部</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”]が挿入されました。

Check

戻るボタンと送信ボタンを横並びにしたい場合は、
コードを改行しないでください。

ページ上部のショートコードをコピーし、
固定ページ『お問い合わせフォーム 確認』を開きます。

固定ページを作成したときにそのままにしておいた「ショートコード]ブロック上書きします。

固定ページ『お問い合わせフォーム 確認』をプレビューしながら、戻るボタンと送信ボタンのデザインをCSSでカスタマイズします。

STEP

お問い合わせフォーム画面に確認ボタンを設置

確認ボタンを設置

コンタクトフォームの一覧画面で『お問い合わせフォーム』を開きます。

フォームの最下部</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の機能を使い、サイト管理者にフォーム入力内容を知らせる通知メールの設定と、
ユーザーがフォームの送信ボタンをクリックすると届く自動返信メール(サンクスメール)の設定をします。

STEP

お問い合わせフォーム画面の設定

コンタクトフォームの一覧画面で『お問い合わせフォーム』を開きます。

[メール]タブをクリックし、入力エリア内の文字をすべて削除し空欄にします。

最下部の保存ボタンをクリックします。

このときエラー表示が出ますが無視してください。

[メッセージ]タブをクリックします。

[入力内容に不備が見つかった]入力エリアの文章を書き替えます。

必須項目が空欄の場合に表示される文章なので、
『必須項目は必ず入力してください』等、必須であることがわかりやすい文章に書き替えます。
他の項目の文章もそれぞれ書き替えてかまいません。

最下部の保存ボタンをクリックします。

STEP

お問い合わせフォーム確認画面の設定

コンタクトフォームの一覧画面で『お問い合わせフォーム確認画面』を開きます。

[メール]タブをクリックし、管理者向け通知メールと入力したユーザーに届く自動送信メールを設定します。

管理者向け通知メールの設定

お問い合わせフォームの担当者に向けて送信されるメールの設定です。

フォームで作成したメールタグをここで使用します。

参考:メールのセットアップ

送信先

お問い合わせがあったことが送信されるメールアドレスを入力します。
デフォルトの[_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のアドレスに変更すると良いでしょう。空欄でもかまいません。

メッセージ本文

デフォルトの内容を書き換えます。
まずはお礼の文章など、次にお問い合わせ内容を再確認するために入力内容を記載します。

等、フォームで設定した項目名と入力エリアのメールタグを記入します。
メールタグの部分に入力エリアに入力された内容が挿入されます。

以上で自動返信メールの設定は終了です。
最下部の保存ボタンをクリックしてください。

これで基本的なメールフォームが完成しました。送受信テストをし、デバイスごとの動作やデザインの再確認をしましょう。

郵便番号を入力したら自動で住所フォームに市区町村まで反映させたい場合は、『YubinBango』ライブラリを利用します。
国内では広く使用されている便利なライブラリです。YubinBango公式サイトはこちら

STEP

YubinBangoをWordPressに設定する

functions.phpにコードを追加します。

wp_enqueue_script( 'yubinbango', 
'https://yubinbango.github.io/yubinbango/yubinbango.js', 
array(), null, true );

または、footer.phpにコードを追加することもできます。
どちらか1つを選択してください。

<script src="https://yubinbango.github.io/yubinbango/yubinbango.js" charset="UTF-8"></script>
STEP

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

作成済のお問い合わせフォームにコードを追加していきます。

国名を指示するクラスタグをフォームの上に記入します。
非表示にするため、スタイル”display:none;“を追加します。

<span class="p-country-name" style="display:none;">Japan</span>

郵便番号の入力エリアにクラスタグ
class:p-postal-code を追加します。

<tr>
	<th><label><span class="ast02">任意</span>郵便番号</label></th>
	<td>[text your-zipcode class:p-postal-code]</td>
</tr>

住所の入力エリアにクラスタグ
class:p-region
class:p-locality
class:p-street-address

を追加します。

意味はそれぞれ、都道府県:p-region、市区町村:p-locality、町村:p-street-addressです。入力エリアを細かく分けたい場合は参考にしてください。

<tr>
	<th><label><span class="ast02">任意</span>住所</label></th>
	<td>[text your-address class:p-region class:p-locality class:p-street-address]</td>
</tr>

番地・建物名等の入力エリアにクラスタグ
class:p-extended-address を記入します。

番地・建物名は自動入力されないので、
『番地・建物名・部屋番号などを入力してください』『住所の続きを入力してください』
などの注意書きをつけるようにしましょう。

<tr>
	<th><label><span class="ast02">任意</span>番地・建物名等</label></th>
	<td>[text your-addressx class:p-extended-address]</td>
</tr>
Check

確認画面フォームをすでに作成している場合は、お問い合わせフォームに設定したものと同一の内容をコピーペーストしてください。

固定ページ『お問い合わせフォーム』ショートコードの末尾にhtml_class=”h-adr”を追加してください。

同様に、固定ページ『お問い合わせフォーム 確認』ショートコードの末尾にも同様にhtml_class=”h-adr”を追加してください。

フォームが完成しました。お問い合わせページのみをメニューにリンクします。
確認画面と送信完了画面に直接アクセスできないよう、クローラー巡回もカットしておきましょう。

CONTACT

ホームページ作成・既存ページのリニューアル・機能やコンテンツの追加など
お気軽にご相談ください!

目次