フォームdocumentアップロード

開始状態

初期状態には以下が含まれます。

• アイコンとテキストユニットを含む最初のアップロードボタン
• デフォルトの通信「最大ファイルサイズ 10MB」を表すメッセージテキストユニット

メッセージのコンテンツを変更したり、完全に削除したりすることができます。また、テキスト ユニットのスタイル設定と同様にカスタマイズすることもできます。

ボタンを独自に変更してスタイル設定する

テキスト編集、カスタムスタイル、アイコンの調整によってアップロード ボタンを変更するオプションがあります。

テキストを編集するには、ボタンをダブルクリックして直接編集できます。スタイルは、テキストに個別に適用することも、ボタン全体を単位として適用することもできます。

パーソナライズするには ボタン、クラスを実装し、スタイルパネルから必要なスタイル属性を追加します。これには、背景色、境界線、フォントの変更などの調整が含まれます。 ボタン デフォルトのアイコンの色にも引き継がれます。

アイコンとテキストに異なる色を維持したり、個別にスタイルを設定したりする場合は、これらのコンポーネントに異なるクラスを割り当て、それに応じてさまざまなフォント色を設定します。

ボタンの既存のアイコンを置き換えるには、デフォルトのアイコンを削除し、その後、希望するアイコンを挿入します。 アセットパネル ドラッグアンドドロップで。

アイコンの標準サイズと左揃えを維持するには、画像の幅または高さを 20 ピクセルに調整し、8 ピクセルの右余白を追加して、アイコンとテキストの間にスペースを作成します。

デフォルトのアイコンの位置を変更するには、ボタン内でアイコンをドラッグして位置を変更します。

アイコンをボタンのテキストの右側に配置するには、アイコンを右に移動し、左の余白を 8 ピクセル、右の余白を 0 ピクセルに調整します。カスタム画像の場合は、右余白に 0 ピクセルを追加する必要はありません。

アップロードの状態

デフォルトの状態と同様に、アップロード状態のアップロード ボタンをカスタマイズしてスタイル設定することができます。

成功の状態

ファイルアップロードの成功状態には以下が含まれます。

• テキスト ブロック — アップロードされたファイルの名前が表示され、編集できません。ただし、外観を調整することはできます。
• リンクブロック内のアイコン — ユーザーは アップロードしたファイルを削除する フォームからこのアイコンのスタイルとホバー効果をカスタマイズできます。

ボタン全体を成功状態にデザインできます。

設計アドバイスと推奨事項

成功状態ボタンには、アップロードが成功したことを示すアイコンやプレースホルダー ファイルのサムネイル アイコンなどの画像を挿入できます。

成功状態ラッパーにテキスト ブロックを含めて、「ファイルがアップロードされました!」や「成功しました!」などのメッセージを表示することもできます。

さらに、削除アイコン (X) を別のアイコン画像やテキスト ブロック (たとえば、「ファイルを削除」など) と入れ替えることもできます。リンク ブロックの幅の値は必ず「自動」に設定してください。

エラーの状態

デザイナーに表示されるデフォルトのエラー メッセージは、「アップロードに失敗しました。ファイルの最大サイズは 10 MB です。」です。ただし、ネットワークの問題、アップロードされたファイルの破損、無効なファイル形式など、ファイル サイズが 10 MB を超える以外の理由でエラー状態が発生することもあります。エラー シナリオごとに固有のメッセージが表示されます。これらのメッセージをカスタマイズする方法については、以下をご覧ください。

警告： エラー メッセージの上のエラー状態に表示されるボタンは、デフォルト状態のボタンと同じです。ここでボタンを変更すると、デフォルト状態の元のボタンが置き換えられます。

エラーメッセージのカスタマイズ

3種類のエラーすべてについて、デフォルトのテキストを変更するオプションがあります。また、テキストの色を変更したり、その他のスタイルを適用したりすることもできます。 テキストブロック 以内 エラー状態 ラッパー。

エラーメッセージをカスタマイズするには、キャンバス上のエラーテキストブロックを選択し、 フィールドエラー設定 の中に 設定パネル各エラーメッセージを編集するには、「鉛筆エラー メッセージの種類にマウスを移動すると表示される「 」アイコン。

各エラータイプのデフォルトメッセージをリセットするには、エラーメッセージを変更して「デフォルトを復元」。

ファイル送信の処理

訪問者がウェブフォームを介してファイルを送信すると、アップロードされたファイルは、指定されたメールアドレスに送信されるフォーム送信通知メール内のウェブリンクとして表示されます。 フォーム通知設定 あなたの中に含まれる サイト設定.

ウェブサイトの管理者を務める場合、各ウェブサイトの提出されたファイルを検査および分析する権限があります。 サイト設定 > フォーム > フォーム送信データ.

ご注意ください： フォーム ファイルのアップロードに使用できるストレージ容量は 10 GB まで無料ですが、それを超えると、1 GB ごとに月額 $0.50 の料金が発生します。ストレージ容量は 100 GB に固定されており、これに達するとフォーム送信の収集が停止されます。この制限は延長できません。送信を消去することでストレージ容量を解放できます。

プライバシーと保護に関する重要なアドバイス

デフォルトでは、Webflowに登録されているユーザーのみがフォームからアップロードされたファイルを取得できます。つまり、Webflowに登録されていないユーザーは、ファイルリンクが提供されていてもこれらのファイルにアクセスできません。関連リンクを持つすべてのユーザーがファイルにアクセスできるようにするには、 サイト設定 > フォーム タブ > アップロードされたファイルへのアクセスを制限する.

注記： Zapier または別の外部統合を使用してフォーム ファイルの送信を別のクラウド ストレージ サービスに送信するには、この機能も無効にする必要があります。

次のステップ： フォームの送信を効果的に処理する方法を学びます。