ブログ   ※当サイトのコンテンツには広告が含まれる場合があります。

【Contact Form 7の使い方】定番プラグインでお問合せフォームを設置しよう!

2021-07-25 yume-tada

why-contact-form-is-necessary

お問い合わせフォームって、必要なんだろうか?

Worried
お悩みさん

どうやって設置したらいいかわからない。

findout
お調べさん

そんな悩みを解決します。

ゆめただのり
ゆめただ

本記事を読めば、

「設置理由」「設置方法」「対処方法」まで

お問合せフォームのについて、全体を理解することができます。

この記事を書いた人【ゆめただ】

この記事を書いた人
track?id=8172&type=classic&u=e5186be2 b2a8 4366 934d ecf86c7c0e3d

お問合せフォームとは?

 お問合せフォームとは、サイト運営者に対して、

 サイトを訪問したユーザーが問合せができるページのことです。

 問い合わせしたい内容を記入して送信ボタンを押すと、

 メールがサイト運営者宛てに送信される仕組みです。

  

Contact click

お問合せフォームは必要か?

ゆめただのり
ゆめただ

お問合せフォームは必要です。

ただし安易に設置すると、痛い目にあう場合があります。

それは、スパムメールの標的にされてしまうからです。

Contact us

本記事の内容

  • お問合せフォームが必要な理由
  • お問合せフォームの設置方法
  • スパムメール対策の必要性と対策方法【図解】

お問合せフォームが必要な理由

様々な問合せ窓口のため

 あなたのサイトを訪れたユーザーから、様々な意見や情報が得られる可能性が広がります。

 新しい仕事の相談など、将来を変えるような問合せもあるかもしれません。

 一度設置してしまえば、24時間ユーザーが問合せしたいときに受け付けることが可能です。

 コールセンターのように人を雇う必要もありません

 サイトの可能性を広げるためにも、ぜひ問合せ窓口は設置しましょう。

Contact us3

Google Adsenceに必要

 Googleアドセンス※の審査を受けることを考えている方もいるでしょう。

 審査通過のための条件として、お問い合わせフォームの設置は必要です。

 個人サイトだからこそ、信頼性を向上のためにぜひ設置しましょう。

 ※Googleアドセンスとは、Google広告を自サイトに掲載するアフィリエイト手法のこと

 

Contact us2

お問合せフォームの設置方法【図解】

はじめに

 お問い合わせフォームのプラグインで有名な、「Contact Form7」を使用します。

 「Contact Form7」は「Takayuki Miyoshi」さんという日本人が開発されています。

 5百万以上もダウンロードされている有名なプラグインで実績があります。

 当サイトでも使用しています。富士山のロゴが印象的ですね。

Contact Form7の導入

image 4

Contact From7プラグインのインストール&有効化

WordPressの管理画面がら、「プラグイン」―「新規追加」を選択します。

image 9

インストールして有効化します。

image 8

ページタイトルの設定

インストールが完了すると、WordPressの管理画面に

「お問い合わせ」メニューが表示されます。

image 10

「ここにタイトルを入力」のところに、

ページタイトルを入力し設定します。

例:「お問い合わせページ

image 11

フォーム設定

デフォルトで、

氏名」「メールアドレス」「題名」「メッセージ本文」「送信ボタン

の設定が記述されています。

保存」をクリックします。

image 14

メール設定

メールタブに切り替えます。

送信元のところに、送信メールアドレスを設定します。

メッセージ本文等は、デフォルトのままでOKです。

設定完了したら、「保存」をクリックします。

image 16

メッセージ設定

これらもデフォルトでOKです。必要に応じて変更します。

良ければ、「保存」をクリックします。

image 17

その他の設定

必要に応じて、カスタマイズ用のコードを追加でます。

image 18

ショートコードのコピー

保存が完了すると、設定ページの先頭に、

ショートコードが表示されます。

これをコピーしておきます。(後ほど使用します)

image 23

保存の確認

管理画面の「お問い合わせ」を再度クリックし、

保存したフォームが表示されていればOKです。

image 24

固定ページの作成

WordPress管理画面から、「固定ぺージ」―「新規追加」をクリックします。

image

タイトルの設定

固定ページのタイトルを設定します。

タイトルを追加」のところに、

設定したいタイトルを入力します。(例:お問い合わせページ)

image 1

ショートコードの設定

先ほどコピーしておいたショートコードを貼り付けます。

ブロックの追加から、「ショートコード」クリックして追加します。

image 2
image 3

【ショートコード例】

[ contact-form-7 id="1234" title="お問い合わせページ" ]

プレビューで確認

右上の「プレビュー」―「新しいタブでプレビュー

をクリックして、確認します。

image 4

お問い合わせページが出れば成功です!

自分宛に送信して、動作を確認しておきましょう。

image 5

スパムメール対策【図解】

おしらせ

ここからは、スパムメール対策を実施したい方のみ読み進めてください。

reCAPTCHAとは?

reCAPTCHAとは、botと人間を区別するための

Googleが提供している無料のサービスです。

皆さん、よく「私はロボットではありません」

と表示され、次のようなロゴのフォームを見かけたことがあるかと思います。

reCAPTCHA

botによるスパム対策として導入をおすすめします。

スパム対策にも役立ちますし、サイトの信頼性向上にもつながります。

authenticity

reCAPTCHAを導入する

reCAPTCHA V3のAPIキーを取得する

Google公式のreCAPTCHAページにアクセスします。

【ここから「Google reCAPTCHAページ」の操作説明です。】

image 6

Googleアカウントでログインします。

image 7

パス―ワードを入力してログイン。

登録するサイトのURL

reCAPTCHA v3にチェック

登録するドメイン

メールアドレス

を入力します。

image 8

・「reCAPTCHA利用条件に同意するにチェック

・「アラートをオーナーに送信するにチェック

・「送信ボタンをクリックします。

image 9

登録が完了すると、

サイトキー」「シークレットー

が表示されます。

自サイトの設定に必要です。

大切に情報を保管しておいてください。

image 10

【ここまでで「Google reCAPTCHAページ」の操作説明は終了です。】

ContactForm7にreCAPTCHAを設定する

WordPressの管理画面から、

お問い合わせ」ー「インテグレーション

を選択します。

image 11

reCAPTCHAの

インテグレーションのセットアップ

をクリックします。

image 12

reCAPTCHAで登録して取得した、

サイト―キー

シークレットキー

を入力して、「変更を保存」をクリックします。

image 13

お問い合わせフォームを表示します。

送信ボタンのところに、

reCAPTCHAが表示されていれば成功です!

image 14
ゆめただのり
ゆめただ

これで安心して問い合わせフォームを

設置して運用することができると思います。

どうぞ参考にしてください。

-ブログ