Forms

Forms in Fly Super let you capture leads, collect feedback, gather registrations, and more. Create forms with AI in seconds, customize field types and validation, and integrate with your favorite tools via webhooks.

What Are Forms?

Forms are customizable data collection tools that can be:

• Embedded in landing pages (Hero Form, Content Form components)
• Standalone pages (dedicated form URLs)
• Integrated with webhooks (send data to your tools)
• Spam-protected (automatic bot detection)
• Rate-limited (prevent abuse)

Key Features

AI-Powered Generation

Describe the form you need, and AI creates it:

Create a webinar registration form with name, email, company,
job title, and phone number

AI generates:

• Appropriate field types
• Smart validation rules
• Helpful placeholder text
• Clear field labels
• Submit button copy

Field Types

Support for all standard and custom field types:

• Text, email, URL, phone, number
• Textarea (multi-line text)
• Select (dropdown), radio buttons, checkboxes
• Date picker
• File upload
• Multi-select

Each with configurable validation rules!

Webhook Integration

Send form submissions to external services:

• CRM systems (Salesforce, HubSpot, Pipedrive)
• Marketing tools (Mailchimp, ConvertKit, ActiveCampaign)
• Databases (Airtable, Notion, Google Sheets)
• Custom endpoints (your own API)
• Zapier/Make webhooks (connect to 1000+ apps)

Reliability: Automatic retries with exponential backoff ensure delivery even if your endpoint is temporarily down!

Spam Protection

Built-in protection against bot submissions:

• Vercel BotID: Advanced bot detection
• Rate limiting: Maximum submissions per IP
• Honeypot fields: Invisible to humans, visible to bots
• CAPTCHA-ready: Integration coming soon

Submission Management

View and manage all form submissions:

• Organization-wide submission dashboard
• Filter by form
• Export data (coming soon)
• Track submission metadata (IP, user agent, timestamp)
• See which landing page generated each submission

Use Cases

Lead Generation

Capture prospects with qualification forms:

• Contact information (name, email, phone)
• Company details (company name, size, industry)
• Qualification questions (budget, timeline, needs)
• UTM tracking (campaign source)

Webhook: Send leads directly to your CRM

Event Registration

Collect event attendee information:

• Personal details (name, email, title)
• Company information
• Dietary restrictions
• T-shirt size
• Session preferences

Webhook: Sync with event management platform

Newsletter Signup

Simple email capture forms:

• Email address
• First name (optional)
• Interests/preferences (checkboxes)

Webhook: Add to email marketing tool automatically

Contact Forms

General inquiry forms:

• Name and email
• Subject/reason for contact
• Message (textarea)
• Department (dropdown)

Webhook: Send to support ticket system or Slack

Product Feedback

Gather user feedback:

• Email (optional)
• Feature request or bug report (radio)
• Description (textarea)
• Priority level (select)
• Affected area (checkboxes)

Webhook: Create issue in project management tool

Waitlist / Early Access

Build pre-launch lists:

• Email address
• Interest level (select)
• How did you hear about us? (text)
• Feature priorities (checkboxes)

Webhook: Add to spreadsheet and send welcome email

How Forms Work

1. Create Form

• Generate with AI from prompt, or
• Build manually field-by-field

2. Configure Fields

• Set field types (text, email, select, etc.)
• Add validation rules (required, min/max length, patterns)
• Customize labels and placeholders
• Set default values

3. Set Up Integration

• Configure webhook URL (optional)
• Set rate limiting (default: 10 per hour per IP)
• Enable bot protection (enabled by default)
• Add success message

4. Embed or Share

Option A: Embed in Landing Page

• Use Hero Form or Content Form components
• Select your form from dropdown
• Form appears inline in page

Option B: Standalone URL

• Each form has a unique submission URL
• Share directly with users
• Can embed in iframe

5. Receive Submissions

• View in Submissions dashboard
• Receive webhook calls (if configured)
• Export data (coming soon)

Form Settings

General Settings

