---
title: "Fieldloft: a form builder for surveys, sign-ups and applications"
author: "@chris"
author_url: https://elements.dev/users/chris
published: 2026-09-30T21:25:36.276Z
url: https://elements.dev/demos/69py0jlj/fieldloft-a-form-builder-for-surveys-sign-ups-and
kind: post
format: article
---

# Fieldloft: a form builder for surveys, sign-ups and applications

by [@chris](https://elements.dev/users/chris) · 2026-09-30

## Description

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.

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 `@rpc` function, 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.