【日本語版Webflow University】 フォーム（問い合わせフォーム）

この投稿はWebflow社が提供する「Forms」の内容を元に作成しています。

引用元：https://university.webflow.com/lesson/intro-to-forms

日本語版Webflow Universityでは、Webflowの基本的な使い方を解説しています。

‍

Webフォーム（問い合わせフォーム）はWebサイトを運用する上で、非常に重要な機能の一つです。メルマガの登録や見込み顧客から仕事についての問い合わせを受けるなど、様々な用途で活躍します。

Webflowでは小難しいプラグインや複雑な設定をせずに、シンプルな操作で誰でもWebフォームをサイトに実装することができます。

レッスン概要

1. フォームを追加する方法
2. フォームの概要
3. 各フォーム要素の説明
4. 送信成功と送信エラーの設定
5. フォーム送信
6. フォームデータとGDPR
7. トラブルシューティング

フォームを追加する方法

エレメント追加パネル＞エレメント＞フォームカテゴリからフォームを追加することができます。

フォームブロックをメインキャンバスにドラックします。

フォームの概要

フォームブロックは、親要素の横幅を継承し、3つの子要素を含みます。

1. フォーム — すべてのフォーム入力の要素が含まれています
2. 成功メッセージ — フォームが正常に送信されたときに画面に表示されるメッセージ
3. エラー メッセージ— フォームの送信に問題がある場合に表示されるメッセージ

フォームの構造

入力フィールドやチェックボックスなど任意のフォーム要素を追加または削除して、フォームをカスタマイズできます。

フォーム要素

• フィールドラベル —フィールドラベルは、フォーム要素の項目名です。フィールドラベルは、デフォルトで表示されているフォームラベルを編集して、ユーザーにとって使いやすいフォームづくりを心がけましょう。
• インプット—インプットは、質問に対するシンプルな回答(名前やメールアドレスなど) など、1行のデータを収集するために使用されます。
• ファイルのアップロード—ファイルのアップロード要素を使用すると、フォーム入力時にユーザーはファイルを添付できます。
• テキストエリア—テキストエリア要素を使用すると、ユーザーは長いメッセージなどの複数行のデータを入力できます。
• チェックボックス—チェックボックスは、ユーザーがいくつかの選択肢を選択できるようになります。
• ラジオボタン—ラジオボタンフィールドは、ユーザーにいくつかの選択肢から1つを選択させたい場合に使用できます。
• セレクト—セレクトは、ユーザーにドロップダウンから選択肢を選ばせたい場合に使用できます。複数を選択させることもできます。
• reCAPTCHA—フォームスパムの防止に役立つGoogleサービスである、reCAPTCHAを実装することができます。※当社ではreCAPCHAの実装は標準仕様です。
• 送信ボタン—送信をクリックすることで、フォームに登録されたすべてのデータが送信されます。

一言メモ

フォーム要素は親要素がフォームの場合のみ配置可能です。例えば、ドロップダウンをフォーム外で使用したい場合は、フォーム＞セレクトではなく、コンポーネント＞ドロップダウンを使用するようにしましょう。

各フォーム要素の説明

フォーム要素(入力、送信ボタンなど) をダブルクリックして、その設定を開くことができます。要素を選択してEnter/Returnを押して、要素の設定にアクセスすることもできます。

入力設定

各フォーム要素には、そのタイプに基づいて異なる入力設定があります。

• 名前—すべてのフォーム要素には名前フィールドがあります。フォームの送信データをメールで受け取った際にフィールドを識別することができます。
• 必須Required)—各フォーム要素には必須オプションを設定できます。オンにすると、ユーザーはこのフィールドに入力しないとフォーム送信できなくなります。
• プレースホルダー—インプットおよびテキストエリア要素の場合、プレースホルダーは空の入力フィールドに入力礼としてテキストを表示できます。これは、フィールドに入力を開始すると上書きされます。サンプルテキストまたは必要な情報の説明として活用してください。スタイルパネルからプレースホルダーテキストのスタイルを設定できます。
• テキストタイプ—テキストタイプを使用すると、入力値にバリデーションを掛けることができます。たとえば、テキストタイプの入力フィールドをEメールにすると、メールアドレス形式の入力のみを受け入れます。テキストタイプを電話番号にすると、電話番号形式の入力のみを受け入れます。テキストタイプをパスワードにすると、インプットフィールドに入力された文字を非表示にします。
• オートフォーカス—オートフォーカスを設定しておくと、ユーザーがフォームあるページに遷移した際に、あらかじめオートフォーカスを設定したフィールドを選択している状態にすることができます。また、オートフォーカスを設定したフィールドが遷移した画面外にある場合は、オートフォーカスを設定したフィールドが表示されるところまでページを自動スクロールしてくれます。

一言メモ

Webflowは日本語対応していないため、しばしば開発側に不都合を強いることがあります。フォームもその一つで、チェックボックスとラジオボタンの名前を日本語にすると、フォームの送信データをメールで受け取った際に、うまく表示されないことがあります。従って、この2カ所だけは、半角英字で設定する様にしましょう。

一言メモ

プレースホルダーは入力が始まると消えてしまうため、より重要な情報はフィードの下部に但し書きで記載していつでもユーザーが認識できる様にしましょう。フォームにはディブブロックやテキスト、リンクテキストなども配置できるため、フォーム要素以外も使いながら使いやすいフォームづくりを心がけましょう。

送信ボタン

送信ボタンの設定では、ボタンのテキストと待機中のテキストを設定できます。

