ワードプレスで管理者と申込者へ自動返信メールを送信できるお問い合わせフォームを設置する方法

WPホームページ研究所運営サポートチーム監修のオムスビ（@OMUSUVIcom）です。

ワードプレスに「自動返信メール付きのお問い合わせフォーム」を設置する手順をご紹介いたします。コツを覚えてしまえばカンタンなのでぜひお試しください。一度でも設定を完了しておけば追加でワードプレスをインストールした際も設置済みの設定画面をカンニングできるので便利ですね。

まずは管理画面へログインしてプラグインの「新規追加」を開きましょう。

追加画面が開いたら右上のキーワードボックスに「contact form 7」と入力して検索をかけましょう。

すると下に検索結果が表示されます。

いつくか関連するプラグインが表示されていますが、一番左上にある「Contact Form 7」をインストールしていきましょう。では「今すぐインストール」をクリック。まずはインストールを行ってください。

インストールが完了したら「有効化」。

有効化が完了したら設定画面へ移動しましょう。管理画面の左メニューに「お問い合わせ」という項目が追加されていますので、サブメニューに表示されている「コンタクトフォーム」をクリックして進めてください。

設定画面が開くとインストールと同時に作成されるサンプルフォームが１つ出てきます。「コンタクトフォーム１」をクリックして中を開きます。設定を変更してお問い合わせフォームを作っていきましょう。

フォームというタブが開きますので中身（設定）を編集していきましょう。参考までに当サイトで使用しているソースをそのまま掲載しておきますね。

<p><label> お名前 <span style="color:red;">*</span>
    [text* your-name placeholder "例）山田 太郎"] </label></p>
<p><label> メールアドレス <span style="color:red;">*</span>
    [email* your-email placeholder "例）taro@example.com"]</label></p>
<p><label> 題名
    [text your-subject placeholder "例）プラグインについて"]</label></p>
<p><label> メッセージ本文
    [textarea your-message placeholder "はじめまして、山田と申します。"]</label></p>
[submit "上記内容で送信する"]

ちなみに当サイトでは「必須」という文言の代わりに「*」マークを使っています。そして、フォームの入力に迷わないようにあらかじめ規定の文字を設定（placeholder属性）しています。このあたりはデフォルト状態のままでも問題ありませんのでご希望に併せて調整してみてください。では次に「メール」タブに移動して自動返信メールを設定していきましょう。１つずつ設定を変更していけばカンタンに終わります。

この箇所の設定はフォーム送信時に管理者宛へ届くメールとなります。上記では「info@wp-labo.com」のドメインメールを活用していますが、もし「info@example.com」などの独自ドメインメールを発行されていない場合は管理用の「Gmail」や「yahooメール」で代用しても問題はありません。念のためにコピペ用として各テキストを掲載しておきますね。それぞれを自分自身の環境に合わせて使用してくださいませ。

▼送信先
info@example.com

▼送信元
サイト名 <info@example.com>

▼題名
[サイト名]ウェブサイトよりお問い合わせがありました

▼追加ヘッダー
Reply-To: [your-email]

▼メッセージ本文
差出人: [your-name] <[your-email]>
題名: [your-subject]

メッセージ本文:
[your-message]

-- 
このメールは サイト名 (http://example.com) のお問い合わせフォームから送信されました

次に申込者（フォーム送信者）へ届くメールを設定していきましょう。

こちらも念のために各設定したテキスト内容を掲載しておきますね。

▼送信先
[your-email]

▼送信元
サイト名 <info@example.com>

▼題名
[サイト名]お問い合わせありがとうございました

▼追加ヘッダー
Reply-To: info@example.com

▼メッセージ本文
[your-name]様

この度はお問い合わせありがとうございます。

折り返しご連絡させていただきますが、
数日お時間をいただく場合がございます。

何卒ご了承くださいませ。

━━━━━━━━━━━━━━━━━━━━━━━━
以下の内容でメールを受け付けました。
━━━━━━━━━━━━━━━━━━━━━━━━
■お名前
[your-name]

■メールアドレス
[your-email]

■題名
[your-subject]

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

━━━━━━━━━━━━━━━━━━━━━━━━

◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇
　株式会社EXAMPLE 署名管理部 エグザンプル
　署名 太郎 / SHOMEI TARO
　〒000-0000 東京都XX区XX XXビル XF
　TEL: 00-0000-0000 FAX: 00-0000-0000
　Email: taro@example.com
　URL: http://example.com
◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇

以上でフォームの設定は完了です。入力が終わったら最下部の保存ボタンをクリックします。そして、固定ページにフォームを設置していきましょう。設置専用のショートコードをコピーしておいてください。ショートコードをダブルクリックすれば色が反転してすべて選択されますので右クリックでコピーしておけばOKです。

固定ページから「お問い合わせページ」を準備していきます。次に「固定ページ > 新規追加」をクリック。

💻SEOに強いWordPressテーマ

⇒ 大人気のワードプレステーマ「賢威」 ※ 2万を超えるお客様がご使用中！

タイトルに「お問い合わせ」と入力したらパーマリンクを「contact」と設定してください。そして、本文にさきほどのショートコードをペーストすればOKです。パーマリンクはお好みで変更しても構いません。

各入力が完了したら「公開」ボタンを押して設置ページを公開しましょう。

以上で設定が完了しました。最後に「example.com/contact」を開いて設置状態を確認してください。

無事、お問い合わせフォームが表示されていますね。各入力フォームにも透かし文字（placehoder）も正常に出ています。自動返信付きのお問い合わせフォームがあれば閲覧者から相談を受け付けたり、セミナー募集用に専用フォームを設けたりさまざまなご活用が可能となります。とても便利な機能なのでぜひご利用ください。