知識なしWebサイト運営

Contact Form7とInvisible reCaptchを使って問い合わせページ(フォーム)のつくり方【おすすめプラグイン】

2019年10月19日

プラグインのインストール

検索すると当たり前のように問い合わせフォームを作る為に利用されているプラグインのご紹介です。

ある程度知識がある方ならわからない訳がないって感じで知りたいことを調べるのに何個かのサイトを参考にいたしました。

そんな経緯もあって少し説明を書きたいと思います。

まずはプラグイン→新規追加から検索でcontact程度の入力で出てくるぐらい使われているプラグインだと思います。

下の赤枠の『Contact Form7』を今すぐインストール→有効化します。

 

続いて『Invisible reCaptcha』を新規追加→検索を表示して今すぐインストール→有効化します。

 

reCAPTCHAって?

reCAPTCHAは、Webフォームなどに登録する際、botなどによる悪質なアクセスからWebサイトを守るための機能です。

フォーム利用する際に下に貼ったような「私はロボットではありません」というチェックボックスにチェックを入れた経験が一度はあると思います。

これがスパム対策に効果的とされるreCAPTCHAの仕組みの一部です。

 

設定とreCAPTCHAの登録

『Contact Form7』を有効化すると下の赤枠が表示されます。

コンタクトフォームの設定は後に解説させていただきます。

 

『Contact Form7』の「インテグレーション」を利用すればreCAPTCHAを付けることが出来るようなのですが

『Contact Form7』で設定をするとサイトの全ページ右下にバッジが表示されてしまうこととそのバッジとPageTopに戻るボタンと被ってしまいましたので

今回ご紹介するように『Invisible reCaptcha』でreCAPTCHAを付けることとなりました。

下の赤枠を展開すると緑枠のリンクが表示されますがそのままクリックすると同じページからリンク先へ飛んでしまいますので

右クリック→新しいタブで表示をします。(もしくはCtrl+クリック)

 

リンクからGoogle reCAPTCHAのページへ飛ぶので赤枠のAdmin consoleをクリック。

 

Google reCAPTCHAで登録

オレンジ枠にサイトのURL

緑枠でv3を選択

ピンク枠でドメインを追加(当サイトhttps://abcdpromo.com/だとabcd.promoの部分だけ)

黒枠はGoogleにログインしているアドレスが自動で表示されています。

最後に青枠に✔を入れて登録の完了です。

 

登録が完了すると下の赤枠緑枠にアルファベットや数字のキーが表示されます。

このキーを『Invisible reCaptcha』に入力します。

 

Invisible reCaptchaの設定

ダッシュボードの設定→Invisible reCaptchaを展開します。

先ほど上に貼った赤枠緑枠を下の同じ色の枠に入力します。

ピンク枠は言語なので私は迷わずJapaneseを選択。

オレンジ枠は表示する位置で全て試しましたがInlineがいいかなと思います。

気になる方は試してみて位置を決めてください。

上記を入力・選択が完了したら変更を保存を押します。

 

次にWordPressのタブを選択します。

赤枠はログインフォームに付けるか?

緑枠は登録フォームに付けるか?

オレンジ枠はコメントフォームに付けるか?

ピンク枠はパスワードフォームに付けるか?

という内容のようですが全て✔をして変更を保存します。(どうしても不要な方は必要なものだけを選択してください)

 

赤枠のContact Formsのタブを展開して緑枠の『Contact Form7』での使用に✔を入れて変更を保存します。

 

以上でInvisible reCaptchaの設定が完了です。

Contact Form7の設定

ダッシュボードのお問い合わせ→コンタクトフォームで下の編集画面を開きます。

 

フォームの設定

はじめて開いた時には

<label> お名前 (必須)
[text* your-name] </label>

<label> メールアドレス (必須)
[email* your-email] </label>

<label> 題名
[text your-subject] </label>

<label> メッセージ本文
[textarea your-message] </label>

となっています。

フォームの背景にこんな風に入力してくださいという感じでサンプルが表示されている感じにはなっていませんので

<label> お名前 (必須)
[text* your-name placeholder"例) 山田 太郎"] </label>

<label> メールアドレス (必須)
[email* your-email placeholder"例) abcd@smple.com"] </label>

<label> お問い合わせ題名
[text your-subject placeholder"題名を入力してください"] </label>

<label> お問い合わせ内容
[textarea your-message placeholder"質問やお仕事の依頼などお気軽にご連絡ください。"] </label>

の前にスペースと赤文字を追加してあげるとサンプルの表示がされるようになります。

""の間の文字を変更することでお好みの表記に変更できます。

完了後は保存を押してください。

 

メールの設定

フォームが終わったらメールのタブからメール設定を行います。

下の画像のフォームは特に設定の変更しておりません。

こちらはフォームが送られた際に自分のメールに送られてくる際の設定となります。

 

下へ行き、メール2に✔を入れると下の画像の設定画面が展開されます。

こちらのメール2はフォームを送ってくださった方へ自動で返信される内容のものです。

私の場合は、お礼の文を追加してその下に確認のためのメッセージ本文(これは元々入力されています)

下にサイト名とURLを記載しました。

 

私の場合は不要でしたので一般的な問い合わせフォームにあるような内容でしか作っておりませんがフォームにファイルを添付する設定などもありますので必要な方はチャレンジしてみてください。

 

Contact Form7の設置

コンタクトフォームの画面や編集画面に下の画像のような設置用のショートコードが載っておりますのでそれを使用して問い合わせページを作ります。

 

私の場合は固定ページにお問い合わせというタイトルを付けて先ほどのショートコードをコピペしました。

 

ページを表示するとこんな感じとなりました。(下の画像)

 

最後に

以上で『Contact Form7』を使った問い合わせフォームと『Invisible reCaptcha』でのreCAPTCHAの設置の解説となります。

お問い合わせを付けることで見てくれた方からの大切な連絡を受け取り、悪意のあるアクセスからはreCAPTCHAで守るというのが今回の目的でした。

じゃあフォーム付けなければいいのではないか?となってしまいますが

見てくださった方からのせっかくの貴重な連絡を受け取らないことは非常に残念なこととともに

見る側からすると質問したいけどできないってのはユーザー目線で見ていいサイトやブログとは言えないということになります。

こだわった色々な機能の詰まったフォームを目指すのも良いと思いますがフォームがないとか送るまでのプロセスが多すぎて送るのが面倒なんてことにならない

あくまでユーザーに優しいサイトやブログを目指したいと思います。

少しでも誰かのお役に立てたら幸いです。

 

 

-知識なしWebサイト運営

Copyright© 『誰かの役に立つ』が家族のシアワセに@兼業主夫 , 2019 All Rights Reserved.