こんにちは。ジロウです。
ここでは、WordPressのプラグイン『Contact Form7』を使ったお問い合わせフォームに、『reCAPTCHA』を設置する方法をご紹介します。
『Contact Form 7』をヴァージョン5.1以降に更新した際の、『reCAPTCHA』v3への設定については、下記を参考にしてみて下さい。
さて、ブログを一定の期間運営していると、お問い合わせフォームから英文のメールが届くことがあります。
僕みたいに英語が得意ではない人からすれば、
「え、何なに！？」
と、一瞬オロオロすることと思います。
でも落ち着いてグーグル翻訳なんかで確認してみると、それらの内容はだいたいツールやウィジェットのセールスだったり、
「あなたのウェブサイトに脅威が迫っている！」
なんていう脅し文句であったりします。
また時には日本語でも、怪しいコピー商品（パチモノ）の売り込みが届いたりすることもあります。
こんなメールをいちいち相手にしてはいられないので、届かないようにするのが一番。
実は、これらスパムメールのほとんどが、ツールを利用した自動配信、つまりロボットです。
そこで、自分のブログのコンタクトフォームに「私はロボットではありません」というチェックボックスを設置して、スパム対策を施そうというわけです。
これを設置することで100％スパムメールを駆除できるってわけではないですが、何も手を打たないよりは遥かにマシです。
というわけで、設置方法を解説していきますが、
- WordPressを利用している人
- プラグイン『Contact Form 7』を使ってお問い合わせページを作っている人
- Googleアカウントを持っている人
上記に当てはまる人限定の方法なので、あらかじめご承知置きくださいね。
『Contact Form 7』は、こんな感じのプラグインです。
まだ導入していない方は、WordPressダッシュボードから、
［プラグイン］⇒［新規追加］
と進んで、インストール＆有効化をしてみて下さい。
STEP1：『reCAPTCHA』のAPIキーを取得する
■WordPressダッシュボードから、
［お問い合わせ］⇒［インテグレーション］
と進みます。
■表示されたボックス右上の『google.com/recaptcha』をクリックします。
■GoogleのreCAPTCHAのサイトにジャンプするので、右上の『My reCAPTCHA』をクリックします。
Googleアカウントにログインしていない場合には、アカウント選択画面が表示されます。
利用するアカウントをクリックしてパスワードを入力し、［次へ］をクリックして下さい。
■Googleアカウントにログインした状態であれば、次のような画面が表示されます。
下図のように設定していきましょう。
- Label：適当な名前を付けましょう。（例：『お問い合わせ』など）
- Choose the type of reCAPTCHA：『reCAPTCH v2』を選択します。
- Domain：あなたのブログのドメイン部分（このブログなら『watabonslab.com』を入力します。
- Accept the reCAPTCHA Terms of Service：チェックを入れます。（『サービス利用規約に同意をする』という意味です）
- Send alerts to owners：ここにもチェックを入れます。
- Register：設定が完了したらクリックします。
■次の画面で、下記のように『key』が発行されます。
必要なのは、『Site key』と『Secret key』の２つです。
■ここで、WordPressのダッシュボードを別タブで開き、再び、
［お問い合わせ］⇒［インテグレーション］
と進みます。
■表示されたボックス内の［キーを設定する］をクリックします。
■『reCAPTCHA』で発行された『key』をコピペします。
サイトキー ⇒ 『Site key』
シークレットキー ⇒ 『Secret key』
■［保存］をクリックすれば、『reCAPTCHA』の準備が完了です。
STEP2：『Contact Form7』に『reCAPTCHA』を設置する
すでに『Contact Form7』を利用したお問い合わせページを作っている場合には、以下のように進めて下さい。
初めて『Contact Form7』を利用する場合には、『STEP3』へお進み下さい。
■WordPressダッシュボードから、
［お問い合わせ］⇒［コンタクトフォーム］
と進みます。
■『reCAPTCHA』を設置したいフォームの『タイトル』下にカーソルを当て、表示される［編集］をクリックします。
■[submit “送信”]の上に１行ほどスペースを空けておき、［reCAPTCHA］をクリックします。
■下図のような画面が開くので、右下の［タグを挿入］をクリックします。
■[submit “送信”]の上に［recaptcha］が表示されますので、左下の［保存］をクリックします。
■実際に『お問い合わせ』ページを開いてみて、下図のように表示されていれば完了です。
STEP3：初めての『Contact Form7』に『reCAPTCHA』を設置する
初めて『Contact Form7』を利用したコンタクトフォームを作る場合には、以下の手順で作業を進めて下さい。
■WordPressダッシュボードから、
［お問い合わせ］⇒［新規追加］
と進みます。
■お問い合わせフォームの設定画面になります。
下図のように、[submit “送信”]の上に１行ほどスペースを空けておき、［reCAPTCHA］をクリックします。
■下図のような画面が開くので、右下の［タグを挿入］をクリックします。
■[submit “送信”]の上に［recaptcha］が表示されますので、左下の［保存］をクリックします。
■画面の上の方にショートコードが表示されるので、これをコピーしておきます。
■ダッシュボードのサイドメニューから、
［固定ページ］⇒［新規追加］
と進みます。
■エディターの本文入力欄に、コピーしたショートコードを貼り付けます。
ビジュアルモード、テキストモード、どちらでもＯＫです。
■プレビューしてみると、［送信］ボタンの上に、「私はロボットではありません」が表示されているはずです。
ページタイトルに「お問い合わせ」などと付ければ、これで完成です。
実際にテストしてみて、「私はロボットではありません」にチェックを入れないと送信できないようになっていれば大丈夫です。
わけの分からない英文メールにお悩みの方は、一度試してみて下さい♪
コメントを残す