Form Builder

The Form Builder lets you create professional forms in minutes. Drag, drop, customize, and embed. That's it! 📝

What You Can Build

Creating Your First Form

Available Field Types

Text Input

Single-line text entry

• Name, company, job title
• Can set min/max length
• Placeholder text

Email

Email address with validation

• Automatically checks format
• Required for newsletters
• Prevents typos

Textarea

Multi-line text entry

• Messages, comments, descriptions
• Adjustable height
• Character count option

Number

Numeric input only

• Age, quantity, phone numbers
• Min/max values
• Step increment

Select Dropdown

Choose one from a list

• Countries, categories, options
• Searchable for long lists
• Custom options

Radio Buttons

Choose one from visible options

• Yes/No, True/False
• Multiple choice questions
• Better UX than dropdowns for fewer than 5 options

Checkboxes

Select multiple options

• Interests, preferences
• Terms & conditions agreement
• Newsletter opt-ins

Date Picker

Select a date

• Appointments, events
• Min/max date restrictions
• Custom date format

File Upload

Let users upload files

• Resumes, images, documents
• File type restrictions
• Size limits

Rating

Star rating or scale

• Customer satisfaction
• Product reviews
• 1-5 or 1-10 scales

Hidden Fields

Store data invisibly

• UTM parameters
• Page URLs
• User IDs

Form Settings

Click the ⚙️ Settings tab to configure:

General Settings

Form Name

• Internal reference (not shown to users)

Form Description

• Optional helper text shown above form

Submit Button Text

• Default: "Submit"
• Customize: "Send Message", "Sign Me Up!", "Get Started"

Success Message

• Shown after submission
• Example: "Thanks! We'll be in touch soon."

Validation Rules

Required Fields

• Mark fields as mandatory
• Show * indicator
• Custom error messages

Email Validation

• Automatic format checking
• Prevent invalid emails

Min/Max Length

• Text fields: character limits
• Numbers: value ranges

Custom Patterns

• Phone numbers: (555) 123-4567
• Postal codes: A1A 1A1
• Custom regex

Notifications

Email Notifications

• Get notified of new submissions
• Send to multiple emails
• Include submission data

Autoresponder

• Send confirmation to submitter
• Customize email template
• Include copy of their submission

Webhooks

• Send data to other services
• Integrate with Zapier, Make, etc.
• Real-time data sync

Redirect After Submit

Thank You Page

• Redirect to custom URL
• Show success message inline
• Open in new tab option

Download File

• Offer PDF, guide, ebook
• Automatic download after submit

Spam Protection

reCAPTCHA

• Google reCAPTCHA v3
• Invisible to humans
• Blocks bots effectively

Honeypot Fields

• Hidden spam trap
• Invisible to real users
• Catches most bots

Email Domain Blacklist

• Block temporary email services
• Custom domain blocking

Styling Your Form

Theme Presets

Choose from pre-designed themes:

• Modern: Clean, minimal
• Classic: Traditional form styling
• Colorful: Vibrant, eye-catching
• Dark Mode: For dark websites

Custom Styling

Colors

• Button colors
• Focus states
• Error messages
• Success indicators

Typography

• Font family
• Font sizes
• Label styling

Spacing

• Field padding
• Form margins
• Gap between fields

Border Radius

• Rounded corners
• Sharp edges
• Fully rounded

Embedding Forms

Method 1: Inline Embed

Shows the form directly on your page:

<div id="chat4shop-form-container"></div>
<script src="https://chat4.shop/embed.js" data-form-id="form_abc123"></script>

Method 2: Popup Modal

Form appears in a modal when triggered:

<button class="chat4shop-trigger" data-form-id="form_abc123">
  Open Form
</button>
<script src="https://chat4.shop/embed.js"></script>

Method 3: Slide-in Widget

Form slides in from the side:

<script
  src="https://chat4.shop/embed.js"
  data-form-id="form_abc123"
  data-display="slide-in"
  data-position="bottom-right">
</script>

See full integration guide →

Managing Submissions

Viewing Submissions

Click Forms → [Your Form] → Submissions

You'll see a table with:

• Submission date/time
• Submitted data
• User IP (for spam prevention)
• Status (new/read/archived)

Filtering & Searching

• Search by any field
• Filter by date range
• Sort by any column
• Mark as read/unread

Exporting Data

Export submissions to:

• CSV: Open in Excel/Google Sheets
• JSON: For developers/integrations
• PDF: Printable reports

Deleting Submissions

• Delete individual entries
• Bulk delete (select multiple)
• Clear all (be careful!)

Multi-Step Forms

Break long forms into steps for better conversion:

Advanced Features

Conditional Logic

Show/hide fields based on previous answers:

Example: Show "Company Name" only if user selects "Business" type.

1. Click field → Add Condition
2. Choose trigger: "When [field] is [value]"
3. Choose action: "Show this field"

Calculations

Auto-calculate values:

• Order totals
• Quantity × Price
• Age from birthdate

Pre-fill Fields

Auto-fill from URL parameters:

https://yoursite.com/form?name=John&email=john@example.com

Form fields auto-populate for faster submissions!

Save & Resume

Let users save progress and return later:

• Enable in form settings
• Users get unique link
• Data saved for 30 days

Best Practices

Keep It Short

• Only ask what you absolutely need
• Every field reduces conversion
• Split long forms into multi-step

Clear Labels

• Use plain language
• Add helper text for complex fields
• Examples: "555-123-4567" for phone

Test on Mobile

• 50%+ of traffic is mobile
• Use responsive preview
• Make buttons big enough to tap

Optimize for Speed

• Minimize required fields
• Use autofill attributes
• Smart defaults (country = user's location)

Follow Up Fast

• Set up email notifications
• Respond within 24 hours
• Autoresponders for instant confirmation

Troubleshooting

Form Not Showing?

• Check if form is set to "Active"
• Verify script is on the page
• Check browser console for errors
• Clear cache and refresh

Submissions Not Saving?

• Check email field validation
• Verify required fields are filled
• Check spam protection settings
• Look at browser console

Styling Looks Broken?

• Check for CSS conflicts
• Use higher CSS specificity
• Try !important (last resort)
• Contact support for custom CSS

Examples & Templates

Contact Form

Fields:

• Name (required)
• Email (required)
• Subject
• Message (required)
• Submit button

Perfect for: Any website needing basic contact

Newsletter Signup

Fields:

• Email (required)
• First Name (optional)
• Checkbox: "I agree to receive emails"
• Submit: "Subscribe"

Perfect for: Building email lists

Event Registration

Fields:

• Full Name
• Email
• Phone
• Number of Tickets
• Dietary Restrictions (optional)
• Submit: "Register Now"

Perfect for: Webinars, workshops, meetups

Next Steps

Forms are powerful! Start simple, then add advanced features as you need them. Happy form building! 📝✨