どうも、みやじんです。

今回はWordPressで簡単にお問合せフォームを設置できるプラグイン「Contact Form7」の設定方法を解説していきます。

動画で解説を視聴する方はこちらから

WordPressでのお問合せフォームの設定方法【Contact Form7】

問合せフォーム実装後画像

「Contact Form7」は、WordPressでお問合せフォームを設置することのできるプラグインです。

基本設定をすることで、HTML/CSSを使わずに、ショートコード挿入のみでフォームを設置できます。

①プラグインをインストール

それでは「Contact Form7」を実際に設定していきます。

ワードプレスにアクセスし、プラグインから「プラグインを追加」をクリックします。

「Contact Form7」にて検索し、インストールし有効化します。

 

②問合せフォーム作成

お問合せ追加画像

有効化すると、サイドメニューに「お問い合わせ」が追加されているので、こちらからフォームを設定していきます。

コンタクトフォーム選択画面画像

お問合せをクリックすると、「コンタクトフォーム1」が表示されているので、こちらを活用してフォームを作っていきます。

コンタクトフォーム設定している画像

基本的には、挿入したいフォームをクリックして追加をしていきます。

テキスト追加画像

例えば「テキスト」を選択すると、上記の設定画面が開いていきます。

必須にするのかどうか、フォームの名前、初めに記載されている値の設定、id/classも設定できます。

テキスト後のフォーム画像

タグを挿入すると、上記の画像のような形で挿入されました。

またラベルタグを使うことで、フォームに名前をつけて表示させることができます。

保存を押して、これでフォーム作成は終了です。

 

③問合せレスポンス設定

お問合せフォームが作成できたら、次にお問合せ後の「自動返信メール」と「問合せ通知メール」を設定します

この2種類のメールを設定しておかないと、問合せ対応がうまくいかずトラブルの元になるので、しっかり設定しましょう。

初めに「自動返信メール」を設定していきます。

問合せをした人が、フォーム情報を送信した後、自分のメールボックスに、「あなたの問合せを受付けました」と自動で送信し、しっかりと問合せが完了したことを報告します。ユーザーの安心をまずここで満たしてあげるわけですね。

皆さんもご経験があると思います。

自動御礼メール設定画面

まず、対象フォームの中で、メールタブを開きます。

・送信先:yourmailにしておきます
・送信元:どこから自動返信メールが送られているのかを記載します。問合せ専用メアドなどを作成して入力しても良いでしょう
・題名:メールの件名を入力します
・メッセージ本文:返信メールの内容を記載します

 

次に、自分自身に問合せがあったことを知らせる「問合せ通知メール」を設定します。

先ほど設定したメールタブの下部にスクロールすると、メール(2)というチェックボックスがありますので、こちらにチェックを入れます。

通知メール設定画像

すると先程と同じ設定画面が開きますので、任意の情報を入力します。

 

④問合せ送信時メッセージ設定

スプラッシュメッセージ画像

メールの設定が終了したら、次は問合せ送信時のメッセージを設定します。

「問合せありがとうございます。後日ご連絡させていただきます」みたいなやつですね。

このポップアップメッセージがあるのとないとでは、ユーザーの安心感がダンチなので、ぜひ設定しましょう。

タブの「メッセージ」からすぐに設定できます。

 

ショートコード画像

これで問合せフォームの設定が完了です。次のステップでショートコードを使うので、コピーしておきましょう。

⑤問合せページ作成

さて、④までで問合せフォームの設定が完了しました。

後は、この問合せフォームを掲載するページを作成します。問合せページは基本的に固定ページで作成をしましょう。

固定ページから新規追加を選択します。

ショートコード挿入画像

このような形で、ショートコードを挿入します。

保存をして、プレビューをみてみます。

問合せページプレビュー画像

いかがでしょうか。デザインはそこそこですが、問合せフォームページになっています。

後はこれをメニューに追加していきます(ここは人それぞれだと思います)。

外観からメニューを選択。

メニュー追加方法画像

メニュー項目を追加の箇所にて、先程作成した固定ページにチェックを入れて「メニューに追加」を選択します。

これでメニューの一番下に追加されました。保存を忘れずに。

⑥reCAPTCHAを設定する

お疲れ様でした。⑤までの手順で、問合せフォームと問合せページの設定ができました。

ただ、このままではスパムメールが送られてくる可能性があります

最後に「reCAPTCHA」を設定して、スパムからメディアを守りましょう。

reCAPTCHAとは
reCAPTCHAとは、Googleが無償で提供しているbotと人間を区別するサービスです。bot攻撃などのスパムからメディアを守る対策です

再度、お問合せフォームを選択します。

インテグレーションを選択する画像

その中のインテグレーションを選んでください。

recaptchaを選択する画像

reCAPTCHAが一番下に存在しますので、インテグレーションのセットアップをクリックしてください。

シークレットキーを入力する画像

こちらの「サイトキー」と「シークレットキー」を設定すれば完了です。

reCAPTCHAをまだGoogleで設定していない方は、上画像の「reCAPTCHA(v3)」というリンクをクリックします。

contactform7 recaptchaヘルプページ

Contact Form7のヘルプページに飛びますので、「reCAPTCHA」のリンクをクリックします。

reCAPTCHA公式画像

そうすると、reCAPTHCAの公式ページにアクセスできます。

reCAPTCHA登録画像

「v3」Admin Console」をクリックします。

reCAPTHCA設定画面

サイトを登録する画面が開きますので、任意でフォームに情報を入力していきます。

reCAPTCHAはv3を選択しておきましょう。

reCAPTCHA設定完了

登録されれば、上画像のようにサイトキーとシークレットキーが表示されます。

シークレットキーを入力する画像

こちらをコピーして、Contact Form7のインテグレーションの設定画面へ入力すれば完了です。

 

reCAPTCHAが作動している画像

reCAPTCHAが作動しているかどうかは、TOPページ右下に「プライバシー利用規約」が表示されているかどうかで確認できます。

もし表示されていなければ、キャッシュを削除してみましょう。

これでスパム攻撃をされる心配はなくなりました。

Contact Form7で問合せフォームを設置しよう

お疲れ様でした。これであなたのブログメディアにアクセスした方が、あなたに連絡を取ることができるようになりました。

「ブログを書籍化しませんか?」という連絡も、ブログに問合せフォームがあってこそです。

30分ほどで設置できますので、まだ設置していない方はぜひこの記事・動画を参考に挑戦してみてください。

動画はこちらから

【ここまで読んだ方へおすすめ】

 

 

おすすめの記事