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

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

10日目はセキュリティー面の強化を目的としたGoogle『reCAPTCHA』の導入方法を解説します。まずはreCAPTCHAについて少しご紹介します。

reCAPTCHAとは?

「□私はロボットではありません」

この文章を一度は見たことありませんか?場合によっては写真を選択したり、質問に答えたり…なにかとめんどうくさい「あれ」をreCAPTCHAと呼びます。

reCAPTCHAを導入する理由

不正アクセスを対策するために必要です。お問い合わせフォームに実装することで変なメールを送ってくるウイルスからWeサイトを守ることができます。

お金はかかるのか

Googleで提供されている機能で無料で導入可能です。

導入は簡単か

この記事でイチから手順を紹介しているので簡単に導入できます。
導入の目安時間は15分です。

それではさっそく導入していきましょう!

WebflowにreCAPTCHAを導入する

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

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

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

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

Webflowのテンプレート

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

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

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

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

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

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

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やインスタなどでシェアする時の画像などを設定することもできますよ!
それでは次回はまた頑張りましょう。お疲れ様でした。

併せて読むとおすすめの記事▼

Webflowを使ったSEO設定の仕方【11Days/Webflow大学】

WebflowでSEOの設定方法を解説します。またSNSでのリンクシェアの設定方法も解説。WebflowはSEO設定も簡単できます。未経験者を対象に解説をしているので「SEOとは」から解説しています。

Read more...

【2022年最新版】Webflowの使い方を項目別にまとめました

Webflowの使い方で迷っていませんか?本記事ではWebflowの使い方をCMSやリッチテキスト、独自ドメイン、フォントの追加方法など項目別にまとめました。Webflowの使い方で悩むことがある方は必見です。

Read more...
くりたまさと
Masato Kurita

大学卒業後、セブ島とオーストラリアに1年間、語学留学。

現在は、Webflow専門のウェブサイト制作・SNS運用代行、MEO対策などを行っています。

アフィリエイト
ご質問ありがとうございます。
確認次第、返信致しますので、
少々お待ち下さい!
エラーが発生致しました。もう一度お試し頂くか、Twitterより連絡ください。