# Fields and conditional logic

> Learn every field type Caramel supports, how to add validation, and how to show or hide fields based on answers.

The **Fields** tab controls every question on your form. You can mix field types, mark fields as required, add conditional visibility rules, and split long forms into multiple steps.

## Field types

| Type | What it collects |
|---|---|
| **Text** | A single line of free text |
| **Email** | An email address (format-validated automatically) |
| **Phone** | A phone number |
| **Textarea** | Multi-line free text |
| **Select** | A dropdown — visitor picks one option from a list |
| **Radio** | A set of radio buttons — visitor picks one option |
| **Checkbox** | A single yes/no checkbox |
| **Checkbox group** | Multiple checkboxes — visitor can select more than one |
| **Date** | A date picker |

## Add a field

1. Open the **Fields** tab.
2. Click **Add field** (or the **+** button).
3. Choose the field type.
4. Fill in:
   - **Label** — the question shown to visitors.
   - **Placeholder** — hint text inside the input (optional).
   - **Help Text** — a short note shown below the field (optional).
5. For **Select**, **Radio**, and **Checkbox group**: add each option in the options list.
6. Toggle **Required** if the field must be filled before the form can be submitted.

## Reorder and remove fields

Drag fields to reorder them. Click the delete icon on a field to remove it.

## Conditional logic

Show or hide a field based on what a visitor answered in an earlier field.

1. In the **Fields** tab, expand the field you want to conditionally show or hide.
2. Click **Add condition** (or the conditional visibility editor).
3. Choose the **source field** (the earlier field whose answer drives the logic).
4. Set the condition (for example: "equals", "contains", or a specific option value).
5. Choose whether to **show** or **hide** this field when the condition is met.

> **Note** Conditional logic only works with fields that appear earlier in the form. You can't reference a later field as the trigger.

## Multi-step forms

Split a long form into pages so visitors don't see everything at once.

1. Select the **Steps** tab.
2. Toggle on multi-step mode. Caramel creates 2 steps and distributes your existing fields between them.
3. Assign fields to each step by dragging them into the right step.
4. Give each step a **Title** and optional **Description** — these appear as a header above the fields in that step.
5. Click **Add Step** to add more steps.
6. Customize button labels under the step settings:
   - **Next button text** (default: "Next")
   - **Back button text** (default: "Back")
   - **Submit button text** (default: "Submit")
7. Toggle **Show progress bar** to display a "Step X of Y" progress indicator at the top.

> **Tip** Use step titles to orient visitors at each stage. For example: "About you" → "Your preferences" → "Confirm".

<!-- screenshot: the Steps tab with two steps, a progress bar toggle, and the field assignment list -->

## Next steps

- [Embed your form](embed-your-form) — Publish and add it to your site.
- [A/B testing](ab-testing) — Test different field arrangements against each other.
- [Form analytics](form-analytics) — See per-field performance and drop-off.