Wordpress　問合せページ（Contact Form 7）

お問合せページを作る（フォームの作成）

お問合せページを作る（フォームの作成）

利用者がお問合せページを利用した時の流れ

以下はお問合せページ(フォーム)作成の全行程です。

Step1. プラグイン「Contact Form 7」をインストールする
Step2. お問合せフォームの作成
Step3. フォーム作成と自動返送メールの設定
Step4. スパム防止プラグイン「Advanced Google reCAPTCHA」をインストール

Step1. プラグイン「Contact Form 7」をインストール

お問合せページはプラグインの「Contact Form 7」を使って作成します。

インストール手順：
プラグンイン ⇨ 新規追加 ⇨ プラグインの検索で「Contact Form 7」と入力 ⇨ 今すぐインストール ⇨ 有効化 ⇨ 左爛に「お問合せ」が追加される

Step2. お問合せぺージの作成

まずは仮のお問合せページを作成します。現段階ではページのみ設定し、後のStepで作成する入力フォームのコードをこちらの仮ページに入力してお問合せページは完成となります。

設定手順：
「投稿」または「固定ページ」※固定ページで作成するのが一般的です。 ⇨ 新規追加 ⇨ タイトルを入力(お問合せフォームでよい) ⇨ 更新 ⇨
・こちらのぺージに次のStep3で設定する「フォームのコード」を入力する

Step3. フォーム作成と各メールの設定

・「フォームのコード」を作成

A.お問合せ ⇨
B.新規追加 ⇨
C.フォームに名前を付ける ⇨
D.フォーム ⇨
E.それぞれのフォームタグを設定する(詳しくは以下『・フォームタグを設定する』参照) ⇨

・フォームを必須項目にする設定はこちら　　　　　　　　　　　　　　　　　　　　　　　　

必須項目にしたいフォームのD.タグ ⇨「必須項目」にチェックを入れる ⇨ タグを挿入 ⇨ タグ領域に [タグ* 名前 ] と記述される ⇨ E.保存

・フォームに文字を入れる設定はこちら　　　　　　　　　　　　　　　　　　　　　　　　　

・フォーム入力爛の前に文字を入れる

タグ領域に記述されている「文字を入れたいフォームタグ」を<label></label>タグで囲む

(例：テキストフォームに文字を入れたい場合)
<label>※ここに入力※[text 名前]</label>

(例：テキストエリアに文字を入れたい場合)
<label>※ここに入力※[textarea 名前]</label>

※チェックボックスとラジオボタンは不可

・フォーム入力爛内に文字を入れる(記入例を入れる)

文字を入れたいフォームのD.タグ
⇨「ディフォルト値」に入れたい文字を入力
⇨「✅このテキストを項目のプレースホルダーとして使用する」
⇨ タグを挿入
⇨ タグ領域に [タグ名前 placeholder “入力した文字”]と記述される
⇨ E.保存

・フォーム入力画面の任意の箇所に文字を入れる

タグ領域の文字を入れたい箇所に以下を入力する。

<label>ここに入れたい文字を入力</label>

F.保存
G.に表示されるショートコードをStep2で作成したぺージに貼りつける
(フォームを入れたい箇所をクリック ⇨ ⊞ ⇨ 段落 ⇨ ショートコードをペーストする)

・「受け取りメール」の設定

利用者からの問合せ情報を「管理者へ届くメール」で受け取る設定

A.お問合せ ⇨ B.メール ⇨ 以下１～５の順に設定 ⇨ C.保存

１．送信先

送信先(管理者)のメールアドレスを入力
※こちらで設定するメールアドレスはwordpressを設置したレンタルサーバーで作ったメールアドレスをお勧めします。
Gmailなど送信できないアドレスもございます(原因はサーバーの違い)
※どうしてもGmailなどの他のメールアドレスにしたい場合は以下の２つの方法がございます。

【方法１】メールを転送する。※おすすめ
________________________________________
一旦こちらの設定ではレンタルサーバーで作ったメールアドレスにして、別途レンタルサーバー側のメール設定でご希望のメールアドレス宛てに転送するように設定してください。
(送信)➨レンタルサーバーのアドレス━(転送)➨ご希望のメールアドレス

