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

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

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

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

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

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

インストールが完了したら「有効化」をクリックしてください。

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

設定画面が開くとインストールと同時に作成されるサンプルフォームが1つ出てきます。「コンタクトフォーム1」をクリックして中を開きます。

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

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

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

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

▼送信先
info@example.com

▼送信元
[your-name] <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
◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇◆◇

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

そして、固定ページから「お問い合わせページ」を準備していきます。管理画面の「固定ページ > 新規追加」をクリックしてください。

タイトルに「お問い合わせ」と入力したらパーマリンクを「contact」と設定してください。そして、本文にさきほどのショートコードをペースト。

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

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

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

最新式のプラグインを事前公開!

WordPressは公式サイトに登録されているプラグインだけでは機能を補足しきれません。当サイトでは使いやすさを追求した魅惑的なプラグインを無料でダウンロードいただけます。オウンドメディアのマーケティング力をさらに高めるチャンスです。まずはフリーDLからお試しくださいませ。
改良されたプラグインを確認する