Webflowで『reCAPTCHA』を設定する方法

WebflowにreCAPTCHAを導入する

以下の手順でreCAPTCHAを導入していきます｡

• 【手順1】お問い合わせに設置
• 【手順2】Googleで登録しよう
• 【手順3】WebflowとGoogleを連携

たったの3ステップです｡ちゃちゃっと終わらせましょう｡

【手順1】お問い合わせに設置

Webflowには最初から『reCAPTCHA』のテンプレートが用意されています。まずはこれをコンタクトフォームに入れてましょう。

• コンタクトフォームを選択
• 送信ボタンの上に入れましょう。

これでOK。めっちゃ早いですね。

【手順2】Googleで登録しよう

実際に使用するためにはGoogleと連携する必要があるので「Project Settings」を開いて設定画面に進みます｡

『Forms』の項目から、reCAPTCHAまでスクロールします。写真の赤丸部分をクリックして、GoogleのreCAPTCHA登録ページを開きましょう。

‍

✓Googleページから新規登録をする

各項目を埋めて初期設定を完了させましょう。

上から順番に解説していきます。

• ①ラベル
  後で見た時に、どのサイトのreCAPTCHAかすぐに分かるように名前をつけましょう。
• ②reCAPTCHA  タイプ
  v3とv2、2つ選択できますが今回は「v2」を選択します。理由はWebflowのフォームにはv2のKeyしかないからです。v3も導入できると思いますが、まずは一旦v2でいいでしょう。
• ③ドメイン設定
  reCAPTCHAを導入したいサイトのドメインを入力します。

入力して送信したら作成完了です｡

【手順3】WebflowとGoogleを連携

登録が正常に完了すると画面が切り替わり、サイトキーが表示されます｡表示されたサイトキーをWebflowの設定画面で登録したらreCAPTCHAの設定は終了です。

保存前には「reCAPTCHAを有効にする」を「Yes」にしましょう。

保存をすると・・・

「すべてのコンタクトフォームにreCAPTCHAがありますか？必要ですよ？」みたいな警告が出てきます。最初にコンタクトフォームのシンボルにreCAPTCHAを入れたので、問題ありませんね。

WebflowのreCAPTCHAをサイズ変更する

reCAPTCHAの導入が完了したので、コンタクトページのレスポンシブデザインを作成していきます。

ポートレートサイズを確認しよう

ポートレートでサイズではreCAPTCHAが横幅を飛び出しているので調整が必要です。しかしreCAPTCHAは直接変更することができません。

新たにDivブロックを作成してそのDivを親にして､その中にreCAPTCHAを入れること。

• Divブロックを作成
  ・クラス名「reCAPTCHA wrap」
• reCAPTCHAを中に入れる
• reCAPTCHA wrapを選択
  ・2D＆3Dtransforms「･･･」をクリック。下記画像①が表示される。
  ・画像の①を参考にコンテンツを「左上」に配置
  ・「＋」をクリック｡
  ・Scaleから縦と横0.7に設定

reCAPTCHAを小さく表示することができました。一番小さいサイズでは少し飛び出ていますが、ニンテンドーのデバイスでサイトを閲覧する人はいないと判断し、このままにしておきます。

また仮にいたとしてもなんとか利用はできそうですね。

まとめ

10日目ではreCAPTCHAの導入方法を学ぶことができました。今回はWebflow設定をいじる時間のほうが長かったかもしれませんね。

Webflowに用意された『reCAPTCHA』は英語表現しかないのが少し残念です。しかし実際に公開するとユーザーの言語設定によって表示言語が変わるので特に問題はないです｡

次回は【SEO】についてWebflowでどのように設定するか解説します。Twitterやインスタなどでシェアする時の画像などを設定することもできますよ！
それでは次回はまた頑張りましょう。お疲れ様でした。

‍