【方法2】プラグイン『WP Mail SMTP by WPForms』を使用
________________________________________
プラグイン
⇨ 新規追加
⇨ 「WP Mail SMTP」を検索
⇨ WP Mail SMTP by WPFormsプラグイン（ハトのアイコン）
インストールして有効化
⇨ セットアップウィザードが表示されるがここでは無視して、下部の「ダッシュボードに戻る」をクリック
⇨ ダッシュボードに『WP Mail SMTP』が追加されるのでクリック ⇨
⇨ 「一般」
⇨ 「送信元メールアドレス」に設定したい自身のメールアドレスを入力「フォーム名」に差出人の名前を入力
⇨ 「メーラー」から「Google/Gmail」にチェック
⇨ 以下こちらで解説
⇨ 「設定を保存」

２．送信元

管理者がメールを受信した時の「サイトの名前」になります。以下の２通りの設定ができます。

①サイトのタイトルにする：
ディフォルトの([_site_title] wordpress@サイトのアドレス)ままでよい。※基本的にはこちらで大丈夫です。サイトのタイトル自体を変更する場合は　設定 ⇨ 一般 ⇨ サイトのタイトル

②任意の文字を指定する場合：
以下を記入してください
こちらに任意の文字を記入<任意の英数字@wordpressサイトのアドレス>
（入力例）広告制作アイイエス<wordpress@ad.iyes.jp>

３．題名

メールを受信した時の「メールの件名」になります。任意の文字を入力してください。
（入力例）ホームページよりお問合せがあります。

４．追加ヘッダー

メールを受信した時に、”[Reply-To]”つまり「返信先」という項目を追加します。※利用者のメールアドレスを”返信先”という項目で知らせてくれる。こちらの項目を空白にすると「送信先」という項目がなくなります。基本的にディフォルトのままでよいです。
Reply-To: [your-email]

※前項のフォームタグ設定の際にメール入力フォーム [email* your-email] を設定しておかないとエラーとなります

５．メッセージ本文

メールの本文を設定します。
文字入力と前項で設定したフォームタグの名前(［フォームタグ ※名前］)を[]内に指定して設定します。
（記入例）[text your-name] ➡ [your-name]

_________(フォームタグ) ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿　
お名前[text your-name]
メールアドレス[email* your-email]
お問合せ内容[textarea your-message]
　　　　　　　⇩⇩⇩⇩

_________(メッセージ本文入力例) ＿＿＿＿＿＿＿＿＿＿＿＿　
差出人：[your-name][your-email]
メッセージ本文：[your-message]
　　　　　　　⇩⇩⇩⇩

_________(メールでの表示) ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
差出人：田中太郎　　●●＠〇〇.com
メッセージ本文：入力したお問合せ内容

・「自動返信メール」の設定

自動返信メールとは問い合わせをした利用者に折り返して自動的に届くメールです。

A.「メール（２）を使用」に✅ ⇨ 以下の１～５の順に設定 ⇨ B.保存

１．送信先

