ワードプレスブログにお問い合わせフォームを設置する方法が知りたいな。
- 本記事の内容
- お問い合わせフォームは必要?
- お問い合わせフォームの作り方
- 迷惑メール対策の設定
ワードプレスブログを開設したけど、お問い合わせフォームの作り方で悩んでいませんか?
安心してください。ブログ初心者だったぼくでも「 WPForms 」プラグインを活用して、簡単にお問い合わせフォームを作成できました。
今回はお問い合わせフォームの作り方から、スパム対策まで解説していきます。
手順通り進めば、あなたのブログにもお問い合わせフォームを、無料で設置することができますよ。
個人ブログにお問い合わせフォームを作る理由
個人でもお問い合わせフォームを作る理由は下記のとおり。
- 読者と企業の連絡手段になる
- ASPのサイト審査で有利になる
読者と企業の連絡手段になる
お問い合わせフォームは、ブロガーと読者・企業をつなげる連絡手段になります。
実際にぼくも、下記のメッセージが届きます。
- 読者からブログに関する質問
- 企業からASP広告の掲載依頼
このように、24時間いつでも質問や相談できる窓口があると、読者の信頼度もアップしますよ。
また、一般に公開されてないアフィリエイト広告の掲載オファーから、新たなブログ収入につながるチャンスも。
![](https://jinsanblog.com/wp-content/uploads/2024/06/kosan_37379_Operating_a_computerFull_body_down_to_the_feet_chib_9aac5f5c-6599-4d84-a66f-9722786ac478.png)
SNSを利用してないユーザーにとっても唯一の連絡手段!
ASPのサイト審査で有利になる
ASPによっては、お問い合わせフォームの設置をサイト審査の条件にしてるものがあります。
サイト審査とは、ASP側が「アフィリエイト広告を掲載しても良いブログか?」チェックする作業。
ちなみに、初心者におすすめASPが下記2つ。
広告数が多く審査も通りやすいので、サクッと無料登録しておきましょう。
ブログのお問い合わせフォームを作る方法【WPForms】
当ブログも利用中の「WPForms」プラグインで、お問い合わせフォームを作っていきます。
①:「WPForms」のインストール
![ワードプレス管理画面](https://jinsanblog.com/wp-content/uploads/2023/10/ワードプレス管理画面.jpg)
![ワードプレス管理画面](https://jinsanblog.com/wp-content/uploads/2023/10/ワードプレス管理画面.jpg)
ワードプレス管理画面の「プラグイン」→「新規追加」を選択。
![WpFormsを追加](https://jinsanblog.com/wp-content/uploads/2023/10/画像をドラッグ&ドロップ.jpg)
![WpFormsを追加](https://jinsanblog.com/wp-content/uploads/2023/10/画像をドラッグ&ドロップ.jpg)
「WPForms」と検索して「今すぐインストール」をクリック。
![有効化](https://jinsanblog.com/wp-content/uploads/2023/10/有効化.jpg)
![有効化](https://jinsanblog.com/wp-content/uploads/2023/10/有効化.jpg)
「有効化」に切り替わるのでクリック。
以上で「Contact Form by WPForms」のインストールが完了です。
②:お問い合わせフォームの作成
![WPFormsフォーム作成](https://jinsanblog.com/wp-content/uploads/2023/10/フォームの作成.jpg)
![WPFormsフォーム作成](https://jinsanblog.com/wp-content/uploads/2023/10/フォームの作成.jpg)
上記の画面に切り替わるので「最初のフォームを作成」をクリック。
![簡単なお問い合わせフォーム](https://jinsanblog.com/wp-content/uploads/2023/10/簡単なフォーム.jpg)
![簡単なお問い合わせフォーム](https://jinsanblog.com/wp-content/uploads/2023/10/簡単なフォーム.jpg)
「簡単なお問い合わせフォーム」→「テンプレートを使用」をクリック。
シンプルなお問い合わせフォームが作成されました。
③:お問い合わせフォームの編集
![フォームの編集](https://jinsanblog.com/wp-content/uploads/2023/10/編集.jpg)
![フォームの編集](https://jinsanblog.com/wp-content/uploads/2023/10/編集.jpg)
標準フィールドの各パーツをドラッグ&ドロップすれば、あなた好みの機能を追加できます。
個人ブログであればデフォルトでも充分ですが、必要最低限の編集をしていきます。
- 名前欄の編集
![名前の編集](https://jinsanblog.com/wp-content/uploads/2023/10/名前.jpg)
![名前の編集](https://jinsanblog.com/wp-content/uploads/2023/10/名前.jpg)
- 簡単なお問合せフォームの「名前」をクリック
- 一般のフォーマットを「シンプル」に変更
- 「必須」をオン
- コメント欄の編集
![コメント欄](https://jinsanblog.com/wp-content/uploads/2023/10/コメント欄-1.jpg)
![コメント欄](https://jinsanblog.com/wp-content/uploads/2023/10/コメント欄-1.jpg)
一般のラベルから「コメントまたはメッセージ」のテキストを自由に変更可。
「必須」にオンにします。
- フォーム名の編集
![フォーム名の変更](https://jinsanblog.com/wp-content/uploads/2023/10/フォーム名変更.jpg)
![フォーム名の変更](https://jinsanblog.com/wp-content/uploads/2023/10/フォーム名変更.jpg)
「設定」からフォーム名を「お問い合わせフォーム」に変更。
最後は「保存」を忘れずに。
ブログにお問い合わせフォームを掲載する方法
次にお問い合わせフォームを、サイトに掲載していきましょう。
![埋め込む](https://jinsanblog.com/wp-content/uploads/2023/10/埋め込み.jpg)
![埋め込む](https://jinsanblog.com/wp-content/uploads/2023/10/埋め込み.jpg)
「埋め込む」をクリック。
![新規ページの作成](https://jinsanblog.com/wp-content/uploads/2023/10/埋め込み-1.jpg)
![新規ページの作成](https://jinsanblog.com/wp-content/uploads/2023/10/埋め込み-1.jpg)
「新規ページを作成」を選択。
![お問い合わせと入力](https://jinsanblog.com/wp-content/uploads/2023/10/名前-1.jpg)
![お問い合わせと入力](https://jinsanblog.com/wp-content/uploads/2023/10/名前-1.jpg)
「お問い合わせ」と入力して「行きましょう」をクリック。
![パーマリンク入力](https://jinsanblog.com/wp-content/uploads/2023/10/URL-1.jpg)
![パーマリンク入力](https://jinsanblog.com/wp-content/uploads/2023/10/URL-1.jpg)
ワードプレス執筆画面のパーマリンクを「contact」と入力し「公開」をクリック。
![管理画面の外観](https://jinsanblog.com/wp-content/uploads/2023/10/管理画面-1.jpg)
![管理画面の外観](https://jinsanblog.com/wp-content/uploads/2023/10/管理画面-1.jpg)
ワードプレス管理画面の「外観」→「メニュー」を選択。
![メニュー設定](https://jinsanblog.com/wp-content/uploads/2023/10/ヘッダーメニュー.jpg)
![メニュー設定](https://jinsanblog.com/wp-content/uploads/2023/10/ヘッダーメニュー.jpg)
- メニュー名に「ヘッダー」と入力。
- メニュー設定の「ヘッダーメニュ」をチェック
- メニューを作成をクリック。
![メニューの追加](https://jinsanblog.com/wp-content/uploads/2023/10/メニューに追加.jpg)
![メニューの追加](https://jinsanblog.com/wp-content/uploads/2023/10/メニューに追加.jpg)
「お問い合わせ」を選択して「メニューに追加」をクリック。
![メニューを保存](https://jinsanblog.com/wp-content/uploads/2023/10/メニュー-1.jpg)
![メニューを保存](https://jinsanblog.com/wp-content/uploads/2023/10/メニュー-1.jpg)
「お問い合わせバー」が追加されるので「メニューを保存」をクリック。
おつかれさまです!お問い合わせフォームがブログのヘッダーに掲載されました。
![お問い合わせの確認](https://jinsanblog.com/wp-content/uploads/2023/10/ヘッダー.jpg)
![お問い合わせの確認](https://jinsanblog.com/wp-content/uploads/2023/10/ヘッダー.jpg)
![お問い合わせフォーム](https://jinsanblog.com/wp-content/uploads/2023/10/お問い合わせ.png)
![お問い合わせフォーム](https://jinsanblog.com/wp-content/uploads/2023/10/お問い合わせ.png)
![](https://jinsanblog.com/wp-content/uploads/2024/06/kosan_37379_Operating_a_computerFull_body_down_to_the_feet_chib_9aac5f5c-6599-4d84-a66f-9722786ac478.png)
![](https://jinsanblog.com/wp-content/uploads/2024/06/kosan_37379_Operating_a_computerFull_body_down_to_the_feet_chib_9aac5f5c-6599-4d84-a66f-9722786ac478.png)
![](https://jinsanblog.com/wp-content/uploads/2024/06/kosan_37379_Operating_a_computerFull_body_down_to_the_feet_chib_9aac5f5c-6599-4d84-a66f-9722786ac478.png)
無事にお問い合わせフォームの完成です。
迷惑メール対策「reCAPCHA」の設定
お問い合わせフォームを設置すると、高頻度でスパムメールが届きます。
Googleの無料ツール「reCAPCHA」を設定して、迷惑メール対策しておきましょう。
![](https://jinsanblog.com/wp-content/uploads/2024/06/kosan_37379_Operating_a_computerFull_body_down_to_the_feet_chib_9aac5f5c-6599-4d84-a66f-9722786ac478.png)
![](https://jinsanblog.com/wp-content/uploads/2024/06/kosan_37379_Operating_a_computerFull_body_down_to_the_feet_chib_9aac5f5c-6599-4d84-a66f-9722786ac478.png)
![](https://jinsanblog.com/wp-content/uploads/2024/06/kosan_37379_Operating_a_computerFull_body_down_to_the_feet_chib_9aac5f5c-6599-4d84-a66f-9722786ac478.png)
Googleアカウントに登録しておく必要があるよ!
Googleアカウントにログインした状態で「reCAPCHAの公式サイト」へアクセス。
![recaptcha公式サイト](https://jinsanblog.com/wp-content/uploads/2023/10/スパム対策.jpg)
![recaptcha公式サイト](https://jinsanblog.com/wp-content/uploads/2023/10/スパム対策.jpg)
「v3 管理コンソール」をクリック。
![無料版に移動](https://jinsanblog.com/wp-content/uploads/2023/10/無料版.jpg)
![無料版に移動](https://jinsanblog.com/wp-content/uploads/2023/10/無料版.jpg)
「Enterprise」という「有料版」の登録画面が表示されます。
「Switch to create a classic key」をクリックして「無料版」へ移動してください。
![設定の入力](https://jinsanblog.com/wp-content/uploads/2023/10/設定.jpg)
![設定の入力](https://jinsanblog.com/wp-content/uploads/2023/10/設定.jpg)
- ラベル:ブログ名
- reCAPTCHAタイプ:「reCAPTCHA v3」を選択
- ドメイン:ブログのドメイン入力
- reCAPTCHA利用条件に同意する:チェック
- 送信をクリック
ドメインは当ブログでいうと「https:// jinsanblog.com /」の下線部分
![サイトキーのコピー](https://jinsanblog.com/wp-content/uploads/2023/10/サイトキー.jpg)
![サイトキーのコピー](https://jinsanblog.com/wp-content/uploads/2023/10/サイトキー.jpg)
上記の2つのキーが表示されるので、画面を開いた状態でワードプレスの管理画面に移動します。
またはメモにコピーでもオッケー。
![WPFormsの設定](https://jinsanblog.com/wp-content/uploads/2023/10/管理画面.jpg)
![WPFormsの設定](https://jinsanblog.com/wp-content/uploads/2023/10/管理画面.jpg)
「WPForms」→「設定」を選択。
![CAPTCHA](https://jinsanblog.com/wp-content/uploads/2023/10/CAPTCHA.jpg)
![CAPTCHA](https://jinsanblog.com/wp-content/uploads/2023/10/CAPTCHA.jpg)
「CAPTCHA」→「reCAPTCHA」をクリック。
![キーの貼り付け](https://jinsanblog.com/wp-content/uploads/2023/10/キー貼り付け.jpg)
![キーの貼り付け](https://jinsanblog.com/wp-content/uploads/2023/10/キー貼り付け.jpg)
- タイプ:「reCAPTCHA v3」にチェック
- サイトキー:取得したサイトキーをコピペ
- シークレットキー:取得したシークレットキーをコピペ
- 「設定を保存」をクリック
![すべてのフォーム](https://jinsanblog.com/wp-content/uploads/2023/10/フォーム.png)
![すべてのフォーム](https://jinsanblog.com/wp-content/uploads/2023/10/フォーム.png)
「すべてのフォーム」→「お問い合わせフォーム」をクリック。
![OK](https://jinsanblog.com/wp-content/uploads/2023/10/OK-1.jpg)
![OK](https://jinsanblog.com/wp-content/uploads/2023/10/OK-1.jpg)
「reCAPTCHA」→「OK」をクリック。
![reCAPTCHAマーク確認](https://jinsanblog.com/wp-content/uploads/2023/10/保存-1.jpg)
![reCAPTCHAマーク確認](https://jinsanblog.com/wp-content/uploads/2023/10/保存-1.jpg)
お問い合わせの「reCAPTCHA有効」マークを確認したら「保存」しましょう。
![アイコンチェック](https://jinsanblog.com/wp-content/uploads/2023/10/ラストチェック.jpg)
![アイコンチェック](https://jinsanblog.com/wp-content/uploads/2023/10/ラストチェック.jpg)
ブログからお問い合わせにアクセスし、無事に「reCAPTCHAマーク」が確認できればスパム対策されています。
実際にお問い合わせメールを送信し、通知チェックもしておきましょう!
まとめ:お問い合わせフォームを作成してみよう!
今回はお問い合わせフォームの作り方から、スパム対策まで紹介しました。
記事を参考にすれば、ブログ初心者のあなたでも簡単にお問い合わせフォームが完成しますよ。
ちなみに、ワードプレス開設後にやっておくべき必要最低限の項目を、下記にまとめています。
- ワードプレスの初期設定 → WordPressインストール後にやっておくべき初期設定
- プラグインの導入 → 【WordPress初心者】最初に導入すべきおすすめプラグインを3つ紹介!
- サイトマップの作成 → XML Sitemap & Google News の設定方法と使い方