STAGING re-do in progress

Lead Form Variants: Complete Guide

Lead Form Variants are the most powerful feature in the system for capturing high-quality leads. This comprehensive guide will help you master every aspect of this rich feature set, from basic forms to advanced conditional logic and Salesforce integration.

**💡 What You'll Learn:**
  • How to create multi-step wizard forms
  • Using conditional logic to show/hide steps
  • Adding interstitial content pages
  • Creating custom fields without database changes
  • Integrating with Salesforce custom fields
  • Advanced features like address autocomplete and brand attributes

What are Lead Form Variants?

Lead Form Variants are configurable, multi-step forms that can be customized without writing code or changing the database.

Key Capabilities:

  • Multi-Step Wizards: Break long forms into manageable steps
  • Dynamic Fields: Add custom fields stored in JSONB (no migrations needed)
  • Conditional Logic: Show/hide steps based on user responses
  • Interstitial Pages: Add informational content between form steps
  • Field Types: Text, email, phone, select, radio, checkbox, textarea, and more
  • Validation: Built-in validation for all field types
  • Salesforce Sync: Map custom fields to Salesforce
  • A/B Testing: Create multiple variants to test conversion rates

Why Use Variants?

  • Collect industry-specific information (roof age, siding material, etc.)
  • Improve conversion with progressive disclosure
  • Reduce form abandonment with smart conditional logic
  • No developer needed for form changes
  • Test different form flows to optimize conversion

Accessing Lead Form Variants

To Access:

  1. Navigate to Sidebar → Leads → Lead Form Variants
  2. View list of all variants (draft and published)
  3. Click any variant to view details
  4. Click New Lead Form Variant to create one
**⚠️ Root Admin Only:** Only root_admin users can create and edit Lead Form Variants. This ensures form quality and prevents accidental changes.

Variant Status: Draft vs. Published

Draft Status:

  • Variant is being developed/tested
  • Not available for use in Lead blocks
  • Can be edited freely
  • Use for testing before going live

Published Status:

  • Variant is live and available
  • Appears in Lead block variant dropdown
  • Can be used on pages
  • Can still be edited (changes apply immediately)
**💡 Best Practice:** Create variants as Draft, test thoroughly using the preview, then publish when ready.

Understanding Steps

Forms are built from steps. Each step represents one screen in the wizard.

Step Types:

1. Data Collection Steps:

  • Collect information from the user
  • Contain form fields (text, select, radio, etc.)
  • Have validation rules
  • Most common step type

2. Interstitial Steps:

  • Display information to the user
  • No form fields (read-only)
  • Can include rich text, images, videos
  • Use for: explanations, thank you messages, next steps
  • Great for building trust and setting expectations

Step Properties:

  • key: Unique identifier (e.g., "contact_info")
  • type: "data_collection" or "interstitial"
  • title: Displayed to user as step heading
  • fields: Array of field definitions (data collection only)
  • content: Rich HTML content (interstitial only)
  • conditional_logic: Optional show/hide rules

Field Types and Options

Lead Form Variants support a wide variety of field types:

Text Input Fields:

  • text: Single-line text input
  • email: Email with validation
  • tel / phone: Phone number with formatting
  • number: Numeric input
  • url: Website URL with validation
  • textarea: Multi-line text input

Selection Fields:

  • select: Dropdown menu
  • radio: Radio buttons (single choice)
  • checkbox: Checkboxes (multiple choice)

Special Fields:

  • address: Google Places autocomplete
  • hidden: Hidden fields (for tracking, etc.)

Field Properties:

  • name: Field identifier (e.g., "roof_age")
  • type: Field type (see above)
  • label: Display label for the field
  • placeholder: Placeholder text
  • help_text: Additional guidance
  • required: true/false
  • options: Array of choices (for select/radio/checkbox)
  • custom_field: true if storing in custom_fields JSONB
  • salesforce_field: Salesforce field mapping

