Creating Forms

Learn how to create forms in Fly Super using AI generation or manual building. This guide covers both approaches with examples and best practices.

Quick Start

Navigate to Forms

1. Click Forms in the sidebar
2. Click "Create Form" button
3. Choose creation method:
   • AI Generation (recommended for speed)
   • Manual Building (for precise control)

AI Form Generation

How It Works

Describe the form you need in plain English, and AI generates:

• Appropriate field types for each piece of data
• Smart validation rules (required, email format, etc.)
• Helpful placeholder text and labels
• Logical field order
• Submit button copy

Writing Form Prompts

Basic Structure:

Create a [type] form with [list of fields]

Example Prompts:

Simple Contact Form

Create a contact form with name, email, and message

AI generates:

• Name (text field, required)
• Email (email field, required, email validation)
• Message (textarea, required)

Webinar Registration

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

AI generates:

• First Name (text, required)
• Last Name (text, required)
• Email (email, required, validated)
• Company Name (text, required)
• Job Title (text, optional)
• Phone Number (tel, optional, phone format)

Product Feedback

Create a product feedback form with email, feedback type
(bug/feature/other), description, and priority level (low/medium/high)

AI generates:

• Email (email, optional)
• Feedback Type (radio buttons: bug, feature, other)
• Description (textarea, required)
• Priority Level (select dropdown: low, medium, high)

Event Registration with Preferences

Create an event registration form with name, email, company,
dietary restrictions (vegetarian, vegan, gluten-free, none),
t-shirt size (XS to XXL), and session preferences (multiple choice:
marketing, sales, product, engineering)

AI generates:

• Name (text, required)
• Email (email, required, validated)
• Company (text, optional)
• Dietary Restrictions (checkboxes: vegetarian, vegan, gluten-free, none)
• T-Shirt Size (select: XS, S, M, L, XL, XXL)
• Session Preferences (multi-select: marketing, sales, product, engineering)

Advanced Prompt Techniques

1. Specify Field Types

Create a lead capture form with:
- Full name (text)
- Email (email)
- Company size (dropdown: 1-10, 11-50, 51-200, 201+)
- Budget range (radio buttons: under $10k, $10k-$50k, $50k+)
- Interested in (checkboxes: consulting, training, software)

2. Include Validation Requirements

Create a quote request form with:
- Name (required)
- Email (required, must be valid email)
- Phone (optional, US format)
- Project description (required, at least 50 characters)
- Budget (required, number, minimum $1000)
- Start date (required, date field)

3. Specify Placeholder Text

Create a consultation booking form with clear placeholder examples:
- Name (e.g., "John Smith")
- Email (e.g., "john@company.com")
- Company (e.g., "Acme Inc.")
- Website (e.g., "https://acme.com")

4. Request Specific Field Order

Create a job application form in this order: personal info first
(name, email, phone), then professional info (LinkedIn URL, resume upload,
years of experience), then application questions (why interested,
salary expectations, start date availability)

Tips for Better AI Generation

✅ Do:

• Be specific about field types (text, email, dropdown, etc.)
• Mention validation requirements (required, min length, etc.)
• List fields in logical order
• Specify options for select/radio/checkbox fields
• Include context about the form's purpose

❌ Don't:

• Be too vague: "Create a form for my business"
• Mix unrelated form purposes
• Forget to specify options for choice fields
• Overcomplicate (keep under 15 fields per form)

After AI Generation

1. Review fields: Check field types and labels
2. Adjust validation: Modify required fields, add/remove rules
3. Edit options: Update dropdown/radio/checkbox options
4. Reorder fields: Drag to rearrange field order
5. Test submission: Submit test data before embedding

Manual Form Building

When to Build Manually

• You need very specific field configurations
• Custom validation rules not available via AI
• Building a template for reuse
• Learning how forms work
• You prefer full control

Step-by-Step Manual Building

Step 1: Create Empty Form

