Contact Forms

Create professional contact forms that integrate seamlessly with your chatbot and include built-in spam protection.

Overview

Contact Forms in ChatReact allow you to:

• Collect structured information from visitors
• Automatically filter spam submissions
• Receive notifications for new submissions
• Review and manage submissions in the dashboard

Availability

Contact Forms are available on:

• Starter plan and above

Creating a Form

Forms are managed per chatbot, so each form belongs to exactly one chatbot.

Step 1: Navigate to Forms

1. Select the chatbot the form belongs to
2. Go to Forms in the sidebar
3. Click Create Form

The form builder guides you through four steps: Basics, Fields, Design and Settings.

Step 2: Basics

New forms are active by default. You can switch a form on or off later via the Form Active toggle on its General tab.

Step 3: Add Fields

New forms come pre-filled with a ready-made contact template — Name, Email, Message and Privacy Consent — which you can edit, reorder or remove. Use the Add Field button to add more fields and the up/down arrows to change their order.

Field Options

For each field, configure:

• Label: Display name
• Placeholder: Hint text
• Required: Must be filled
• Options: For select/dropdown fields

Step 4: Design

Style the form to match your website:

• Quick Presets: Light and dark theme starting points
• Colors: Pick the primary, background and text colors
• Button Text: Custom label for the submit button
• Success Message: What visitors see after submitting

A live preview shows your changes as you make them.

Step 5: Settings

Configure spam protection (see below) and the Notification Email for submission alerts.

Spam Protection

AI-Powered Spam Filter

Every submission is analyzed by AI for:

• Suspicious patterns
• Known spam content
• Bot-like behavior
• Quality signals

Spam Threshold

Each submission receives a spam score from 0 (legitimate) to 100 (definite spam). Use the threshold slider (0–100, default 70) to decide where to draw the line — with Auto-Reject enabled, submissions with a spam score above the threshold are marked as spam:

• Lower threshold: Stricter filtering — more submissions are flagged
• Higher threshold: More lenient — only obvious spam is flagged

Auto-Reject

Enable Auto-Reject to handle spam automatically:

• Submissions scoring above your threshold are automatically marked as spam
• They stay in your submissions list, so you can review them anytime

Managing Submissions

Submission List

The submissions page starts with an overview of your totals: Total, Pending, Approved, Spam and Rejected counts.

Click a submission to expand it and see:

• Submission date and time
• Submitter information with readable field labels (e.g., "Name", "Email" instead of technical IDs)
• Spam score and status
• The AI's reasoning behind the spam score
• Technical details such as IP address and referrer

Submission Actions

Approve, Mark as Spam and Reject are available for submissions with Pending status; Delete is available for all submissions.

Filtering

Use the status dropdown to filter submissions: All, Pending, Approved, Spam or Rejected.

Embedding Forms

Contact forms are embedded directly on your website with a small script snippet. You can copy the ready-made snippet — including your form ID — from the dashboard: use the copy icon on the form card or the Embed tab on the form's edit page.

Standalone Embed

Embed forms directly on your website:

<script
  src="https://www.chatreact.ai/embed/form.js"
  data-form-id="YOUR_FORM_ID"
  async
></script>

You can also specify a custom container element using the data-container attribute if you want the form to render inside a specific element:

<div id="my-form-container"></div>
<script
  src="https://www.chatreact.ai/embed/form.js"
  data-form-id="YOUR_FORM_ID"
  data-container="my-form-container"
  async
></script>

Embed Options

Fine-tune the layout with these optional script attributes:

WordPress

If your site runs WordPress, the official ChatReact plugin lets you embed forms with a shortcode:

[chatreact_form id="YOUR_FORM_ID"]

A Gutenberg block and an Elementor widget are also included. See WordPress Integration for details.

Styling

Embedded forms use the colors, button text and success message you configured in the form's Design settings — each form has its own look, independent of your chat widget. The font family is inherited from your website, so forms blend in naturally.

Embedded forms show a small "Powered by ChatReact" link. Plans that include white-label (Professional and above) remove this branding.

Multi-Language Forms

The Translations tab on the form's edit page lets you translate the form for each of your chatbot's languages:

• Field labels and placeholders
• Submit button text
• Success message

Embedded forms detect your page's language automatically and display the matching translation.

Notifications

Email Notifications

Receive email alerts for new submissions:

• Alerts include the form name and a direct link to the submissions page
• If the Notification Email you configure matches a team member's account, that person is notified; otherwise all owners, admins and managers receive the alert
• Delivery follows each recipient's notification preferences — instant or bundled into a digest

In-App Notifications

See new submissions in the notification bell:

• Click to navigate to submission
• Mark as read (individually or all at once)

Best Practices

1. Keep forms short: Only ask for essential information
2. Use clear labels: Avoid jargon
3. Test spam filter: Submit test entries to calibrate
4. Respond promptly: Quick responses improve satisfaction
5. Review spam folder: Check for false positives

Next Steps

• Live Chat →
• Widget Customization →
• Notifications →