Contact Form 7を使ってお問い合わせフォームを作りたいけれど、
「設定が難しい」「メールが届かない」といった悩みはありませんか？
本記事では、初心者の方でも迷わないように
・フォーム作成
・固定ページへの設置
・メール送信設定
・メールが届かない原因と対処法
までを画像付きでわかりやすく解説します。
今回は、以下のようなシンプルなお問い合わせフォームを作成します。この完成形を目標に設定を進めていきます。
１．Contact Form 7とは
Contact Form 7 とは、WordPress でお問い合わせフォームを簡単に作成できる無料プラグインです。名前・メールアドレス・お問い合わせ内容といった基本的な入力項目はもちろん、ラジオボタンやチェックボックス、ファイル添付などにも対応しており、企業サイトやブログの問い合わせ窓口として幅広く利用されています。
２．インストール方法
まずは、「プラグインを追加」から、「Contact Form 7」で検索しダウンロードしましょう。
ダウンロードしたら、プラグインを有効化します。
左側のサイドバーに「お問い合わせ」が追加されました。
[コンタクトフォームを追加]をクリックしてください。
３．フォームの作り方
フォームの作成画面が表示されました。既に、初期値が入力されています。
タイトルを入力してください。任意のタイトルで問題ありません。
初期設定の入力欄が
「氏名」「メールアドレス」「題名」「メッセージ本文」
となっています。今回「題名」は不要なため、
<label> 題名
[text* your-subject] </label>は削除します。また今回は、「電話番号」と「選択メニュー」を追加で作成したいため先に外枠としての
<label> </label>
<label> </label>を追加しました。
※labelタグで囲むことで、項目名と入力欄をセットとして扱えます。
[電話番号]をクリックして、電話番号の入力フォームを作成します。
項目タイプ：必須入力にしたいため[必須入力の項目。]にチェックを入れます。
項目名：「your-tel」
[この入力項目には送信者の電話番号が期待される。]にチェックを入れます。
完了したら右下の[タグを挿入]をクリックします。
フォーム画面に
[tel* your-tel autocomplete:tel]が追加されました。
外枠の<label> </label>で挟みます。
次に、[ドロップダウンメニュー]をクリックして、選択式の入力フォームを作成します。
項目タイプ：必須入力にしたいため[必須入力の項目。]にチェックを入れます。
項目名：「inquiry-type」
選択できる値： （1行ずつ入力します）
選択してください
いぬ
ねこ
うさぎ
[最初のアイテムをラベルとして使用する。]にチェックを入れます。
完了したら右下の[タグを挿入]をクリックします。
フォーム画面に
[select* inquiry-type first_as_label "選択してください" "いぬ" "ねこ" "うさぎ"]が追加されました。
外枠の<label> </label>で挟みます。
次に、必須項目の入力欄について、入力者が必須項目であることを判別できるよう「*」マークを付与します。
<span class="required" >*</span>をそれぞれの項目名の横につけてください。
先ほど追加した「電話番号」と「お問い合わせ内容」は項目名も一緒に入力してください。
※必須項目にしたくない「メッセージ本文」については「*」は付けません。
入力者の入力の助けになるように[]の中に「入力例」を付けていきます。
以下をコピーしてそれぞれ張り付けて下さい。
氏名
placeholder "例）山田太郎"メールアドレス
placeholder "mail@example.com"電話番号
placeholder "000-1234-5678"※placeholder は入力例を薄い文字で表示するための属性で、入力内容の補助として使用されます。
【補足】
プレースホルダーは入力フォームを作成する際に入力設定も可能です。
デフォルト値：例を入力
「このテキストをプレースホルダーとして使用する。」にチェックを付けることで設定ができます。
フォームだけだと味気ないため、フォームの一番上にちょっとした文章を添えます。
以下をコピーして張り付けてください。
<div class="form-lead">
<p>以下のフォームに必要事項をご入力の上ご送信ください。<br>
追って、担当者よりご連絡致します。</p>
</div>
フォームの送信ボタンは後からCSSで調整しやすいように<div>で囲みます。
<div class="submit-center">
[submit "送信"]
</div>
すべての入力が完了したら、一番下の[保存]をクリックします。
タイトルの下に青いバーが表示されました。
このショートコードは次章「固定ページに設置する」ために使用しますので、あらかじめコピーしておきましょう。
４．固定ページへの設置方法
作成したお問い合わせフォームを固定ページに設置していきます。
左側のサイトバーから「固定ページ」に移動して固定ページを追加します。
ブロックから「ショートコード」を選択し追加します。
タイトルは「お問い合わせフォーム」と入力してください。
追加したショートコードに、先ほどコピーしたフォームのショートコードを張り付けます。
入力ができたら固定ページを公開します。右上の[公開]をクリックします。
そのまま[固定ページを表示]をクリックして表ページを確認しに行きましょう。
以下のような状態になっていればOKです。
デフォルト状態では装飾がほとんどないシンプルなフォームが表示されます。
見た目を整えるため、CSSに記述をしていきます。
WordPress管理画面の [外観] ＞ [カスタマイズ] ＞ [追加CSS] に以下のコードを貼り付けてください
フォーム全体を中央寄せし、入力欄を見やすくするCSSです。
/* お問い合わせフォーム */
.page-content .wpcf7{
max-width: 600px;
margin: 0 auto;
}
.form-lead{
max-width: 600px;
margin: 0 auto;
text-align: center;
}
.page-content .wpcf7-form p{
margin-bottom: 20px;
}
.wpcf7-form-control{
width: 100%;
padding: 12px 14px;
margin-top: 8px;
border: 1px solid #ccc;
border-radius: 6px;
font-size: 16px;
box-sizing: border-box;
}
.submit-center{
text-align: center;
margin-top: 30px;
}
.submit-center input[type="submit"]{
padding: 12px 40px;
border-radius: 6px;
cursor: pointer;
}
.submit-center input[type="submit"]:hover{
filter: brightness(0.9);
}
.required{
color: #FF0000;
}保存して固定ページを更新します。
これでフォームは完成です。
よくある躓きポイント
・ショートコードを貼っても表示されない
→ ブロックが「ショートコード」になっているか確認しましょう
・フォームが表示されても送信できない
→ 必須項目の設定ミスの可能性があります
５．メール送信設定
管理者宛て
フォームが送信された際に管理者に通知として届くメールの設定をしていきます。
左側のサイトバー「お問い合わせ」をクリックし、コンタクトフォームの編集に戻ります。
[メール]をクリックします。
「フォーム」タブで作成したタグが自動反映された状態で入力されています。
このままだとわかりにくいため、少しだけ変更していきます。
以下の2か所を変更してください。
題名：[_site_title] “問い合わせがありました”
メッセージ本文：
本メールはあなたのウェブサイト ([_site_title] [_site_url]) のコンタクトフォームに送信があったことをお知らせするものです。
受信内容
名前：[your-name]
メールアドレス：[your-email]
電話番号：[your-tel]
お問い合わせ内容：[inquiry-type]
メッセージ本文：[your-message]
――――――――――――
送信元ページ情報
ページタイトル：[_post_title]
送信日時：[_date] [_time]
自動返信（入力者用確認メール）
フォームが送信された際に入力者に確認用として届くメールの設定をしていきます。
メール（２）を使用にチェックを入れます。
こちらも初期設定である程度入力されています。
これも使いにくいため、少し変更をしていきます。
今回は3か所修正します。
送信元：[_site_title] noreply@ サイトのドメイン
題名：【自動返信】お問い合わせありがとうございます
メッセージ本文：
[your-name] 様
この度はお問い合わせありがとうございます。
内容を確認のうえ、
担当者よりご連絡いたします。
送信内容
お名前：[your-name]
メールアドレス：[your-email]
電話番号：[your-tel]
お問い合わせ内容：[inquiry-type]
メッセージ本文：[your-message]
※なお、このメールはシステムより自動配信されています。
返信は受付できませんので、ご了承ください。
――――――――――
[_site_title]
入力できたら、一番下の[保存]をクリックして作業終了です。
※「安全でないメール設定が十分な防御策なく使われている」という警告が表示される場合があります。動作自体に問題はありませんが、本番環境では SMTP 送信などの対策を推奨します。
６．送信テスト方法
きちんとメールが届くかどうか、お問い合わせフォームの入力をしてみましょう。
Gmailなど複数のメールアドレスでテストを行い、迷惑メールフォルダも必ず確認してください。
問い合わせ側と、管理者側のメール内容に問題がないかを確認します。
７．メールが届かないときの原因と対処法
原因１：差出人（From）の設定
もっとも間違いやすく、かつ重要なのが「差出人（From）」の設定です。
「メールの送信元（From）」のドメインと、「実際に送信を行うサーバー」のドメインが違うと、受信側のセキュリティによってブロックされます。
正しい設定例： サイトが「example.com」なら、Fromは必ず「info@example.com」にしましょう。
通知メールを受信するためのアドレスは、送信先メールアドレス（To）に設定します。
原因２：ドメインの取得
レンタルサーバーを契約した直後の「初期ドメイン（例: 〇〇.sakura.ne.jp や 〇〇.xserver.jp）」や、IPアドレスのまま運用している場合、メールの到達率が下がることがあります。
お問い合わせフォームを運用するなら、信頼性を確保するために必ず独自ドメインを取得し、そのドメインのアドレスを送信元（From）に設定しましょう。
原因３：SPF / DKIMの影響
送信元ドメインのDNS設定で「このサーバーからの送信を許可する」という宣言（SPF設定）がされていないと、Gmailやキャリアメール（docomo/au/softbank）にはほぼ届きません。
サーバー標準のメール送信機能を使わず、専用の配信システムを経由させるのがもっとも確実な解決策です。
解決方法：プラグイン「WP Mail SMTP」の導入
WP Mail SMTPとはWordPressのメール送信を、外部のSMTPサーバー（Gmail、SendGrid、レンタルサーバーのメール機能など）経由に切り替えるプラグインです。
標準サーバーでは「ドメイン」が一致しているか、という住所の照合をしていましたが、SMTPの場合は「アカウント」が一致しているか、という認証チェックを行っています。
特にGmail宛のメールは、SMTPを使わないと高確率で届かないため、実運用では導入を前提に考えるのが安全です。
補足：スパム対策にはreCAPTCHAを設定しよう
お問い合わせフォームを公開すると、スパム（迷惑送信）が届くことがあります。
特に海外からの自動送信が増えるため、対策をしておくことが重要です。
Contact Form 7では、GoogleのreCAPTCHAを設定することでスパム対策が可能です。
管理画面の[お問い合わせ] > [インテグレーション]から設定できます。
設定しておくことで、迷惑メールの大幅な減少が期待できます。
８．まとめ
Contact Form 7は無料で高機能な反面、
メール設定を誤ると「届かない」というトラブルが起きやすいプラグインです。
特に以下の3点は必ず確認してください。
・送信元メールアドレスのドメイン
・迷惑メール対策
・SMTP設定の導入
これらを押さえておけば、ほとんどのトラブルは防げます。
まずは本記事の手順通りに設定し、送信テストまで完了させましょう。
メールが届かない場合について、こちらの記事で解決方法を詳しく紹介しています。