【Contact Form 7】 コンタクトフォームの作成と電話番号とURLの追加方法(画像付き)

ホームページやブログを運営してると何かあった時のために問い合わせフォームが必要だよね?

必要ナシとは言えない🍐

【WordPress】ブログにコンタクトフォームの作成と設置する方法

プラグイン『Contact Form 7』を用いる設置方法について記載していきます。

【Contact Form 7の設定の手順①】 プラグインのインストールと有効化をクリック

WordPressの左画面からプラグインを選択『Contact Form 7』を検索有効化にします。

【Contact Form 7の設定の手順②】新規追加をクリックして作成画面を表示

WordPressの左画面からお問い合わせ新規追加をクリックまたはタップで新規作成画面に移ります。

【Contact Form 7の設定の手順③】 フォーム項目の設定

labelラベル名の指定
text* your-nameあなたの名前を文章で
email* your-emailあなたのアドレスをemailで
text your-subject題名を文章で
textarea your-messageテキストエリアにメーセージを
submit “送信”ボタン名を”送信”というワードに指定
プラグイン:Contact Form 7のデフォルトのフォームタグの意味

【フォームのテンプレートの問い合わせ画面】

※実際に、この文面でテストした様子を下記に画像付きで記載していますのでサンプルとして参照してみて下さい。

フォームは、初期の状態(デフォルト)のテンプレートでも問題なく使えますが、
ホームページやブログの運営の仕方によって日時/電話番号/URLなどの詳細項目を設置したい方は必要に応じて追加してください。

【Contact Form 7の設定の手順④】 コンタクトフォームに「電話番号」と「URL」を追加する方法

※電話番号とURLのタグの生成の手順は同じなので「電話番号」を例に挙げて記載していきます。

初めにフォームの項目に並んでいるボタンの中から電話番号をクリックしてフォームのタグの生成:電話番号のページを開きます。

