ブログ

【Contact Form 7】お問い合わせフォームの作成と使い方を初心者向けに解説

「Contact Form 7」というプラグインでお問い合わせフォームを作成したいです!

お問い合わせフォームの作成の仕方と設置方法を教えてください!

こんな疑問を解決します!

お問い合わせフォームを設置しておけば、読者からの質問や企業からの広告掲載依頼を受け取ることができます。

本記事を読めば、10分程度で以下のようなお問い合わせフォームを設置することができますよ!

お問い合わせヘッダータブの例
お問い合わせヘッダータブ
お問い合わせフォームの例
お問い合わせフォーム

\当ブログテーマ/

【特典付き】AFFINEGER6導入

お問い合わせページの作成方法|Contact Form 7

お問い合わせフォームの作成方法|Contact Form 7

それではさっそくお問い合わせフォームを作成していきましょう。

手順①:Contact Form 7のインストール・有効化

まずはWordPress管理画面で、「プラグイン」→「新規追加」をクリックします。

WordPress管理画面サイドメニュー
「プラグイン」→「新規追加」
WordPress管理画面サイドメニュー

検索窓に「Contact Form 7」と入力し、「今すぐインストール」をクリックします。

プラグイン新規追加画面
プラグイン新規追加画面

インストールできたら「有効化」をクリックします。

「Contact Form 7」有効化
「Contact Form 7」有効化

有効化しただけではまだお問い合わせフォームは作成されません。

次の手順でお問い合わせフォームを作成していきます!

手順②:コンタクトフォームを作成

まずはサイドメニューで「お問い合わせ」→「新規追加」をクリックします。

WordPress管理画面サイドメニュー
「お問い合わせ」→「新規追加」
WordPress管理画面サイドメニュー

コンタクトフォーム追加画面でタイトルにわかりやすい名前を入力し、何も設定は変更せず「保存」をクリックします。

コンタクトフォーム追加画面
コンタクトフォーム追加画面

保存すると、ショートコードが表示されるので、コピーします。

お問い合わせ設定ページ
お問い合わせ設定ページ

コードをクリックして「Ctrl(macの人はcommand) + C」でコピーができます!

手順③:お問い合わせページを作成

コードをコピーできたら、サイドメニューの「固定ページ」→「新規追加」をクリックします。

お問い合わせ設定ページ → 固定ページ新規追加画面
お問い合わせ設定ページ → 固定ページ新規追加画面

固定ページの新規追加面で、以下のように操作していきましょう。

  • タイトルに「お問い合わせ」と入力
  • 「+」をクリック
  • 検索窓に「ショートコード」と入力
  • 「ショートコード」をクリック
固定ページ新規追加画面①
固定ページ新規追加画面①

コピーしたショートコードを張り付けパーマリンクを適当な英数字に変更後、「公開」をクリックしましょう。

固定ページ新規追加画面②
固定ページ新規追加画面②

上記で解説したのはブロックエディタ(グーテンベルク)でのやり方ですが、クラシックエディタでもほぼ同じ方法で作成することができます。

クラシックエディタでは、ショートコードを本文に直接貼り付けるよ

お問い合わせフォームの設置方法

お問い合わせフォームの設置方法|Contact Form 7

お問い合わせページまで作成できましたね!

ただ、サイトの表面上に表示されているわけではないので、このままでは読者や企業がお問い合わせページまでたどり着くのが困難な状態です。

そこで、サイトの表面上にお問い合わせページへのボタンを設置しましょう。

まず、サイドメニューで「外観」→「メニュー」をクリックします。

WordPress管理画面サイドメニュー
「外観」→「メニュー」
WordPress管理画面サイドメニュー

ここからは、「作成済みのメニューでお問い合わせフォームを設置する人向け」と「新しくメニューを作る人向け」に分けて説明します。

作成済みのメニューでお問い合わせフォームを設置する人向け

