Forms

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?
2. Creating Your First Form
3. Form Templates
4. Adding Form Fields
5. Configuring Start and End Screens
6. Publishing Your Form
7. Embedding Forms
8. Form Submissions
9. Best Practices

​

1. What are Forms?

​

Overview

• 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

• Support ticket submission
• Bug reports
• Feature requests
• Account assistance

• Contact forms
• Demo requests
• Quote requests
• Consultation bookings

• Product feedback
• Customer satisfaction surveys
• Employee feedback
• Event registrations

• New customer onboarding
• Employee onboarding
• Partner registration
• Account setup

​

2. Creating Your First Form

​

Quick Start

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

• 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

• One question at a time, chat-like interface
• Best for: Surveys, detailed questionnaires, engaging experiences
• User Experience: Answer questions step by step

​

Initial Setup

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

​

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

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

• 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

• 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

• 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

• 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

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

• 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

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

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

• Main headline users see first
• Example: “Contact Our Sales Team”
• Keep it clear and action-oriented

• 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

• Button text to start the conversation
• Example: “Get Started”, “Begin”, “Start”

• “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”

• Vague titles like “Form” or “Submit”
• Too much text that users won’t read
• No explanation of what happens after submission

​

End Screen

• Confirmation text thanking the user
• Example: “Thank you! Your submission has been received”
• Reassure users their information was captured

• 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)

• “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]

• Generic “Thank you” with no next steps
• Leaving users wondering what happens next
• Broken or irrelevant CTA links

​

6. Publishing Your Form

​

Before Publishing

• 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

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

• 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

https://app.zappway.ai/forms/[FORM_ID]

• 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

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

​

Hosted Form (No Code)

• Quick setup needed
• No technical resources available
• Testing forms before custom integration

1. Publish your form
2. Copy the public URL
3. Share link directly or create a button that links to it

• No code required
• Always up-to-date
• Mobile responsive

• Redirects users away from your site
• Limited styling customization

​

Embed Widget (Low Code)

• Want form on your website without redirect
• Need seamless integration
• Have basic HTML access

1. Navigate to Widgets → Form → Standard Widget
2. Copy the embed code:

<script src="https://cdn.zappway.ai/form-widget.js"></script>
<div data-zappway-form="YOUR_FORM_ID"></div>

3. Paste code where you want the form to appear
4. Replace YOUR_FORM_ID with your actual form ID

<div 
  data-zappway-form="YOUR_FORM_ID"
  data-theme="light"
  data-height="600px"
></div>

​

Usage with Chatbot

• Want AI to qualify leads before showing form
• Need contextual form display
• Building conversational experiences

• Form with Chatbot Guide

​

8. Form Submissions

​

Viewing Submissions

• Submission Date: When form was submitted
• User Email: If provided in form
• Status: New, In Progress, Resolved
• Preview: Quick view of responses

• All field responses
• Submission timestamp
• User information (if captured)
• Any attached files
• Associated conversation (if AI Employee connected)

​

Managing Submissions

1. Open submission details
2. Click “Mark as Resolved”
3. Submission moves to resolved status

1. Go to Submissions tab
2. Click “Export” button
3. Choose format (CSV, Excel)
4. Download file with all data

• By date range
• By status (New, In Progress, Resolved)
• By specific field values
• Search by keywords

​

Webhook Integration

1. In form editor, open “Webhook” accordion
2. Enter webhook URL
3. Form data is posted to this URL on each submission

{
  "formId": "clf123abc",
  "submissionId": "sub456def",
  "timestamp": "2025-01-15T10:30:00Z",
  "fields": {
    "email": "[email protected]",
    "name": "John Doe",
    "message": "I need help with..."
  }
}

• Send to CRM (Salesforce, HubSpot)
• Trigger email notifications
• Update databases
• Start automation workflows

​

9. Best Practices

​

Form Design

• Ask only essential questions
• 3-5 fields for lead capture
• 5-10 fields for detailed forms

• Long forms with unnecessary fields
• Asking for information you already have
• Multiple pages unless necessary

• “What’s your email address?”
• “Company name”
• “How can we help you?”

• “Input” or “Field 1”
• Technical jargon
• Ambiguous questions

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

• Explain how long form takes (e.g., “2 minutes to complete”)
• State what happens after submission
• Provide privacy assurance if collecting sensitive data

• Use clear validation messages
• Highlight which fields need correction
• Explain why field is invalid (not just “Error”)

• 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

• Minimize number of fields initially visible
• Use conditional logic to show/hide fields
• Optimize file upload size limits

• Show clear loading state during submission
• Display success message immediately
• Don’t reload page unnecessarily

​

Security & Privacy

• 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

• Consider adding reCAPTCHA for public forms
• Monitor for duplicate submissions
• Set reasonable rate limits

​

Testing

• 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

• Help button in dashboard
• Live chat (available on Pro+ plans)

• Form Fields Reference
• Form Widget Documentation
• Hosted Forms Guide
• Chatbot Integration

​

Feedback

• Use feedback button in dashboard
• Email: [email protected]
• Include:
  • Form ID
  • Steps to reproduce issue
  • Expected vs actual behavior

​

✅ Quick Reference

​

Essential Actions

​

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