• Form Name: Internal name for organization
• Success Message: Shown after submission
• Redirect URL: Optional redirect after submission
• Submit Button Text: Customize button label

Validation Settings

• Required Fields: Mark fields as mandatory
• Min/Max Length: Character limits for text fields
• Pattern Validation: Regex patterns (e.g., phone formats)
• Custom Error Messages: User-friendly validation errors

Security Settings

• Rate Limiting: Maximum submissions per IP per hour (default: 10)
• Bot Protection: Enable/disable BotID (default: enabled)
• Allowed Domains: Restrict form submissions to specific domains
• CAPTCHA: Coming soon

Integration Settings

• Webhook URL: Your endpoint URL (must be HTTPS)
• Webhook Secret: Optional shared secret for validation
• Retry Settings: Automatic (5 retries: 30s, 1m, 5m, 15m, 1h)
• Email Notifications: Send form submissions to email addresses automatically (see below)

Quick Start

1. Create Your First Form

Navigate to Forms in sidebar → Click "Create Form" → Enter AI prompt or build manually

2. Add Fields

For manual building:

• Click "Add Field"
• Choose field type
• Configure label, placeholder, validation
• Repeat for each field

3. Configure Webhook (Optional)

• Click "Webhooks" tab
• Enter webhook URL
• Test webhook
• Save

4. Embed in Landing Page

• Open a landing page in editor
• Add Hero Form or Content Form component
• Select your form from dropdown
• Save and publish

5. Test Submission

• Submit test data through the form
• Check Submissions dashboard
• Verify webhook received data (if configured)

Form Lifecycle

Create Form → Add Fields → Configure Validation
     ↓
Set Up Webhooks (optional) → Test Webhooks
     ↓
Embed in Landing Page or Share URL
     ↓
Receive Submissions → View in Dashboard
     ↓
Data Sent to Webhook → Process in Your System

Best Practices

For Higher Completion Rates

1. Keep it short: Only ask for essential information
2. Clear labels: Use descriptive field labels
3. Helpful placeholders: Show examples in placeholder text
4. Progressive disclosure: Split long forms into steps (coming soon)
5. Mobile-friendly: Test on mobile devices
6. Fast loading: Minimize fields for speed

For Better Data Quality

1. Validation: Use appropriate field types and validation
2. Required fields: Only mark truly essential fields as required
3. Clear instructions: Add help text for complex fields
4. Error messages: Provide specific, actionable error messages
5. Confirmation: Show success message after submission

For Security

1. Enable bot protection: Keep BotID enabled
2. Set rate limits: Prevent spam submissions
3. HTTPS only: Ensure landing pages use HTTPS
4. Webhook secrets: Use shared secrets to verify requests
5. Sanitize data: Clean data in your webhook handler

Bot Detection & Spam Protection

Fly Super uses multiple layers of protection to prevent spam and malicious form submissions.

Vercel BotID

What It Is: Vercel BotID is an advanced bot detection system that analyzes visitor behavior to identify automated submissions.

How It Works:

1. JavaScript challenges sent to browser
2. Browser behavior analyzed (mouse movements, timing, etc.)
3. Risk score calculated (0-100)
4. High-risk submissions automatically rejected

Enabled by Default:

• Bot protection is ON for all forms
• No configuration needed
• Works transparently for real users
• Blocks most automated spam

Detection Accuracy:

• 99%+ spam detection rate
• < 0.1% false positives (real users blocked)
• Updated continuously by Vercel

Multi-Layer Protection

1. BotID (Primary)

• Behavioral analysis
• Device fingerprinting
• Challenge-response tests
• Machine learning-based detection

2. Rate Limiting (Secondary)

• IP-based throttling
• 10 submissions per hour per IP (default)
• Configurable per form
• Prevents brute force attacks

3. Honeypot Fields (Tertiary)

• Hidden fields invisible to humans
• Bots fill them out automatically
• Submissions with honeypot data rejected
• Zero false positives

4. Validation (Always-On)

• Field-level validation
• Type checking (email format, etc.)
• Required field enforcement
• Pattern matching (regex)

Configuration

