記事内に広告を含む場合があります。
当サイトでは広告を掲載している場合があります。消費者庁が問題としている「誇大な宣伝や表現」とならないよう配慮してコンテンツを制作しておりますのでご安心ください。万が一,不適切な表現など見つけられましたら「お問い合わせフォーム」からご連絡頂けますと幸いです。
- プラグインとは
-
『WordPressに新しい機能を追加するための仕組み』のこと
- お問い合わせフォームとは
-
サイト運営者に何か質問や連絡をしたいときに使われるツールです。
無料で簡単に設置できるので,本記事を読みながら作ってみてください。
この記事で紹介をするのは、「Contact Form by WPForms」というWordPressのプラグインを使って、お問合せフォームを設置する方法です。
WordPressテーマとプラグインは相性があるため,開発者がおすすめするものを利用したほうが安全だと思います。
![](https://swell-theme.com/wp-content/uploads/2019/10/thumb_plugins.png)
なぜお問い合わせフォームを作るのか?
連絡手段になるから
設置する理由は,サイト運営者への連絡先になるからです。
![](https://efublog.com/wp-content/uploads/2023/04/IMG_4995.png)
SNSのDM機能みたいなものですね
運営者に連絡手段がないサイトは信用性が不足します。
お問い合わせフォームを設置して、読者に安心して利用してもらえるサイト運営を目指しましょう。
プライバシーを守れる
お問い合わせフォームを設置することで,サイト運営者の直接連絡先を載せなくても済むからです。
メールアドレスを公開して迷惑メールが大量に送られてきても困りますよね?
その点、フォーム設置だと安心できます。
登録審査に必要になる
ブログで収益化を目指す場合,広告収益ならGoogleアドセンスの審査やアフィリエイトを行うためにASPの登録審査を受ける必要があります。
審査の合格にはお問い合わせフォームがあることは必須ですので収益化を目指すなら必ず作っておきましょう。
お問い合わせフォームの作り方
プラグインのインストール
まず、お問い合わせフォームを設置するために「Contact Form by WPForm」のプラグインをインストールします。
![](https://efublog.com/wp-content/uploads/2023/04/FB836327-9A99-4CF8-93DB-3E1F715A22FD.png)
![](https://efublog.com/wp-content/uploads/2023/04/FB836327-9A99-4CF8-93DB-3E1F715A22FD.png)
【管理画面】→【プラグイン】→【新規追加】を選択する
![](https://efublog.com/wp-content/uploads/2023/04/A9DD6D89-C012-4C9C-826D-D868A3C74AC1.png)
![](https://efublog.com/wp-content/uploads/2023/04/A9DD6D89-C012-4C9C-826D-D868A3C74AC1.png)
- 右上にある検索ボックスに「WPForms」と入力する
- 「Contact Form by WPForms」を選択する
- 【今すぐインストール】クリック→【有効化】にする
WPFormsを編集する
【管理画面】から①【WPForms】を選択→ ②【新規追加】をクリック
![](https://efublog.com/wp-content/uploads/2023/04/64D8B711-AE35-4DE5-9B9D-36CE3548E1C4.png)
![](https://efublog.com/wp-content/uploads/2023/04/64D8B711-AE35-4DE5-9B9D-36CE3548E1C4.png)
【簡単なお問い合わせフォーム】から【テンプレートを使用】をクリックします。
![](https://efublog.com/wp-content/uploads/2023/04/ED1412D2-FC27-4FA7-9249-3C641ED3AD94.png)
![](https://efublog.com/wp-content/uploads/2023/04/ED1412D2-FC27-4FA7-9249-3C641ED3AD94.png)
フォームの編集で項目の追加や表記の変更ができます。
![](https://efublog.com/wp-content/uploads/2023/04/C386F6F1-8345-4A00-BC18-185063B31B76.png)
![](https://efublog.com/wp-content/uploads/2023/04/C386F6F1-8345-4A00-BC18-185063B31B76.png)
特にこだわりがなければ,このまま【保存】を押して大丈夫です。
![](https://efublog.com/wp-content/uploads/2023/04/IMG_4995.png)
![](https://efublog.com/wp-content/uploads/2023/04/IMG_4995.png)
![](https://efublog.com/wp-content/uploads/2023/04/IMG_4995.png)
私は名前の表示だけ変更しました。
【フィールド設定】→【一般】→【フォーマット】で変更できるので試してみてください。
![](https://efublog.com/wp-content/uploads/2023/04/E3A0C641-74E5-4F1C-91E9-03C71BD09E60.png)
![](https://efublog.com/wp-content/uploads/2023/04/E3A0C641-74E5-4F1C-91E9-03C71BD09E60.png)
作成した「お問い合わせ」を固定ページに設定する
WordPressの管理画面から「wpforms」のページへ行き,作成された【ショートコード】をコピーします。
![](https://efublog.com/wp-content/uploads/2023/04/876692DD-9168-4A2E-9454-923E67B6B3D0-1.jpeg)
![](https://efublog.com/wp-content/uploads/2023/04/876692DD-9168-4A2E-9454-923E67B6B3D0-1.jpeg)
【固定ページ】→【新規追加】を開きます
![](https://efublog.com/wp-content/uploads/2023/04/31497F3D-DBFD-4A9D-BA7C-032729A4162F.png)
![](https://efublog.com/wp-content/uploads/2023/04/31497F3D-DBFD-4A9D-BA7C-032729A4162F.png)
ページタイトルを「お問い合わせ」と入力し,【ショートコードブロック】を呼び出します。
![](https://efublog.com/wp-content/uploads/2023/04/258AFA2E-A7E2-4481-BD06-AD168FAD6A38.png)
![](https://efublog.com/wp-content/uploads/2023/04/258AFA2E-A7E2-4481-BD06-AD168FAD6A38.png)
先ほどコピーしたショートコードを貼り付けます。
「パーマリンク」をGoogleに認識してもらうために英語に変えましょう。
ここでは「contact」としておきます。
最後に必ず【公開】のボタンをクリックしてください。
![](https://efublog.com/wp-content/uploads/2023/04/A4C9BCA8-E359-4E91-97C6-5428E4512F02.png)
![](https://efublog.com/wp-content/uploads/2023/04/A4C9BCA8-E359-4E91-97C6-5428E4512F02.png)
お問い合わせフォームの設置方法
ここからは「お問い合わせフォーム」をトップページに設置する方法を紹介します。
「お問い合わせ」の設置場所
- グローバルナビゲーション
- フッター・サイドバーなど
![](https://efublog.com/wp-content/uploads/2023/04/IMG_4995.png)
![](https://efublog.com/wp-content/uploads/2023/04/IMG_4995.png)
![](https://efublog.com/wp-content/uploads/2023/04/IMG_4995.png)
代表的な設置場所になります
①:グローバルナビゲーション
トップページの上の部分(ヘッダーの位置)にあるメニューです。
![](https://efublog.com/wp-content/uploads/2023/04/624728A8-B9BF-4605-85E6-B1F8659C8EA6.png)
![](https://efublog.com/wp-content/uploads/2023/04/624728A8-B9BF-4605-85E6-B1F8659C8EA6.png)
当ブログでも、上記の場所にお問い合わせページへのリンクを設置しています。
WordPressの管理画面から【外観】→【メニュー】で,グローバルナビゲーション(ヘッダー)を選択します。
![](https://efublog.com/wp-content/uploads/2023/04/8CA1EF90-F320-4779-B3B3-F59C0E762504.png)
![](https://efublog.com/wp-content/uploads/2023/04/8CA1EF90-F320-4779-B3B3-F59C0E762504.png)
左側の「メニュー項目を追加」→「固定ページ」で「お問い合わせ」にチェックを入れて「メニューに追加」をクリックします。
右側に「お問い合わせ」があることを確認して,メニューの位置を選択したら「メニューを保存」を押したら完了です。
②:フッター
フッターはサイトの1番下のところに表示されます。
![](https://efublog.com/wp-content/uploads/2023/04/DA202D18-5216-48CA-A7A6-BBDCEABA2CD1-1.png)
![](https://efublog.com/wp-content/uploads/2023/04/DA202D18-5216-48CA-A7A6-BBDCEABA2CD1-1.png)
こちらも先程と同様に管理画面の【外観】→【メニュー】から設定します。
![](https://efublog.com/wp-content/uploads/2023/04/05A5508E-98C7-4606-BDF7-D3988D713862.png)
![](https://efublog.com/wp-content/uploads/2023/04/05A5508E-98C7-4606-BDF7-D3988D713862.png)
「フッターメニュー」を選択→固定ページ「お問い合わせ」にチェックして「メニューに追加」をクリックします。
右側のメニュー名を「フッター」と入力しましょう。
メニューの位置を選択したら保存を押して完了です。
スパム(迷惑メール)対策
お問い合わせフォームを設置したら迷惑メール対策もしていきましょう。
対策にGoogle reCAPTCHAという無料ツールを導入します。
- Google reCAPTCHAに登録する
- 「WPForms」と連携する
それでは、Google reCAPCHAを設定する手順を解説していきます。
①:Google reCAPTCHAに登録する
Googleアカウントのログイン画面が表示されたら,お持ちのGoogleアカウントでログインしてください。
![](https://efublog.com/wp-content/uploads/2023/04/62B29ADB-EE87-4C0E-8ADD-CFB1418A0DC8.png)
![](https://efublog.com/wp-content/uploads/2023/04/62B29ADB-EE87-4C0E-8ADD-CFB1418A0DC8.png)
- ラベル:サイトのドメイン名
- reCAPTCHAタイプ:「v2」を選択
- 「私はロボットではありません」チェックボックスを選択
- ドメイン:サイトのドメイン名
- 利用規約に同意するにチェック
登録されると「サイトキー」、「シークレットキー」が表示されます。
あとで使用するのでこのページはそのまま開いておいてください。
![](https://efublog.com/wp-content/uploads/2023/04/6447918A-7CF8-4320-8A53-EAF54AEF3702.png)
![](https://efublog.com/wp-content/uploads/2023/04/6447918A-7CF8-4320-8A53-EAF54AEF3702.png)
②:「WPForms」と連携する
WordPressの管理画面から【WPForms】→【設定】→【CAPTCHA】→【reCAPTCHA】を選択します。
![](https://efublog.com/wp-content/uploads/2023/04/B95D7CAD-6471-4EBA-8D96-1DD684BFC48D.png)
![](https://efublog.com/wp-content/uploads/2023/04/B95D7CAD-6471-4EBA-8D96-1DD684BFC48D.png)
「Check box reCAPTCHA v2」を選択し,reCAPTCHAに登録した際に発行された「サイトキー」「シークレットキー」貼り付けていきます。
貼り付けたら【設定を保存】をクリックしてください。
![](https://efublog.com/wp-content/uploads/2023/04/7E6F68E7-53A0-4885-A468-C9AAEAD08333-1.jpeg)
![](https://efublog.com/wp-content/uploads/2023/04/7E6F68E7-53A0-4885-A468-C9AAEAD08333-1.jpeg)
WPFormsの【すべてのフォーム】から「お問い合わせ」をクリックします。
![](https://efublog.com/wp-content/uploads/2023/04/4AF946B6-10B7-4376-B5E5-CC5FCA03F243.png)
![](https://efublog.com/wp-content/uploads/2023/04/4AF946B6-10B7-4376-B5E5-CC5FCA03F243.png)
「reCAPTCHA」をクリックして右側にマークが表示されたら【保存】を押せば有効になります。
![](https://efublog.com/wp-content/uploads/2023/04/334AB0E5-12CC-4D08-8368-48C13FDF87E6.png)
![](https://efublog.com/wp-content/uploads/2023/04/334AB0E5-12CC-4D08-8368-48C13FDF87E6.png)
以上で、Google「reCAPTCHA」の導入は完了です。
まとめ
WPFormsを利用したお問い合わせフォームの設置方法を解説しました。
ブログ運営にはお問い合わせフォームは必須です。
サイトを整えてGoogleアドセンスやアフィリエイトに挑戦して収益化を目指しましょう。