送信ボタンをダブルクリックすると、設定ウィンドウが表示されます。ここでは、2つの設定を変更できます。

• ボタンテキスト—送信ボタンに表示されるテキスト。デフォルトのボタンテキストは「Submit」です
• 待機中のテキスト—送信ボタンがクリックされた後、フォームが送信される前に、送信中であることを示すテキストを設定できます。デフォルトの待機中テキストは「Please wait...」です。

送信成功と送信エラーの設定

送信成功時の表示と送信エラー時の表示を編集するためには、フォームブロックを選択し、画面右の要素設定パネルを開きます。ここで、Normal、Success(成功)、Error(エラー)を切り替えることで、メインキャンバスの表示も切り替わり、編集が可能になります。

• Normal—サイト訪問者がフォームを操作する前のデフォルトの状態
• 成功—フォームが正常に送信されたときに表示されるメッセージ。テキストやスタイルを自由に変更することができます。
• エラー— フォームの送信に問題がある場合に表示されるメッセージ。テキストやスタイルを自由に変更することができます。

一言メモ

フォームで問題が起こった場合に備えて、送信エラー時にユーザーの問い合わせ先としてメールアドレスを表示することをおすすめします。

フォーム送信

ユーザーがサイトのフォームを送信すると、送信されたデータはフォーム設定で指定されたメールアドレスに送信されます。また、フォームの送信データをデータベースに溜め込みたい場合、サードパーティー製品側にデータを送るように構築することもできます。フォームデータはプロジェクト設定またはエディターで管理することもできます。

一言メモ

MailChimpやZapierをWebflowのフォームと統合することで、フォームデータのリスト化や、送信先の振り分けなどより高度なカスタマイズを施すことができます。

フォーム通知

プロジェクト設定＞フォームタブでフォームの通知設定を行うことができます。

ここでは、データを受け取る方法とその送信先を設定できます。

フォーム送信

プロジェクトの管理アカウントでは、プロジェクト設定＞フォームタブで、送信されたデータを管理することもできます。そこで添付ファイルを確認したり、データをCSVファイルでダウンロードしたりできます。エディターでフォーム送信データにアクセスすることもできます。

フォームデータとGDPR

免責事項: ここに記載されている内容は、情報提供のみを目的として提供されており、法的助言を目的としたものではありません。一般データ保護規則 (GDPR) がどのように適用されるか、または適用されないかを判断するには、専門の法律顧問と協力する必要があります。

EU居住者から個人データを収集するWebサイトを運営している場合(フォームの送信やサードパーティのスクリプトなどを介して)、データ管理者としての責任が発生しています。データ管理者としての責任を理解し、GDPRを遵守するための措置を講じる必要があります。UK Information Commissioner's Office のデータ保護自己評価チェックリストを参考にしてください。

Webflowで個人データを要求するフォームを作成している場合は、別の処理の法的根拠が適用されない限り、明確に同意を求めて取得するようにしてください。
※弊社では、プライバシーポリシーページを設置し、個人情報の取り扱いに同意する旨のチェックボックスを用意する様にしています。

Webサイトを通じて個人データを収集するWebサイトをクライアントに代わり運営している場合は、クライアントがその個人データの管理者としての責任を理解していること表明してください。

サードパーティツール(Zapier など) を使用して Webflow フォームを外部データ ソースに接続し、それらと連携して個人データを送信する場合は、データ管理者としての責任を確認してください。

詳細:一般データ保護規則に備える方法と Webflow の取り組み

トラブルシューティング

フォームが正常に送信されない場合は、次のことを試してください。

• サイトでreCAPTCHAを有効にしている場合は、サイトのすべてのフォームにreCAPTCHA要素が含まれていることを確認してください。プロジェクト設定＞フォームタブでreCAPTCHAが有効になっている場合、reCAPTCHA要素を含まないフォームは送信に失敗します。
• フォームブロック内のフィールドを一部非表示にしている場合は、それらのフィールドの設定でオートフォーカスがチェックされていないことを確認してください。
• 無料アカウントでサイトを公開している場合のフォーム送信数可能数は、最大10件までです。この制限に達した場合、引き続きフォーム送信を受信するしたい際には、サイトプランをアップグレードする必要があります。

一言メモ

Webflow上で構築したソースファイルは、エクスポートして別の環境でデプロイすることもできます。その場合、Webflowで設定したフォーム機能は動作しませんので、別途別環境側でフォーム機能を実装する必要があります。

ページが読み込まれて自動的に下にスクロールする場合は、スクロールしなければ見えない位置にある入力フィールドでオートフォーカスがオンになっている可能性があります。これを発生させたくない場合は、フォームのすべての入力フィールドのオートフォーカスオプションをオフにしてください。

‍

まとめ

いかがでしょうか。

当社では、Webflowの関心を持ってくださった方々に向けて、無料Webflow説明会を実施しています。

以下よりお問い合わせフォームにアクセスし、お気軽にお申し込みください。

ご発注を検討されている企業様だけでなく、フリーランスや制作会社など同業者様でも構いません。

Webflowの広がりによって、発注側も制作側もより幸せになれる社会の創造に向けて、当社は邁進していきます。

今後とも宜しくお願い致します。

‍

Webflowとはなにか？についてはこちらで解説しています。合わせてご覧ください。

‍Webflowについての基本的な使い方について解説した他の記事はこちらからご覧ください。

Webflowのメリットについて解説した記事も投稿しています。よろしければご覧ください。

‍

‍