---
title: "Ask visitors for their details before they chat"
description: "Add a pre-chat form to your web chat that collects a visitor's name, email or other details before the chat starts, and send the answers to your systems."
canonical_url: "https://chatthing.ai/docs/channels/website/lead-form"
last_updated: "2026-09-25"
---

# Ask visitors for their details before they chat

Turn on a pre-chat form so visitors fill in their details - name, email, company, anything you need - before they can send their first message.

**Who can do this:** [team owners and admins](https://chatthing.ai/docs/account/teams#what-each-role-can-do).

The form is part of the web channel, so it appears in the chat widget, iframe embeds and your bot's own page. It's available on every plan.

## Steps

1. Open your bot and select the **Channels** tab.
2. Click the settings (cog) icon on the **Web** card.
3. In the **Pre-chat form** section, turn on **Require a pre-chat form**.
4. Optional: enter **Intro copy**, a short message shown above the form that explains why you're asking. Leave it blank to use the default.
5. Add fields: click **Add field** and choose a field type. The form needs at least one field.
6. Click a field to open its editor and set its options (see below). Drag the handle on the left of a field to change the order.
7. Click **Update settings**.
   ![Pre-chat form settings with Require a pre-chat form turned on, intro copy, and the Name field open to show its label, field type, placeholder, help text and Required toggle](https://res.cloudinary.com/djyjvrw5u/image/upload/v1777051092/docs/prechat-form-builder.png)

## Field types

| Type | What visitors get |
| --- | --- |
| **Text** | A short text box, for things like company name or job title |
| **Email** | An email box that checks the address is valid |
| **Phone** | A phone number box. No format is enforced. |
| **Long text** | A larger text box, for questions like "What are you trying to do?" |
| **Select** | A drop-down list. Add each option with a **Value** (required) and an optional **Label** shown to visitors. |
| **Checkbox** | A single on/off choice, for consent such as "I agree to be contacted" |
| **Date** | A date picker, for things like a preferred callback date |

## Field options

Every field has:

- **Label** - the question shown above the field.
- **Field type** - one of the types above.
- **Placeholder** - example text shown inside the empty field.
- **Help text** - an optional hint shown under the field.
- **Required** - visitors must complete the field before they can start chatting.

## Where the answers go

When a visitor submits the form, their answers are saved with the conversation as its user data:

- **The bot can see them.** The answers are given to the bot as context, so it can use the visitor's name or details in its replies.
- **Your systems can receive them.** Set up a [webhook](https://chatthing.ai/docs/developers/webhooks) for when a conversation starts and read the `userData` object in the payload. It has one entry per field.

Each answer is stored under a key made from the field's label: lower case, with spaces and punctuation replaced by underscores. For example, "Company name" becomes `company_name`. If you change a field's label, its key changes too, so settle on labels before you connect other systems to them.

## Check it works

Click **Open bot** on your bot's dashboard. You should see your intro copy and the form. Fill it in and click **Start chat**; the normal chat should appear, ready for a message.

![A visitor-facing pre-chat form with Name and Email fields, a drop-down, a consent toggle and a Start chat button](https://res.cloudinary.com/djyjvrw5u/image/upload/v1777051094/docs/prechat-form-visitor.png)

## Troubleshooting

### I can't save the settings

The form needs at least one field when **Require a pre-chat form** is on. A **Select** field also needs at least one option with a value. Two fields can't have the same key, so rename one of them if their labels are the same.

### Returning visitors see the form again

Turn on **Persist chat** in the **Widget behaviour** section so a visitor's conversation carries over between visits on the same device.

## Related

- [Turn website visitors into leads with your bot](https://chatthing.ai/docs/use-cases/sales-and-lead-capture): Set up a bot that answers buying questions, works out what visitors need, collects their details and sends each lead to your inbox, CRM or calendar.
- [Webhooks](https://chatthing.ai/docs/developers/webhooks): Send Chat Thing events such as new conversations, escalations and syncs to your own systems, Slack or Discord, and trigger data source syncs from a URL.