WordPressへContact Form 7を入れたものの、「フォームタグの意味が分からない」「メール設定で何を入力すればよい？」と迷うことがありますよね。
Contact Form 7は、フォーム画面とメール画面で同じ項目名を使うことが大切です。たとえばフォームの[email* your-email]と、受信メールの[your-email]を対応させます。
この記事では、インストール、入力項目の作成、受信メール、自動返信、固定ページへの設置、送信テストまでを、実際の管理画面と設定例を使って解説します。
Contact Form 7とは
Contact Form 7は、WordPressへお問い合わせフォームを追加できるプラグインです。お名前、メールアドレス、電話番号、選択肢、ファイル、同意欄などを組み合わせてフォームを作れます。
プラグイン本体は無料で利用できます。フォームの表示だけでなく、管理者へ送るメールと問い合わせ者へ返す自動返信メールも設定できます。
一方で、入力内容はWordPressへ自動保存されません。メール以外にも記録を残す場合は、保存用プラグインや外部サービスを別に検討します。
Contact Form 7で作るフォームの完成例
今回は、お名前、メールアドレス、電話番号、お問い合わせ種別、本文、プライバシーポリシーへの同意、送信ボタンを用意します。
次の画像は、作成したフォームへ入力した状態です。テーマによって入力欄やボタンの見た目は変わりますが、項目の構成は同じです。
Contact Form 7をインストールする
- WordPress管理画面で「プラグイン」→「プラグインを追加」を開きます。
- 検索欄へ「Contact Form 7」と入力します。
- 作者が「Rock Lobster Inc.」のプラグインであることを確認します。
- 「今すぐインストール」を選び、完了後に「有効化」を選びます。
似た名前の追加プラグインもあるため、名称と作者を確認してください。次のカードが公式のContact Form 7です。画像では有効化済みのため、右上が「有効」になっています。
インストール元や動作環境は、WordPress.orgのContact Form 7公式ページでも確認できます。有効化すると、管理画面の左側に「お問い合わせ」が追加されます。
お問い合わせフォームを作成する
- 「お問い合わせ」→「新規追加」を開きます。
- フォーム名へ「お問い合わせフォーム」など、管理しやすい名前を入力します。
- 「Form」タブで入力項目を設定します。
- 設定後に「保存」を選びます。
環境によってタブが「フォーム」と日本語表示される場合と、「Form」と英語表示される場合があります。役割は同じです。
次の画像では、完成例に必要なフォームタグをFormタブへ入力しています。上部にある「text」「email」「tel」などのボタンからタグを生成できるため、構文をすべて暗記する必要はありません。
Formタブへ入力する設定例
同じフォームを作る場合は、Formタブの編集欄へ次の内容を入力します。
<label> お名前（必須）
[text* your-name autocomplete:name] </label>
<label> メールアドレス（必須）
[email* your-email autocomplete:email] </label>
<label> 電話番号
[tel your-tel autocomplete:tel] </label>
<label> お問い合わせ種別
[select your-category "サービスについて" "見積もりについて" "その他"] </label>
<label> お問い合わせ内容（必須）
[textarea* your-message] </label>
[acceptance privacy-consent] プライバシーポリシーに同意する [/acceptance]
[submit "送信する"]text、email、telなどは入力欄の種類です。種類の直後にあるアスタリスクは必須項目を表すため、text*は入力必須のテキスト欄、telは任意の電話番号欄になります。
your-nameやyour-emailは項目名です。この名前を、あとで受信メールへ入力内容を差し込むために使います。
autocomplete:nameとautocomplete:emailは、ブラウザの自動入力へ項目の意味を伝える指定です。スマートフォンで入力しやすくなるため、生成時に設定できる場合は残しておきましょう。
よく使うフォームタグ
| タグの種類 | 用途 | 設定例 |
|---|---|---|
| text | 1行の文字入力 | [text* your-name] |
| メールアドレス | [email* your-email] | |
| tel | 電話番号 | [tel your-tel] |
| textarea | 複数行の文章 | [textarea* your-message] |
| select | プルダウン | [select your-category "A" "B"] |
| checkbox | 複数選択 | [checkbox your-topic "A" "B"] |
| radio | 1つだけ選択 | [radio your-plan "A" "B"] |
| file | ファイル添付 | [file your-file] |
| acceptance | 同意確認 | [acceptance consent]...[/acceptance] |
| submit | 送信ボタン | [submit "送信する"] |
ファイル欄を使う場合は、許可する拡張子と容量を必要最小限にし、後述するメールの添付ファイル欄にも対応するメールタグを設定します。
フォームタグとメールタグを対応させる
Contact Form 7には、公開フォームを作るフォームタグと、送信メールへ入力値を入れるメールタグがあります。
フォーム側の[email* your-email]では、email*が入力欄の種類、your-emailが名前です。メール側では種類を外し、同じ名前だけを角括弧で囲んだ[your-email]を使います。
名前が一致しないと、フォームへ入力できてもメール本文には表示されません。項目を追加・変更したときは、FormタブとMailタブの両方を確認してください。
詳しい構文は、公式のフォームタグとメールタグの解説でも確認できます。
管理者が受け取るメールを設定する
フォームを保存したら「Mail」タブを開きます。ここでは、問い合わせが送信されたときに管理者へ届くメールを設定します。
To：受信するアドレス
問い合わせを受信するメールアドレスを設定します。[_site_admin_email]を使うと、WordPressの管理者メールアドレスへ送られます。実際に確認できるアドレスか、管理画面の「設定」→「一般」で確認してください。
From：サイトと同じドメインのアドレス
送信元には、サイトと同じドメインのメールアドレスを使います。サイトがexample.comなら、wordpress@example.comやcontact@example.comなどです。
問い合わせ者が入力したGmailなどをFromへ直接指定すると、実際の送信元サーバーとドメインが合わず、なりすましと判断されやすくなります。Contact Form 7公式もサイトと同じドメインのFromを推奨しています。
Additional headers：Reply-Toを設定する
受信メールへそのまま返信したときに問い合わせ者宛てになるよう、追加ヘッダーへ次の行を設定します。
Reply-To: [your-email][your-email]は、Formタブの[email* your-email]に対応します。項目名を別の名前にした場合は、Reply-To側も同じ名前へ変更してください。
Message body：入力内容を並べる
メール本文には、確認したい順番でメールタグを配置します。次の例は、先ほど作ったフォームに対応しています。
お名前：[your-name]
メールアドレス：[your-email]
電話番号：[your-tel]
お問い合わせ種別：[your-category]
お問い合わせ内容：
[your-message]
送信元ページ：[_url][_url]は、送信元ページのURLを差し込む特別なメールタグです。複数ページで同じフォームを使う場合に、どのページから届いたか確認できます。
自動返信メールを設定する
問い合わせ者へ受付メールを返す場合は、Mailタブの下部にある「Use Mail (2)」または「メール (2) を使用」にチェックを付けます。
- To：
[your-email]を指定します。 - From：サイトと同じドメインの送信元を使います。
- Subject：受付完了と分かる件名にします。
- Additional headers：問い合わせ窓口へ返信させるなら、その窓口をReply-Toへ設定します。
- Message body：受付した内容と、返信までの目安を記載します。
自動返信は、管理者向けのMailが正常に送信されたあとに実行されます。問い合わせ者がメールアドレスを間違えると届かないため、送信完了画面にも受付内容を表示するか検討してください。
個人情報や機密情報を自動返信へそのまま載せると、誤入力した別人へ送られる可能性があります。返信本文へ含める内容は必要最小限にしましょう。
固定ページへContact Form 7を設置する
フォームとメールを保存したら、固定ページへ表示します。ブロックエディターでは、Contact Form 7ブロックからフォーム名を選べます。
- 「固定ページ」→「固定ページを追加」を開きます。
- タイトルへ「お問い合わせ」と入力します。
- ブロック追加ボタンから「Contact Form 7」を検索して追加します。
- プルダウンで「お問い合わせフォーム」を選びます。
- プレビューで表示を確認してから公開します。
クラシックエディターやショートコードブロックを使う場合は、「お問い合わせ」→「コンタクトフォーム」の一覧に表示されるショートコードをコピーして貼り付ける方法もあります。
公開前に送信テストをする
フォームが表示されただけでは、メールが届くことまで確認できません。公開前に、実際のフォームから次のテストを行います。
- 必須項目を空にするとエラーが表示されるか
- 正しい入力で送信完了メッセージが表示されるか
- 管理者宛てメールがToへ届くか
- 受信メールへ返信すると問い合わせ者のアドレスになるか
- 件名と本文にすべての入力値が入っているか
- Mail (2)を使う場合、自動返信が届くか
- 迷惑メールフォルダーへ振り分けられていないか
- スマートフォンで入力欄や送信ボタンが操作しやすいか
設定を変更した後も、同じテストを繰り返してください。フォームの送信成功と、受信メール・自動返信の到着は別々に確認します。
設定エラーを確認する
Contact Form 7は、フォームを保存すると設定内容を検証し、構文やメール設定に問題がある場合は警告を表示します。
よくある警告は、サイトと異なるドメインをFromへ指定した、存在しないメールタグを本文へ入れた、メールアドレスの形式が正しくない、といった内容です。
警告を無視せず、表示された項目を直して保存してください。ただし、公式の設定検証の説明にあるとおり、この検証は構文を確認するもので、実際にメールを送るテストではありません。最後は必ず送信操作で確認します。
Contact Form 7でよくある問題と対処方法
メールが届かない
- Toのメールアドレスに入力ミスがないか確認します。
- Fromをサイトと同じドメインのアドレスへ変更します。
- 迷惑メールフォルダーと受信拒否設定を確認します。
- レンタルサーバーのメール送信制限やログを確認します。
- 必要に応じてSMTP送信プラグインを検討します。
SMTPは、認証情報を使ってメールサーバーから送信する仕組みです。導入後は、SMTPプラグインのテスト送信だけでなく、Contact Form 7からも送信してください。
メール本文に入力内容が表示されない
Formタブの項目名とMailタブのメールタグが一致しているか確認します。たとえば[text your-company]を追加したら、メール本文にも[your-company]を追加します。
返信すると自分のサイト宛てになる
Additional headersへReply-To: [your-email]を追加します。Fromはサイトと同じドメインのままにし、返信先だけを問い合わせ者のアドレスへ設定するのがポイントです。
迷惑送信が増えた
Contact Form 7の「お問い合わせ」→「インテグレーション」では、対応する迷惑送信対策サービスを連携できます。利用条件、個人情報の送信先、プライバシーポリシーへの記載を確認して導入してください。
不要な入力欄を減らし、同意欄を用意し、プラグインを更新することも大切です。対策後は正常な問い合わせまで拒否していないかテストします。
送信内容が管理画面に残っていない
Contact Form 7は、標準では送信内容をデータベースへ保存しません。メール障害に備えて保存も必要なら、公式の関連プラグインFlamingoなどを検討し、保存期間と閲覧権限も決めます。
Contact Form 7についてよくある質問
Contact Form 7だけで確認画面を作れますか？
標準機能は入力後に確認ページへ進む構成ではありません。確認画面が必須なら、対応する追加プラグインや別のフォーム製品を比較し、現在のWordPressとContact Form 7に対応しているか確認してください。
フォームを複数作れますか？
作れます。「お問い合わせ」→「コンタクトフォーム」で用途ごとに追加し、固定ページでは表示したいフォーム名を選びます。フォーム名に「採用」「資料請求」など用途を入れると管理しやすくなります。
Contact Form 7を更新しても設定は消えませんか？
通常のプラグイン更新でフォーム設定が消えるものではありません。ただし、更新前にサイトをバックアップし、更新後に表示と送信を確認してください。独自コードや追加プラグインとの互換性も確認します。
まとめ
Contact Form 7では、Formタブで入力欄を作り、Mailタブで同じ項目名のメールタグを配置します。Fromにはサイトと同じドメインのアドレスを使い、問い合わせ者への返信先はReply-Toで指定します。
固定ページへ設置したら、必須入力、管理者メール、自動返信、返信先、スマートフォン表示まで実際に試しましょう。設定検証の警告がなくても、送信テストは必要です。
フォームのデザイン、迷惑送信対策、SMTP、送信内容の保存までまとめて確認したい方は、次の記事も参考にしてください。