ブログにお問い合わせフォームを設置したいのですが、手順を教えてください。
「Contact Form 7」を使えば、あっという間にできちゃいます。
Googleアドセンス合格のためには、問い合わせフォームの設置が重要なポイントになります。
あわせて読みたい...
でもお問い合わせフォームを設置しようとすると、
・お問い合わせ用のページを作らないといけない。
・送信ボタンを押したらメールで通知してくれるようにしないといけない。
・お問い合わせフォームに記入した内容がきちんとメールに記載されていないといけない。
など、意識しなければならないことがたくさんあります。
でも大丈夫!Contact Form 7を使えば、初心者でも簡単にできちゃう!
ContactForm7とは…
✔ 問い合わせフォーム設置用プラグイン
✔ 無料で利用できる
✔ 初心者でも簡単に設定できる
✔ 完全日本語対応
今回の記事ではお問い合わせフォームを設置したい初心者ブロガー向けに、Contact Form 7を使ったお問い合わせフォームの設置方法をご紹介します。
目次
Contact Form 7の設置方法
まずはプラグインのインストールからスタートです!
Contact Form7をインストールする
①WordPressの管理画面にログインします。
②左のメニューバーを表示させ、「プラグイン」→「新規追加」をタップします。
③上部の検索窓に「Contact Form」と入力します。「Contact Form7」のプラグインが表示されるので「インストール」をタップします。
お問い合わせフォームを作成する
④インストールしたContact Form7の「有効化」をタップします。
⑤上部に「プラグインを有効化しました」と表示されたのを確認し、Contact Form7のプラグインの「設定」をタップします。
⑥「コンタクトフォーム」のページに遷移するので、トップに表示される案内を「非表示にする」をタップして消します。
⑦デフォルトで作成されている「コンタクトフォーム1」をタップして編集ページに移ります。
⑧デフォルトタイトルの「コンタクトフォーム1」を任意の名前に変更します。
今回の例では「お問い合わせフォーム」にしています。
⑨本文の修正を行います。
デフォルトでも十分ですが、変更したい方は任意の内容に変えましょう。
⑩今回の例では以下のように設定しています。
氏名 | →お名前(必須) |
メールアドレス | →メールアドレス(必須) |
題名 | →タイトル |
メッセージ本文(任意) | →メッセージ本文 |
編集が完了したら「保存」をタップして設定を反映します。
⑪上にスクロールして戻り、「メール」タブをタップします。
⑫メールタブの下方にある「メール (2) を使用」にチェックを入れます。
お問い合わせがあったときの自動返信メールを設定する
⑬「メール (2) を使用」の下にさらに設定項目が増えるのを確認します。
⑭「メッセージ本文」に任意の本文を設定して「保存」をタップします。
ここで入力した内容が自動返信メールに記載されます。
どんな内容を書いたら良いかわからない方は、下記フォームをコピペして利用してください。
※このメールはシステムからの自動返信です。送信専用であるため、返信いただいても管理人には届きません。
[your-name]様
お世話になっております。このたびはお問い合わせいただき、ありがとうございます。
以下の内容でお問い合わせを受け付けました。
内容を確認して、ご回答が必要なものは都合のつくタイミングで回答いたします。
なお、都合によりご回答に時間がかかってしまうこともあります。あらかじめご理解のほどよろしくお願いいたします。
━━━ お問い合わせ内容 ━━━━━━━━━━━━━
お名前:[your-name]E-Mail:[your-email]お問い合わせ内容:[your-message]
━━━━━━━━━━━━━━━━━━━━━━━━━━
⑮ページ上部にあるショートコードをコピーしておきます。
お問い合わせフォーム用の固定ページを作成する
作成したお問い合わせフォームをお問い合わせページに落とし込みます。
⑯WordPressのメニューバーより「固定ページ」→「新規追加」の順にタップします。
⑰タイトルを任意に設定し、手順⑮でコピーしたショートコードを本文に貼り付けます。
⑱右上の歯車マークをタップします。
⑲「固定ページ」のタブをタップし、「URL」をタップして編集します。
⑳「URL」を任意のものに設定して✕ボタンをタップします。
今回の例では、URLは「お問い合わせ」を意味する英語の「inquiry」としています。
㉑「公開」をタップしてお問い合わせページを公開します。
㉒作成したページに移って、挙動を確認します。
実際に問い合わせフォームを使ってみましょう。
㉓ブログの管理用アドレスに、問い合わせフォームからの通知が届くことを確認します。
㉔お問い合わせページで入力したメールアドレス宛に、自動返信メールが届くことを確認します。
ブログのトップページにお問い合わせページが表示されているかを確認します。
㉕ブログのトップページでメニューバーをタップします。
㉖表示される選択肢の中から、手順⑰で設定したタイトルをタップします。
㉗お問い合わせページが正常に表示されることを確認します。
スパムボット対策のためにreCAPCTHAを設定する
問い合わせフォームを作ると、必ずといっていいほど、ボットからスパムが飛んできます。
これを極力少なくするためにreCAPTCHAを設定しましょう。
reCAPTCHAを設定することで、人間の操作かボットの操作かを自動的に見極めてくれます。
㉘まずはGoogle reCAPTCHAのアカウント登録を行います。Google reCAPTCHAにアクセスして、左上のメニューバーをタップします。
㉙「v3 Admin Console」をタップします。
㉚Googleアカウントのサインイン画面に移るので、Google reCAPTCHAに登録するアカウント(メールアドレス)を入力します。
㉛登録するアカウントのパスワードを入力して「次へ」をタップします。
㉜下表を参考にサイトを登録します。
ラベル | お好きな名前を入力します。 ※Google reCAPTCHA上の管理用の名前です。 |
reCAPTCHAタイプ | 「reCAPTCHA v3」を選択します。 |
ドメイン | あなたのブログのドメインを登録します。 ※当サイトの場合は、「divisave.com」です。 |
reCAPTCHA利用条件への同意 | 「reCAPTCHA 利用条件に同意する」にチェックを入れます。 |
㉝下にスクロールして「アラートをオーナーに送信する」にチェックを入れて「送信」をタップします。
「(あなたのドメイン)」が登録されました。と表示されたらGoogle reCAPTCHAの登録が完了です。
㉞表示された画面から「サイトキーをコピーする」をタップします。
㉟WordPressの管理画面に戻り、「お問い合わせ」→「インテグレーション」の順にタップします。
㊱「reCAPTCHA」を見つけて、「インテグレーションのセットアップ」をタップします。
㊲「サイトキー」のところに手順㉞でコピーしたキーを貼り付けます。
㊳手順㉞と同じように下の「シークレットキーをコピー」をタップします。
㊴手順㊲のページに戻り、「シークレットキー」のところに先ほどコピーしたキーを貼り付け、「変更を保存」をタップします。
あなたのブログに下の画像の赤枠のようなアイコンが表示されたら作業完了です。
これですべての作業が完了です。
まとめ
今回の記事では、簡単にお問い合わせフォームを作れるプラグイン「Contact Form 7」の作成方法をご紹介しました。
かなり簡単に作れるのがおわかりいただけたと思います。
お問い合わせフォームはGoogleアドセンスに合格するためにも大事なポイントになります。
ぜひこの機会にお問い合わせフォームを作成してみましょう!