> ## Documentation Index
> Fetch the complete documentation index at: https://docs.zappway.ai/llms.txt
> Use this file to discover all available pages before exploring further.
# Forms
> Create intelligent forms that collect data, qualify leads, and streamline customer interactions with AI-powered automation.
> **Important:**
> Forms in ZappWay are flexible data collection tools that can be embedded on your website, shared as standalone pages, or integrated with your AI Employees for automated lead qualification and customer support.
***
## 🔢 Table of Contents
1. [What are Forms?](#1-what-are-forms)
2. [Creating Your First Form](#2-creating-your-first-form)
3. [Form Templates](#3-form-templates)
4. [Adding Form Fields](#4-adding-form-fields)
5. [Configuring Start and End Screens](#5-configuring-start-and-end-screens)
6. [Publishing Your Form](#6-publishing-your-form)
7. [Embedding Forms](#7-embedding-forms)
8. [Form Submissions](#8-form-submissions)
9. [Best Practices](#9-best-practices)
***
## 1. What are Forms?
### Overview
**Forms** in ZappWay are customizable data collection tools that help you capture information from users, qualify leads, gather feedback, and streamline support requests. Unlike traditional forms, ZappWay Forms can be connected to AI Employees for intelligent processing and automation.
**Key Features:**
* **Multiple Form Types**: Traditional forms, conversational forms, and AI-powered forms
* **Smart Templates**: Pre-built templates for common use cases
* **AI Integration**: Connect forms to AI Employees for automated responses
* **File Uploads**: Accept documents, images, and other files
* **Lead Qualification**: Automatically qualify and route leads based on responses
* **Custom Branding**: Match your brand with customizable styling
* **Multi-language**: Support for multiple languages out of the box
* **Webhook Integration**: Send form data to external systems
### Common Use Cases
**Customer Support:**
* Support ticket submission
* Bug reports
* Feature requests
* Account assistance
**Lead Generation:**
* Contact forms
* Demo requests
* Quote requests
* Consultation bookings
**Feedback Collection:**
* Product feedback
* Customer satisfaction surveys
* Employee feedback
* Event registrations
**Onboarding:**
* New customer onboarding
* Employee onboarding
* Partner registration
* Account setup
***
## 2. Creating Your First Form
### Quick Start
**Steps:**
1. Navigate to **Forms** in the sidebar (or visit `/forms`)
2. Click **"Create Form"** button
3. Choose a template or start from scratch
4. Configure form settings:
* **Name**: Internal name for the form
* **Type**: Traditional or conversational
* **Template**: Select a pre-built template (optional)
5. Click **"Create"**
### Form Types
**Traditional Forms:**
* Standard web forms with all fields visible at once
* Best for: Simple data collection, contact forms, registration
* User Experience: Fill out all fields and submit
**Conversational Forms:**
* One question at a time, chat-like interface
* Best for: Surveys, detailed questionnaires, engaging experiences
* User Experience: Answer questions step by step
### Initial Setup
After creating a form, you will see the form editor with three main sections:
1. **Form Settings Panel** (left): Configure fields and screens
2. **Live Preview** (right): See changes in real-time
3. **Top Bar**: Template selector and publish button
***
## 3. Form Templates
### Available Templates
ZappWay provides pre-built templates to help you get started quickly:
#### From Scratch
* Empty template for complete customization
* No pre-configured fields
* Build exactly what you need
#### Lead Form
* Name field
* Email field
* Company field
* Message textarea
* Perfect for: General lead capture
#### Contact Sales
* Name, email, company
* Phone number
* Department selection
* Inquiry type selection
* Perfect for: B2B sales inquiries
#### Product Feedback
* Name and email
* Product selection
* Rating field
* Feedback textarea
* Perfect for: Collecting product feedback
#### Onboarding Form
* Personal information fields
* Role/department selection
* Preferences
* Perfect for: New user onboarding
#### Inbound Lead
* Contact details
* Lead source
* Budget range
* Timeline selection
* Perfect for: Qualifying sales leads
#### Feedback
* Rating field
* Experience description
* Improvement suggestions
* Perfect for: General feedback collection
### Selecting a Template
**In Form Editor:**
1. Open the **Template Selector** dropdown (top of settings panel)
2. Browse available templates
3. Click to select
4. Fields are automatically populated
5. Customize as needed
**Switching Templates:**
* You can switch templates at any time
* Existing custom fields are preserved when possible
* Template fields replace previous template fields
***
## 4. Adding Form Fields
### Field Types
**Text Input Fields:**
* **Short Text**: Single-line text input
* Use for: Names, titles, short answers
* Options: Placeholder, required, min/max length
* **Long Text (Textarea)**: Multi-line text input
* Use for: Messages, descriptions, detailed feedback
* Options: Placeholder, required, min/max length, rows
* **Email**: Email address input with validation
* Use for: Contact information
* Options: Required, create contact automatically
* Validation: Ensures valid email format
* **Phone Number**: Phone number input with country code
* Use for: Contact information
* Options: Default country code, required, create contact
* Format: International phone number format
**Selection Fields:**
* **Select (Dropdown)**: Choose one option from a list
* Use for: Categories, departments, product selection
* Options: Custom options, required, placeholder
* **Multiple Choice**: Select multiple options
* Use for: Interest selection, feature preferences
* Options: Multiple selections, required
**Other Fields:**
* **File Upload**: Accept file attachments
* Use for: Documents, images, resumes
* Options: File type restrictions, size limits, required
* Supported: PDF, images, documents, spreadsheets
* **Number**: Numeric input
* Use for: Age, quantity, ratings
* Options: Min/max values, required
### Adding Fields
**From Form Editor:**
1. Scroll to **"Form Fields"** accordion
2. Click **"Add Field"** dropdown at bottom
3. Select field type from list
4. New field appears in the list
5. Click field to expand and configure
**Field Configuration:**
Each field can be configured with:
* **Label**: The question or field name shown to users
* **Placeholder**: Helper text inside the input
* **Required**: Mark field as mandatory
* **Options**: Type-specific settings (varies by field type)
### Reordering Fields
**Drag and Drop:**
1. Click and hold the drag handle (⋮⋮) on the left of any field
2. Drag field up or down
3. Drop in desired position
4. Order is updated automatically
### Removing Fields
**Delete Field:**
1. Expand field by clicking on it
2. Click **Delete** button (trash icon) on the right
3. Field is removed immediately
4. Cannot be undone
***
## 5. Configuring Start and End Screens
### Start Screen
The **Start Screen** is what users see before filling out the form. It sets expectations and provides context.
**Configuration Options:**
**Title:**
* Main headline users see first
* Example: "Contact Our Sales Team"
* Keep it clear and action-oriented
**Description:**
* Supporting text that explains the form's purpose
* Example: "Fill out this form and our team will get back to you within 24 hours"
* Include any important information users need to know
**Call-to-Action (Conversational Forms Only):**
* Button text to start the conversation
* Example: "Get Started", "Begin", "Start"
**Best Practices:**
✅ **Good Start Screens:**
* "Get a Free Quote" → "Tell us about your project and receive a custom quote within 1 business day"
* "Report a Bug" → "Help us improve! Describe the issue you encountered and our team will investigate"
* "Schedule a Demo" → "See ZappWay in action. Fill out this form to book your personalized demo"
❌ **Avoid:**
* Vague titles like "Form" or "Submit"
* Too much text that users won't read
* No explanation of what happens after submission
### End Screen
The **End Screen** appears after successful form submission. Use it to confirm submission and guide next steps.
**Configuration Options:**
**Success Message:**
* Confirmation text thanking the user
* Example: "Thank you! Your submission has been received"
* Reassure users their information was captured
**Call-to-Action:**
* **Label**: Button text for next action
* Example: "Visit Our Blog", "Return Home", "View Pricing"
* **URL**: Where the button links to
* Can be internal or external URL
* **Target**: How link opens
* `_blank`: New tab (external links)
* `_self`: Same tab (internal navigation)
**Best Practices:**
✅ **Good End Screens:**
* "Thanks for reaching out! We'll respond within 24 hours" + \[Browse Our Resources]
* "Your ticket has been submitted. We're on it!" + \[Check Status]
* "Form submitted successfully! Check your email for next steps" + \[Return to Homepage]
❌ **Avoid:**
* Generic "Thank you" with no next steps
* Leaving users wondering what happens next
* Broken or irrelevant CTA links
***
## 6. Publishing Your Form
### Before Publishing
**Checklist:**
* [ ] All fields are configured correctly
* [ ] Required fields are marked appropriately
* [ ] Start screen title and description are clear
* [ ] End screen provides next steps
* [ ] Test form by filling it out in preview
* [ ] Webhook configured (if using external systems)
### Publishing Process
**Steps:**
1. Review your changes in the **Live Preview** panel
2. Click **"Publish Updates"** button (top of settings panel)
3. Wait for confirmation toast: "Form published successfully"
4. Form is now live and accessible via public URL
**What Happens When You Publish:**
* Draft configuration becomes the published version
* Public form URL is updated with latest changes
* Existing embedded forms update automatically
* Previous submissions remain unchanged
### Form URL
After publishing, your form is available at:
```
https://app.zappway.ai/forms/[FORM_ID]
```
**Using the URL:**
* **Share directly**: Send link via email, chat, or social media
* **QR Code**: Generate QR code for physical materials
* **Embed**: Use as iframe source or integrate with embedding code
**Copy URL:**
1. Look for the public URL in the preview panel (appears after first publish)
2. Click the **Copy** button next to the URL
3. Paste wherever needed
***
## 7. Embedding Forms
ZappWay Forms can be embedded on your website in multiple ways.
### Hosted Form (No Code)
The simplest option - use the direct form URL.
**When to Use:**
* Quick setup needed
* No technical resources available
* Testing forms before custom integration
**How to Use:**
1. Publish your form
2. Copy the public URL
3. Share link directly or create a button that links to it
**Pros:**
* No code required
* Always up-to-date
* Mobile responsive
**Cons:**
* Redirects users away from your site
* Limited styling customization
### Embed Widget (Low Code)
Embed the form directly on your website using a widget.
**When to Use:**
* Want form on your website without redirect
* Need seamless integration
* Have basic HTML access
**How to Embed:**
1. Navigate to **Widgets → Form → Standard Widget**
2. Copy the embed code:
```html theme={null}
```
3. Paste code where you want the form to appear
4. Replace `YOUR_FORM_ID` with your actual form ID
**Customization Options:**
```html theme={null}
```
### Usage with Chatbot
Combine forms with the ZappWay chatbot for conversational lead capture.
**When to Use:**
* Want AI to qualify leads before showing form
* Need contextual form display
* Building conversational experiences
**See Documentation:**
* [Form with Chatbot Guide](/widgets/form/usage-with-chatbot)
***
## 8. Form Submissions
### Viewing Submissions
**Location:** Forms Dashboard → Click form name → **Submissions** tab
**Submission List:**
Each submission shows:
* **Submission Date**: When form was submitted
* **User Email**: If provided in form
* **Status**: New, In Progress, Resolved
* **Preview**: Quick view of responses
**Submission Details:**
Click any submission to view:
* All field responses
* Submission timestamp
* User information (if captured)
* Any attached files
* Associated conversation (if AI Employee connected)
### Managing Submissions
**Mark as Resolved:**
1. Open submission details
2. Click **"Mark as Resolved"**
3. Submission moves to resolved status
**Export Submissions:**
1. Go to Submissions tab
2. Click **"Export"** button
3. Choose format (CSV, Excel)
4. Download file with all data
**Filter Submissions:**
* By date range
* By status (New, In Progress, Resolved)
* By specific field values
* Search by keywords
### Webhook Integration
Send form data to external systems automatically.
**Configuration:**
1. In form editor, open **"Webhook"** accordion
2. Enter webhook URL
3. Form data is posted to this URL on each submission
**Webhook Payload:**
```json theme={null}
{
"formId": "clf123abc",
"submissionId": "sub456def",
"timestamp": "2025-01-15T10:30:00Z",
"fields": {
"email": "user@example.com",
"name": "John Doe",
"message": "I need help with..."
}
}
```
**Use Cases:**
* Send to CRM (Salesforce, HubSpot)
* Trigger email notifications
* Update databases
* Start automation workflows
***
## 9. Best Practices
### Form Design
**Keep Forms Short:**
✅ **Good:**
* Ask only essential questions
* 3-5 fields for lead capture
* 5-10 fields for detailed forms
❌ **Avoid:**
* Long forms with unnecessary fields
* Asking for information you already have
* Multiple pages unless necessary
**Clear Labels:**
✅ **Good:**
* "What's your email address?"
* "Company name"
* "How can we help you?"
❌ **Avoid:**
* "Input" or "Field 1"
* Technical jargon
* Ambiguous questions
**Smart Field Order:**
1. Start with easy questions (name, email)
2. Build to more complex questions
3. End with optional fields
4. Put required fields first
### User Experience
**Set Expectations:**
* Explain how long form takes (e.g., "2 minutes to complete")
* State what happens after submission
* Provide privacy assurance if collecting sensitive data
**Error Handling:**
* Use clear validation messages
* Highlight which fields need correction
* Explain why field is invalid (not just "Error")
**Mobile Optimization:**
* Test on mobile devices
* Ensure fields are easy to tap
* Use appropriate input types (tel for phone, email for email)
* Avoid small text or buttons
### Performance
**Loading Speed:**
* Minimize number of fields initially visible
* Use conditional logic to show/hide fields
* Optimize file upload size limits
**Submission Handling:**
* Show clear loading state during submission
* Display success message immediately
* Don't reload page unnecessarily
### Security & Privacy
**Data Protection:**
* Only collect data you actually need
* State how data will be used in start screen
* Comply with GDPR/privacy regulations
* Use HTTPS for all form pages
**Spam Prevention:**
* Consider adding reCAPTCHA for public forms
* Monitor for duplicate submissions
* Set reasonable rate limits
### Testing
**Before Going Live:**
* [ ] Fill out form yourself completely
* [ ] Test required field validation
* [ ] Submit form and check data appears correctly
* [ ] Test on mobile device
* [ ] Verify webhook delivers data (if configured)
* [ ] Check end screen CTA link works
***
## 📞 Support & Resources
### Getting Help
**In-App Support:**
* Help button in dashboard
* Live chat (available on Pro+ plans)
**Common Resources:**
* [Form Fields Reference](/widgets/form/fields)
* [Form Widget Documentation](/widgets/form/standard)
* [Hosted Forms Guide](/widgets/form/hosted-form)
* [Chatbot Integration](/widgets/form/usage-with-chatbot)
### Feedback
**Report Issues:**
* Use feedback button in dashboard
* Email: [support@zappway.ai](mailto:support@zappway.ai)
* Include:
* Form ID
* Steps to reproduce issue
* Expected vs actual behavior
***
## ✅ Quick Reference
### Essential Actions
| Task | Location | Action |
| ----------------- | ------------- | -------------------- |
| Create Form | Forms page | "Create Form" |
| Add Field | Form editor | "Add Field" dropdown |
| Reorder Fields | Form editor | Drag field up/down |
| Publish Changes | Form editor | "Publish Updates" |
| View Submissions | Form detail | "Submissions" tab |
| Copy Public URL | Preview panel | Click copy button |
| Configure Webhook | Form editor | "Webhook" accordion |
### Field Types Quick Guide
```
📧 Email → Contact information with validation
📱 Phone → Phone number with country code
📝 Short Text → Names, titles, short answers
📄 Long Text → Messages, descriptions, feedback
🗂️ Select → Single choice from dropdown
☑️ Multiple → Multiple choices
📎 File → Document/image upload
🔢 Number → Numeric input with min/max
```
***
**Last Updated:** March 2026\
**Platform:** ZappWay Forms