A form builder with live responses, built by Claude Code on Elements
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.
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.
- 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.
Why Elements
Elements is an integrated full-stack app framework and a project server. The project server checks the agent's work as it builds: it type-checks the server and browser code, analyzes the program, applies migrations and runs the tests, then reports the results to the agent. A security mistake, such as calling a server-only function from the browser, is a compile error. The agent reads the report and fixes its own mistakes before it tells you a feature is done. The same checks run on every feature you ask for next.
Run it yourself
- 1 Sign up
Already have an account? Sign in
- 2 Install and run the demo One prompt to paste into your agent.
The prompt
What Claude was given to build this app.
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.