送信先(利用者)のメールアドレスになるように『① Webブラウザフォーム入力画面の作成』で作成したタグを入れる。
(入力例）[email* your-email]

２．送信元

利用者が返信メールを受信した時のメールの「サイトの名前」と「送信元のメールアドレス」となります。以下の２通りの設定ができます。

①サイト名　< ②送信元のメールアドレス >

① 自動返信メールのタイトルとなります。任意の文字で大丈夫ですがこちらはサイト名や会社名が妥当でしょう
② 送信元のアドレス（あなたのアドレス）となります。
★ディフォルトの『 [_site_title] <wordpress@サイトのアドレス> 』だと登録者に届く自動返信メールを開くときになりすましメールに対する警告が表示される場合がございますので、ここは『自社のメールアドレス』を記入してください。またフリーメル（Gmailやヤフーメール）でも傾向が出るので避けましょう

３．題名

メールを受信した時の「メールの件名」になります。任意の文字を入力してください。
（入力例）ホームページよりお問合せがあります。

４．追加ヘッダー

メールを受信した時に、”[Reply-To]”つまり「返信先」という項目を追加します。※利用者のメールアドレスを”返信先”という項目で知らせてくれる。こちらの項目を空白にすると「送信先」という項目がなくなります。基本的にディフォルトのままでよいです。
Reply-To: [your-email]

※前項のフォームタグ設定の際にメール入力フォーム [email* your-email] を設定しておかないとエラーとなります

５．メッセージ本文

メールの本文を設定します。
文字入力と前項で設定したフォームタグの名前(［フォームタグ ※名前］)を[]内に指定して設定します。
（記入例）[text your-name] ➡ [your-name]

_________(記入例) ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
[your-name]様
この度はお問い合わせありがとうございます。内容を確認させていただいた後、ご返信いたしますのでもう少々お待ちください。
このメールは広告制作アイイエスのサイト(https://www.ad.iyes.jp)のお問い合わせフォームから送信されました。

このメールは[_site_title][_site_url] のお問い合わせフォームから送信されました。
例：[text your-name] ➡ [your-name]

_________(フォームタグ) ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿　
お名前[text your-name]
メールアドレス[email* your-email]
お問合せ内容[textarea your-message]
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
　　　　　　　⇩⇩⇩⇩
_________(メッセージ本文入力例) ＿＿＿＿＿＿＿＿＿＿＿＿　
差出人：[your-name][your-email]
メッセージ本文：[your-message]
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
　　　　　　　⇩⇩⇩⇩
_________(メールでの表示) ＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿
差出人：田中太郎　　●●＠〇〇.com
メッセージ本文：入力したお問合せ内容
＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿＿

・メッセージの設定

メールの送信後などに表示されるメッセージを編集できます。基本的にディフォルト（何も設定しない）のままでも問題はございませんが、編集したい方は以下を参照に編集してください。

A.お問合せ
⇨ B.メッセージ
⇨ C.各項目ごとに設定
⇨ D.保存

Step4. スパム防止プラグイン「Advanced Google reCAPTCHA」をインストール

「Advanced Google reCAPTCHA」は、WordPressサイトにGoogleのreCAPTCHA機能を簡単に導入できるプラグインです。このプラグインを使うと、コメント欄やログインページ、登録フォーム、パスワードリセットフォーム、コンタクトフォームなど、さまざまなフォームにreCAPTCHAを追加して、スパムやボットからの保護を強化できます。
※ まずプラグイン「Advanced Google reCAPTCHA」を利用するにはGoogleアカウントが必要なので事前に用意してください。

・プラグイン「Advanced Google reCAPTCHA」をインストール

①「プラグイン」⇨
②「新規プラグインを追加」⇨
③ 検索に「Advanced Google reCAPTCHA」と入力 ⇨
④ Advanced Google reCAPTCHAをインストール ⇨
⑤ 有効化 ⇨

「reCAPTCHA」にgoogleアカウントでログイン

reCAPTCHAのホームページ「https://www.google.com/recaptcha」にアクセスしてください。
⑥ 画面上部の「v3 Admin Console」をクリック ⇨
⑦ googleアカウントログイン画面に移りますのでログインしてください。（すでにログインしている方はこちらは表示されません⑧に進みます。）

「reCAPTCHA」のホームページにお問合せフォームを設置するサイトを登録

reCAPTCHAのホームページに戻ります。（左図のページが表示されない場合はトップページに移動して前項⑥「v3 Admin Console」をクリック）
⑧「ラベル」にお問合せフォームを設置するサイト名を入力する。ドメインを推奨（例：ad.iyes.jp）⇨
⑨ 「reCAPTCHA タイプ」から「reCAPTCHA v3」を選択
（v3はAIが判断、v2は承認画像で利用者にとって手間がかかる仕様なのでv3がおすすめ）⇨
⑩ 「ドメイン」に⑧と同じく登録するサイトのドメインを入力する⑧と同じで良い。（例：ad.iyes）⇨
⑪「オーナー」の欄に自身のGmailアドレスが表示されているか確認 ⇨
⑫「reCAPTCHA 利用条件に同意する」に「チェックを入れる」⇨
⑬「送信」
reCAPTCHAの利用登録が完了

「reCAPTCHA」からapiキーを取得し問い合わせフォームに設定する

「reCAPTCHA」からapiキーを取得

登録完了するとApiキーの「サイトキー」「シークレットキー」が表示されるので、それぞれコピーしてメモ帳に貼り付けておきましょう。
⑭「サイトキー」⇨
⑮「シークレットキー」⇨　

：wordpressの管理画面に移動してください：
⑯「お問合せ」 ⇨
⑰「インテグレーション」⇨
⑱ reCAPTCHA欄の「インテグレーションのセットアップ」⇨
⑲「サイトキー」 ⇨
⑳「シークレットキー」 ⇨
㉑「変更を保存」サイトを開いて右下に「reCAPTCHAのマークが表示されていれば成功」

備考. プラグイン「Advanced Google reCAPTCHA」を同アカウントで別サイトに設置

「Advanced Google reCAPTCHA」はすでに設定済みで、別のサイトでも同じアカウントを使用したい場合について説明します。

reCAPTCHAのホームページ「https://www.google.com/recaptcha」にアクセスしてください。
① 画面上部の「v3 Admin Console」」⇨
② 画面上部右の「＋」 ⇨
③「ラベル」に追加するサイトのドメインを入力
（例：second.iyes.jp） ⇨
④「reCAPTCHAタイプ」から「スコアベース（v3）」を選択
（画像認証にしたい場合はチャレンジ（v2）を選択） ⇨
⑤「ドメイン」に追加したいサイトのURLを記入
（例：second.iyes.jp） ⇨
⑥「プロジェクト名」に任意の名前を英語で入力
（例：projectiyes） ⇨
⑦「送信」 ⇨
⑧「サイトキー」と　⑨「シークレットキー」が発行される ⇨

：wordpressの管理画面に移動：
⑩「お問合せ」 ⇨
⑪「インテグレーション」⇨
⑫ reCAPTCHA欄の「インテグレーションのセットアップ」⇨
⑬「サイトキー」 ⇨
⑭「シークレットキー」 ⇨
⑮「変更を保存」サイトを開いて右下に「reCAPTCHAのマークが表示されていれば成功」

お問合せフォームのテンプレート

以下にお問合せフォームのテンプレートを用意いたしました。参考にしてください。

・テンプレート１：簡易問い合わせフォーム　　　　　　　　　　　　　　　　　　　　

フォームの作成

Contactform7の『フォーム』設定：以下のコードを張り付ける

お名前（必須） [text* your-name autocomplete:name]

フリガナ（必須） [text* your-furigana autocomplete:name]

メールアドレス（必須） [email* your-email autocomplete:email]

お問合せ内容をご記入ください[textarea your-message]

[submit “送信”]

フォーム入力ぺージの見本

受け取りメール（管理者へのメール)の設定

Contactform7の『メール』設定：以下を入力

送信先…………… 管理者(あなた）のメールアドレス
送信元…………… サイト名<wordpress@【wordpressのドメイン】>
題名……………… お問合せがあります
追加ヘッダー…… Reply-To: [your-email]
メッセージ本文… 以下を入力

【サイト名】からお問合せがあります。
差出人: [your-name] [your-email]

【お問合せ内容】
お名前：[your-name]
フリガナ：[your-furigana]
メールアドレス：[your-email]
お問合せ内容：[your-message]

このメールは【サイト名】([_site_url])のお問い合わせフォームから送信されました

※ヤフーメールの表示例です

自動送信メール（利用者へのメール)の設定

Contactform7の『メール(2)』設定：以下を入力

送信先…… [your-email]
送信元…… サイト名<wordpress@【wordpressのドメイン】>
題名……… お問合せありがとうございます
追加ヘッダー………… Reply-To: [your-email]
メッセージ本文……… 以下を貼りつけてください

【サイト名】です。
この度はお問い合わせありがとうございました。内容を確認次第、追ってご返信いたしますのでもうしばらくお待ちください。

【お問合せ内容】
差出人: [your-name] [your-email]
お名前：[your-name]
フリガナ：[your-furigana]
メールアドレス：[your-email]
お問合せ内容：[your-message]

このメールは【サイト名】([_site_url])より自動返信されたものです。※身に覚えのない方は削除してください。
【サイト名】
所在：〒000-0000 東京都〇〇区〇〇町
電話番号：000-000-0000
メール：〇〇＠〇〇.com

※ヤフーメールの表示例です

・テンプレート２：各種選択肢ありの問い合わせフォーム　　　　　　　　　　　　　　

フォームの作成

Contactform7の『フォーム』設定：以下のコードを張り付ける

お名前（必須） [text* your-name autocomplete:name]

フリガナ（必須） [text* your-furigana autocomplete:name]

お問合せ種別（複数選択可能・必須）
[checkbox* checkbox-about use_label_element “商品について” “注文について” “料金について” “発送について”]

性別（必須）[radio radio-sex use_label_element default:1 “男性” “女性”]

生年月日2025/04/30

職業（必須）[select* menu-job include_blank “会社員” “自営業” “パート” “学生”]

電話番号[tel tel-number placeholder “こちらに半角数字で入力”]

メールアドレス（必須）[email* your-email autocomplete:email]

メッセージ[textarea your-message]

[submit]

フォーム入力ぺージの見本

受け取りメール（管理者へのメール)の設定