以下の手順で「お問い合わせ」をメニューに追加しましょう。

  • 任意のメニューを選択
  • 選択」をクリック
  • お問い合わせ」にチェック
  • メニューに追加」をクリック
メニューに追加
メニューに追加

「お問い合わせ」が追加されたことを確認し、「メニューを保存」をクリックしましょう。

メニューを保存
メニューを保存

新しくメニューを作る人向け

まず、以下の手順で新しいメニューを作成しましょう。

  • 新しいメニューを作成しましょう。」をクリック
  • 任意のメニュー名を入力
  • 任意のメニュー設定にチェック
  • メニューを作成」をクリック
メニューを作成
メニューを作成

メニュー名はサイトの表面上には表示されないので、自分で分かりやすい名前を付けましょう!

メニューが作成できたら、「お問い合わせ」にチェックし、「メニューに追加」をクリックします。

メニューに追加

「お問い合わせ」が追加されたことを確認し、「メニューを保存」をクリックしましょう。

メニューを保存
メニューを保存

これでお問い合わせフォームの設置は完了です!

実際に自分のサイトを確認してみましょう。

ヘッダーに「お問い合わせ」が表示され、クリックするとお問い合わせページが表示されればOKです!

実際にお問い合わせフォームからメールを送信して、登録されたメールアドレス宛に届くか確認してみてもよいでしょう。

ちなみに、お問い合わせメールが届くメールアドレスは、サイドメニューの「設定」→「一般」をクリックし、

一般設定画面の『管理者メールアドレス』で確認することができますよ。

登録メール確認
登録メール確認

このままでもお問い合わせフォームの機能としては充分ですが、次章でもっと利便性を上げる方法をご紹介します!

お問い合わせフォームの利便性を上げる

お問い合わせフォームの利便性を上げる

もうお問い合わせフォームとしては使える状態になっていますが、さらに利便性を上げる方法をご紹介します。

それがこの2つ。

  • 自動返信メールを設定
  • スパム(迷惑)メール防止

順番に解説していきます!

①:自動返信メールを設定

自動返信メールとは、お問い合わせフォームを送信してくれた読者や企業に対して、自動でメールを送信してくれる機能です。

自動送信メールの本文に送信を感謝する文章や対応が遅れる可能性がある旨を記載しておけば、相手への印象がよくなるというメリットがあります。

とはいえ強制ではないので、設定したい方だけ以下の手順で設定しましょう!

まずは、コンタクトフォームの編集画面で「メール」をクリックします。

お問い合わせメール編集画面
お問い合わせメール編集画面

メールを下にスクロールし、以下の操作を行いましょう。

  • メール(2)の使用」にチェック
  • 『題名』を任意の文に変更
  • メッセージ本文』に任意の文を追加
自動送信メールの編集
自動送信メールの編集

ちなみに僕は『題名』に、

【この度はお問い合わせいただきありがとうございます】

メッセージ本文』に、

---------------------------------------

この度はお問い合わせありがとうございます。

折り返しご連絡させていただきますが、数日お時間を頂く場合がございます。

何卒ご了承くださいませ。

と入力しています。

入力ができたら、「保存」をクリックしましょう。

これで自動送信メールの設定は完了です!

実際にお問い合わせフォームからテストメールを送信し、入力したアドレス宛にメールが届くか確かめてみましょう!

②:スパム(迷惑)メール防止

セキュリティ対策をせずにお問い合わせフォームを設置していると、スパムメールが届くことがあります。

そこで、スパムメールを防止する「reCAPCHA」というセキュリティ対策を行い、スパムメールの量を減らしましょう。

「reCAPCHA」の設定にはGmailが必要になるので、Gmailを設定していない方は以下のリンクから設定しましょう。

Gmailを設定できたら、「reCAPCHA」の設定をしていきましょう。

まずは、「reCAPCHA」の公式ページにアクセスします。

サイト上部の「v3 Admin console」をクリックします。

「reCAPCHA」の公式ページ
「reCAPCHA」公式ページ

