Forms

フォームの追加方法

Add panel (A) > Elements > Forms からフォームを追加できます。

Form blockをキャンバスにドラッグします。

フォームの構造

Form blockは親要素の幅を完全に継承し、3つの子要素を含んでいます：

• Form —すべてのフォーム入力と要素を含んでいます
• Success message — フォームが正常に送信されたときに返されるメッセージ
• Error message — フォーム送信に問題がある場合に返されるメッセージ

Form block要素にはSource設定もあり、フォームをLogicに接続できます。Logicを使用して、フォーム送信のデータを他のアプリに送信したり、送信されたフォームや送信内容に基づいて、フォーム送信を別のコンテンツエディターやワークスペースのメンバーにルーティングしたりできます。 Logicの詳細はこちら。

フォームの構成

inputやcheck boxのようなフォーム要素を追加したり削除することで、フォームをカスタマイズすることができます。

フォーム要素

• Field label —ラベルはフォームフィールドの機能または目的を説明するために使用されます。フィールドラベルはフォームのアクセシブルナビゲーションにとって重要なので、削除しないことが重要です。
• Input — inputフィールドは、質問に対する一言回答（名前やメールアドレスなど）のような、単一行のデータを収集するために使用されます。
• File upload — ファイルアップロードボタンを使用すると、サイト訪問者はフォーム送信にファイルを添付することができます。
• Text area — テキストエリア・フィールドは、訪問者が長いメッセージのような複数行のデータを入力できるようにします。
• Checkbox — チェックボックスは、訪問者が1つまたは複数のオプションを選択できるinputデータに最適です。
• Radio button — ラジオボタンフィールドは、訪問者が多くの選択肢の中から1つだけを選択できるinputデータに最適です。 ラジオボタンについてもっと知る。
• Select — Selectは、ドロップダウンエレメントに非常によく似た動作をします。ここでは、訪問者が選択できるさまざまなオプションのリストを追加することができます。複数選択も可能です。
• reCAPTCHA — reCAPTCHAはフォームスパムを防ぐGoogleのサービスです。
• Submit button — 送信ボタンがなければ、フォームは完成しません！このボタンをクリックすると、フォームで収集されたすべてのデータが送信されます。

重要:知っておくべきこと フォーム要素はフォームブロックの中にしかドロップできません。

Form要素の設定方法

Fporm要素（input、送信ボタンなど）をダブルクリックして、その設定を開くことができます。また、要素を選択してEnter/Returnキーを押しても、要素の設定にアクセスできます。

Input設定

各フォーム要素には、そのタイプに応じて異なるinput設定があります。

• Name — すべてのフォーム要素にはNameフィールドがあります。これはフォーム送信時にフィールドを識別する方法です。デフォルトですべてのフォーム名は "Email Form" に設定されています。
• Required — 各フォーム要素には必Requiredオプションがあります。チェックすると、サイト訪問者はそのフィールドに入力しないとフォームを送信できなくなります。
• Placeholder— inputとtext area fieldの場合、placeholderは空のinputフィールドに表示されるテキストで、フィールドへの入力を開始した瞬間に上書きされます。placeholderはサンプルテキストであったり、必要な情報の説明であったりします。ステートメニューからplaceholderテキストをスタイル設定できます。

重要: プレースホルダーテキストをラベルの代わりとして使用したり、関連するinputフィールドの重要な情報やヘルプテキスト（「パスワードは8～20文字で入力してください」など）を提供するために使用することは、決してしないでください。さらに、プレースホルダ・テキストは、サイト訪問者がフィールドに入力を始めると消えてしまうため、ラベルの代わりにプレースホルダ・テキストを使用すると、サイト訪問者がフィールドに属する情報を覚えるのが難しくなります。

• Text type — テキストタイプでは、収集するinputのタイプを指定することができます。例えば、テキストタイプ: emailのinputフィールドはメールアドレスのみを受け入れます。電話のテキストタイプは電話番号とテキスト文字を受け入れます（ただし、電話のテキストタイプはモバイルデバイスでキーパッドを表示します）。Passwordテキストタイプは、inputフィールドに入力された文字を非表示にします。
• Autofocus — ページが読み込まれたときにinputフォームにフォーカスを当てたい（サイト訪問者のカーソルがinputフィールド内にあるようにしたい）場合は、フォーム設定でオートフォーカスオプションをチェックします。フォーム要素にオートフォーカスがチェックされている場合、ページが読み込まれ、その要素までスクロールされます。

注意: ページが読み込まれ、自動的にスクロールダウンする場合は、フォームのinputフィールドでオートフォーカスがチェックされている可能性があります。このような事態を避けたい場合は、フォーム内のすべてのinputフィールドでオートフォーカスのチェックを外してください。また、非表示のフォームフィールドに対してもオートフォーカスオプションのチェックが外れていることを確認してください。

