MENU

コンタクトフォーム7 の設定方法とカスタマイズ方法

WordPress
  1. ホーム
  2. WordPress
  3. コンタクトフォーム7 の設定方法とカスタマイズ方法

コンタクフォーム7とは

WordPressのプラグイン「Contact Form 7」は、初心者でも簡単に問い合わせページを作ることができます。

またこのプラグインは問い合わせだけでなく、自動返信メールやサンクスページなどのカスタマイズも可能です。

目次

Contact Form 7 のインストールと初期設定

https://contactform7.com

インストール方法

  1. WordPress管理画面 → プラグイン → 新規追加 をクリック
  2. 右上の検索ボックスに「Contact Form 7」と入力
  3. 該当プラグインが表示されたら「今すぐインストール」をクリック
  4. インストールが完了したら「有効化」をクリック

フォームの作成・編集方法

左側の【お問い合わせ】から【コンタクトフォーム】を選択します。

フォームを編集する部分には、あらかじめ「名前」「メールアドレス」「題名」「メッセージ本文」の項目が設けられています。

css込みの記述

<label>お名前 <span class="my-custom-required">必須</span>
    [text* your-name class:my-custom-input]</label>

<label>メールアドレス <span class="my-custom-required">必須</span>
    [email* your-email class:my-custom-input]</label>

<label>電話番号 <span class="my-custom-required">必須</span>
    [tel* your-tel class:my-custom-input]</label>

<label>題名
    [text your-subject class:my-custom-input]</label>

<label>メッセージ本文
    [textarea your-message class:my-custom-textarea]</label>

[submit class:my-custom-submit "送信"]

<style>
/* 必須マークのスタイル */
.my-custom-required {
    background-color: #ba2822; /* 画像に近い濃い赤色 */
    color: #ffffff;
    font-size: 12px;
    padding: 2px 6px;
    margin-left: 8px;
    border-radius: 2px;
    vertical-align: middle;
}

/* 入力欄のスタイル */
.my-custom-input,
.my-custom-textarea {
    border: 1px solid #ccc;
    width: 100%; /* 横幅いっぱいに広げる */
    padding: 8px;
    margin-top: 8px; /* ラベルと入力欄の間の余白 */
    margin-bottom: 20px; /* 次の項目との余白 */
    box-sizing: border-box; /* paddingを含めて幅を計算させる */
    background-color: #fafafa; /* 画像のようなわずかにグレーな背景 */
}

/* メッセージ本文の高さ */
.my-custom-textarea {
    height: 150px;
}

/* 送信ボタンのスタイル */
.my-custom-submit {
    background-color: #333;
    color: #fff;
    cursor: pointer;
    padding: 10px 30px;
    border: none;
    border-radius: 3px;
}
</style>

自動返信メールの設定

【メール】のタブをクリックして自動返信メールを設定します。
自動返信メールとは、フォームを使って問い合わせを行った人に対して自動で送られるメールです。

たとえば問い合わせをした方に対して「お問い合わせありがとうございます。」といった内容のメールを送ることができます。

【メール】のタブに移動し、スクロールすると【メール (2)】という項目があります。
そちらのチェックボックスにチェックを入れると自動返信メールを作成できるようになります。

次に、自動返信メールで送られるメッセージ内容を作成します。

初期設定のままでは問い合わせ内容がそのまま送り返されるだけですが、問い合わせに対するコメントや返信までにかかる日数などを記載することもできます。
また、自動返信により送られたメールであることを伝えられます。

ショートコードをコピーし固定ページ・投稿ページに貼り付け

フォーム設定画面の上部、または一覧の「ショートコード」欄に表示されているコードをコピーします。

フォーム項目のカスタマイズ

Contact Form 7 は多様なフィールドタイプを用意しています。主なものを表にまとめると、次のようになります。

