Contact Form 7を使ってお問い合わせページを簡単に作る方法【図解】

プラグイン

Google Adsenseで広告を掲載して収益化を始めるにはいくつか条件がありますが、その一つがお問い合わせのページです。当ブログでも準備をしているブログ管理人へ連絡をするためのお問い合わせページです。

今回はプラグインを使ってお問い合わせページを簡単に作る手順の紹介です。

Contact Form 7をダウンロード&インストール

WordPressのダッシュボードから①「プラグイン」を選択します。

Contact Form 7を使ってお問い合わせページを簡単に作る方法【図解】

プラグインのページで②「新規追加」を選択します。

Contact Form 7を使ってお問い合わせページを簡単に作る方法【図解】

プラグインを追加する画面でキーワード検索を行います。

③「キーワード欄」に「Contact Form 7」と入力すると自動的にプラグインが検索されます。富士山のアイコンのContact Form 7が表示されたらその横の④「今すぐインストール」を選択します。

Contact Form 7を使ってお問い合わせページを簡単に作る方法【図解】

インストールが完了するとボタンが変化するので⑤「有効化」を選択します。

Contact Form 7を使ってお問い合わせページを簡単に作る方法【図解】

プラグインの有効化はこれで完了です。

Contact Form 7の設定

続いてお問い合わせページを作成していきます。プラグイン一覧の画面で⑥「設定」を選択します。

Contact Form 7を使ってお問い合わせページを簡単に作る方法【図解】

フォームを新規作成していくので⑦「新規追加」を選択します。

Contact Form 7を使ってお問い合わせページを簡単に作る方法【図解】

問い合わせフォームの設定内容

管理用のタイトルを追加します。⑧「タイトル」を入力します。ここは固定ページの名称には使用されないので巣が、分かりやすい名前を付けておきましょう。

⑨「フォーム」欄に入力する内容を記載しますが、初期状態で以下の赤枠のような内容があらかじめ設定されています。当ブログのお問い合わせページも初期状態のまま作成しています。一般的なお問い合わせページの内容であればこのまま進めていきます。

Contact Form 7を使ってお問い合わせページを簡単に作る方法【図解】

続いてフォームからの入力後のメールの動作を設定していきます。

通知メールの設定内容

コンタクトフォームの追加画面で⑩「メール」タブを選択します。

Contact Form 7を使ってお問い合わせページを簡単に作る方法【図解】

ブログ管理人に届くメールの内容を設定する

お問い合わせをメールで送るための設定をしていきます。まずはブログ管理人側に届くメール設定をしていきます。設定箇所は以下のとおりです。

⑪送信先:お問い合わせを送る宛先メールアドレスを設定します。

⑫送信元:メールが届いた時に表示する送信元の名前とアドレスを設定します。

⑬題名:お問い合わせメールに設定する題名を入力します。ブログ名を入れておくとどこからのメールなのか区別しやすいかと思います。

設定は続くので下にスクロールします。

Contact Form 7を使ってお問い合わせページを簡単に作る方法【図解】

⑮メッセージ本文:通知されるメール本文を設定します。初期状態で以下の内容が記載されています。普通の問い合わせページであれば特に変更する必要はありません。

続いて問い合わせを行った人に通知するメールの設定をしていくので下にスクロールします。

Contact Form 7を使ってお問い合わせページを簡単に作る方法【図解】

読者側に届くメールの内容を設定する

次に問い合わせを行った側(読者側)にもメールが届くように設定します。初期状態では問い合わせた側にはメールでは届かない設定になっています。

問い合わせた側にもといあわせを行った旨のメール通知をする場合、⑯「メール(2)を使用」にチェックを入れます。その他の設定内容は以下のとおりです。

⑰送信先:通知先メールアドレスを設定します。通常はフォームに入力されたメールアドレス宛に送るので初期状態の[your-email]のままで問題ありません。

⑱送信元:メールが届いた際に表示される送信元に設定する内容を記載します。

⑲題名:通知メールが届いた時の題名を記載します。

⑳追加ヘッダー:初期状態では「Reply-To: ⑪で設定したアドレス」が記載されています。ここは注意が必要です。初期状態のままでは⑰で設定した送信先アドレスが設定されています。この場合、問い合わせを行った読者側に返信先アドレスが通知されてしまうのでメールアドレスを公開したくない場合は空白にしておきましょう。

Contact Form 7を使ってお問い合わせページを簡単に作る方法【図解】

㉑メッセージ本文:問い合わせを行った読者側に届くメールの本文に記載する内容を設定します。初期設定のままでも問題ありません。

設定が完了したら㉒「保存」を選択します。

Contact Form 7を使ってお問い合わせページを簡単に作る方法【図解】

固定ページを作成する

保存できたらページ上部の㉓の赤枠部分のショートコードをコピーします。

Contact Form 7を使ってお問い合わせページを簡単に作る方法【図解】

次に固定ページを作成していきます。

ダッシュボードより「固定ページ」内の㉔「新規作成」を選択します。

Contact Form 7を使ってお問い合わせページを簡単に作る方法【図解】

新規固定ページの作成画面が開くので㉕「タイトル」に固定ページのタイトル名を入力します。次に㉖「パーマリンク」も編集を選択して日本語ではなく英語表記に変更しておきます。

㉗「本文」の部分に先ほど㉓でコピーしたショートコードを貼り付けます。最後に㉘「公開」を選択するとお問い合わせページの出来上がりです。

Contact Form 7を使ってお問い合わせページを簡単に作る方法【図解】

お問い合わせページの動作確認をしてみる

トップページに「お問い合わせ」のリンクが出現していると思います。まずはちゃんと問い合わせが届くか確認してみましょう。

それぞれ㉙~㉜にテストメッセージを記入し、㉝「送信」を押してみましょう。

Contact Form 7を使ってお問い合わせページを簡単に作る方法【図解】

ブログ管理人側に届くメールのサンプル

問い合わせを行うと下記のようなメールが届きます。上記設定例と見比べながら参考にしてください。

From: ココブログ。 <wordpress@kokomaru.com>
To: xxx@xxx.xxx
Subject: ココブログ。 “テスト題名”
—-

差出人: テスト送信者 <xxx@xxx.xxx>
題 名: テスト題名

メッセージ本文:
テストメッセージ本文


このメールは ココブログ。 (https://kokomaru.com) のお問い合わせフォームから送信されました

問い合わせを行った側に届くメールのサンプル

⑯「メール(2)を使用」にチェックを入れると問い合わせを行った側にも下記のようなメールが届きます。

From: ココブログ。 <wordpress@kokomaru.com>
To: xxx@xxx.xxx
Subject: お問い合わせありがとうございます【ココブログ】
—-

お問い合わせありがとうございます。
以下のメッセージを受け付けました。
確認次第ご返答させていただきます。

———お問い合わせ内容———

差出人: テスト送信者 <xxx@xxx.xxx>
題 名: テスト題名

メッセージ本文:
テストメッセージ本文


このメールは ココブログ。 (https://kokomaru.com) のお問い合わせフォームから送信されました

コメント