今日已更新 133 条资讯 | 累计 37382 条内容
关于我们

Build a React client intake form with file uploads

Jacob Funch 2026年08月10日 14:34 4 次阅读 来源:Dev.to

Client intake often requires two types of information: searchable answers and files for review. This Vite and React example collects both in the same response. You can try the form without an account. Ask only what you need The example asks for: the client's name; a work email address; the result they need; an optional target date; up to five briefs or reference files. Each answer should help someone prepare for the first call. Leave detailed discovery questions for the call. Define the form The form schema lives in the React app: import { createClient , defineForm , FilloForm } from " @usefillo/react " ; const intake = defineForm ({ id : " vite-client-intake " , title : " Tell us about your project " , description : " Tell us what you need, when you need it and which files will help us prepare. " , pages : [ { id : " intake " , blocks : [ { id : " name " , kind : " short_text " , label : " Your name " , required : true }, { id : " email " , kind : " email " , label : " Work email " , required : true }, { id : " outcome " , kind : " long_text " , label : " What result do you need? " , required : true , }, { id : " target-date " , kind : " date " , label : " Target date " }, { id : " documents " , kind : " file_upload " , label : " Briefs or reference files (PDF, DOCX, PNG or JPG) " , accept : [ " .pdf " , " .doc " , " .docx " , " .png " , " .jpg " , " .jpeg " ], maxFiles : 5 , }, ], }, ], settings : { submitLabel : " Send project details " }, }); Keep the form and field IDs after you collect the first response. Fillo uses them as stored answer keys. You can change labels and help text without changing the IDs. The React app controls the route, layout, styles and what happens after submit. Fillo handles the schema, validation, uploads and responses. The SDK renders React controls in the page. It does not use an iframe. Send files straight to storage The browser sends each file to the storage connected to the Fillo workspace. The Vite app does not proxy the file throu

本文内容来源于互联网,版权归原作者所有
查看原文