Webflowでのフォーム作成ガイド
今回はWebflowと他の便利なツールを使って、フォームを作成する方法についてご紹介します。この記事を読むことで、スパム対策機能、ユーザーへの自動返信機能のあるフォームを作成できるようになります！
1. 一般的なお問い合わせフォームをWebflowで組む方法
まずは、一般的なお問い合わせフォームの作成方法についてです。
詳細な手順は以下の「【日本語版Webflow University】のフォーム作成ガイド」にまとめていますので、ぜひご覧ください。
【日本語版Webflow University】 フォーム（問い合わせフォーム）
2. スパム対策の実装方法（reCAPTCHA）
スパム対策は重要です。ここでは、WebflowでのreCAPTCHA設定手順を解説します。
reCAPTCHAフィールドの追加
- Webflow Designerで「Add Elements」パネルに移動。
- 「Forms」セクションを選択。
- 「reCAPTCHA」要素をフォーム内の送信ボタンの直前にドラッグ＆ドロップします。
Google reCAPTCHA管理コンソールでのサイト登録
- GoogleのreCAPCHAにサイトを登録する。こちらのページから行えます。
- 「+」ボタンをクリックして新しいサイトを追加。
- 「reCAPTCHA v2」を選択し、「私はロボットではありません」チェックボックスを選択。
- ドメインフィールドにWebflowサブドメインとカスタムドメインを入力。
- 利用規約に同意して「送信」をクリック。
- サイトキーとシークレットキーが表示されるので、メモしておく。
WebflowでreCAPTCHAを有効化
- Webflowプロジェクトの「Project Settings」から「Forms」タブに移動。
- 「reCAPTCHA validation」セクションまでスクロール。
- サイトキーとシークレットキーを入力。
- 「Enable reCAPTCHA validation」をオンにして「Save Changes」をクリック。
設定が完了したら、Webflowサイトを公開してreCAPTCHAを有効化します。
3. 送信者への自動返信機能の実装方法（Zapier）
次に、フォーム送信者に自動返信メールを送る方法を見ていきましょう。ここでは、Zapierを使用します。
Zapierアカウントの作成
まず、Zapierに無料アカウントを作成します。アカウントを作成すると、Zapierのホームページダッシュボードが表示されます。
Zapの作成
次に、「Zap」を作成します。Zapは、異なるアプリケーション間で情報をやり取りするための自動化タスクのことです。
Zapのトリガー設定
- Zapierのダッシュボードから「Create」→「Zap」をクリック。
- 「Triggert」をクリックしたら「Webflow」で検索。
- 「App&Event」タブ内の「Event」フィールドで「Form submission」を選択する。これは、Webflowでフォームが送信されたときのトリガーになります。
- 「Account」タブにてWebflowアカウントをZapierに接続します。
- 「Trigger」タブにて、reCAPCHAを設定するサイトとフォームを選択します。
- フォーム送信データを取得するために「Test trigger」をクリック。
これにより、フォームに入力されたデータ（名前、メールアドレス、メッセージなど）が表示されます。
自動返信メールの設定
- 「Choose App & Event」セクションで「Gmail」を選択。
- 「Event」フィールドで「Send Email」を選択。
- GmailアカウントをZapierに接続。「Sign in」をクリックすると、Googleアカウントとの連携ウインドウが現れます。接続後、メールの送信設定を行います。
- 「To」フィールドに、フォーム送信者のメールアドレスを指定。
- 「From」フィールドに自分のGmailアドレスを入力。
- 「Subject」フィールドにメールの件名を入力
（例：「お問い合わせありがとうございます」）。 - 「Body」フィールドにメールの本文を入力
（例：「お問い合わせありがとうございます。近日中にご連絡いたします。」）。
Zapierにおけるメールデザインの変更方法
Body typeを「HTML」に設定することで、メールのデザインをカスタマイズすることが可能です。ZapierのエディタにHTMLコードを直接入力することで、フォーマットされたテキスト、画像、リンクなどを含むリッチメールを作成できます。
テストと公開
設定が完了したら、テストを行い、メールが正しく送信されることを確認します。テストが成功したら、「Publish Zap」をクリックしてZapを有効にします。
以上が、Webflowでフォームを作成し、スパム対策と自動返信機能を実装する方法です。いかがでしたでしょうか？ぜひ、一緒に試してみてください！
参考になれば幸いです。
