Fieldloft: a form builder for surveys, sign-ups and applications
Build forms with nine field types, publish them at a themed public link, and watch responses fill a live table and charts, with CSV export and an email per response.
Agent specs
- Agent
- Claude Code, Opus 5.5 Medium
- Time
- 21 min
- Cost
- $7.48*
Agents work faster and more accurately on Elements.
* Cost at API rates, September 2026.
Run it yourself
Paste this prompt into your AI agent. You get the finished app on your own machine, ready to change however you like.
Install elements: curl -fsSL 'https://install.elements.dev?os=darwin' | sh && export PATH=~/elements/bin:$PATH Create an Elements app from the elementscode/demo-fieldloft scaffold: cd ~/elements/projects elements create fieldloft -scaffold=elementscode/demo-fieldloft cd fieldloft Start the app.
How it's built
Fieldloft needed a drag-to-reorder form builder, public forms with file uploads, a responses table and summary charts that fill in as people answer, CSV export, and owner emails. Each of those is a part of Elements, so the agent spent its 21 minutes on the forms themselves.
What Elements gave the app
- Live responses and charts. Forms, fields and responses are LiveTables. Each submission is inserted through the responses table, and the owner's responses page draws its table and its choice and rating charts from it, so both update as answers arrive.
- A drag-to-reorder builder. Dragging a field places it between its new neighbors and saves it through the fields LiveTable. Publishing, the theme color, the thank-you message and the email setting save the same way, checked against the form's owner.
- File uploads. A public form sends file answers to an
@rpcfunction, which checks every answer again on the server and stores the files with the response in one transaction. - Owner emails from a job. When the form's email setting is on, each response schedules a job that emails the owner from a template.
- CSV export. One route serves every form's responses as CSV with a column per field.
- Data from SQL files. Migrations define the schema and seed two accounts, four published forms and 153 responses over the past month, including résumé files on the job application. The project server applied each one as soon as it was saved.
What the project server gave the agent
The project server runs alongside the agent and answers as soon as a file is saved: it type-checks the templates, TypeScript and SQL, applies migrations and reruns the tests, so every question came back right away and the agent kept building.
What shipped
The app type-checks with zero errors and all 22 tests pass. Every page works on desktop and phone, and live updates arrive as people answer, such as a response submitted from a phone updating the owner's open summary.
The code
Build it from scratch
To watch your agent build this app from an empty project, use the prompt we used instead. It takes longer than starting from the finished app above.
Install elements: curl -fsSL 'https://install.elements.dev?os=darwin' | sh && export PATH=~/elements/bin:$PATH Create an Elements app: cd ~/elements/projects elements create fieldloft cd fieldloft Start the app, then build this: Build a form builder named fieldloft. - Accounts. Build a form with fields: short text, long text, email, number, single choice, multiple choice, date, rating, file upload. Each can be required, with help text. - Reorder fields by dragging. Preview the form. - Publish at a public url. A theme color and a thank-you message. - Responses: a table with one column per field, a summary view with charts for choice and rating fields, and CSV export. - An email to the owner for each new response (can be turned off). Seed two users with four forms (event registration, customer feedback, job application, a poll) and responses. Show the seeded logins on the sign-in page. Responses and summary charts update in real time.
Comments· 0