Enable/Disable Bot Protection:

1. Navigate to form settings
2. Go to "Security" tab
3. Toggle "Bot Protection" (BotID)
4. Save settings

When to Disable:

• Testing in development
• API-based submissions (not from browser)
• Debugging submission issues
• Internal tools/forms

⚠️ Warning: Disabling bot protection significantly increases spam risk. Only disable if absolutely necessary.

Adjusting Rate Limits

Default Settings:

• 10 submissions per hour per IP
• Applies to all users from same IP

Custom Limits:

1. Navigate to form settings
2. Go to "Security" tab
3. Adjust "Rate Limit" slider
4. Choose: 5, 10, 20, 50, or 100 per hour
5. Save settings

Recommendations:

• Contact forms: 10 per hour (default)
• High-traffic forms: 20-50 per hour
• Event registration: 5 per hour
• Newsletter signup: 20 per hour
• Internal forms: 100+ per hour (or disable)

Spam Statistics

View spam detection metrics:

1. Navigate to Submissions dashboard
2. Filter by "Blocked" status
3. See rejected submission count
4. Review rejection reasons

Rejection Reasons:

• Bot detected: BotID flagged as automated
• Rate limit exceeded: Too many submissions from IP
• Honeypot triggered: Hidden field was filled
• Validation failed: Invalid data format

Handling False Positives

If legitimate users are blocked:

Short-term Fix:

1. Lower BotID sensitivity (contact support)
2. Whitelist specific IPs (enterprise feature)
3. Temporarily disable bot protection

Long-term Fix:

1. Review form for accessibility issues
2. Ensure JavaScript is not blocked
3. Test on multiple browsers/devices
4. Check for VPN/proxy users

User Communication:

• Show helpful error message
• Provide alternative contact method (email)
• Include support link in error message

Best Practices

Balancing Security & UX:

1. Start with defaults: 10 per hour + BotID enabled
2. Monitor submissions: Check for spam patterns
3. Adjust as needed: Increase limits for high-traffic
4. Review blocked submissions: Look for false positives
5. Test regularly: Submit test data to verify protection

For High-Security Needs:

• Enable all protection layers
• Lower rate limits (5 per hour)
• Add manual review workflow
• Require email verification (custom implementation)
• Use webhook to validate submissions in real-time

For High-Volume Needs:

• Increase rate limits (50-100 per hour)
• Keep BotID enabled
• Monitor spam rates
• Add post-submission filtering in webhook

Advanced: Custom Bot Detection

Via Webhooks: You can add additional spam filtering in your webhook handler:

// Example webhook handler with custom spam detection
async function handleFormSubmission(data) {
  // Check for spam keywords
  const spamKeywords = ['viagra', 'casino', 'crypto'];
  const hasSpam = spamKeywords.some(keyword =>
    JSON.stringify(data).toLowerCase().includes(keyword)
  );

  if (hasSpam) {
    return { status: 'rejected', reason: 'spam content' };
  }

  // Check email domain
  const suspiciousDomains = ['tempmail.com', 'guerrillamail.com'];
  const email = data.fields.find(f => f.type === 'email')?.value;
  const isSuspicious = suspiciousDomains.some(domain =>
    email?.endsWith(domain)
  );

  if (isSuspicious) {
    return { status: 'flagged', reason: 'suspicious email' };
  }

  // Process legitimate submission
  return { status: 'accepted' };
}

Via Allowed Domains: Restrict form submissions to specific domains:

1. Navigate to form settings → Security
2. Add allowed domains (e.g., yourdomain.com)
3. Forms embedded on other domains won't work
4. Good for internal tools or partner sites

Integration Examples

Airtable

Send submissions to Airtable base:

Webhook URL: https://api.airtable.com/v0/YOUR_BASE/YOUR_TABLE
Headers: Authorization: Bearer YOUR_API_KEY
Method: POST

Slack

Post submissions to Slack channel:

Webhook URL: https://hooks.slack.com/services/YOUR/WEBHOOK/URL
Method: POST
Body: JSON with submission data

Zapier

