> ## Documentation Index
> Fetch the complete documentation index at: https://watermelon.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Pre-chat form

Collect visitor details before a conversation starts by adding a form to your chat widget.

The pre-chat form appears when a visitor opens the chat widget. You can use it to collect information such as their name, email address, company, or other details relevant to your business.

<Info>
  The pre-chat form is available on **paid plans only**. It is not available on the Free plan.

  You can add up to **5 fields** to the form.

  When **Form required** is enabled, visitors must complete the form before they can start chatting. This option is enabled by default.
</Info>

## Set up the pre-chat form

<Steps>
  <Step title="Go to Integrations">
    In your Watermelon dashboard, go to **Integrations**.

    <Frame>
      <img src="https://mintcdn.com/watermelon/CGJ--ysbKxchnxYJ/images/pre-chat-form-1.png?fit=max&auto=format&n=CGJ--ysbKxchnxYJ&q=85&s=9146d1cf3862f8d1fc7ed83d565430af" alt="Pre Chat Form 1" width="1439" height="778" data-path="images/pre-chat-form-1.png" />
    </Frame>
  </Step>

  <Step title="Open Chat Widget">
    Select **Chat Widget** from the integrations overview. Open the chat widget you want to edit.

    <Frame>
      <img src="https://mintcdn.com/watermelon/CGJ--ysbKxchnxYJ/images/pre-chat-form-2.png?fit=max&auto=format&n=CGJ--ysbKxchnxYJ&q=85&s=4e7c4a0a54c4d112f78a77dcbd598562" alt="Pre Chat Form 2" width="1439" height="778" data-path="images/pre-chat-form-2.png" />
    </Frame>
  </Step>

  <Step title="Open Attract">
    Click **Attract** in the chat widget settings.

    <Frame>
      <img src="https://mintcdn.com/watermelon/CGJ--ysbKxchnxYJ/images/pre-chat-form-3.png?fit=max&auto=format&n=CGJ--ysbKxchnxYJ&q=85&s=67e5948ffede7ccf8dca31c6f36e30c8" alt="Pre Chat Form 3" width="1439" height="778" data-path="images/pre-chat-form-3.png" />
    </Frame>
  </Step>

  <Step title="Enable Form">
    Scroll down in the Attract settings till you see **Form. Click on the toggle at** **Form** to enable the pre-chat form settings.

    <Frame>
      <img src="https://mintcdn.com/watermelon/CGJ--ysbKxchnxYJ/images/pre-chat-form-4.png?fit=max&auto=format&n=CGJ--ysbKxchnxYJ&q=85&s=190fc54051ade770bed4be463e138aac" alt="Pre Chat Form 4" width="1439" height="778" data-path="images/pre-chat-form-4.png" />
    </Frame>
  </Step>

  <Step title="Choose whether the form is required">
    Keep **Form required** enabled when visitors must complete the form before starting a conversation. This option is enabled by default.

    When you disable it, visitors can skip the form and start chatting without entering their details.

    <Frame>
      <img src="https://mintcdn.com/watermelon/CGJ--ysbKxchnxYJ/images/pre-chat-form-5.png?fit=max&auto=format&n=CGJ--ysbKxchnxYJ&q=85&s=b1c45182f236795e8ef2da2ed7c7c124" alt="Pre Chat Form 5" width="1439" height="778" data-path="images/pre-chat-form-5.png" />
    </Frame>
  </Step>

  <Step title="Add an intro message">
    Enter an intro message to explain why you are asking visitors for their information.

    The message appears directly above the form fields in the chat widget.

    <Frame>
      <img src="https://mintcdn.com/watermelon/CGJ--ysbKxchnxYJ/images/pre-chat-form-6.png?fit=max&auto=format&n=CGJ--ysbKxchnxYJ&q=85&s=14de5dd3c872df4b78f1cd52edb7e6f6" alt="Pre Chat Form 6" width="1439" height="778" data-path="images/pre-chat-form-6.png" />
    </Frame>
  </Step>

  <Step title="Select your form fields">
    Add up to **5 fields** for visitors to complete.

    You can use default fields, such as **First name** and **Email address**, or select [custom fields](/docs/help-center/contact-management/custom-fields) you created to collect information specific to your business.

    You can adjust the placeholder the end user sees in the widget, by adjusting the text in the added field underneath **Form fields**.

    <Frame>
      <img src="https://mintcdn.com/watermelon/CGJ--ysbKxchnxYJ/images/pre-chat-form-7.png?fit=max&auto=format&n=CGJ--ysbKxchnxYJ&q=85&s=26f29c1e9cd2ac06e4461a2e4eafc2cd" alt="Pre Chat Form 7" width="1439" height="778" data-path="images/pre-chat-form-7.png" />
    </Frame>
  </Step>

  <Step title="Save your changes">
    Click **Save** to publish the changes to your chat widget.

    <Frame>
      <img src="https://mintcdn.com/watermelon/CGJ--ysbKxchnxYJ/images/pre-chat-form-8.png?fit=max&auto=format&n=CGJ--ysbKxchnxYJ&q=85&s=f324ef761fc665f8b1fd0b156798c112" alt="Pre Chat Form 8" width="1439" height="778" data-path="images/pre-chat-form-8.png" />
    </Frame>
  </Step>
</Steps>

Once saved, the form will appear when visitors open the chat widget.

## Disable the pre-chat form

<Steps>
  <Step title="Go to your chat widget">
    Go to **Integrations** > **Chat Widget** and select the chat widget you want to edit.

    <Frame>
      <img src="https://mintcdn.com/watermelon/CGJ--ysbKxchnxYJ/images/pre-chat-form-1.png?fit=max&auto=format&n=CGJ--ysbKxchnxYJ&q=85&s=9146d1cf3862f8d1fc7ed83d565430af" alt="Pre-chat Form 1" width="1439" height="778" data-path="images/pre-chat-form-1.png" />
    </Frame>
  </Step>

  <Step title="Disable form">
    Click **Attract**, and scroll down till you see **Form**. Click on the toggle to disable **Form**.

    <Frame>
      <img src="https://mintcdn.com/watermelon/CGJ--ysbKxchnxYJ/images/pre-chat-form-4.png?fit=max&auto=format&n=CGJ--ysbKxchnxYJ&q=85&s=190fc54051ade770bed4be463e138aac" alt="Pre-chat Form 4" width="1439" height="778" data-path="images/pre-chat-form-4.png" />
    </Frame>
  </Step>

  <Step title="Save your changes">
    Click **Save** to save your changes.

    <Frame>
      <img src="https://mintcdn.com/watermelon/CGJ--ysbKxchnxYJ/images/pre-chat-form-8.png?fit=max&auto=format&n=CGJ--ysbKxchnxYJ&q=85&s=f324ef761fc665f8b1fd0b156798c112" alt="Pre Chat Form 8" width="1439" height="778" data-path="images/pre-chat-form-8.png" />
    </Frame>
  </Step>
</Steps>

After you save, visitors will no longer see the form when they open the chat widget.

## Best practices

<CardGroup cols={2}>
  <Card title="Keep the form short">
    Only add fields that are necessary. Short forms are faster to complete and create less friction.
  </Card>

  <Card title="Explain why you need the details">
    Use the intro message to tell visitors how their information will help you assist them.
  </Card>

  <Card title="Use custom fields">
    Add custom fields when the information helps you identify, route, or support the visitor more effectively.
  </Card>

  <Card title="Use clear field names">
    Make sure each field is easy to understand, so visitors know exactly what information to enter.
  </Card>
</CardGroup>