次に、タグの名前を入力(※名前は自由ですが今回はyour₋telという名前を入力していますしてタグの挿入をクリックすると電話番号のタグtel your-telが生成されます。

今度は、生成されたタグを<label>電話番号 [tel your-tel] </label>のようにタイトルを入力してラベルで囲んでください。

そうすると問い合わせの項目に反映されます。

※ただし、この項目に入力した名前(値)をメールの項目で使用するには、対応するメールタグ [your-tel]をメールタブ上の項目に挿入する必要があります。

問い合わせメールに追加したタグが記載されるようにするには、メール項目のメール(1)のメッセージ本文に先ほど生成したタグ名[your-tel]を入力する必要があるよ♪(画像

【Contact Form 7の設定の手順⑤】メールの項目の設定と管理者用の送信先アドレスを変更する方法

site_admin_emailはWordPressに設定している管理者用のメールアドレスになります。


そのため、問い合わせ用のアドレスと分けておきたい場合には送信先に設定されているデフォルトのコードを削除して問い合わせ用のアドレスを入力しておきましょう。

※例えば、[~@gmail.com]のようにアドレスを直接入力してもメッセージは正常に送信されます。


※他に使用しているアドレスと混同しないように問い合わせ専用のメールアドレスに設定しておくことを推奨します。

【Contact Form 7の設定の手順⑥】メッセージの設定

メッセージの項目は送信時に何かあった時に表示できるメッセージを編集・設定できます。テンプレートのままで必要十分ですが文言を変更したい場合は編集してください。

【Contact Form 7の設定の手順⑦】その他の設定

その他の設定は、カスタマイズ用のコードを入力する場所です。コンタクトフォームの設置には直接関係しない項目なのでそのままでも大丈夫です。

【Contact Form 7の設定の手順⑧】最終確認とショートコードのコピー

※この画面はメール(1)です。

差出人の電話番号[your-tel]
サイトのURL[url-site]
追加したタグをメール項目のメッセージ本文に入力

※タグだけでも表示されるようになりますが、分かりやすいように名前を入力しています。

※[url-site]はURLのタグ生成時に付けた名前です。

そして、最終確認が済んだらお問い合わせフォーム用の固定ページを作成するために青い帯部分のショートコードをコピーしておきます。

【Contact Form 7】固定ページでお問い合わせフォーム用の記事を作成する

固定ページ一覧新規追加タイトル入力ショートコード貼り付けパーマリンクの設定公開の手順でお問い合わせフォーム用のページの完成です。

※タイトルは「コンタクトフォーム」「お問い合わせフォーム」「お問い合わせ」などが定番です。


※パーマリンクはデフォルトでは日本語表記ですのでアルファベットにしたい場合は手動で入力してください。

【Contact Form 7】お問い合わせフォームが正常に作動するかを確認

実際にコンタクトフォームを使用した送受信のサンプル
  • 見本.1
    差出人からサイト運営者に届くメール画面のスクリーンショット

    差出人問い合わせ太郎
    (※見本)
    宛先サイトの運営者
    入力した題名お問い合わせテスト中
    入力した本文お問い合わせです
    コンタクトフォームから届く差出人と宛先
  • 見本.2
    サイト運営者から差出人に届く自動返信メール画面のスクリーンショット

    ※自動返信の文言を付け加える場合は、コンタクトフォームの設定編集メールメール(2)のメッセージ本文から変更・追記できます。

  • 見本.3
    「電話番号」と「URL」を追加して着信したメール本文のスクリーンショット

ねぇねぇ、自動返信の設定ってどこにあるの?

これから説明していくね♪

【プラグイン:Contact Form 7】自動返信メールを差出人に送るには『メール(2)』の設定が必要

コンタクトフォーム7のメール(2)はどこにあるの?

問い合わせの差出人へ自動返信メールを送りたい場合には、先ほどのコンタクトフォームのメール項目を下にスクロールする(下にページを進める)とメール(2)を使用するのボックスがあります

そこにチェックを入れると新たに項目が表示されるので設定をしていきましょう。

※メール(2)の項目はサイト運営者側から差出人へ自動返信メールする時の設定になります。

また、追加ヘッダーのReply-To _site_admin_emaiもWordPressに設定している管理者用のメールアドレス宛への返信のことなので問い合わせ用のメールアドレスと分ける場合は変更または空白しておきましょう。

追加ヘッダーを変更する場合は、Reply-To: ~@gmail.comのように入力します。

※Reply-To:が無い状態で入力するとエラーになります。

【プラグイン:Contact Form 7】メールの追加ヘッダーにある【Reply-To:】って何?

【Reply-To:】 は受信したメールに対して再び返信する際の返信先を指定するためのものです。

(例) ※架空のメールアドレスです。

[AAA@1234.com]というアドレスをメール(1)送信先に設定し、
[BBB@6789.com]をメール(2)の追加ヘッダーに設定している場合。

上記の設定の場合、
①コンタクトフォームから問い合わせがあると(メール1)の設定により、差出人からサイト運営者の[AAA@1234.com]に着信します。


差出人がサイト運営者からの自動返信メールに対して返信を送る場合(メール2)の設定により、返信先が[AAA@1234.com]宛ではなく[BBB@6789.com]宛に切り替わります。

「メール(1)の送信先」と「メール(2)の追加ヘッダー」のアドレスを同一にした場合は、どちらも[AAA@1234]宛になります。

【プラグイン:Contact Form 7】メール(2)の追加ヘッダーの項目を空欄/初期状態/変更にした場合の自動返信メールへの返信は、其々どうなるの?


1.【メール(2)の追加ヘッダー:空欄時】
※自動返信メールに返信できない




※追加ヘッダーを空欄した場合は、差出人が自動返信メールへの返信をできない設定になります。
(通販の送信専用メールに近いイメージでしょうか)



メール(2)の追加ヘッダーを空欄にした場合は差出人が自動返信メールに対して返信を試みると上記のようなエラーメッセージが届きます。

※サイト運営者は着信した問い合わせメールから差出人へ返信を行えますが、差出人が内容を追記したい場合には改めてコンタクトフォームからの問い合わせが必要です。

2.【メール(2)の追加ヘッダー:初期状態時】
※自動返信メールに返信できる



追加ヘッダーが初期の状態の場合は、WordPressの管理者用のメールアドレス宛に自動返信メールへの返信を行える設定になります。

(WordPressの管理者用のメールアドレスを差出人が把握できます)

3.【メール(2)の追加ヘッダー:問い合わせ用のアドレスを直接入力した時】
※自動返信メールに返信できる



問い合わせ用のメールアドレスに変更した場合は、問い合わせ用のメールアドレス宛に自動返信メールへの返信を行える設定になります。

(問い合わせ用のメールアドレスを差出人が把握できます)
【WordPressプラグイン】Contact Form 7:メール(2)追加ヘッダーの設定と自動返信メールへの返信の具体例
タイトルとURLをコピーしました