子育て日記はサイトを移転しました。移転先はこちら

楽々簡単、たった1分!ワードプレスのお問い合わせフォーム設置手順

スポンサーリンク
Contact Form 7 - トップ
この記事で解決できるお悩み
  • ワードプレスでお問い合わせフォームを設置するにはカスタマイズが必要?
  • Contact Form 7を使ってみたいけど、使い方がわからない
  • お問い合わせフォームを設置したら迷惑メールがたくさんくるようになっちゃった・・・

こんなお悩みを解決していきます。

この記事で解説するワードプレスのお問い合わせフォーム設置手順を実行すれば、こだわりのない人ならたった1分で設置を完了することができますよ!

なぜなら、ワードプレスにお問合せフォームを追加するにはプラグインを使うだけだから。

簡単に設置できるお問合せフォームですが、利用者がブログ内のわからないことを確認するためのツールにもなるため、満足度向上につながります。

満足度向上につながるということは、それはつまり間接的にもSEO対策につながるということです。

まだお問合せフォームを設置していない方はこの機会にぜひ設置しておきましょう!

後半ではお問い合わせ履歴の管理方法の紹介や、お問合せフォームのスパム対策について解説している記事の紹介もあるので、ぜひ最後まで読んでくださいね!

Contact Form 7で簡単設置!

Contact Form 7を使えばワードプレスに誰でも簡単にお問合せフォームを設置することができます。

Contact Form 7とはワードプレスに簡単に機能を追加できるプラグインの一つで、世界的に有名なお問合せフォーム設置専用プラグインです。

具体的には以下の手順で設置できます。

  1. インストール・有効化
  2. 固定ページへショートコード設置
  3. お問い合わせフォーム調整

たったこれだけ。

フォームの入力・選択項目を調整せず、デフォルトの内容でいいのであれば、3番を飛ばしてもOK!

そのため、こだわりさえ無ければお問合せフォームを1分程度で設置することも可能です。

さっそく設置していきましょう!

まずはインストール・有効化

Contact Form 7をインストール・有効化

ワードプレス管理画面メニュー【プラグイン – 新規追加】へ進んで、右上の検索に『Contact Form 7』と入力してください。

表示された『Contact Form 7』をインストールしたら、有効化まで済ませてください

設置方法

まずは設置方法から解説しておきます。

通常の流れだと、【インストール → フォームの調整 → 設置】となりそうですが、あえて設置方法を先にご紹介します。

なぜなら、先に設置しておくことで『フォームをお好みに設定したら都度保存して都度ページを確認』することができるため、効率よく微調整しながらフォームを作成していくことができるから!


Contact Form 7- ショートコード

有効化が完了すると管理画面メニューに【お問い合わせ】と表示されているはずなので、クリックしてください。

するとお問合せフォームの管理画面に遷移します。

ここで作成したお問合せフォームを管理するのですが、インストールした時点でデフォルトで一つだけ、タイトル『コンタクトフォーム 1』というお問合せフォームが用意されています。

基本的にお問合せフォームは一つで十分なので、最初から用意されているこのフォームを設置・修正していきます。


Contact Form 7- ショートコード

ショートコード列に記載されている『[ contact-form-7 id=”xx” title=”コンタクトフォーム 1″ ]』をコピーしてください。


固定ページ新規追加

ブログ記事の場合は継続してページを増やしていくための【投稿】から記事を作成しますが、お問い合わせページは【固定ページ】で作成します。

管理画面メニュー【固定ページ – 新規追加】をクリックして新しく固定ページを作成してください。


Contact Form 7- ショートコードを本文に貼り付け
エディタは『Gutenberg』を使用しています

固定ページタイトルは『お問い合わせ』でいいと思いますが、お好みに合わせて適宜入力してください。

本文へは先程コピーしておいたショートコードを貼り付けます。

以上でお問合せフォームの設置は完了です!

めちゃくちゃ簡単ですね。


Contact Form 7- デフォルトのフォーム

