(57) 【WORDPRESS】 Contact Form 7で reCAPTCHAを使う

投稿者: | 2018年10月17日

この記事は最終更新から 413日 が経過しています。

1. やりたいこと

投稿フォームを WEB上に公開するとスパムにゴミ投稿される危険性がある。

これを回避する策として、Googleが reCAPTCHA なるものを無料で公開してくれている。

reCAPTCHAが設置された投稿ページでは、投稿者は、
「この中からネコを選んでください。」
のような質問に答えて自分が BOTではないことを証明しなければならない。

Contact Form 7にはこれを使う仕組みが用意されている。

2. やってみる

(1) reCAPTCHAのサイトからキーを取得する。

「My reCAPTCHA」ボタンを押下する。
https://www.google.com/recaptcha/

その後、要求に従って情報を入力し、キーを得る。

(2) WORDPRESS上でキーを設定する。

この手順は、Contact Form 7 の公式ページに書かれている。
https://contactform7.com/recaptcha/

簡単に書くと以下の通り。
1) WORDPRESSの管理画面にログインする。
2) 「お問い合わせ」-「インテグレーション」メニューを選択する。
3) 上記(1)で取得したキーを設定する。
以上

(3) コンタクトフォームに reCAPTCHAを配置する。

任意の場所にカーソルを置き [reCAPCHA] ボタンを押下すると、コードが貼り付けられる。

3. できた!

これにチェックを付けずに [送信] ボタンを押すとエラーメッセージが表示される。

4. 応用

(1) reCAPTCHAを中寄にする。

簡単に手順だけをメモっておく。

1) 上記 2.-(3) で reCAPCHAに以下の情報を追記する。
・IDを付与しておく。仮に my-recaptcha とする。
・中寄せ指定のブロック要素で囲んでおく。ここでは div を使う。

<div style="text-align:center">
    [recaptcha id:my-recaptcha]
</div>

2) style.css で aaaaa をインラインブロック指定しておく。

#my-recaptcha{
    display: inline-block;
}

これで reCAPTCHAがセンタリングされるようになる。


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)