AIWebApp

Accessible forms from a list of fields

An event RSVP form with name, email, number of guests and dietary needs. Field types are inferred from their names.

Signup FormFormExample — not saved until you change it

Runs on this device in under a second. Ctrl+Enter also generates.

What the planner understood

Confidence100%
  • formForm template
  • rsvpForm template
  • name, email, guests, dietary needsdata fields
Feasibility, templates and prompt history

Feasibility

  • NATIVELight and dark theme
  • NATIVEResponsive layout
  • NATIVESave data on the device

Start from a template

Picking a template keeps the name, colours and fields from your description.

Prompt history

Off by default. Prompts are only kept in this browser if you turn this on.

index.html
Sandboxed · network off · fits 772px

App type

Form — Validated form with saved submissions and CSV export.

Pages and sections

  • index.html
    1. App (Form)

Drag sections to reorder, or use the arrow buttons. Navigation links are generated for every page.

Wireframe

Data model NATIVE

FieldTypeReq.

Seed 9618: the same seed always produces the same 0 rows.

Component library (8)

Native <dialog> with focus return, Escape to close and a labelled title.

<button class="btn btn-primary" type="button" data-open-dialog="demo-dialog">Open dialog</button>
<dialog class="c-modal" id="demo-dialog" aria-labelledby="demo-dialog-title">
  <h2 id="demo-dialog-title">Delete this project?</h2>
  <p>This removes it from this device. You can export a copy first.</p>
  <div class="c-modal-actions">
    <button class="btn" type="button" data-close-dialog>Cancel</button>
    <button class="btn btn-primary" type="button" data-close-dialog value="confirm">Delete</button>
  </div>
</dialog>

Field types inferred from names

The planner maps “email” to an email input, “phone” to tel, “guests” or “price” to number, “date” or “due” to a date picker, and “status”, “priority” or “dietary” to a select with sensible options. Adjust any field in the Plan tab: rename it, change its type, mark it required or edit the options.

Validation uses the browser’s own constraint checks with readable messages tied to each field via aria-describedby. The first invalid field receives focus, and the error is announced.

Where responses go

Responses are saved in the browser that submitted them and listed in a table under the form, with delete and CSV export. That suits kiosks, events on a single tablet and prototypes. Collecting responses from many people requires a backend or form service.

Frequently asked questions

Can the form send me an email?

No — sending email needs a server. The planner marks email delivery as UNSUPPORTED if you ask for it.

Is it accessible?

Every input has a visible label, required fields are marked, errors are linked to their fields and announced, and tap targets are at least 44px.