右上のプレビューから実際の表示を確認してみてください。

『氏名・メールアドレス・題名・メッセージ本文(任意)・送信』と基本的な項目が表示されているはずです。

フォームを調整せず、デフォルトのままで使うならそのまま固定ページを公開すればお問合せフォームの設置は完了なので、次の『フォームをお好みに設定』は読み飛ばしてください。

フォームを調整する方はお問い合わせページを下書き保存しておいて、プレビュー画面はそのままに、ワードプレス管理画面を別タブで開いてそのまま読み進めてくださいね!

フォームをお好みに設定

Contact Form 7- フォーム設定画面へ

お問い合わせ管理画面に戻り、フォームのタイトルをクリックするとフォームの詳細設定画面に遷移します。

作成画面は主に以下4つの項目で構成されています。

  • フォーム
  • メール
  • メッセージ
  • その他の設定

順に解説していきます。

フォーム

Contact Form 7- フォーム追加

ここではフォームの項目を調整します。

先程プレビューで確認したとおり、『氏名・メールアドレス・題名・メッセージ本文(任意)・送信』が入力されてますね。

『氏名』を『名前』に変えたり、『題名』を『件名』に変えたりと表示内容を簡単に編集ができるほか、電話番号入力や日付選択など用意されているボタンを使って簡単に様々な項目を追加できます。


承諾確認を追加してみよう

試しに本文と送信の間に承諾確認チェックを追加してみましょう。

まずは上記の画像を参考に、設置したい箇所を改行で空けてカーソルを合わせます。

上記画像内の赤枠箇所に追加していくイメージですね。

カーソルを合わせたら、【承諾確認】ボタンをクリックします。


Contact Form 7- 承諾確認追加

承諾確認設定画面が表示されたらい、以下2点を修正します。

  • 同意条件
    承諾確認チェックの横に表示させたい一文を入力してください
  • オプション
    チェックを外すと、お問い合わせ送信時の承諾確認チェックボックスへのチェックが必須になります。

修正したら、右下の【タグを挿入】をクリックします。


Contact Form 7- フォームに承諾確認追加

フォーム項目に追加されたことが確認できたら、左下の【保存】で設定内容を保存します。

保存が完了したら、実際の表示を確認してみましょう。

Contact Form 7- 承諾確認追加

先程開いておいたプレビューで画面を更新してください。

本文と送信の間に『□ [同意条件]』が表示されていればOKです。


こんな感じで他にも追加したい項目があればお好みに追加してくださいね!

メール

Contact Form 7- お知らせメール設定

お問い合わせフォームからお問い合わせが送信されると、この設定画面で送信先に設定したメールアドレス宛にお問い合わせ内容がメールでお知らせされます。

つまり、「お問合せフォームからこんなお問い合わせがありましたよー」と自分宛てに送信するお知らせメール設定ですね。

Contact Form 7インストール時点でのデフォルトのフォーム設定、上記画像のデフォルトのお知らせメール設定内容でお問い合わせをテスト送信し、受信したメール結果が上記画像になります。

Contact Form 7- テスト送信
Contact Form 7- お知らせメール

フォーム項目を追加したら必ず確認!

お問合せフォームで入力された項目をメール内に表示するには『メールタグ』を使う必要があります。

メールタグとは、以下画像の赤枠部分に表示されているタグのことで、既に設定内でも使われてますね。

Contact Form 7- メールタグ

このタグを置いたところにお問合せフォームで入力された内容が表示されます。

つまり、お問合せフォームで入力させても、このお知らせメール設定にタグを設定しなければ受け取ることができません。

フォームに項目を追加したら必ずこのお知らせ内容にもメールタグを追加しておきましょう。

Reply-Toとは?

『Reply-To:』とは、受信したメールに返信する際の返信先メールアドレスとなります。

通常のイメージでは、受信したメールに返信しようとしたら送信してきたメールアドレス宛に返信するのが一般的ですが、『Reply-To:』で送信してきたメールアドレスとは違うメールアドレスを指定することができます。

