{"id":6404,"date":"2024-04-14T18:54:06","date_gmt":"2024-04-14T10:54:06","guid":{"rendered":"https:\/\/webflow.tenten.co\/?p=6404"},"modified":"2024-04-14T18:54:06","modified_gmt":"2024-04-14T10:54:06","slug":"form-document-upload","status":"publish","type":"post","link":"https:\/\/webflow.tenten.co\/en\/form-document-upload\/","title":{"rendered":"Form document upload"},"content":{"rendered":"\n<div class=\"docs_rich-text w-richtext\">\n<p>Assuming your website is under the <a href=\"https:\/\/webflow.com\/pricing\">Business, Ecommerce Plus, or Ecommerce Advanced hosting<\/a> plan, you are able to integrate a <strong>Document upload<\/strong> button to your forms. This permits users to append files to their form entries, which you can automatically forward to the site\u2019s data manager. Moreover, you are free to customize the look of the upload button and its various states to enhance the file uploading experience.<\/p>\n<p>The <strong>Document upload<\/strong> button can assist you in gathering:<\/p>\n<ul role=\"list\">\n<li>Papers such as CVs, portfolios, and applications through job application forms<\/li>\n<li>Pictures and films like screenshots and screen-captures through customer support forms<\/li>\n<li>Packed files that, for instance, consist of images of a contestant in a competition through a submission form<\/li>\n<\/ul>\n<p>Within the scope of this tutorial:<\/p>\n<ol role=\"list\">\n<li>How to append Document upload to your form<\/li>\n<li>How to personalize Document upload configurations<\/li>\n<li>How to modify Document upload states<\/li>\n<li>How to supervise file entries<\/li>\n<\/ol>\n<p><strong>Prior to commencement<\/strong><\/p>\n<p>Refer to our basics on forms lesson to understand how you can craft forms in Webflow.\u00a0<\/p>\n<h2>How to append Document upload to your form<\/h2>\n<p>Firstly, confirm that you have included a <strong>Form block<\/strong> component on your page. Subsequently, drag and drop a <strong>Document upload<\/strong> button from the<strong> Add panel<\/strong> (A)&gt;<strong> Forms<\/strong> section directly within your <strong>Form<\/strong>.<\/p>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94b6424e6edbb0dedacb7_6284145e6a45158840c6e6e9_opmyojzcjbsv5khyyu3wa6g_oljwoon4lhdu4742umv8qplbk3libvjrawwa0c5tezv_s6stvkjjotkkcxn2gerrtndwg6wukyflfrseghqbqyzn34vuqcpjzvnumczwwj8surba8bwiadvf_a.png\" alt=\"File upload element highlighted in the Forms section of the Add panel.\" title=\"64b94b6424e6edbb0dedacb7_6284145e6a45158840c6e6e9_opmyojzcjbsv5khyyu3wa6g_oljwoon4lhdu4742umv8qplbk3libvjrawwa0c5tezv_s6stvkjjotkkcxn2gerrtndwg6wukyflfrseghqbqyzn34vuqcpjzvnumczwwj8surba8bwiadvf_a\"><\/div>\n<\/figure>\n<h2>How to personalize Document upload configurations<\/h2>\n<p>Immediately after integrating the document upload input onto the canvas, the \u201cUpload file\u201d button will display in addition to a textual instruction. The settings panel will also open to the <strong>Document upload<\/strong><strong>default<\/strong> state.<\/p>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94b6424e6edbb0dedac93_6284145e0be6594e4f558754_yqf__eaqqqh3l1c8vd8h9jqskq-3lx17xueesesx7f6g4hax1d5akxjvttj14b0x0fqzn9umaokhvgcsoo2zumf9zrl2mh7jrtod4umqz7qfrkmtykakmprfzna0-iah0k55wdz92_qkbnt43a.png\" alt=\"File upload element settings for the Default state of a File upload button.\" title=\"64b94b6424e6edbb0dedac93_6284145e0be6594e4f558754_yqf__eaqqqh3l1c8vd8h9jqskq-3lx17xueesesx7f6g4hax1d5akxjvttj14b0x0fqzn9umaokhvgcsoo2zumf9zrl2mh7jrtod4umqz7qfrkmtykakmprfzna0-iah0k55wdz92_qkbnt43a\"><\/div>\n<\/figure>\n<p>In this location, you can switch between the 4 <strong>States<\/strong> of the document upload operation. Below, we will explain how to tweak and design these.<\/p>\n<p>You also get to <strong>Label<\/strong> the <strong>Document upload<\/strong> button. This is particularly beneficial when you wish to include multiple <strong>Document upload<\/strong> buttons in a form (e.g., \u201cCV\u201d and \u201cCover Letter\u201d). The label will aid in identifying the submitted files in your entries data.<\/p>\n<p>You are given the option to make the document upload obligatory, akin to other form input components.\u00a0<\/p>\n<p>You can also opt to <strong>Permit only specific file categories.<\/strong> This enables you to limit the type of files that users can submit through the button in that specific form.<\/p>\n<h3>Permitting only specific file categories<\/h3>\n<p>As a default, a user can submit any supported file category. Notwithstanding, you can restrict file categories and select whether the <strong>Document upload<\/strong> button will allow users to submit a <strong>Paper<\/strong> file, an <strong>Picture<\/strong> file, or even custom file categories you define in the <strong>Custom<\/strong> text area input.<\/p>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94b6424e6edbb0dedac96_6284145edc63292a2bde422a_lmat4enmtjwznymbpi8jvuppuj_vm0anct4vnvsbbvv7f-dc9ycrodoyh-sermal3xc9yqk8x9vro86-9ef_6fkmgdhaggmruojwk85fwflsea9urpvnr3x1bjmqp1-vbiurwzoj4osdfeybgq.png\" alt=\"The \u201cAllow only specific file types\u201d option in File upload settings, where the \u201cCustom\u201d option is checked to allow only .pdf uploads.\u00a0\" title=\"64b94b6424e6edbb0dedac96_6284145edc63292a2bde422a_lmat4enmtjwznymbpi8jvuppuj_vm0anct4vnvsbbvv7f-dc9ycrodoyh-sermal3xc9yqk8x9vro86-9ef_6fkmgdhaggmruojwk85fwflsea9urpvnr3x1bjmqp1-vbiurwzoj4osdfeybgq\"><\/div>\n<\/figure>\n<h4>Supported file categories for document upload<\/h4>\n<p>Every document upload button accepts a single file of up to 10MB in size of the ensuing file formats:<\/p>\n<ul role=\"list\">\n<li><strong>Papers<\/strong> \u2014 .ai, .csv, .doc, .docx, .indd, .key, .numbers, .pps, .ppt, .pptx, .psd, .ods, .odt, .pages, .pdf, .txt, .xls, .xlsx, .odt, .ods, .odp<\/li>\n<li><strong>Images<\/strong> \u2014 .bmp, .dng, .eps, .gif, .jpg, .jpeg, .png, .ps, .raw, .svg, .tga, .tif, .tiff, .webp<\/li>\n<li><strong>Custom<\/strong> \u2014 Audio files (.m4a, .mid, .mp3, .mpa, .ogg, .wav, .wma), video files (.3gp, .avi, .flv, .m4v, .mov, .mp4, .mpg, .wmv), .zip, .heic<\/li>\n<\/ul>\n<h6><strong>Reminder: <\/strong>File formats are not case-sensitive.<\/h6>\n<h4>Unsupported file categories for document upload<\/h4>\n<p>For security purposes, the following file categories are not permitted: .apk, .app, .bat, .cgi, .com, .exe, .ps1, .gadget, .jar, .sh, .wsf, .tar, .tar.gz<\/p>\n<h6><strong>Valuable info: <\/strong>You can embed up to 20 document upload buttons in each form and configure each one individually. For instance, you can have one button that only accepts PDFs for an \u201cAppend your CV\u201d button, and another that only accepts images for an \u201cUpload a headshot\u201d button.<\/h6>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94b6424e6edbb0dedacd7_6284145e0be659bdf4558753_jw3_s3dnl3ch3iecuuvfzntogbushth4qzltgvbkbkr077ufglpwgxl8w96x0nsnxia3eoqobxeel-ecenhw4tyudo4vcwg1ydsv8qzyjzk2wgsdbqqojvlsed2cpqpyyvajguihul9dftzt-g.png\" alt=\"Two File upload buttons on an example application form. One button is labeled \u201cUpload r\u00e9sum\u00e9\u201d while the other is labeled \u201cAttach a headshot.\u201d\" title=\"64b94b6424e6edbb0dedacd7_6284145e0be659bdf4558753_jw3_s3dnl3ch3iecuuvfzntogbushth4qzltgvbkbkr077ufglpwgxl8w96x0nsnxia3eoqobxeel-ecenhw4tyudo4vcwg1ydsv8qzyjzk2wgsdbqqojvlsed2cpqpyyvajguihul9dftzt-g\"><\/div>\n<\/figure>\n<h2>How to customize Document upload states<\/h2>\n<p>You possess full authority over the appearance and vibe of the document upload journey in all its varied states:<\/p>\n<ul role=\"list\">\n<li><strong>Default<\/strong> \u2014 the regular appearance of the button<\/li>\n<li><strong>Uploading<\/strong> \u2014 how the button looks during the upload process<\/li>\n<li><strong>Success<\/strong> \u2014 the appearance of the button post file upload<\/li>\n<li><strong>Error<\/strong> \u2014 the message that will be shown in case of an issue<\/li>\n<\/ul>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div>\n        <img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94b6424e6edbb0dedacad_6284145fc2064372b51487dc_l9wb-lavgrdene1ya71ejvfuof83ngktrlnfa9edkshgwz5wne6y4eds8dal9hnsfepzwdr0q4xksavtrns8swjydhahvtrlbdstv3_x6n-tq_mj1-mwmf-befu3qre2p3rrfz3nsfj3ibdjjw.png\" alt=\"The default state of the File upload button. The button shows the text \"Upload File\", and next to it, there is a message stating \"Maximum file size 10MB\". \" title=\"64b94b6424e6edbb0dedacad_6284145fc2064372b51487dc_l9wb-lavgrdene1ya71ejvfuof83ngktrlnfa9edkshgwz5wne6y4eds8dal9hnsfepzwdr0q4xksavtrns8swjydhahvtrlbdstv3_x6n-tq_mj1-mwmf-befu3qre2p3rrfz3nsfj3ibdjjw\">\n    <\/div>\n<\/figure>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div>\n        <img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94b6424e6edbb0dedaca9_6284145f108e6cc150db50b5_iggwagwyupifcr8pg9nx9cdplr9j3krchi2arxlk-zulbuwbzo5kpwt_gejmrn_1rv0jsgbugpefyythtiwutyg34i3v4f-nuwndxt39z_m7jdh0oj_azakxbgmiu7ayzukxnhdqcqrzxhajaa.png\" alt=\"The current state of the File upload button is during the process of uploading. It now reads \"Uploading...\" and shows a small spinner displaying progress.\" title=\"64b94b6424e6edbb0dedaca9_6284145f108e6cc150db50b5_iggwagwyupifcr8pg9nx9cdplr9j3krchi2arxlk-zulbuwbzo5kpwt_gejmrn_1rv0jsgbugpefyythtiwutyg34i3v4f-nuwndxt39z_m7jdh0oj_azakxbgmiu7ayzukxnhdqcqrzxhajaa\">\n    <\/div>\n<\/figure>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div>\n        <img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94b6424e6edbb0dedaca1_6284145f55912101e31b3927_lqwxfjvzt9tpra2allz3v9vzt-qnpblcyzn1gh4d-e-0w2nzbzebnk_6uwphw33iupkbhjxxcy_7oqhd1omzmda_5nklw3paczfsvabuvqdb7db3lq2dqf5-g7_-1ilpp_mawqlv37pe5dhbeg.png\" alt=\"The File upload button has successfully uploaded the file, showing the file name alongside an \"X\" button to delete it.\" title=\"64b94b6424e6edbb0dedaca1_6284145f55912101e31b3927_lqwxfjvzt9tpra2allz3v9vzt-qnpblcyzn1gh4d-e-0w2nzbzebnk_6uwphw33iupkbhjxxcy_7oqhd1omzmda_5nklw3paczfsvabuvqdb7db3lq2dqf5-g7_-1ilpp_mawqlv37pe5dhbeg\">\n    <\/div>\n<\/figure>\n<h3>Start state<\/h3>\n<p>The beginning state includes:<\/p>\n<ul role=\"list\">\n<li>The initial upload button containing an icon and a text unit<\/li>\n<li>A message text unit portraying the default communication &#8220;Maximum file size 10MB&#8221;<\/li>\n<\/ul>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div>\n        <img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94b6424e6edbb0dedacad_6284145fc2064372b51487dc_l9wb-lavgrdene1ya71ejvfuof83ngktrlnfa9edkshgwz5wne6y4eds8dal9hnsfepzwdr0q4xksavtrns8swjydhahvtrlbdstv3_x6n-tq_mj1-mwmf-befu3qre2p3rrfz3nsfj3ibdjjw.png\" alt=\"The default state of the File upload button. The button reads, \u201cUpload File,\u201d and the message next to it reads, \u201cMax file size 10MB.\u201d \" title=\"64b94b6424e6edbb0dedacad_6284145fc2064372b51487dc_l9wb-lavgrdene1ya71ejvfuof83ngktrlnfa9edkshgwz5wne6y4eds8dal9hnsfepzwdr0q4xksavtrns8swjydhahvtrlbdstv3_x6n-tq_mj1-mwmf-befu3qre2p3rrfz3nsfj3ibdjjw\">\n    <\/div>\n<\/figure>\n<p>You have the liberty to alter the content of the message or eliminate it completely. You also possess the ability to customize it akin to styling a text unit.<\/p>\n<h4>Altering and styling the button uniquely<\/h4>\n<p>You have the option to modify the upload button via text edits, tailor-made styles, or adjusting the icon.<\/p>\n<p>To edit the text, you can directly edit it by double-clicking the button. Styling can be applied either to the text separately or encompassing the entire button as a unit.<\/p>\n<p>To personalize the <strong>button<\/strong>, implement a class, and add desired styling attributes through the style panel. This includes tweaks like background color, borders, or font changes, among others. Adjusting the font color of the <strong>button<\/strong> also carries over to the default icon&#8217;s color.<\/p>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div>\n        <img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94b6424e6edbb0dedacbd_6284145f4b189bd3b3971d93_ivsnzemxrd8qkezqrpbkgw1bahkjuqg9nqfjgyqez_t7msyese6vybjxwpv2buctcom4xvbybmoktwmiqm-qvtnm8p8disp7aqmbymlibfd1ltnfsztq204pnvnpbohbgs-f3s7syeljgdpphg.png\" title=\"64b94b6424e6edbb0dedacbd_6284145f4b189bd3b3971d93_ivsnzemxrd8qkezqrpbkgw1bahkjuqg9nqfjgyqez_t7msyese6vybjxwpv2buctcom4xvbybmoktwmiqm-qvtnm8p8disp7aqmbymlibfd1ltnfsztq204pnvnpbohbgs-f3s7syeljgdpphg\">\n    <\/div><figcaption><em>If you prefer a dark button, apply white font color alongside a black background. This translates to both the font color of the icon and the accompanying text.<\/em><\/figcaption><\/figure>\n<p>If the intention is to maintain distinct colors for the icon and the text or to style them independently, assign different classes to these components and set diverse font colors accordingly.<\/p>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div>\n        <img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94b6424e6edbb0dedacc7_6284145f356b82a68472788c_2lireq8sfekx4vgk-wu7c0y_un4e6weauxpcrksqxiwequqvdkalluspfzkog8e1wufy5xu4ztdtypf8xn7tbwufyknxpgukjc01sk_qcb7gi4jycenzqqcehnea6pynasucss6aatrtfcokzg.png\" title=\"64b94b6424e6edbb0dedacc7_6284145f356b82a68472788c_2lireq8sfekx4vgk-wu7c0y_un4e6weauxpcrksqxiwequqvdkalluspfzkog8e1wufy5xu4ztdtypf8xn7tbwufyknxpgukjc01sk_qcb7gi4jycenzqqcehnea6pynasucss6aatrtfcokzg\">\n    <\/div><figcaption><em>In this case, a font color has been applied directly to the icon, which overrides the white font color on the button.<\/em><\/figcaption><\/figure>\n<p>To substitute the existing icon on the button, remove the default icon and subsequently insert the desired icon from your <strong>Asset panel<\/strong> via drag-and-drop.<\/p>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div>\n        <img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94b6424e6edbb0dedac9e_6284145fa8fae817d1f1e9ed_e-ilnyh3cz3351i-j9ti7fopb9f_1h_rjzy0lso-08qife6f7kwefwtuuk2zspycz5yw7-hzqiukqro2kzk_dd6dirqoefzyaw0b7zhakqmugvnsfw_ql13asakbcayouyhwta9hcijquvomzq.png\" alt=\"A Button labeled \u201cUpload R\u00e9sum\u00e9\u201d, now featuring a file icon image rather than the standard \u201cUpload\u201d icon. \" title=\"64b94b6424e6edbb0dedac9e_6284145fa8fae817d1f1e9ed_e-ilnyh3cz3351i-j9ti7fopb9f_1h_rjzy0lso-08qife6f7kwefwtuuk2zspycz5yw7-hzqiukqro2kzk_dd6dirqoefzyaw0b7zhakqmugvnsfw_ql13asakbcayouyhwta9hcijquvomzq\">\n    <\/div>\n<\/figure>\n<p>To retain the standard size and left alignment of the icon, adjust the image&#8217;s width or height to 20 pixels and add an 8-pixel right margin, creating a space between the icon and text.<\/p>\n<p>Altering the default icon&#8217;s position can be achieved by dragging it within the button for repositioning.<\/p>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div>\n        <img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94b6424e6edbb0dedac82_6284145fa8fae88178f1e9e5_mvvuhkgzste1c2wmvokzjqa5wi1p9i-ezq8rpwwwahrk3qlr4yxfq-p2lxjqrkxa8kkgyqcm6vvecz6rej03ibrtswy-ch2fxmu6rlrbadkyrm5slgxvarxur1mona8qft8n2skfbh_0-5bjgq.png\" alt=\"Button for file upload, with the \"upload\" icon positioned to the right of the text \"Upload r\u00e9sum\u00e9\".\" title=\"64b94b6424e6edbb0dedac82_6284145fa8fae88178f1e9e5_mvvuhkgzste1c2wmvokzjqa5wi1p9i-ezq8rpwwwahrk3qlr4yxfq-p2lxjqrkxa8kkgyqcm6vvecz6rej03ibrtswy-ch2fxmu6rlrbadkyrm5slgxvarxur1mona8qft8n2skfbh_0-5bjgq\">\n    <\/div>\n<\/figure>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94b6424e6edbb0dedacc0_6284145f9733d41d82c8facd_2zicw_n6h4lrfgiajast-fxhnkmwis-jryh9xct8kbyg9oefdkbvfby_fw_racrlx-7aevqopodjmv66by9ycwp3dyap7j5bcff4sazdq4dw8x5-wtu-30bvnnvwkc7hs1chlejdgwoyuas9lg.png\" alt=\"The Style panel of the Designer with the \u201cupload\u201d icon selected. Margin-left has been set to 8 pixels and margin-right has been set to 0 pixels. \" title=\"64b94b6424e6edbb0dedacc0_6284145f9733d41d82c8facd_2zicw_n6h4lrfgiajast-fxhnkmwis-jryh9xct8kbyg9oefdkbvfby_fw_racrlx-7aevqopodjmv66by9ycwp3dyap7j5bcff4sazdq4dw8x5-wtu-30bvnnvwkc7hs1chlejdgwoyuas9lg\"><\/div>\n<\/figure>\n<p>To have icons positioned on the right side of your button&#8217;s text, move the icon to the right and adjust the margins to 8 pixels on the left and 0 pixels on the right. Note that for custom images, there&#8217;s no need to add a 0 pixel right margin.<\/p>\n<h3>State of Upload<\/h3>\n<p>You have the ability to customize and style the upload button in the uploading state just like you do for the default state.<\/p>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94b6424e6edbb0dedaca9_6284145f108e6cc150db50b5_iggwagwyupifcr8pg9nx9cdplr9j3krchi2arxlk-zulbuwbzo5kpwt_gejmrn_1rv0jsgbugpefyythtiwutyg34i3v4f-nuwndxt39z_m7jdh0oj_azakxbgmiu7ayzukxnhdqcqrzxhajaa.png\" alt=\"The uploading state of the File upload button. The button reads, \u201cUploading\u2026\u201d and displays a small progress spinner.\" title=\"64b94b6424e6edbb0dedaca9_6284145f108e6cc150db50b5_iggwagwyupifcr8pg9nx9cdplr9j3krchi2arxlk-zulbuwbzo5kpwt_gejmrn_1rv0jsgbugpefyythtiwutyg34i3v4f-nuwndxt39z_m7jdh0oj_azakxbgmiu7ayzukxnhdqcqrzxhajaa\"><\/div>\n<\/figure>\n<h3>State of Success<\/h3>\n<p>The success state of the file upload includes:<\/p>\n<ul role=\"list\">\n<li>A text block \u2014 showing the name of the uploaded file and it&#8217;s not editable. However, you can adjust its appearance.<\/li>\n<li>An icon inside a link block \u2014 enabling users to <strong>delete the uploaded file<\/strong> from their form. You can customize the style of this icon and its hover effect.<\/li>\n<\/ul>\n<p>You can design the entire button in the success state.<\/p>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94b6424e6edbb0dedaca1_6284145f55912101e31b3927_lqwxfjvzt9tpra2allz3v9vzt-qnpblcyzn1gh4d-e-0w2nzbzebnk_6uwphw33iupkbhjxxcy_7oqhd1omzmda_5nklw3paczfsvabuvqdb7db3lq2dqf5-g7_-1ilpp_mawqlv37pe5dhbeg.png\" alt=\"The success state of the File upload button, displaying the name of the uploaded file next to an \u201cX\u201d button to remove the uploaded file.\" title=\"64b94b6424e6edbb0dedaca1_6284145f55912101e31b3927_lqwxfjvzt9tpra2allz3v9vzt-qnpblcyzn1gh4d-e-0w2nzbzebnk_6uwphw33iupkbhjxxcy_7oqhd1omzmda_5nklw3paczfsvabuvqdb7db3lq2dqf5-g7_-1ilpp_mawqlv37pe5dhbeg\"><\/div>\n<\/figure>\n<h4>Design Advice and Recommendations<\/h4>\n<p>You can insert an image into the success state button such as an icon to signify a successful upload or a placeholder file thumbnail icon.<\/p>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94b6424e6edbb0dedacc4_62841460620aab4a636958ba_bfxpbncpf5ncv_3_6frvvgxmn5pjrr51sll7o2sdwzqjqnd6envwnkptkxt_oikyxxir-0c7rewdvseyftxiyuuakhsxuzneiorltof-5ugmhgj3ku08zoj1pblexnh5vitptin76ex2782ukg.png\" alt=\"The success state of the File upload button, displaying the name of the uploaded file beside a \u201cfile\u201d icon.\" title=\"64b94b6424e6edbb0dedacc4_62841460620aab4a636958ba_bfxpbncpf5ncv_3_6frvvgxmn5pjrr51sll7o2sdwzqjqnd6envwnkptkxt_oikyxxir-0c7rewdvseyftxiyuuakhsxuzneiorltof-5ugmhgj3ku08zoj1pblexnh5vitptin76ex2782ukg\"><\/div>\n<\/figure>\n<p>You can also include a text block in the success state wrapper to show a message like \u201cFile uploaded!\u201d or \u201cSuccess!\u201d <\/p>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94b6424e6edbb0dedacd0_6284145fa8fae8695ff1e9f2_xgxgjyjnmvmiqblah9gn3pytiwickpmretjrqlhw80ri_0qwzsi5yxsjmaishy-yhuepz34qclxsrp9-j0hdxkhnvy6lf6nxuxbrrkc9v6whfdxwkrl9ngktx9sguctqtxtxd3sqpkt-k_a9rq.png\" alt=\"The success state of the File upload button, showing the name of the uploaded file. Below, there\u2019s a message stating, \u201cSuccess!\u201d \" title=\"64b94b6424e6edbb0dedacd0_6284145fa8fae8695ff1e9f2_xgxgjyjnmvmiqblah9gn3pytiwickpmretjrqlhw80ri_0qwzsi5yxsjmaishy-yhuepz34qclxsrp9-j0hdxkhnvy6lf6nxuxbrrkc9v6whfdxwkrl9ngktx9sguctqtxtxd3sqpkt-k_a9rq\"><\/div>\n<\/figure>\n<p>Additionally, you can swap out the delete icon (X) with another icon image or a text block \u2014 for instance, one that says \u201cdelete file\u201d. Ensure to set the link block&#8217;s width value to \u201cauto\u201d.<\/p>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94b6424e6edbb0dedac90_628414606a4515ccebc6e6ea_z5uy-0txcwhhcaa0oyxgkw5aao-6gpaufte9kquxtdu_tnl0xxvz0kv-yeknwgoprzn39p__z_mzg0yd3q5uvlo7macuh8pp9dc5-yrmamsedlkbh6z6qry_yjnpxmnjin9610n3lyt_itsnmq.png\" alt=\"The success state of the File upload button, indicating the name of the uploaded file alongside the option to \u201cdelete file.\u201d\" title=\"64b94b6424e6edbb0dedac90_628414606a4515ccebc6e6ea_z5uy-0txcwhhcaa0oyxgkw5aao-6gpaufte9kquxtdu_tnl0xxvz0kv-yeknwgoprzn39p__z_mzg0yd3q5uvlo7macuh8pp9dc5-yrmamsedlkbh6z6qry_yjnpxmnjin9610n3lyt_itsnmq\"><\/div>\n<\/figure>\n<h3><strong>State of Error<\/strong><\/h3>\n<p>The default error message appearing in the Designer states: \u201cUpload failed. Max size for files is 10MB.\u201d However, the error state could also arise due to reasons other than exceeding 10MB file size, such as network issues or uploaded file corruption or invalid file format. A unique message will be displayed for each error scenario. Discover how you can personalize these messages below.<\/p>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94b6424e6edbb0dedacca_62841460cb1c2f1ead61ed99_r18k4y7wcc1om6eyghtmmfw4tctgai90kyampuzwlxmndf7wyhq82mdcscl7yld3cnotylmsnc3ijbetnbxbgjvhdk1fmpu4nsftompm1bc2obqmze-y8wciuloil28ysg0xzeztwhsguuwvkg.png\" alt=\"The error message displayed beneath the File upload button reads, \u201cUpload failed. Something went wrong. Please retry.\u201d\" title=\"64b94b6424e6edbb0dedacca_62841460cb1c2f1ead61ed99_r18k4y7wcc1om6eyghtmmfw4tctgai90kyampuzwlxmndf7wyhq82mdcscl7yld3cnotylmsnc3ijbetnbxbgjvhdk1fmpu4nsftompm1bc2obqmze-y8wciuloil28ysg0xzeztwhsguuwvkg\"><\/div>\n<\/figure>\n<blockquote><p><strong>Warning:<\/strong> The button shown in the error state above the error message is the same button from the default state. Altering the button here will replace the original button in the default state.<\/p><\/blockquote>\n<h4>Customization of Error Messages<\/h4>\n<p>You have the option to change the default text for all 3 error types. You can also modify the text color or apply any other styling by selecting the <strong>Text block<\/strong> within the <strong>error state<\/strong> wrapper.<\/p>\n<p>To personalize the error messages, choose the error text block on the canvas, then access the <strong>Field error settings<\/strong> in the <strong>Settings panel<\/strong>. To edit each error message, click on the \u201c<strong>pencil<\/strong>\u201d icon that appears when hovering over the error message type.<\/p>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94b6424e6edbb0dedaccd_628414604b189b084d971d94_rharaoaa8v79pr-wnne2okfa5hnk6wdte1i3ikarq0vxqgztwj9enekfjopzgjxjgnh-fhv2pt3ewc-m5gbdcvwfvb5utfemckomof089mv_4pdcr34nsy4j2g06yd5oxiwc5_nwzc0mjlbf8q.png\" alt=\"Error message configuration for various file upload problems: File dimensions, Improper file format, as well as General issue. Highlighted is the \u201cpencil\u201d icon to modify the error message linked with a file dimensions error.\" title=\"64b94b6424e6edbb0dedaccd_628414604b189b084d971d94_rharaoaa8v79pr-wnne2okfa5hnk6wdte1i3ikarq0vxqgztwj9enekfjopzgjxjgnh-fhv2pt3ewc-m5gbdcvwfvb5utfemckomof089mv_4pdcr34nsy4j2g06yd5oxiwc5_nwzc0mjlbf8q\"><\/div>\n<\/figure>\n<p>To reset the default message for each type of error, just modify the error message and then select \u201c<strong>Restore default<\/strong>\u201d.<\/p>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94b6424e6edbb0dedac87_628414602fa0761c964f251c_hjwupnwinou86ylfrlsa4xjywwf3qcpze-gc2w989tuuej9lhbhgd7yqjkynzfxnp5qetsqrdrf3uqnauaj_w9yfb2uk4vurlanvbqyceknd-6ycvdv24wqnxw4hwloixh7alahisfngrheygw.png\" alt=\"Configuration menu for personalizing the error messages for the \u201cFile dimensions\u201d error.\" title=\"64b94b6424e6edbb0dedac87_628414602fa0761c964f251c_hjwupnwinou86ylfrlsa4xjywwf3qcpze-gc2w989tuuej9lhbhgd7yqjkynzfxnp5qetsqrdrf3uqnauaj_w9yfb2uk4vurlanvbqyceknd-6ycvdv24wqnxw4hwloixh7alahisfngrheygw\"><\/div>\n<\/figure>\n<h2>Handling file submissions<\/h2>\n<p>Upon submission of a file by a visitor via any of your web forms, the uploaded file will be presented as a web link within the form submission notification email sent to the specified email address(es) in your <strong>Form notification settings<\/strong> contained in your <strong>Site settings<\/strong>.<\/p>\n<p>If you serve as the overseer of a website, you are authorized to inspect and analyze submitted files of each website at <strong>Site settings<\/strong> &gt; <strong>Forms<\/strong> &gt; <strong>Form submission data<\/strong>.<\/p>\n<blockquote><p><strong>Please note:<\/strong> The storage allowance for form file uploads is free up to 10GB, and beyond that incurs a charge of $0.50 per month for every additional gigabyte. There is a fixed storage limit of 100GB, consequentially halting the collection of form submissions once reached. This limit is non-extendable. You can free up storage capacity by erasing submissions.<\/p><\/blockquote>\n<h3>Vital privacy &amp; protection advice<\/h3>\n<p>By default, solely Webflow-registered users can retrieve files uploaded through a form. Meaning, unregistered users on Webflow cannot access these files even if provided with the file links. To permit file access for anyone with the pertinent link, deactivate this feature in <strong>Site settings<\/strong> &gt; <strong>Forms<\/strong> tab &gt; <strong>Restrict uploaded file access<\/strong>.<\/p>\n<figure class=\"w-richtext-align-fullwidth w-richtext-figure-type-image\">\n<div><img decoding=\"async\" src=\"https:\/\/webflow-s3.tenten.co\/2024\/04\/64b94b6424e6edbb0dedacd3_62841461df912561e75159f5_anleea3szn0pttt7cv4k7ici4stnowgxggbahjsd2hgofa93ehu1d9owkhio_km0be6vfojta1draps5e-dtmst9410lyphk9i29bnhundni_vsgx6wef-tvyocv7jr2-oqf3wuoevhoq-5j9q.png\" alt=\"Option to restrict file access within the Forms section of Site settings. The restriction is disabled, no login required.\" title=\"64b94b6424e6edbb0dedacd3_62841461df912561e75159f5_anleea3szn0pttt7cv4k7ici4stnowgxggbahjsd2hgofa93ehu1d9owkhio_km0be6vfojta1draps5e-dtmst9410lyphk9i29bnhundni_vsgx6wef-tvyocv7jr2-oqf3wuoevhoq-5j9q\"><\/div>\n<\/figure>\n<blockquote><p><strong>Note:<\/strong> To direct your form file submissions to a different cloud storage service using Zapier or another external integration, you must also deactivate this feature.<\/p><\/blockquote>\n<p><strong>Next steps:<\/strong> Discover the ways to handle form submissions effectively.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"Add a file upload button to your forms to collect documents, images, media files, and more from your visitors.","protected":false},"author":2,"featured_media":6405,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"om_disable_all_campaigns":false,"inline_featured_image":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"csco_display_header_overlay":false,"csco_singular_sidebar":"","csco_page_header_type":"","footnotes":""},"categories":[290],"tags":[],"class_list":{"0":"post-6404","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-elements","8":"cs-entry"},"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6404","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/comments?post=6404"}],"version-history":[{"count":0,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/posts\/6404\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media\/6405"}],"wp:attachment":[{"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/media?parent=6404"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/categories?post=6404"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webflow.tenten.co\/en\/wp-json\/wp\/v2\/tags?post=6404"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}