Contactform7の『メール』設定：以下を入力

送信先…………… 管理者(あなた）のメールアドレス
送信元…………… サイト名<wordpress@【wordpressのドメイン】>
題名……………… お問合せがあります
追加ヘッダー…… Reply-To: [your-email]
メッセージ本文… 以下を入力

【サイト名】からお問合せがあります。
差出人: [your-name] [your-email]

【お問合せ内容】
お名前：[your-name]
フリガナ：[your-furigana]
お問合せ種別：[checkbox-about]
性別：[radio-sex]
生年月日：[date-birth]
職業：[menu-job]
電話番号：[tel-number]
メールアドレス：[your-email]
メッセージ：[your-message]

このメールは【サイト名】([_site_url])のお問い合わせフォームから送信されました

※ヤフーメールの表示例です

自動送信メール（利用者へのメール)の設定

Contactform7の『メール(2)』設定：以下を入力

送信先…… [your-email]
送信元…… サイト名<wordpress@【wordpressのドメイン】>
題名……… お問合せありがとうございます
追加ヘッダー………… Reply-To: [your-email]
メッセージ本文……… 以下を貼りつけてください

【サイト名】です。
この度はお問い合わせありがとうございました。内容を確認次第、追ってご返信いたしますのでもうしばらくお待ちください。

