0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

WordPressのフォームメールをローカルでテストする方法(Local・Contact Form 7)

0
Posted at

問い合わせフォームの項目を増やしたら、通知メールの本文にも追加したい。
自動返信の文面を変えたので、入力した名前や問い合わせ内容がどう入るか確かめたい。

そんなときは、ローカル環境でメールの中身を確認できます。
WordPressの開発ツール「Local」には、「Mailpit」が付いています。
メールを受け止めて、ブラウザーで表示するツールです。

名前が似ていますが、「Local」はWordPressの開発ツールの製品名です。
この記事でいう「ローカル」は、自分のPC上に用意した開発・検証用の環境を指します。

今回はContact Form 7(以下、CF7)で小さなフォームを作ります。
通知メールと自動返信を見ながら、入力した内容がどう反映されるかを確かめましょう。
最後に、入力を変えて試すためのテスト表も載せます。

フォームの入力内容が反映された自動返信をMailpitで確認した画面

上は、この記事の設定で確認した自動返信です。
画像は、認証情報などが写らないように表示範囲を切り出しています。

【1】 テストするサイトと送信方法を確認する

Localで作った、新規のWordPressサイトを使います。
本番サイトのデータやメール配信設定はコピーせず、CF7だけを追加した状態から始めましょう。
Localのインストールやサイト作成がまだなら、公式の案内を先に確認してください。

Local標準のメール送信経路を使うと、Mailpitでメールを確認できます。
ただし、ローカルにあるサイトなら、どんなメールでも外へ送られないというわけではありません。
外部SMTPサーバーやメール配信APIを使うプラグインが入っている場合は、そちらへ送られる可能性があります。
送信経路が分からない既存サイトでは試さず、まず新規のサンプルサイトを用意してください。

今回使うものは、次の3つです。

用意するもの 確認したバージョン 用途
Localの新規サイト 10.1.2 フォームを設置して試す
Contact Form 7 6.1.7 運営者への通知と自動返信を作る
Localに付属するMailpit 1.24.1 生成されたメールの内容を見る

WordPress 7.1、macOS 26.6.2で確認しています。

本番のSMTP設定、メール配信サービスのアカウント、実際の顧客アドレスは使いません。
Mailpitから外部への転送・リレーも設定しない前提です。

【2】 テスト用の通知と自動返信を用意する

小さなフォームを作る

WordPressの管理画面で「お問い合わせ」からフォームを新規作成します。
「フォーム」タブへ、次の内容を入れてください。

<label> お名前(必須)
  [text* your-name]
</label>

<label> メールアドレス(必須)
  [email* your-email]
</label>

<label> 件名(必須)
  [text* your-subject]
</label>

<label> お問い合わせ内容(任意)
  [textarea your-message]
</label>

[submit "送信する"]

* の付いた項目は必須入力です。
今回は、空欄の場合も試せるように、問い合わせ内容だけを任意にしています。

「メール」と「メール(2)」を設定する

ここでは、Localのサイトドメインを form-mail-test.local とします。
別の名前で作った場合は、次の表の form-mail-test.local を、自分のサイトドメインへ置き換えてください。
以下のアドレスはローカルテスト用です。

「メール」タブで通知メールを設定し、「メール (2) を使用」にチェックを入れて、自動返信も設定します。

設定欄 運営者への通知「メール」 自動返信「メール(2)」
送信先 contact@form-mail-test.local [your-email]
送信元 フォームテスト <notices@form-mail-test.local> フォームテスト <notices@form-mail-test.local>
題名 [通知] [your-subject] [自動返信] [your-subject]
追加ヘッダー Reply-To: [your-email] Reply-To: contact@form-mail-test.local

通知メールのメッセージ本文は、次のようにします。

お名前: [your-name]
メールアドレス: [your-email]
件名: [your-subject]

お問い合わせ内容:
[your-message]

自動返信のメッセージ本文はこちらです。

[your-name] 様

お問い合わせを受け付けました。

件名: [your-subject]
お問い合わせ内容:
[your-message]

こちらはローカルテスト用のメールです。

どちらも「HTML 形式のメールを使用する」はオフにします。
「含まれるすべてのメールタグが空の行を出力から除外する」もオフです。
「ファイル添付」欄は空のままにします。
まずは、設定によって結果が変わる箇所を少なくしておきます。

[your-email] などは、フォームの入力値に置き換わるメールタグです。
フォーム側の項目名を変更したら、メール側のタグも合わせてください。

この構成では、メール(2)の送信先に「安全でないメール設定が十分な防御策なく使われている。」と警告が出ます。
入力されたアドレスへの自動返信が、迷惑メールの送信に悪用されるおそれがあるためです。

今回は、外部送信しない専用のローカル環境で、メールの内容だけを確認します。
この設定をそのまま公開サイトへコピーせず、公開前にスパム対策と設定検証を済ませてください。
それ以外の警告がある場合は、別の設定不備として確認します。

保存したフォームのショートコードを、新しい固定ページの「ショートコード」ブロックへ貼り付けます。
Local内でそのページを公開し、フォームを表示してください。

【3】 フォームから送信し、Mailpitで内容を確認する

今回のメールを見分けられる入力にする

フォームに次の値を入れます。

