Webflowでお問い合わせフォームにreCAPTCHAを設定する方法

Webflowでお問い合わせフォームを作ったけれど、
・知らない海外アカウントからの変なメッセージ
・広告っぽいURLが突然送られてくる…

そんな「スパムっぽいフォーム送信」が届き始めていませんか？

スパム対策をしていないフォームは、Botに見つかると毎日・毎時間のように送信されることもあります。
そんな時におすすめなのが、Googleが提供している「reCAPTCHA」という仕組み。

この記事では、Webflowに標準で搭載されているreCAPTCHA（v2）を使って、コード不要でスパム対策する方法を解説します。

この方法でできること

✅ Google公式のスパム対策が使える
✅ チェックボックス型なので導入が簡単（Invisibleではありません）
✅ Webflowの管理画面だけで完結（コード不要）
✅ フォームのデザインを大きく崩さずに実装できる

前提：WebflowがサポートしているreCAPTCHAの種類

Webflowが公式にサポートしているのは「reCAPTCHA v2 チェックボックスタイプ」です。

☑️「私はロボットではありません」にチェックを入れる、あの形式ですね。

手順①｜GoogleでreCAPTCHAを登録

まずはGoogleの管理画面で、reCAPTCHAを使いたいサイトを登録します。

1. Google reCAPTCHAにアクセス
2. 「ラベル」→ わかりやすい名前を入力（例：パン屋テンプレ2024）
3. タイプ → 「reCAPTCHA v2」を選択
4. サブタイプ → 「私はロボットではありません チェックボックス」
5. ドメイン → xxxxx.webflow.io や 独自ドメイン（yourdomain.com）を入力
6. 利用規約にチェックして「送信」

→ 登録が完了すると、「サイトキー」と「シークレットキー」が発行されます。
この2つはWebflowに貼り付けるので、コピーしておきましょう！

手順②｜Webflowの設定画面にキーを貼るだけ！

1. Webflowの管理画面で対象プロジェクトを開く
2. 上部タブから「Project Settings」→「Forms」へ移動
3. 「reCAPTCHA」セクションがあるので、そこに
   　- Site Key（サイトキー）
   　- Secret Key（シークレットキー）
   　を入力
4. 保存して完了！

動作確認＆よくあるトラブル

• フォームをプレビュー or 公開して確認
• 「私はロボットではありません」が表示されるかチェック
• メールがちゃんと届くか送信テスト

補足：営業メール対策には別の工夫も必要

reCAPTCHAは自動送信されるBotをブロックする仕組みですが、
人間が手入力で送ってくる「営業メッセージ」には効果がありません。

💬 対策としては、フォームの近くに
「営業目的での送信はご遠慮ください」
という注意書きを添えることで、ある程度抑止できます。

まとめ｜フォームの安全性を保ちたい人へ

• Webflowなら、reCAPTCHA v2をコード不要で導入可能
• スパム投稿を減らし、安心してフォームを公開できます
• 設定も「Googleでキー取得→Webflowに貼る→パーツ追加」だけ

✋「設定が難しい…」と感じた方へ

Enjin Labでは、Webflowでのフォーム公開・スパム対策まで含めた公開サポートパックをご用意しています。
テンプレートを買っても「公開が不安…」という方のために、一緒に操作して進める伴走スタイルでサポート中です！