Googleログイン画面でGmailアドレスまたは電話番号を入力し、「次へ」をクリックします。

Googleログイン画面「アドレスまたは電話番号入力」
Googleログイン画面「アドレスまたは電話番号入力」

パスワードを入力し、「次へ」をクリックします。

Googleログイン画面「パスワード入力」
Googleログイン画面「パスワード入力」

すると、reCAPCHAのサイト登録画面が表示されるので、各項目を以下のように操作します。

  • ラベル:わかりやすい名前を入力
  • reCAPCHAタイプ:『reCAPCHA v3』を選択
  • ドメイン:サイトドメインを入力
  • reCAPCHA利用条件に同意する』:チェックを付ける
  • アラートをオーナーに送信する』:チェックを付ける
  • 送信」をクリック
reCAPCHAのサイト登録画面
reCAPCHAサイト登録画面

送信ができたら、以下のような『reCAPCHA登録完了画面』に遷移するはずです。

reCAPCHA登録完了画面
reCAPCHA登録完了画面

後ほど「サイトキー」と「シークレットキー」は使うので、画面はそのままにしておいてください。

(別ブラウザで)WordPress管理画面にて、

お問い合わせ」→「インテグレーション」をクリックします。

WordPress管理画面サイドメニュー
「お問い合わせ」→「インテグレーション」
WordPress管理画面サイドメニュー

下にスクロールすると『reCAPCHA』項目があるので、「インテグレーションのセットアップ」をクリックします。

外部 API とのインテグレーション画面
外部 API とのインテグレーション画面

reCAPCHA設定画面で、先ほどのサイトキーとシークレットキーを入力し、「変更を保存」をクリックします。

reCAPCHA設定画面
reCAPCHA設定画面

これで『reCAPCHA』の設定は完了です!

サイトの画面右下に『reCAPCHA』が表示ざれているか確認してみてください。

サイトに『reCAPCHA』が表示
サイトに『reCAPCHA』が表示

まとめ:お問い合わせフォームを作成し、メッセージを受け取る準備をしよう

まとめ:お問い合わせフォームを作成し、メッセージを受け取る準備をしよう

お問い合わせフォームを設置しておくと、読者からコメントや質問が来たり、企業から依頼が来たりすることがあります。

機会損失にならないように、あらかじめ設置しておくことをおすすめします。

プラグインについてもっと知りたいという方は以下の記事をどうぞ!

  • この記事を書いた人
  • 最新記事

ちよ

IT会社員|副業ブロガー|ずぼらでもできるほったらかし投資|ゆるく投資を始めたい人向け|2年で総資産0→3,000,000|クレカ|暗号資産×つみたて投資

よく読まれる記事

セゾンMUJIカードで無印良品をお得に買い物しよう 1

無印良品でお買い物をする皆さん!無印良品でお得にお買い物をする方法を知ってますか?「セゾンMUJIカード」なら、なんとポイントが3倍でお買い物ができちゃいます!ぜひ「セゾンMUJIカード」を発行してお得にお買い物をしましょう!

エポスカードを発行して2,000円をGETしよう! 2

エポスカードを発行して2,000円分のエポスカードをもらいましょう!還元率0.5%で、全国10,000店舗以上でお得な優待が受けられちゃいますよ。

特典が盛りだくさん!イオンカードを作ろう 3

いまEAONカードに新規入会すると、最大11,000円分のポイントがもらえちゃいます!映画が1000円で観れちゃう特典やお得にSuicaを使いたい人にもおすすめのカードです!

AFFINGER6購入&導入方法 4

AFFINGER6の購入やインストール方法、インストール後にやるべきことをわかりやすく解説します。

【失敗しない】登録すべき「おすすめASP」6社を紹介 5

おすすめのASPを知りたいですか?アフィリエイト初心者や、これからアフィリエイトをしようか迷っている方に向けて、登録すべきASPを教えます。

-ブログ
-, ,