お問合せフォーム送信者へ自動返信を送信する方法

デフォルトでは、お問合せフォームを送信した人には何もお知らせが送信されないため『ちゃんと送れたのかな?』『送った内容は間違ってなかったかな?』と心配になっちゃいます。

なので、お問い合わせ送信者にも送信内容のお知らせメールを自動返信してあげましょう!

設定方法は簡単です。

メール設定画面の下部へ進むと、『□メール(2)を使用』とありますね。

ここにチェックをいれるだけで完了です。

あとはお問い合わせ送信者へ送信したい内容を適宜編集してください。


全ての設定が完了したら、左下の【保存】をクリックしてください。

メッセージ

Contact Form 7- メッセージ設定

お問合せフォームから送信した時、送信結果に対する表示を設定します。

基本的にはデフォルトのままでOKですが、オリジナリティを出したい場合は適宜編集してみるといいですね!

編集した場合は、左下の【保存】を忘れずに!

以下は実際の送信画面での表示例です。

Contact Form 7- 問い合わせ成功
例:メッセージが正常に送信された
Contact Form 7- 問い合わせ失敗(メールアドレスミス)
例:
入力内容に問題がある
入力されたメールアドレスの形式が正しくない

その他の設定

Contact Form 7をカスタマイズして使用したい時に使う設定です。

上級者向けなので、基本的な使い方をする人には関係のない設定項目です。

気にしないでOK!

お問い合わせ履歴を残す方法

Contact Form 7の問い合わせ履歴管理プラグインFlamingo

ここまでの設定でなんとなくお気づきかもしれませんが、Contact Form 7は送信されたお問合せフォームをお知らせメールで転送するだけで、お問い合わせ内容はワードプレス上に記録されません!

メールでちゃんと受信できてさえいれば、メールソフト上でお問い合わせを管理することは可能なのですが、ワードプレス上にも記録を残して管理したい場合は、【Flamingo】というプラグインを別途インストールしてください。

FlamingoはContact Form 7の作者が開発したプラグインで、Contact Form 7を使用したお問い合わせフォームから送信された内容をデータベースで記録・管理するためのプラグインです。

スパム対策を忘れずに!

Contact Form 7は便利なお問い合わせフォームプラグインですが、そのままだとスパム攻撃の標的になります。

毎日数十通とスパムメッセージが送られてこないようにするためには、対策をしっかりとしておきましょう。

スパム攻撃については以下の記事で詳細に解説しています。

ブログを運用する上でスパムのことは正しく理解しておいたほうが良いので、一度読んでおくことをおすすめします。

https://literacyboxes.com/what-is-a-spam-comment/

スパム対策については以下の記事を参考にしてください。

https://literacyboxes.com/akismet-settings/

https://literacyboxes.com/invisible-recaptcha-for-wordpress/

まとめ

最後に、ご紹介した内容をおさらいしておきましょう。

ワードプレスに問い合わせフォームを追加する方法
  1. プラグイン【Contact Form 7】を利用する
  2. 固定ページに設置
  3. フォーム項目を追加したら必ずお知らせメールにも追加する
  4. 自動返信設定をしておいて、送信者を不安にさせない
  5. ワードプレス上で問い合わせ履歴を管理するならFlamingoを使う
  6. スパム対策を忘れずにしておく

ご紹介した内容を実践したなら、これからはサイト上経由でお仕事を受注したり、サイト利用者の意見も取り入れることができるようになりましたね!

利用者目線で記事内のわからないことをサイト運営者に確認することもできるようになったため、満足度も向上にもつながります。

利用者の満足度向上は結果としてSEO対策にもつながるため、お問い合わせページをぜひ有効活用していきましょう!

他にも当ブログで利用しているプラグインは全て以下記事で紹介しているので、ぜひ参考までにご覧ください。

https://literacyboxes.com/use-now-wp-plugin/

▼ コメント ▼

タイトルとURLをコピーしました