Standard vs. Custom Fields

Understanding the difference between standard and custom fields is crucial.

Standard Fields (Built-in Lead Model):

  • Always Required: name, details
  • Contact Fields (at least one required): email, telephone
  • Address Fields (all or none): address, street_address, city, state, zip_code, latitude, longitude
  • Optional: services (JSONB array)

How to Use Standard Fields:

  • Set custom_field: false or omit the property
  • Data stored directly in Lead model columns
  • Automatically synced to Salesforce standard fields
  • Use for core contact information

Custom Fields (Dynamic JSONB Storage):

  • Set custom_field: true
  • Stored in Lead's custom_fields JSONB column
  • No database migration needed
  • Perfect for industry-specific data (roof age, siding material, etc.)
  • Can map to Salesforce custom fields
**⚠️ Important:** Every variant MUST collect: name, details, and at least one of (email or telephone). Address fields must all be collected together or not at all.

Conditional Logic: Show/Hide Steps

Conditional logic allows steps to appear or disappear based on user responses.

How It Works:

  • Add conditional_logic to any step
  • Define show_if or hide_if conditions
  • Reference fields from previous steps
  • Step only appears if condition is met

Condition Operators:

  • equals: Field value equals specific value
  • not_equals: Field value does not equal value
  • in: Field value is in array of values
  • not_in: Field value is not in array
  • greater_than: Numeric comparison
  • less_than: Numeric comparison
  • contains: String contains substring
  • is_present: Field has any value
  • is_blank: Field is empty

Example Use Cases:

  • Show roofing questions only if user selected "Roofing" service
  • Skip address step if user selected "Just browsing"
  • Show financing options only for projects over $10,000
  • Display emergency service step if user indicates urgent need
**💡 Pro Tip:** Use conditional logic to create personalized form experiences that feel like conversations, not interrogations.

Interstitial Pages: Building Trust

Interstitial pages are information-only steps that don't collect data.

When to Use Interstitials:

  • Welcome Message: Set expectations for the form
  • Explanations: Explain why you need certain information
  • Trust Builders: Show certifications, awards, testimonials
  • Next Steps: Explain what happens after submission
  • Thank You: Confirm submission and set expectations

What You Can Include:

  • Rich HTML content with formatting
  • Images and videos
  • Brand attributes (phone number, etc.)
  • Links to additional resources
  • Testimonials and social proof

Creating an Interstitial:

  1. Set step type: "interstitial"
  2. Add content property with HTML
  3. No fields array needed
  4. User clicks "Next" to continue
**✅ Best Practice:** Use interstitials strategically. Too many can frustrate users. Use them to build trust at key decision points.

Address Autocomplete

The address field uses Google Places autocomplete for easy, accurate address entry.

How It Works:

  1. User types address in single field
  2. Google suggests matching addresses
  3. User selects from dropdown
  4. System automatically fills: street_address, city, state, zip_code, latitude, longitude

Hidden Fallback Fields:

  • Include hidden fields: street_address, city, state, zip_code, latitude, longitude
  • These are auto-filled by autocomplete
  • Only shown if validation errors occur
  • Allows manual entry if autocomplete fails

Best Practices:

  • Always use address field for primary input
  • Include all hidden fallback fields
  • Make address required for service-based businesses
  • Use latitude/longitude for service area checking

Brand Attribute Interpolation

Display brand-specific information dynamically in your forms.

Available Attributes:

  • {{brand.name}} - Brand name
  • {{brand.telephone}} - Brand phone number
  • {{brand.email}} - Brand email
  • {{brand.website}} - Brand website

Where to Use:

  • Interstitial page content
  • Field labels and help text
  • Placeholder text

Example:

"Call us at {{brand.telephone}} with any questions!"

Benefits:

  • Forms work across all brands (multi-tenant)
  • No hardcoded phone numbers or emails
  • Automatically updates when brand info changes
Chat with us
200 remaining