# Form builder

Add and arrange fields, style your form with a theme and accent color, and copy embed code for any site or framework.

The form builder defines your form's fields and designs the styled embed. Open it from the form's **Setup** tab with **Design the form** or **Add fields**.

The builder shows your fields on one side and a live preview on the other. You can try the fields in the preview. It never sends anything.

## Fields

Choose **Add field** and pick a type:

| Type            | Use it for                                                   |
| --------------- | ------------------------------------------------------------ |
| Short text      | Names, companies, single-line answers                        |
| Email           | Email addresses                                              |
| Long text       | Messages and comments                                        |
| Number          | Quantities, budgets, ages                                    |
| Date            | Dates like an event day or a birthday                        |
| Dropdown        | One choice from a list                                       |
| Multiple choice | One choice from a list, shown as radio buttons               |
| Checkbox        | A single yes or no, like agreeing to terms                   |
| Star rating     | A rating from 1 to 3 through 10 stars                        |
| Phone           | Phone numbers                                                |
| Website         | URLs                                                         |
| File upload     | Images and PDFs. Needs file uploads turned on, which is Pro. |

A form can have up to 30 fields. Drag a field to reorder it, or focus it and press the up and down arrow keys. Each field also has options to move, duplicate or delete it. After a delete, **Undo** is available for a few seconds.

## Field settings

Select a field to edit it:

* **Label**: the question shown to visitors, and the label in your inbox and notifications.
* **Field name**: the key answers are saved under, and the `name` your HTML must use. It must start with a letter and can use letters, digits, `-` and `_`, up to 64 characters. Each name can only be used once per form.
* **Required**: visitors must answer before they can send the form.
* **Placeholder**: example text shown inside empty text fields, or the prompt shown before a dropdown choice is made.
* **Help text**: a short hint shown under the field.
* **Options** for dropdowns and multiple choice, up to 100.
* **Minimum** and **Maximum** for numbers.
* **Number of stars** for ratings, from 3 to 10.
* **Character limit** for short and long text.

If you rename a field after it has received answers, earlier answers stay under the old name. The builder reminds you of this.

Fields are also what Nisuform checks submissions against. See [Fields and validation](/docs/forms/fields).

## Design

The design panel styles the embed:

* **Theme**: Light, Dark, Paper or Euphoria.
* **Accent color**: the color of the button and highlights. Pick a preset or enter a hex code. The builder warns you when the color is hard to see against the theme's background.
* **Title** and **Description**: shown above the fields. Leave them empty to hide them.
* **Button label**: the text on the submit button.
* **Success message**: replaces the form after a successful submit. Visitors without JavaScript see the [thank-you page](/docs/forms/after-submit) instead.

## Save

The header shows **Unsaved changes** until you save. Press Ctrl+S, or Cmd+S on a Mac, to save from anywhere in the builder. Leaving with unsaved changes asks you to confirm first.

## Get the code

Choose **Get code** to copy the form for your site. The code is from your last save, so save first to include your latest changes.

| Tab     | What you get                                                                              |
| ------- | ----------------------------------------------------------------------------------------- |
| HTML    | One snippet with the markup, styles and script. Paste it anywhere.                        |
| React   | A component that renders the form and handles sending, success and errors.                |
| Next.js | The same component marked as a client component, for the App Router and the Pages Router. |
| Vue     | A single-file component. It works in Nuxt too.                                            |
| Svelte  | A component. It works in SvelteKit too.                                                   |
| Astro   | Markup with inline styles and script, so Astro doesn't bundle or scope them.              |

The embed includes the honeypot and sends the fill time for [spam protection](/docs/protection/spam), adds the Turnstile widget when Turnstile is on for the form, and follows your redirect URL when the form has one. It submits with `fetch` and shows your success message in place, and it still posts as a normal form when JavaScript is off.

The **Setup** tab has step-by-step guides for [site builders](/docs/connect/site-builders), code and AI tools.

## Use your own markup instead

You don't have to use the embed. On the Setup tab, switch to **Your own styles** for plain markup with your field names that picks up your site's CSS, or write your own form. Nisuform validates whatever arrives against your fields either way.