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
Step 1: Navigate to Forms
- Go to Forms in the sidebar
- Click Create Form
Step 2: Configure Basic Settings
| Setting | Description |
|---|---|
| Name | Internal name for the form |
| Description | Optional description for your team |
| Active | Toggle form on/off |
| Notification Email | Where to send submission alerts |
Step 3: Add Fields
Drag and drop to add fields:
| Field Type | Description |
|---|---|
| Text | Single line text input |
| Email with validation | |
| Phone | Phone number input |
| Textarea | Multi-line text |
| Select | Dropdown selection |
| Checkbox | Yes/no toggle |
| Number | Numeric input |
Field Options
For each field, configure:
- Label: Display name
- Placeholder: Hint text
- Required: Must be filled
- Options: For select/dropdown fields
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
Set sensitivity (0-100):
- Low (25): Catch obvious spam only
- Medium (50): Balanced filtering
- High (75): Aggressive spam blocking
Auto-Reject
Enable automatic rejection of spam submissions:
- Rejected submissions are logged but not sent
- Review rejected submissions anytime
Managing Submissions
Submission List
View all form submissions with:
- Submission date and time
- Submitter information with readable field labels (e.g., "Name", "Email" instead of technical IDs)
- Spam score and status
- Review status
Submission Actions
| Action | Description |
|---|---|
| View | See full submission details |
| Mark as Spam | Flag as spam for future filtering |
| Mark as Not Spam | Approve falsely flagged submission |
| Delete | Remove submission permanently |
Filtering
Filter submissions by:
- Date range
- Status (pending, reviewed, spam)
- Search by content
Embedding Forms
Widget Integration
Forms can appear in the chat widget:
- Configure form trigger in chatbot settings
- When triggered, form appears in chat
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>
Styling
Forms automatically inherit your widget's styling:
- Primary and secondary colors
- Border radius
- Font family
Notifications
Email Notifications
Receive instant emails for new submissions:
- Configurable recipient
- Full submission content
- Quick action links
Submissions with a very high spam score (80%+) do not trigger email notifications to avoid cluttering your inbox with obvious spam. Only borderline cases are reported for manual review.
In-App Notifications
See new submissions in the notification bell:
- Click to navigate to submission
- Mark as read/unread
Best Practices
- Keep forms short: Only ask for essential information
- Use clear labels: Avoid jargon
- Test spam filter: Submit test entries to calibrate
- Respond promptly: Quick responses improve satisfaction
- Review spam folder: Check for false positives