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

くりたまさと
Masato Kurita
栗田将人
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専門家として事業を行っている栗田自身が実際に使用し、便利だと感じたWebflowの使い方を共有します。またノマドライフや、事業計画、経験と過程について発信しています。これは僕からあなたへの手紙です。ここでしか贈らない言葉があります。それでは限定メルマガでお会いしましょう。

ご登録ありがとうございます。次回の更新まで少々お待ちください。
なにかしらエラーがでています。治らない場合はXまでご連絡ください。

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

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

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

Read more...

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

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

Read more...
🎉【期間限定】無料キャンペーン実施中9/1まで
Beta

無料のWebflow
30分間レクチャー実施中!!

期間限定‼️
Webflowでこのポップアップの作り方わかりますか?このレクチャーではWebflowの使い方、Webflow導入後のサポートなどWebflowに関する質問はOK!完全無料で実施しているのでお気軽にお申し込みください。9月1日まで実施中
※ビデオ通話(Google meet)を使用します。
※予告なく、内容の変更やキャンペーンが終了する場合がございます。
※機密事項などを取り扱う際は事前にお申し付けください。内容はYoutubeなどSNSに 露出する場合がございます。お申し付けいただければ露出はしません。
※レクチャー時間は一組30分までとさせていただきます。それ以上は別途ご相談、ご依頼ください。30分の中に自己紹介や案件の相談時間などは含まれていませんので慌てずまずは自己紹介から行いましょう。
※自己紹介など含め45分を想定しています。
※ご予約機能はGoogleカレンダーで作成しています。
※こちらはベータリリースとして行っています。
※Webflowを学ぶ目的、サイト制作依頼の相談、Webflowサポートのお試し、以外の目的でのお申し込みはおやめください。
以上の注意事項の他に必要な情報は都度更新、変更していきます。
Dashboard mockup