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

# Contact Forms

> Embed AI-powered contact forms on your website

Create beautiful, AI-powered contact forms that automatically convert submissions into tickets in your ChatArmin CX inbox.

## Quick Setup

<Steps>
  <Step title="Create Email Channel First">
    Contact forms require an email channel to function. [Set up your email channel first](https://armin.cx/app/_/channels/email) before creating contact forms.

    <Warning>
      Without an email channel, contact form submissions cannot be processed. This is where your form submissions will be sent.
    </Warning>
  </Step>

  <Step title="Create Contact Form">
    [Create your contact form here](https://armin.cx/app/_/channels/contact-form)

    * Choose a name for your form
    * Select the email channel to receive submissions
    * Customize form fields and appearance
  </Step>

  <Step title="Customize Appearance">
    Design your contact form to match your brand:

    * Header text and messaging
    * Background and text colors
    * Button styling and border radius
    * Form field labels and requirements
  </Step>

  <Step title="Embed on Website">
    Copy the provided script tag and paste it before the closing `</body>` tag on your website:

    ```html theme={null}
    <script
      defer
      type="module"
      src="https://cx-contact-form.vercel.app/loader.js"
      data-chatarmin-loader-contact-form
      data-chatarmin-contact-form-uid="your-form-id"
    ></script>
    ```
  </Step>

  <Step title="Configure AI (Optional)">
    Set up your AI agent to automatically respond to contact form submissions through your connected email channel.
  </Step>
</Steps>

### Mount inside a specific element (optional)

Place an empty container in your page where the form should appear, then pass a **CSS selector** for that element on the loader script. The form is appended inside the matching element (first match). If the selector is missing, invalid, or matches nothing, the form falls back to rendering **immediately after** the script tag.

```html theme={null}
<div id="contact-form-container"></div>
<!-- … other page content … -->
<script
  defer
  type="module"
  src="https://cx-contact-form.vercel.app/loader.js"
  data-chatarmin-loader-contact-form
  data-chatarmin-contact-form-uid="your-form-id"
  data-chatarmin-contact-form-mount-selector="#contact-form-container"
></script>
```

You can use any valid `document.querySelector` string (for example `#my-id`, `.my-class`, or `[data-contact-form]`). You may also use `data-chatarmin-contact-form-mountselector` (same meaning; HTML lowercases attribute names).

## How it works

1. **Visitor fills out form** on your website
2. **Form submission** is sent to your configured email channel
3. **Ticket is created** automatically in your ChatArmin CX inbox
4. **AI processes** the submission and can respond automatically
5. **Human agents** can take over for complex inquiries

## Features available

### Form Customization

* **Custom fields**: Name, email, subject, message, and file uploads
* **Visual branding**: Match your website's design with custom colors
* **Multi-language support**: Forms available in multiple languages
* **Required field validation**: Ensure you get the information you need

### Submission Management

* **Automatic ticket creation**: Every submission becomes a trackable ticket
* **File attachment support**: Handle documents, images, and other files
* **Contact management**: Automatically create or update contact records
* **Email notifications**: Immediate alerts for new submissions

### AI Integration

* **Smart categorization**: AI automatically tags and categorizes submissions
* **Automated responses**: Instant replies to common inquiries
* **Intelligent routing**: Direct submissions to the right team members
* **Follow-up suggestions**: AI recommends next steps for agents

### Advanced Options

* **Spam protection**: Built-in filtering for unwanted submissions
* **Custom thank you pages**: Redirect users after successful submission
* **Analytics tracking**: Monitor form performance and conversion rates
* **Mobile responsive**: Forms work perfectly on all devices

<Info>
  **Pro Tip**: Use contact forms alongside your email channel to provide customers multiple ways to reach you while maintaining a unified inbox experience.
</Info>