フィールドタイプショートコード例必須指定説明
テキスト[text your-text][text*]単一行の文字入力
メールアドレス[email your-email][email*]メールアドレス入力（フォーマットチェック）
電話番号[tel your-tel][tel*]電話番号入力
テキストエリア[textarea your-message][textarea*]複数行の文字入力
ドロップダウン[select your-select "選択1" "選択2"][select*]プルダウン式の選択
ラジオボタン[radio your-radio "選択1" "選択2"][radio*]1つだけ選択する場合
チェックボックス[checkbox your-check "選択1" "選択2"][checkbox*]複数の選択肢から複数選ぶ場合
ファイルアップロード[file your-file][file*]ファイルを添付して送信
送信ボタン[submit "送信"]なしフォーム送信ボタン

上記のショートコードを、Contact Form 7 の「フォーム」タブで自由に組み合わせることで、柔軟なフォームを作成できます。

エラーメッセージ・送信完了メッセージの編集

Contact Form 7 では、送信時に表示される下記のようなメッセージをカスタマイズできます。

  • 送信完了メッセージ
  • 入力エラー時のメッセージ
  • 不正なメールアドレス入力時のエラー など

これらは「メッセージ」タブで編集できます。デフォルトでは英語でのメッセージも含まれていますが、日本語に変更しておくとユーザーにとってわかりやすい表示になります。

メールタブの各項目の詳細

CF7のフォーム編集画面を開くと、上部に「フォーム」「メール」「メッセージ」「追加設定」などのタブがあります。管理者通知メールに関わる設定は主に「メール」タブで行います。

メールタブの基本構成

デフォルトの例 (メールタブ)

送信先 (To): [your-email] ← ここを管理者のアドレスに変える場合があります
件名 (Subject): お問い合わせ: [your-subject]
送信元 (From): [your-name] <[your-email]>
追加ヘッダー (Additional headers): Reply-To: [your-email]
メッセージ本文 (Message Body):
お名前: [your-name]
メールアドレス: [your-email]
件名: [your-subject]
メッセージ本文:
[your-message]

-- 
このメールはお問い合わせフォームから送信されました

送信先 (To)

  • デフォルトでは [your-email] が設定されている場合が多いですが、管理者側で受け取りたいメールアドレスを入力することがほとんどです。例えば、info@example.com など。
  • 必要に応じてカンマ区切りで複数設定も可能です。例:
info@example.com, support@example.com

件名 (Subject)

  • ユーザーが入力した件名をメール件名に反映する場合は、ショートコード [your-subject] を使用します。
  • 固定の文言を含めることもできます。例: 【お問い合わせ】[your-subject]

送信元 (From)

  • 通常、「誰からのメールか」 がわかるように [your-name] <[your-email]> とするケースが多いです。
  • この際、メールの送信元（「From:」欄）にユーザーのメールアドレスをそのまま設定してしまうと、メールサーバー側でスパム判定されやすいことがあります。
    • そのため、一部環境では wordpress@example.com など、自社ドメインのメールアドレスにしておき、本文中にユーザーのアドレスを含める形が望ましい場合もあります。

追加ヘッダー (Additional headers)

  • Reply-To: [your-email] のように設定しておけば、管理者が返信ボタンを押すだけで、自動的にユーザー宛に返信できます。
  • CC や BCC などを指定することも可能です。例:
Cc: cc@example.com
Bcc: bcc@example.com

メッセージ本文 (Message Body)

  • ユーザーの入力値を適切に表示するため、各フォームタグを本文に入れておきます。
  • よくある例としては以下のような内容です。
お名前: [your-name]
メールアドレス: [your-email]
電話番号: [your-tel]
ご要望: [your-request]

-- 
このメールはお問い合わせフォームから送信されました

ここで使用する [your-name] などのタグは、「フォーム」タブ で設定しているショートコードと同じ名前になるよう注意しましょう。そうしないと、正しく反映されません。

[your-name]を送信先にしすると、「安全でないメール設定が十分な防御策なく使われている。」のアラート

