Text & Number Inputs
Free-text fields with optional regex validation, or number-only fields with min/max range constraints. Ideal for order numbers, postcodes, quantities and reference codes.
Custom Form Fields
In Your Live Chat Widget
Go beyond basic text inputs. Add dropdowns, date pickers, file uploads, number fields and more — all rendered natively inside the chat widget, fully validated, and stored as workflow variables.
- No credit card
- 14-day free trial
- UK hosted
- Visual builder
What Is the Custom Form Field Module?
The Custom Form Field module lets you embed any type of form input directly inside your chat widget — going far beyond the basic text fields offered by the Collect Info module. Need an order number? Use a validated text input with a pattern mask. Need a date? Show a native date picker. Need a document? Present a file upload control.
Every field is rendered inline within the chat conversation, so visitors never leave the chat window. Validation happens in real-time: you define the rules (required, min/max length, regex pattern, file size limits), and the module enforces them instantly. Invalid submissions receive clear, friendly error messages without any page reloads.
Captured values are stored as named workflow variables that flow downstream to Message nodes (for personalised responses), Conditional nodes (for branching logic), and API Form nodes (for sending data to external systems). This makes the Custom Form Field the bridge between visitor input and system integration.
Dropdown Selects
Present a list of predefined options in a native dropdown. Use for product categories, issue types, priority levels, or any fixed list where you control the valid choices.
Date & Time Pickers
Render a native date picker for appointment scheduling, delivery date selection, or incident date reporting. Supports min/max date ranges to prevent impossible selections.
File Uploads
Let visitors upload screenshots, documents, or receipts directly in the chat. Configure allowed file types and maximum size. Uploaded files are attached to the chat transcript.
Checkboxes & Consent
Add tick-box fields for terms acceptance, GDPR consent, or multi-select options. The workflow can branch based on whether the box was ticked or not.
Detailed Example Workflow
Example: E-commerce Returns Flow
An online retailer uses Custom Form Fields to collect structured return request data before routing to their returns team.
START
Returns Team
With full context
Step-by-Step Breakdown
- Empathy Message: Acknowledges the visitor's issue and sets expectations for the return process.
- Order Number (Text Field): A custom text input with a regex pattern matching the retailer's order format (e.g.,
ORD-\d{6}). Invalid formats trigger a helpful re-prompt. - Return Reason (Dropdown): A dropdown with predefined options: "Wrong item", "Damaged", "Changed mind", "Other". This structured data powers analytics and auto-categorisation.
- Photo Upload (File Field): The visitor can attach a photo of the damaged or incorrect item. Accepted types are limited to JPEG, PNG, and PDF with a 5 MB limit.
- Returns Team Handoff: The agent receives the chat with the order number, reason, and photo already attached — ready to process the return immediately.
Best Practices & Tips
Custom Form Fields are powerful, but thoughtful configuration makes the difference between a smooth experience and visitor abandonment.
Label Fields Clearly
The prompt message before each field should explain exactly what you need and in what format. "Enter your 6-digit order number (e.g., ORD-123456)" is much better than just "Order number".
Validate but Don't Over-Restrict
Use regex patterns for structured data like order numbers and postcodes, but keep open-text fields lenient. If a visitor's answer doesn't match your expectation, a gentle re-prompt works better than a hard block.
Set Sensible File Limits
For file upload fields, restrict allowed types to what you actually need (images, PDFs, documents) and set a reasonable size limit (5–10 MB). This prevents abuse and keeps the chat responsive.
Chain with API Forms
Custom Form Fields shine when combined with the API Form module. Capture an order number, pass it to your backend API, and display the result — all within a single workflow.
Frequently Asked Questions
What's the difference between Custom Form Field and Collect Info?
Collect Info is designed for standard contact fields — name, email, phone. It asks questions conversationally and has built-in validation for those common types. The Custom Form Field module handles everything else: dropdowns, date pickers, file uploads, regex-validated text, checkboxes, and any other input type your workflow needs.
Can visitors upload multiple files?
Yes. You can configure the file upload field to accept multiple files in a single submission. Alternatively, chain two file upload Form Fields if you need to collect different types of attachments (e.g., a photo and a receipt) with separate prompts and validation rules.
Do dropdowns work on mobile?
Absolutely. Dropdown fields use the native platform select control, which means they render as a native picker on iOS and Android. This provides the best possible user experience on mobile devices — no custom JavaScript overlays that might break on small screens.
Can I use Custom Form Fields before a live chat handoff?
Yes, and this is one of the most popular patterns. Capture structured data (order number, issue category, screenshot) via Form Fields, then hand off to a live agent who sees everything in their dashboard. The agent can start helping immediately without asking the visitor to repeat themselves.
Related Modules
Custom Form Fields are most powerful when combined with these data-handling and integration modules.
Build Custom Forms Inside Your Chat Widget
Capture any data you need — structured, validated, and ready for your agents and integrations. Start building in minutes.