【お問合せ内容】
お名前：[your-name]
フリガナ：[your-furigana]
お問合せ種別：[checkbox-about]
性別：[radio-sex]
生年月日：[date-birth]
職業：[menu-job]
電話番号：[tel-number]
メールアドレス：[your-email]
メッセージ：[your-message]

このメールは【サイト名】([_site_url])より自動返信されたものです。※身に覚えのない方は削除してください。
【サイト名】
所在：〒000-0000 東京都〇〇区〇〇町
電話番号：000-000-0000
メール：〇〇＠〇〇.com

※ヤフーメールの表示例です

各エラーと対処法

フォームが送信されない
（エラー表示が出る）

原因①：
送り先のドレスをgmailに設定しているとメールサーバーの違いが原因でエラーとなる可能性があります。
対処法：
送り先のドレスをgmail以外のものにしてください。

原因②：
プラグインやテーマの競合
Contact Form 7が他のプラグインやテーマと競合している可能性もあります。特に、キャッシュ系プラグインやセキュリティ系プラグインと干渉する場合があります。
対処法：
競合の可能性を確認するため、一時的に他のプラグインを無効にしてみるのも方法です。

原因③：
スパム対策プラグイン「reCAPTCHA」のApiキーが違う※当方こちらで解決経験あり
Apiキー（サイトキーとシークレットキー）が間違っているか別のものになっている。
対処法：
正しいキーに変更する。
reCAPTCHAのホームページ「https://www.google.com/recaptcha」にアクセスしてください。
① 画面上部の「v3 Admin Console」」⇨
② 画面上部右の「＋」 ⇨
③ 画面左上に表示されるアカウント名をクリック ⇨
④ 左上の「設定（歯車マーク）」⇨
⑤「reCAPTCHAのキー」横の「ｖ」⇨
⑥「サイトキー」と「シークレットキー」が表示されるのでそれぞれをコピー
⑦ wordpressの管理画面に移動 ⇨
⑧「お問合せ」 ⇨
⑨「インテグレーション」⇨
⑩ reCAPTCHA欄の「インテグレーションのセットアップ」⇨
⑪「サイトキー」 ⇨
⑫「シークレットキー」 ⇨
⑬「変更を保存」サイトを開いて右下に「reCAPTCHAのマークが表示されていれば成功」