Submit button

Submitボタンの設定では、ButtonテキストとWaitingテキストを設定できます。

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

• Button text — 送信ボタンに表示されるテキスト。デフォルトのボタンテキストは "Submit "です。
• Waiting text — 送信ボタンがクリックされた後、フォームが送信される前にボタンテキストを置き換えるテキスト。デフォルトの待機テキストは "Please wait..." です。

Successステート and Errorステート

SuccessとErrorステートにアクセスするには、フォームブロック内でフォームを選択し、Settings(D) > Form settignsを開きます。ここにステートオプションが表示されます。編集したいステートをクリックします。

• Normal — サイト訪問者がフォームを操作する前のデフォルトのステート
• Success — フォームが正常に送信されたときに返されるメッセージです。テキストを変更したり、好きなようにカスタマイズすることができます。
• Error —フォーム送信に問題があったときに返されるメッセージです。エラーの状態は好きなようにカスタマイズできます。

Pro tip: ユーザーがフォームで問題に遭遇した場合に備えて、エラー状態にメールアドレスを含めることをお勧めします。

Form submissions

誰かがあなたのサイトからフォームを送信すると、送信されたデータはForm notification settings(フォーム通知設定)で指定されたEメールに送信されます。もしあなたがウェブサイトを完全に所有している場合 (クライアントのサイトではない場合)、このデータにアクセスしてサイト設定やエディターで管理することもできます。

プロからのアドバイス：送信されたフォームや送信内容に基づいて、異なるコンテンツエディターやワークスペースのメンバーに送信を指示したい場合は、Logicの送信メール通知ブロックを使用して行うことができます。 Logicの詳細はこちら。

Form notifications

フォーム通知設定には、Site settings > Formsタブでアクセスできます。ここでは、データをどこでどのように受け取るかを設定できます。 フォーム通知の設定についてはこちらをご覧ください。

Form submissions

サイトを所有している場合、Site settings > Formsタブで送信データにアクセスし、管理することもできます。そこで送信データを閲覧したり、送信データをCSVファイルとしてダウンロードすることができます。また、エディターでフォーム送信にアクセスすることもできます。 フォーム送信とフォームデータの管理方法についてはこちらをご覧ください。

重要: デフォルトではすべてのフォーム名は "“Email Form" に設定されています。サイトに複数のフォームがあり、フォーム名を設定していない場合、すべてのフォームからの送信データはSite settings > Forms tab > Form submission data のEmail Formに表示されます。各フォームの送信データを明確に区別できるよう、フォームにはわかりやすい名前をつけることをお勧めします。

Form data and GDPR

免責事項：ここに記載されている内容は、情報提供のみを目的としており、法的助言を目的としたものではありません。一般データ保護規則（GDPR）がお客様にどのように適用されるか、または適用されないかについては、専門の法律顧問にご相談ください。

EU居住者から個人データを収集するウェブサイトをホストしている場合（フォーム送信やサードパーティのスクリプト経由など）、データ管理者としての責任があります。時間をかけてデータ管理者としての責任を理解し、GDPRを遵守するための措置を講じてください。英国情報コミッショナー事務局のデータ保護自己評価チェックリストが役に立ちます。

Webflowで個人データを要求するフォームを作成する場合は、処理に関する別の合法的根拠が適用されない限り、明確に同意を求め、同意を得るようにしてください。

ウェブサイトを通じて個人データを収集するクライアントのためにウェブサイトを作成する場合は、クライアントが個人データの管理者としての責任を理解していることを確認してください。

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

トラブルシューティング

フォームが正常に送信できない場合は、以下をお試しください：

• サイトでreCAPTCHAを有効にしている場合は、サイトのすべてのフォームにreCAPTCHA要素が含まれていることを確認してください。Site settings > FormsタブでreCAPTCHAを有効にすると、reCAPTCHA要素を含まないフォームは送信に失敗します。
• フォームフィールドを非表示にしている場合は、それらのフィールドの設定でAutofocusがチェックされていないことを確認してください。
• 無料アカウントでホスティングされていないサイト (有効なホスティングプランをお持ちでないサイト) のフォーム送信は、合計 10 件までとなります。この制限に達した場合、フォーム送信の受信を継続するにはサイトプランをアップグレードする必要があります。

重要：外部ホスティングにサイトをエクスポートした場合、Webflow はサイト上のフォーム送信を処理しません。エクスポートしたサイトでフォーム送信を収集するには、サードパーティのツールを使用するか、サードパーティのフォーム統合を埋め込む必要があります。

ページが読み込まれ、自動的にスクロールダウンする場合は、inputフィールドでオートフォーカスがチェックされている可能性があります。このような事態を避けたい場合は、フォームのすべてのinputフィールドでオートフォーカスのチェックを外してください。