reCAPTCHAを導入しなくても、CloudflareのTurnstileの認証サービスを使用すれば、簡単に対策OK

参考サイト

Contact Form 7のフォーム編集画面で、[turnstile] を挿入
https://blog.take-it-easy.site/wordpress/recaptcha-to-turnstile-wordpress-cf7/

Contact Form 7 のメールが迷惑メールに振り分けられる場合の対処法

Contact Form 7 から送信されるメール（サンクスメール・管理者通知メール）がGmailなどで迷惑メールに振り分けられるケースがあります。
主な原因はメール認証設定の不備と、送信元ドメインとReply-Toの不一致です。

原因1：SPF・DKIM・DMARCが未設定

メールの送信元ドメインにSPF・DKIM・DMARCが正しく設定されていないと、Gmailは送信元の正当性を確認できずスパム判定しやすくなります。

Xserverでの対処手順

DKIM設定

サーバーパネル → メール → DKIM設定 → 対象ドメインを選択して有効化する。

SPF確認

サーバーパネル → ドメイン → DNSレコード設定 → 対象ドメインのTXTレコードに以下のような記述があるか確認する。なければ追加。

v=spf1 +a +mx +include:svXXXXX.xserver.jp ~all

※ svXXXXX の部分は自分のサーバー番号に置き換えてください。

DMARC追加

DNSレコード設定でTXTレコードを追加する。

ホスト名: _dmarc.example.com
値: v=DMARC1; p=none; rua=mailto:info@example.com

原因2：WP Mail SMTPのメーラー設定が「初期値（なし）」になっている

WP Mail SMTPをインストールしていても、メーラーが「初期値（なし）」のままだとサーバーのPHP mail()関数で送信されるため、プラグインを入れている意味がほぼありません。

「その他のSMTP」を選択し、以下のようにXserverのSMTP情報を設定します。

項目設定値
SMTPホストsvXXXXX.xserver.jp（自分のサーバー番号）
暗号化SSL または TLS
SMTPポート465（SSL）または 587（TLS）
SMTPユーザー名送信元メールアドレス（例: info@example.com）
SMTPパスワードそのメールアドレスのパスワード

原因3：管理者通知メールだけ迷惑メールになる場合

DKIM設定後、サンクスメール（メール2）は正常に届くのに管理者通知メール（メール1）だけ迷惑メールに振り分けられるケースがあります。

これはメール1の追加ヘッダーに Reply-To: [your-email] が設定されていることが原因です。送信元ドメイン（自社ドメイン）とReply-Toのドメイン（フォーム送信者のメールアドレス）が一致しないため、Gmailがフィッシングに似た構造と判断します。

対処法A：Gmailでフィルターを作成する（推奨）

管理者が受信するメールなので、Gmailのフィルター機能で対処するのが現実的です。

  1. Gmailの検索バー右端の「検索オプションを表示」をクリック
  2. Fromに自社ドメイン（例: fujireform.jp）を入力
  3. 「フィルタを作成」をクリック
  4. 「迷惑メールにしない」にチェックを入れて保存

対処法B：Reply-Toを削除する

追加ヘッダーの Reply-To: [your-email] を削除し、メッセージ本文中にお客様のメールアドレスを表示するだけにする方法です。ただし管理者がメールから直接返信できなくなるため利便性は下がります。

参考記事

https://www.xserver.ne.jp/bizhp/wordpress-contact-form-7

「安全でないメール設定が十分な防御策なく使われている。」というエラーメッセージは、『Cloudflare Turnstile 』などのスパム対策を設定すれば消える
https://www.xserver.ne.jp/bizhp/cloudflare-turnstile/

プラグイン「WP Mail SMTP」を導入する方法です。
このプラグインを利用すれば、メールの送信方法をより信頼性の高い方法に変更してくれるので、迷惑メールフォルダに振り分けられにくくなります。
https://cone-c-slide.com/see-sla/blog/cf7-no-email-received/

WordPress

関連記事

目次