今回は、「記事を執筆する合間にサクッとお問い合わせフォームを作ろう!」ということで、WordPressのプラグイン「Contact Form by WPForms」を使った「お問い合わせフォーム」の作り方をご紹介します。
お問合せフォームのプラグインでは「Contact Form 7」なども有名ですが操作が難しいと思われる方もいるようです。
「Contact Form by WPForms」を使えば、ドラッグ&ドロップ操作で、初心者さんでも簡単に「お問い合わせフォーム」を設置することができますよ。
![](https://tubasa-pet.com/wp-content/uploads/2024/03/20f829b10215af5dd2b81faba37cf0df.png)
この記事はこんなあなたにおすすめです。
・なるべく簡単にお問い合わせフォームを設置したい
・WordPressテーマ「SWELL」を使用している
「お問い合わせフォーム」の必要性
個人のブログに「お問い合わせフォーム」が必要なのかとピンとこない方もいらっしゃるかと思いますが、以下の理由で「お問い合わせフォーム」は必須だということをご理解ください。
「お問い合わせフォーム」の必要性
- ブログの信頼性・安心感をアピールできる
- 広告サービスの審査に合格しやすくなる
- 魅力的なオファーをもらえる可能性がある
- 万一のときの連絡先になる
ブログの信頼性・安心感をアピールできる
「お問い合わせフォーム」があるということは、運営者が自分のブログに対しての責任を持つということです。
読者にとって、誰が運営しているのかわからない、どこに連絡したらいいのかもわからないとなれば、記事の内容にも信頼がおけないと感じてしまうのではないでしょうか?
連絡のツールとしてだけではなく、読者に信頼・安心してもらうためにも「お問い合わせフォーム」を設置しましょう。
広告サービスの審査に合格しやすくなる
Googleアドセンスをはじめとする広告サービス(ASP)には、お問い合わせ先の設置を条件としているものが多くあります。
ブログの収入のほとんどは広告収入になることから、収益化を目的で運営するのであれば「お問い合わせフォーム」の設置は必須となります。
魅力的なオファーをもらえる可能性がある
ブログ運営が軌道にのってくると、企業から仕事のオファーがもらえるかもしれません。
・純広告(*)の掲載依頼
・製品の無償提供によるレビュー依頼
・有償での執筆依頼
・インタビューやメディアへの出演依頼
*純広告…広告主がWebなど媒体の広告枠を買い取って掲載する広告
知名度や記事の拡散のためのチャンス到来ですが、「お問い合わせフォーム」がなければ連絡がつかず、企業も諦めてしまうかもしれません。
せっかくのチャンスを逃がさないためにも「お問い合わせフォーム」を設置しておきましょう。
【最重要】万一のときの連絡先になる
特に「万一のときの連絡先になる」これが一番大切な設置すべき理由です。
ブログを運営していて、意図せず何らかの権利侵害が発生した場合に、連絡手段がないと大変なことになる可能性があります。
・レンタルサーバー社に連絡が行き、サイトにアクセスできなくなったり、最悪の場合サイトを削除される。
・Googleに著作権違反の申請が行き、ペナルティを受けてインデックスから消える。
・訴えられたり損害賠償を請求される。
「お問い合わせフォーム」さえ設置しておけば、運営者に連絡が入り、すぐに対応すれば回避できることが大半です。
ぜひ、「お問い合わせフォーム」を設置しましょうね。
「Contact Form by WPForms」をインストールする
「Contact Form by WPForms」はWordPressで使用できるお問い合わせフォームのプラグインです。
シンプルなもので十分なので、私は無料版を使っています。
もっと凝りたいという場合には有料版にアップグレードもできます。
このブログはWordPressのテーマ「SWELL」で作成しているので、SWELL開発者の了さんがおすすめしている「Contact Form by WPForms」を使っていきますが、ほかのテーマをお使いの場合でも十分対応できますので、手順どおりに進めてくださいね。
ステップ1 管理画面から「プラグイン」>「新規プラグイン追加」をクリック
![](https://tubasa-pet.com/wp-content/uploads/2024/03/aba64589653847cdfd202ee7bc715619.png)
![](https://tubasa-pet.com/wp-content/uploads/2024/03/aba64589653847cdfd202ee7bc715619.png)
ステップ2 右上の「キーワード」欄に「WPForms」と入力
![](https://tubasa-pet.com/wp-content/uploads/2024/03/c8bc0a0ba59e64dfb64fe353eb192f25-750x244.png)
![](https://tubasa-pet.com/wp-content/uploads/2024/03/c8bc0a0ba59e64dfb64fe353eb192f25-750x244.png)
Contact Form by WPForms枠内の「今すぐインストール」→「有効化」をクリック
これでインストール完了です!
お問い合わせフォームを作成する
ステップ1 WPformsのテンプレートで「お問い合わせフォーム」を作る
有効化が完了すると次のような画面に切り替わるので、下にスクロールして「最初のフォームを作成」ボタンをクリックします。
![](https://tubasa-pet.com/wp-content/uploads/2024/03/Contact-Form-by-WPForms-1024x576-1-750x422.png)
![](https://tubasa-pet.com/wp-content/uploads/2024/03/Contact-Form-by-WPForms-1024x576-1-750x422.png)
この画面を消してしまっても、Word Press管理画面の「WPForms」>「新規追加」から入れます。
![](https://tubasa-pet.com/wp-content/uploads/2024/03/60ceaaba99fa3d4d0301e3c195e98127.png)
![](https://tubasa-pet.com/wp-content/uploads/2024/03/60ceaaba99fa3d4d0301e3c195e98127.png)
初めてアクセスすると次のようなポップアップ画面がでるので「行きましょう!」をクリックします。
![](https://tubasa-pet.com/wp-content/uploads/2024/03/8547-4-750x528.webp)
![](https://tubasa-pet.com/wp-content/uploads/2024/03/8547-4-750x528.webp)
ここでは「お名前」「メールアドレス」「お問い合わせ内容」のシンプルなお問い合わせフォームを作成していきましょう。
フォームのタイトルを入力します。
「お問い合わせフォーム」、「基本のフォーム」など任意のタイトルでOKです。
![](https://tubasa-pet.com/wp-content/uploads/2024/03/f3a4f0dfba505564fd714c0f75540c9b-750x287.png)
![](https://tubasa-pet.com/wp-content/uploads/2024/03/f3a4f0dfba505564fd714c0f75540c9b-750x287.png)
下にスクロールするとテンプレートが選択できるようになっているので、「簡単なお問い合わせフォーム」を選択します。
![](https://tubasa-pet.com/wp-content/uploads/2024/03/480d9bf8c8a37af6545c92cb6a081f91-750x343.png)
![](https://tubasa-pet.com/wp-content/uploads/2024/03/480d9bf8c8a37af6545c92cb6a081f91-750x343.png)
「お名前」・「メールアドレス」・「お問い合わせ内容」欄のあるお問い合わせフォームができました!
![](https://tubasa-pet.com/wp-content/uploads/2024/03/b37aee18127cb0ede466076dfddfe8c4-750x352.png)
![](https://tubasa-pet.com/wp-content/uploads/2024/03/b37aee18127cb0ede466076dfddfe8c4-750x352.png)
このままデフォルトでも使えますが、「コメントまたはメッセージ」のラベル名を「お問い合わせ内容」に変更しておきましょう。
「コメントまたはメッセージ」の入力フォームをクリックします。
![](https://tubasa-pet.com/wp-content/uploads/2024/03/52e3a396ab99440c9cf33ba3734ffb73-750x330.png)
![](https://tubasa-pet.com/wp-content/uploads/2024/03/52e3a396ab99440c9cf33ba3734ffb73-750x330.png)
編集したい入力フォームをクリックすると、左側にそのフォームのラベルや説明などが設定できる「フィールド設定」画面が表示されます。
ラベル名を「お問い合わせ内容」に書き換えて、画面右上の「保存」をクリックします。
以上で「お問い合わせフォーム」が作成されました。
画面右上の「✖」をクリックして画面を閉じます。
「WPForms>すべてのフォーム」の中に作成したフォームが追加されています。
![](https://tubasa-pet.com/wp-content/uploads/2024/03/dc4a3fdff18348771792811ff2ee533a-750x281.png)
![](https://tubasa-pet.com/wp-content/uploads/2024/03/dc4a3fdff18348771792811ff2ee533a-750x281.png)
ステップ2 固定ページに「お問い合わせフォーム」を埋め込む
「お問い合わせ」の固定ページにフォームを埋め込みます。
「固定ページ」>「新規固定ページを追加」をクリックします。
![](https://tubasa-pet.com/wp-content/uploads/2024/03/a681e8cedbd7fedfb2c5656e53140966.png)
![](https://tubasa-pet.com/wp-content/uploads/2024/03/a681e8cedbd7fedfb2c5656e53140966.png)
固定ページが開いたら、次の手順で進めます。
①タイトルに「お問い合わせ」と入力
②+マークをクリック
③検索窓に「WPforms」と入力
④表示された「WPforms」のブロックをクリック
![](https://tubasa-pet.com/wp-content/uploads/2024/03/ab6a86a4252cac87f11f442a08b94c3b-750x299.png)
![](https://tubasa-pet.com/wp-content/uploads/2024/03/ab6a86a4252cac87f11f442a08b94c3b-750x299.png)
フォーム選択のセレクトボックスが表示されるので、先ほど作ったフォーム(簡単なお問い合わせフォーム)を選択します。
![](https://tubasa-pet.com/wp-content/uploads/2024/03/3217bd85ceaf61997fca751c06ec7d62-750x358.png)
![](https://tubasa-pet.com/wp-content/uploads/2024/03/3217bd85ceaf61997fca751c06ec7d62-750x358.png)
フォームの埋め込みは以上になります。
画面右の編集画面「投稿」をクリックしてパーマリンクを書き換えます。
![](https://tubasa-pet.com/wp-content/uploads/2024/03/81e94e4d65c48497cfef98f1448a19fe.png)
![](https://tubasa-pet.com/wp-content/uploads/2024/03/81e94e4d65c48497cfef98f1448a19fe.png)
ページをノーインデックス「noindex」に設定してから公開します。
Googleでは、クローラー(ロボット)がWebサイトを巡回して新しい記事をインデックスしています。
同じような記事を見つけると「重複コンテンツ」とみなされ、ペナルティを受ける可能性があります。
「プライバシーポリシー」や「お問い合わせフォーム」などは、同じような内容になりがちなので、投稿前にnoindexの設定をしておきましょう。
「SEO SIMPLE PACK」でnoindexを設定する方法
当ブログではテーマにSWELLを使用しているので、テーマの開発者、了さんが作った「SEO SIMPLE PACK」を導入しています。
SEO対策のプラグインでは、「ALL IN One SEO Pack」が有名ですが、「SEO SIMPLE PACK」はシンプルで使いやすいので、使用テーマにかかわらず、初心者さんには特におすすめです。
投稿画面を下にスクロールしていくと、「SEO SIMPLE PACK 設定」の画面があります。
「このページの”robots”タグ」のセレクトボックスから「インデックスさせない(noindex)」を選択します。
![SEO SIMPLE PACKのnoindex設定](https://tubasa-pet.com/wp-content/uploads/2024/03/noindex-750x370.png)
![SEO SIMPLE PACKのnoindex設定](https://tubasa-pet.com/wp-content/uploads/2024/03/noindex-750x370.png)
画面右上の「公開」をクリックして「お問い合わせ」ページの完成です。
ステップ3 「お問い合わせ」ページをサイトに表示する
せっかく作った「お問い合わせ」ページも、そのままだとユーザーの目に触れないので、サイトに表示できるようにリンクを設定します。
今回はフッターに表示してみましょう。
管理画面の「外観」>「メニュー」をクリック
![](https://tubasa-pet.com/wp-content/uploads/2024/03/c8f016a059d0e41629d4abd13c6b5cac.png)
![](https://tubasa-pet.com/wp-content/uploads/2024/03/c8f016a059d0e41629d4abd13c6b5cac.png)
①メニュー構造のメニュー名に「フッター(メニュー)」と入力してエンターを押す
②左側画面「お問い合わせ」にチェックを入れて
③メニューに追加をクリックします。
![](https://tubasa-pet.com/wp-content/uploads/2024/03/ffbf225bb903c38bb8145b4cbb7dbde8-750x246.png)
![](https://tubasa-pet.com/wp-content/uploads/2024/03/ffbf225bb903c38bb8145b4cbb7dbde8-750x246.png)
「お問い合わせ」固定ページが追加されているのを確認して、「メニュー設定」の「フッター」をチェック。最後に「メニューを保存」をクリックします。
![](https://tubasa-pet.com/wp-content/uploads/2024/03/e68d8ad7a6d926825bbbc09eca76550f-750x737.png)
![](https://tubasa-pet.com/wp-content/uploads/2024/03/e68d8ad7a6d926825bbbc09eca76550f-750x737.png)
これでフッターに「お問い合わせ」が表示されました(^^)
![](https://tubasa-pet.com/wp-content/uploads/2024/03/cb9f43d97c0eb9a53db0dff1ac22562c.png)
![](https://tubasa-pet.com/wp-content/uploads/2024/03/cb9f43d97c0eb9a53db0dff1ac22562c.png)
次に、実際にフォームがきちんと作動するかを確認しておきましょう。
お問い合わせフォームからテスト送信してみよう
サイトに設置した「お問い合わせ」をクリックして、必要な項目を入力して送信してみます。
![](https://tubasa-pet.com/wp-content/uploads/2024/03/bdbeaa084ba6878842dcf8cc3dcc5758-750x253.png)
![](https://tubasa-pet.com/wp-content/uploads/2024/03/bdbeaa084ba6878842dcf8cc3dcc5758-750x253.png)
このメッセージが表示されればOKです!
【重要】送信元メールアドレスを変更する
最後に、管理者への通知メールの設定方法をご紹介します。
一度作成したフォームは、「WPForms>すべてのフォーム」から編集・管理ができます。
先ほど作成した「お問い合わせフォーム」の編集をクリックします。
![](https://tubasa-pet.com/wp-content/uploads/2024/03/59379671d62df2a5e4351e809be3407b.png)
![](https://tubasa-pet.com/wp-content/uploads/2024/03/59379671d62df2a5e4351e809be3407b.png)
作成したフォームの編集画面が開きます。
![](https://tubasa-pet.com/wp-content/uploads/2024/03/47de4210bba219195a28adab70746d66-750x338.png)
![](https://tubasa-pet.com/wp-content/uploads/2024/03/47de4210bba219195a28adab70746d66-750x338.png)
通知メールは、「設定>通知」から設定できます。
通知の設定では、送信先メールアドレスやメール件名、送信元メールアドレス、メール本文などの設定ができます。
![](https://tubasa-pet.com/wp-content/uploads/2024/03/1b0bd2c1d3d679d903d6fb9eda127861-750x363.png)
![](https://tubasa-pet.com/wp-content/uploads/2024/03/1b0bd2c1d3d679d903d6fb9eda127861-750x363.png)
今回はこの中から送信元のメールアドレスを変更していきます。
![](https://tubasa-pet.com/wp-content/uploads/2024/03/9bce9c05b73627d2090f71a642c90c38-750x238.png)
![](https://tubasa-pet.com/wp-content/uploads/2024/03/9bce9c05b73627d2090f71a642c90c38-750x238.png)
以下は、送信元メールアドレスを設定する前に、テスト送信で受信したメールです。
赤枠部分に表示されるのが送信元メールアドレスになります。
![](https://tubasa-pet.com/wp-content/uploads/2024/03/4b441d130837107bf4e43e05afe31a93-750x316.png)
![](https://tubasa-pet.com/wp-content/uploads/2024/03/4b441d130837107bf4e43e05afe31a93-750x316.png)
送信元メールアドレスにgmailが設定してあったり、WordPressサイトのドメインと異なるメールアドレスを指定していると、通知メールがスパムと見なされブロックされる可能性が高まります。
私の場合も受信箱には入ったものの、開くと「スパムメールの可能性がある」と表示されました。
そのため、WordPressサイトのドメイン名がtubasa-pet.comであれば「xxxx@tubasa-pet.com」のように、「任意の文字列@ドメイン名」に変更しておきましょう。
![](https://tubasa-pet.com/wp-content/uploads/2024/03/5819b041f400a7f2cfd69120d936bc0b.png)
![](https://tubasa-pet.com/wp-content/uploads/2024/03/5819b041f400a7f2cfd69120d936bc0b.png)
まとめ
【Contact Form by WPForms】で「お問合せフォーム」を設置する簡単な流れ
- プラグイン「Contact Form by WPForms」をインストール
- お問い合わせフォームの作成
- お問い合わせフォームをサイトに表示
- 送信元メールアドレスを変更
作成した「お問い合わせフォーム」はContact Form by WPFormsの編集画面を使っていろいろカスタマイズすることができますが、ここまで説明してきたことで当面は十分かなと思います。
![](https://tubasa-pet.com/wp-content/uploads/2024/02/スタンダード表情+手1.jpg)
![](https://tubasa-pet.com/wp-content/uploads/2024/02/スタンダード表情+手1.jpg)
![](https://tubasa-pet.com/wp-content/uploads/2024/02/スタンダード表情+手1.jpg)
最後までお付き合いいただきありがとうございました!
「お問い合わせフォーム」できたでしょうか?
お疲れさまでした( ^^) _旦~~