Use Zapier webhook to connect to 1000+ apps:

Webhook URL: https://hooks.zapier.com/hooks/catch/YOUR_HOOK_ID/
Method: POST

Custom API

Send to your own API endpoint:

Webhook URL: https://yourdomain.com/api/form-submissions
Headers: X-API-Key: your-secret-key
Method: POST

Email Notifications

Fly Super can automatically send email notifications when forms are submitted. This is perfect for getting instant alerts without setting up webhooks.

How It Works

When a form is submitted:

1. Data is validated and stored
2. Email notification workflow is triggered
3. Notification email sent to configured addresses
4. Automatic retries on failure (3 retries: 30s, 5m, 30m)
5. Delivery status tracked

Setting Up Email Notifications

Step 1: Configure Recipients

1. Navigate to your form settings
2. Go to "Notifications" tab
3. Add recipient email addresses (comma-separated)
4. Save settings

Step 2: Customize Email (Optional)

• Email subject line
• Custom message to prepend
• Choose which fields to include
• Format as HTML or plain text

Step 3: Test

• Submit a test form
• Check recipient inboxes
• Verify all fields are included
• Check spam folder if not received

Email Notification Content

Emails include:

• Form name: Which form was submitted
• Submission time: When it was submitted
• All field values: Labeled field name and submitted value
• Submission ID: For tracking purposes

Example Email:

Subject: New Form Submission: Contact Form

Form Name: Contact Form
Submitted: 2024-11-18 at 3:45 PM EST
Submission ID: sub_abc123xyz

Name: John Doe
Email: john@example.com
Company: Acme Inc
Message: I'm interested in learning more about your product.

---
View this submission in your dashboard:
https://flysuper.com/workspace/submissions/sub_abc123xyz

Retry Logic

If email delivery fails, automatic retries occur:

Retry Schedule:

1. First retry: 30 seconds after failure
2. Second retry: 5 minutes after first retry
3. Third retry: 30 minutes after second retry

Total attempts: 4 (initial + 3 retries)

Fatal Errors (no retries):

• Invalid email addresses
• Malformed data
• Authentication failures

Temporary Errors (retries triggered):

• Network timeouts
• Email service downtime
• Rate limiting from email provider

Delivery Status

Check email delivery status:

1. Navigate to Submissions dashboard
2. Click on a submission
3. View "Email Notifications" section
4. See delivery status:
   • ✅ Delivered: Successfully sent
   • 🔄 Retrying: Delivery failed, retrying
   • ❌ Failed: All retries exhausted
   • ⏱️ Pending: Queued for delivery

Limitations

• Maximum recipients: 10 email addresses per form
• Email size: Limited to 1MB (large submissions may be truncated)
• Attachments: File uploads not included in emails (link to submission provided)
• Rate limits: Maximum 100 emails per form per hour

Email vs Webhooks

Use Email Notifications when:

• You want instant alerts in your inbox
• No technical setup required
• Simple notification needs
• Small team (< 10 people need alerts)

Use Webhooks when:

• Integrating with CRM or database
• Processing submissions automatically
• Complex workflows or automation
• Need full control over data handling

Use Both when:

• You want instant email alerts AND automated processing
• Team notifications + CRM integration
• Backup notification method

Troubleshooting Email Notifications

Emails not arriving:

1. Check spam folder
2. Verify email addresses are correct
3. Check delivery status in submissions dashboard
4. Ensure email service (Resend) API key is configured

Emails delayed:

• Check if retries are being triggered (delivery status)
• Email provider may have rate limits
• Network issues can cause delays

Missing fields in emails:

• Verify field is not hidden or conditional
• Check form configuration includes all fields
• File uploads are linked, not embedded

What's Next?

• Creating Forms - Generate forms with AI or build manually
• Field Types - Complete reference of all field types
• Webhooks - Set up integrations with external services
• Submissions - View and manage form submissions

Quick Reference

Pro Tip: Start with a simple 3-field form (name, email, message) to test the flow. You can always add more fields later or create more complex forms for specific use cases!