1. Click "Create Form"
2. Choose "Build Manually"
3. Enter form name (internal, not shown to users)
4. Click "Create"

Step 2: Add Fields

Click "Add Field" to add each field:

For Each Field:

1. Choose Field Type

   • Select from: text, email, tel, url, number, textarea, select, radio, checkbox, multi-select, date, file

2. Configure Basic Settings

   • Label: Field name shown to users (e.g., "Email Address")
   • Name: Internal field name (e.g., "email") - used in webhook data
   • Placeholder: Example text (e.g., "john@example.com")
   • Default Value: Pre-filled value (optional)

3. Set Validation Rules

   • Required: Toggle on/off
   • Min Length: Minimum characters (text fields)
   • Max Length: Maximum characters (text fields)
   • Pattern: Regex validation (advanced)
   • Custom Error Message: User-friendly error text

4. Add Options (for select, radio, checkbox, multi-select)

   • Click "Add Option"
   • Enter option label and value
   • Repeat for each option
   • Set default selected option (optional)

Step 3: Reorder Fields

• Drag fields using the drag handle (⋮⋮ icon)
• Drop in desired position
• Fields appear in this order on the form

Step 4: Configure Form Settings

Click "Settings" tab:

General

• Form name (internal)
• Success message ("Thank you for your submission!")
• Redirect URL (optional - redirect after submission)
• Submit button text ("Submit", "Sign Up", "Register", etc.)

Security

• Rate limit (submissions per hour per IP)
• Bot protection (enable/disable BotID)

Webhooks (see Webhooks guide)

• Webhook URL
• Webhook secret (optional)

Step 5: Save and Test

1. Click "Save Form"
2. Click "Preview" to test
3. Submit test data
4. Check Submissions dashboard
5. Verify webhook received data (if configured)

Field Type Reference

Text Input Fields

Text

• General text input
• Example: name, company, address
• Validation: minLength, maxLength, required, pattern

Email

• Email address input
• Automatic email validation
• Example: contact email, work email
• Validation: required, email format

Tel

• Phone number input
• Optional phone format validation
• Example: mobile number, office phone
• Validation: required, phone pattern

URL

• Website URL input
• Automatic URL validation
• Example: company website, LinkedIn profile
• Validation: required, URL format

Number

• Numeric input only
• Min/max values
• Example: age, quantity, budget
• Validation: required, min, max

Textarea

• Multi-line text input
• For longer content
• Example: message, description, comments
• Validation: minLength, maxLength, required

Choice Fields

Select (Dropdown)

• Single selection from options
• Compact UI (collapsed by default)
• Example: country, industry, company size
• Configuration: options (label + value pairs), default option

Radio Buttons

• Single selection from options
• All options visible
• Example: yes/no, gender, plan tier
• Configuration: options, default selected

Checkboxes

• Multiple selections allowed
• Independent toggles
• Example: interests, preferences, agreements
• Configuration: options, default checked

Multi-Select

• Multiple selections from dropdown
• Shows selected count
• Example: skills, departments, topics of interest
• Configuration: options, default selected

Date & File Fields

Date

• Date picker input
• Optional min/max dates
• Example: birth date, start date, event date
• Validation: required, min date, max date

File

• File upload input
• Max file size: 5MB
• Allowed types: images, PDFs, documents
• Example: resume, profile photo, attachment
• Validation: required, file type, max size

Form Examples

Example 1: Simple Newsletter Signup

Manual Build:

1. Add Email field

   • Label: "Email Address"
   • Type: email
   • Required: Yes
   • Placeholder: "you@example.com"

2. Settings

   • Success Message: "Thanks for subscribing!"
   • Button: "Subscribe"

AI Prompt:

Create a newsletter signup form with just email address

Example 2: Contact Form

Manual Build:

1. Add Text field

   • Label: "Name"
   • Required: Yes

2. Add Email field

   • Label: "Email Address"
   • Required: Yes

3. Add Select field

   • Label: "Subject"
   • Options: General Inquiry, Support, Sales, Partnership
   • Required: Yes