原因④：
テストで何度も連続で送信した
何度も連続でお問合せを送信するとスパム扱いされてエラーになる。オレンジの枠で「メッセージの送信に失敗しました。後でまたお試しください。」とでたらスパムエラー。
解決方法：
(※プラグイン「reCAPTCHA」をインストールしている場合)reCAPTCHAのサイトに移動し「【サイトのURL】の設定」を削除して再び「【サイトのURL】の設定」を行う
①「https://www.google.com/recaptcha/about/」に移動 ⇨
②「v3 Admin Console」⇨
③ 左上が「rq.iyes.jp」となっているのを確認して右上の「設定」⇨
④ 右上のゴミ箱をクリックし削除する ⇨
⑤ 新たに【サイトのURL】を作るために全画面に戻って右上の「＋」⇨
⑥「ラベル」⇨
⑦ 登録するメルアドを入力する。ここでは「rq.iyes.jp」【★】・「ドメイン」⇨
⑧ 登録するメルアドを入力する。ここでは「rq.iyes.jp」【★】・「送信」⇨
⑨ 新たにキーが作られている。以前のサイトキーとシークレットキーを削除して新たに作ったキーを入力する
⑩「お問合せ」⇨
⑪「インテグレーション」⇨
⑫ reCAPTCHA欄の「インテグレーションのセットアップ」⇨
⑬「キーを削除」⇨
⑭「変更を保存」

登録者がフォーム送信後の自動返信メールを開こうとすると「Fromに▲アイコンが表示され「メールはなりすましメールの可能性があります。メールを開く場合は十分ご注意ください。」という警告が表示される。

この警告は、メールの送信元アドレスが不正または信頼できないと判断された場合に表示さる。

原因：
「送信元」のアドレスにフリーメール（例: Gmail、Yahooなど）や存在しないメールアドレスを設定している場合、信頼性が低いと判断される。
対処法：
「お問い合わせ」⇨
「該当のフォームを選択」⇨
上部「メール」⇨
「メール(２)」欄の「送信元」のアドレスを信頼性のあるものに変更する ⇨
「保存」
※当方解決経験あり。『広告制作アイイエス <wordpress@当サイトドメイン> 』と記入したら警告表示が出たので『広告制作アイイエス〈当方のメールアドレス〉』に変更したら解決いたしました

お問合せページを作る（フォームの作成）

Step1. プラグイン「Contact Form 7」をインストール

Step2. お問合せぺージの作成

Step3. フォーム作成と各メールの設定

・「フォームのコード」を作成

・「受け取りメール」の設定

・「自動返信メール」の設定

・ メッセージの設定

Step4. スパム防止プラグイン「Advanced Google reCAPTCHA」をインストール

備考. プラグイン「Advanced Google reCAPTCHA」を同アカウントで別サイトに設置

お問合せフォームのテンプレート

各エラーと対処法

・メッセージの設定