【Contact Form 7】 コンタクトフォームの設置と電話番号・URL項目の追加方法（画像付き解説）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

追記：最近ではGoogleアドレスを使用すると届かない通知が届かなくなっているのでレンタルサーバーでサイト専用のメールアドレスを用意しましょう。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

(2)の自動返信メールは、スパムやボットのメールに対しても自動返信してしまうことになるため未設定にしておいてもかまいません。

reCAPTCHAなどでスパム対策もしておきましょう。

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

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

【WordPressプラグイン】Contact Form 7:メール（2）追加ヘッダーの設定と自動返信メールへの返信の具体例（空欄／初期状態／変更）

1.メール(2)の追加ヘッダーを『空欄』にした場合

※自動返信メールに返信できない

↓

※メール(2)の追加ヘッダーを空欄にした場合は差出人が自動返信メールに対して返信を試みると上記のようなエラーメッセージが届きます。
↓
※サイト運営者は着信した問い合わせメールから差出人へ返信を行えますが、差出人が内容を追記したい場合には改めてコンタクトフォームからの問い合わせが必要です。

2.メール(2)の追加ヘッダーが『初期状態』の場合

※自動返信メールに返信できる

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

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

3.メール(2)の追加ヘッダーに『問い合わせ用のアドレスを直接入力』した場合

※自動返信メールに返信できる

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

（問い合わせ用のメールアドレスを差出人が把握できます）

【WordPress】固定ページのリンクをフッターメニュー・サイドバーに設置する方法（画像付き）

ブログやホームページに固定ページのリンクを設置する方法各項目ごとに重複するため、初めに共通する『ブログに作成した固定ページのリンクを載せる方法』から記載します。それでは、【フッターメニューまたはヘッダーメニューに設置したい場合】と【ウィジェ...

otoota.net