4. Add Textarea field

   • Label: "Message"
   • Required: Yes
   • Min Length: 20

AI Prompt:

Create a contact form with name, email, subject (dropdown with
options: general inquiry, support, sales, partnership), and message

Example 3: Lead Qualification Form

Manual Build:

1. Name (text, required)
2. Email (email, required)
3. Company (text, required)
4. Company Size (select: 1-10, 11-50, 51-200, 201-500, 500+)
5. Role (select: Developer, Manager, Executive, Other)
6. Budget (radio: under $10k, $10k-$50k, $50k-$100k, $100k+)
7. Timeline (select: Immediate, 1-3 months, 3-6 months, 6+ months)
8. How did you hear about us? (text, optional)

AI Prompt:

Create a lead qualification form with name, email, company name,
company size (dropdown: 1-10, 11-50, 51-200, 201-500, 500+),
role (dropdown: developer, manager, executive, other),
budget range (radio buttons: under $10k, $10k-$50k, $50k-$100k, over $100k),
timeline (dropdown: immediate, 1-3 months, 3-6 months, 6+ months),
and optional field for how they heard about us

Form Templates (Coming Soon)

Pre-built form templates for common use cases:

• Contact Form
• Newsletter Signup
• Event Registration
• Lead Capture
• Job Application
• Customer Feedback
• Support Ticket
• Quote Request
• Consultation Booking
• Waitlist Signup

Best Practices

Field Design

1. Clear Labels: Use descriptive, action-oriented labels

   • ✅ "Your Work Email"
   • ❌ "Email"

2. Helpful Placeholders: Show examples, not instructions

   • ✅ "john@company.com"
   • ❌ "Enter your email here"

3. Smart Defaults: Pre-fill when possible

   • Default country to user's location
   • Pre-select most common option

4. Logical Order: Group related fields

   • Personal info together
   • Company info together
   • Question fields together

Validation Strategy

1. Only Require Essential Fields: Every required field reduces completion rates

   • ✅ Required: name, email
   • ❌ Required: name, email, phone, company, title, address

2. Use Appropriate Field Types: Let browser/device help

   • Email fields show "@" on mobile keyboards
   • Tel fields show numeric keypad
   • Date fields show date picker

3. Provide Clear Error Messages: Be specific and helpful

   • ✅ "Email must include an @ symbol"
   • ❌ "Invalid input"

4. Validate on Blur: Show errors after user leaves field, not while typing

Mobile Optimization

1. Single Column Layout: Stack fields vertically on mobile
2. Large Touch Targets: Buttons and inputs min 44x44px
3. Avoid Dropdowns with Many Options: Use radio buttons or search-enabled select
4. Test on Real Devices: Desktop preview isn't enough

Accessibility

1. Label All Fields: Screen readers need labels
2. Use Semantic HTML: Proper form elements
3. Keyboard Navigation: Tab through fields, Enter to submit
4. Error Announcement: Screen readers should announce validation errors

Troubleshooting

"AI generated wrong field types"

Solution: Edit after generation or use more specific prompts:

Create a form with email (email field), budget (number field),
and preferences (checkboxes)

"Too many fields generated"

Solution: Be more specific about which fields you want:

Create a simple contact form with ONLY name, email, and message

"Options not correct for select/radio"

Solution: Specify options in prompt:

Company size dropdown with exactly these options: 1-10, 11-50, 51-200, 200+

"Can't reorder fields"

Solution: In manual builder, use drag handle (⋮⋮ icon) to drag fields. If drag doesn't work, try:

• Click and hold for 1 second before dragging
• Use different browser (Chrome recommended)
• Refresh page and try again

What's Next?

• Field Types - Complete reference of all field types and validation
• Webhooks - Integrate with external services
• Submissions - View and manage form data

Quick Reference

Pro Tip: Start with AI generation for speed, then switch to manual mode to fine-tune validation rules and field options. Best of both worlds!