Form Builder
Design a form visually, then download it as an AI prompt, a PNG, standalone HTML/CSS or JSON.
Open Form Builder →What is the form builder?
A visual designer for web forms. A Tweaks inspector on the left edits whichever element you have selected — the whole form, its global style, or one field — while the canvas on the right renders the real form exactly as it will be exported. The canvas has two modes: in Edit you click a field to select and change it, and in Play the form goes live so you can fill it in and test it, required fields and all. Start from one of eight ready-made samples, change any field's type, label, placeholder, help text or width, then reorder, duplicate or delete fields inline. When the design looks right you can download it four ways: an AI prompt that specifies the design precisely enough to rebuild it, a PNG image, a standalone HTML file with the CSS already inlined, and a JSON file you can import back into the builder. One stylesheet generator feeds both the canvas and the downloads, so what you see is what you get. Everything runs in your browser, works offline, and autosaves on your device.
How to use Form Builder
- Start from a sample — Pick one of the built-in forms — contact, sign-up, job application, inventory lot, feedback, event registration, support ticket or checkout — or keep the starter form and edit it.
- Select and tweak — With the canvas in Edit mode, click a field. The Element tab shows its type, label, name, placeholder, help text, default value, options and width; the small toolbar on the field moves, duplicates or deletes it.
- Style the whole form — The Style tab carries six presets plus exact control over the accent, page, surface, field, text and border colours, corner radius, border width, input style, font, size, density and shadow.
- Switch to Play and test it — Play mode makes the form live: fill it in, watch the required fields refuse an empty submit, and submit to see exactly what the form would send, field name by field name.
- Check it on a phone — Use the device buttons above the canvas to reflow the form at tablet and phone widths, and full screen to see it larger.
- Download it — Take the AI prompt to rebuild the design elsewhere, the PNG to share it, the HTML to ship it, or the JSON to import it back later.
Frequently asked questions
What is in the AI prompt download?
A Markdown specification of the design: the exact hex codes, spacing, typography and control styling, every field in order with its type, label, placeholder, options and required state, an acceptance checklist, and the same design again as JSON. It is written so an assistant can rebuild the form without guessing.
What is the difference between Edit and Play?
Edit is the design surface: clicking a field selects it, each field carries a small toolbar, and validation is suppressed so a half-built form never argues with you. Play hands the form to you as a visitor would meet it — no selection, no toolbars, required fields enforced — and submitting shows what the form would send. Anything you type in Play is a throwaway test; switching back to Edit repaints from the saved design.
Does the exported HTML need anything else?
No. It is one self-contained file with the stylesheet inlined — no frameworks, no external fonts, no scripts. Open it in any browser or paste the markup into your own page.
Can I get my design back into the builder?
Yes. Download the JSON, then use the import button above the canvas to load it again on any device. The same JSON is embedded at the end of the AI prompt.
Are the form's colours the same as the app's theme?
No, and deliberately so. The form carries its own literal colours and font stack so the download renders identically on a machine that has never opened this app.
Is my form saved anywhere?
Only on your own device, in your browser's local storage. Nothing is uploaded, and there is no account or backend.
Does it work offline?
Yes. The builder runs entirely in your browser and keeps working with no connection after the first load.
Does anything I type in Play get saved?
No. Play is for testing, so the values you enter are never written into the design or into any download. Switching back to Edit clears them.
Tips
- Set a field's label first — the name attribute follows it automatically until you edit the name yourself.
- Use half width on pairs that belong together, such as first and last name or city and postcode.
- Switch to Play before you export, to check the required fields and the tab order behave the way you meant.
- Switch to the Phone device to check the single-column layout reads well.
- Keep the focus ring on: it is what makes the form usable with a keyboard.
- Download the JSON before loading a sample — loading one replaces whatever is on the canvas.