プラグインContact Form 7でお問い合わせページを設置する
お問い合わせ用のメールアドレスを用意する
コンタクトフォームをサイトに設置するにあたって、専用のメールアドレスを事前に用意しましょう。独自ドメインを使用している場合であれば、info@xxxxxx.com などです。
Contact Form 7のインストールと有効化の手順
まずは、WordPressにプラグインを追加します。
- WordPressの管理画面の左側メニューから「プラグイン」➔「新規追加」をクリックします。
- 画面右上の検索窓に「Contact Form 7」と入力します。
- 富士山のアイコンが目印のプラグインが表示されたら、「今すぐインストール」をクリックします。
- インストールが完了したら、「有効化」ボタンをクリックしてください。
コンタクトフォームの編集
- 左側のメニューにある「お問い合わせ」という項目をクリックして、「コンタクトフォーム」の編集画面を開きます。

- 上のタブから「メール」を選び、通知先のメールアドレスを設定します。
- 「送信先」と「送信元」の2箇所に、事前準備で用意した専用メールアドレスを入力してください。

コンタクトフォームの「メール2(自動返信)」の使い方
お客様がフォームから送信した際、「お問い合わせを受け付けました」という確認メールを自動で返信する設定をしておくと、お客様に安心感を与えられます。
設定方法
- 同じメールタブ内で画面を下へスクロールし、「メール2」という項目にチェックを入れます。

- 「送信元」には [_site_title] <info@martto.net> のような形で、お問い合わせに使用するメールアドレスを入力します。
- さらに、画面内の「追加ヘッダー」という項目に注目してみましょう。
ここには標準で Reply-To: [_site_admin_email] と入力されています。これは、読者さんが自動返信メールにそのまま返信したとき、サイト管理者のメールアドレスに届くようにする設定です。同じ場合WordPressの管理者メールアドレス(ユーザー➔プロフィール)に使用しているメールアドレスと、今回お問い合わせの受付に使っているメールアドレスが同じであれば、この部分は何も変更せず、そのままでOKです!◀◀異なる場合もし「ブログの管理用アドレス」と「お問い合わせの返信用アドレス」を別々に分けたい場合は、この [_site_admin_email] の部分を消して、受け取りたいメールアドレスに変更してください。◀◀ - 「メッセージ本文」の欄には、自動返信用の文章(例:お問い合わせありがとうございます。〇営業日以内にご返信いたします。)など自由文を入力します。
- 設定が完了したら、「保存」ボタンをクリックします。
Cocoonの固定ページへショートコードを設置する手順
作成したフォームを、実際にサイトに表示させるための作業です。Contact Form 7では「ショートコード」と呼ばれる短いコードを使ってページに埋め込みます。
- フォームを保存すると、タイトルの下に青い背景で [contact-form-7 id=”〇〇” title=”コンタクトフォーム1″] のようなコードが表示されます。これをすべてコピーします。

- 管理画面の左側メニューから「固定ページ」➔「固定ページを追加」をクリックします。
- ページのタイトルに「お問い合わせ」と入力します。
- 先ほどコピーしたショートコードを本文に貼り付けます。

- パーマリンクに「contact」と入力します。
- 画面右側の「公開」ボタンをクリックします。
お問い合わせページをメニューに追加する
固定ページを作っただけでは、サイトのどこにも表示されませんので、メニューに追加しておきましょう。
- 「外観」➔「メニュー」をクリックします。

- 左側にある「お問い合わせ」にチェックをして「メニューに追加」をクリックします。

- メニューを保存します。
まとめ:設置後の動作確認(テスト送信)を忘れずに
お問い合わせページの公開が完了したら、最後に必ずご自身で動作確認を行ってください。
実際のサイトでお問い合わせページを開き、ご自身のメールアドレスを使ってテストメッセージを送信してみましょう。以下の2点が確認できれば完璧です。
管理者(あなた)のメールアドレスに、お問い合わせ内容が正しく届いているか。
送信時に入力したメールアドレス宛に、「メール2」で設定した自動返信メールが届いているか。
送信時に入力したメールアドレス宛に、「メール2」で設定した自動返信メールが届いているか。
ぜひContact Form 7を活用して、信頼されるサイト作りを進めてくださいね。
次回は画像認証を設置してセキュリティを高めましょう!



コメント Leave a Comment