入力欄 テスト値
お名前 テスト利用者A
メールアドレス visitor-a@example.test
件名 画面確認11
お問い合わせ内容 資料を希望します。

テスト利用者A、架空のメールアドレス、画面確認11を入力したフォーム

送信したら、Localで対象サイトを選び、Tools → Mailpit → Open Mailpit を開きます。
毎回同じ件名では探しにくいので、次のテストでは 画面確認12画面確認13 と変えると区別できます。

Mailpitには、サイト作成時の管理者情報やパスワード再設定のメールも入ることがあります。
画面を共有・撮影するときは、フォームのテストメールだけに絞り、認証情報が写らないようにしてください。

通知の件名は [通知] 画面確認11、自動返信は [自動返信] 画面確認11 になる設定です。
この2通を探し、それぞれ開いて内容を確認しましょう。

宛先と返信先を確認する

メールを開けたら、まずヘッダーの情報を見ます。
確認したい値は、次のとおりです。

見る項目 通知メール 自動返信
To(宛先) contact@form-mail-test.local visitor-a@example.test
From(差出人) notices@form-mail-test.local notices@form-mail-test.local
Reply-To(返信先) visitor-a@example.test contact@form-mail-test.local

通知メールの宛先と、返信先は別です。
この設定では、通知を受け取るのは運営者、そこから返信する相手は問い合わせ者になります。
実際に返信を送る必要はなく、Reply-Toの値を確認すれば十分です。

今回のMailpitでは、From・To・Reply-Toはメール本文の上に表示されます。
ヘッダーの詳しい内容は「Headers」、メールのソースは「Raw」タブで確認できます。
日本語の件名などが符号化されていても、そのまま文字化けと判断せず、通常の表示と見比べてください。

本文に入力値が入っているか確認する

続いて本文を見ます。
通知と自動返信の両方で、名前・件名・問い合わせ内容が入力した値に置き換わっているか確認してください。

MailpitのTextタブで確認した通知メールの本文

たとえば、自動返信の冒頭で確認したいのは次の表示です。

テスト利用者A 様

お問い合わせを受け付けました。

名前が空になっていたり、[your-name] がそのまま残っていたりしたら、フォームとメールのタグ名を見比べます。
また、フォームへ項目を追加しても、メール本文へ自動的に追加されるわけではありません。
必要な入力内容が、メール側にもそろっているかを見ていきましょう。

【4】 入力を変えて、メールの変わり方を確認する

通常の入力で確認できたら、条件を変えて試します。
一度に全部変えず、次の表のように1つずつ変えると、違いを追いやすくなります。

確認 変えるもの 期待する結果
通常入力で送信 通知と自動返信が1通ずつあり、宛先・件名・本文が設定どおり
アドレスを visitor-b@example.test に変更 自動返信のToと、通知のReply-ToがBのアドレスになる
任意の問い合わせ内容を空欄にする 本文の該当部分が空になり、タグの文字列が残らない
日本語・改行・記号を入れる 意図しない欠落や文字化けがなく、複数行の内容を読める
必須の名前を空欄にする フォームに入力エラーが出て、この送信によるメールは増えない

空欄のテストでは、見た目も確認します。
今回の本文なら、問い合わせ内容が空でも「お問い合わせ内容:」というラベルは残ります。
この表示でよいか、任意項目の扱いとして判断してください。

日本語・改行のテストには、たとえば次の内容が使えます。

資料を希望します。
希望時間:10:00〜12:00(火・木)
比較したい内容:A & B

新しいメールが増えないテストでは、過去のメールと区別するため、送信前後の件数も見ます。
ほかの操作で届いたメールは含めず、このフォームと試験時刻に対応するものを確認しましょう。

上の表は、フォームを変更した後の確認用にも使えます。
HTMLメールや添付ファイルを使う場合は、本文の表示や添付内容など、そのフォームに必要な項目を追加してください。

【5】 Mailpitに表示されない・1通しかないときに見るところ

まずは、このローカル環境の中で原因を探します。
Gmailの設定やDNSを変更するところから始める必要はありません。

状況 最初に見るところ
どちらのメールもない フォームに入力エラー・送信エラーが出ていないか。正しいサイトのMailpitを開いているか
別の件名・古いメールしかない 試験用の件名と時刻。開いているページが、設定したフォームを使っているか
通知だけがある 「メール (2) を使用」のチェック、送信先のタグ、メール(2)の設定警告
メールが外部の受信箱へ届く 外部SMTP・メール配信プラグインなど、標準と異なる送信経路がないか。追加の送信を止めて設定を確認する

CF7のメール(2)は、最初の通知メールの送信が成功した場合に実行されます。
通知側の送信が失敗しているなら、先にそちらを確認してください。

【6】 公開前は、本番のフォームで受信まで確認する

ここまでで確認するのは、フォームから生成されるメールの内容です。
本番のSMTP認証や配送、迷惑メールへの振り分けは別に確認が必要です。

公開時には、テスト用の宛先・差出人・返信先・文面が残っていないかを確認します。
そのうえで、実際のフォームから送信し、運営者への通知と問い合わせ者への自動返信を、それぞれ受信箱で確かめましょう。

ローカルで内容を整えておけば、本番では配送や受信の確認へ集中できます。
届かない場合の調べ方は、こちらにまとめています。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?