BookSmart Form Auto-Open Documentation

This documentation covers the automatic form opening functionality that allows your forms to open based on URL parameters, hash fragments, user behavior, and programmatic triggers.

Quick Start
URL-Based Triggers
Behavior-Based Triggers
Programmatic Control
Analytics & Tracking
Advanced Examples
Troubleshooting
API Reference
Best Practices

Quick Start

Basic Setup

The auto-open functionality works with your existing form embed code:

html

<button id="openFirstModal" class="openModal">Open Form</button>
<script id="form-builder-script" data-uuid="your-form-uuid" src="https://go.launchsms.com/js/form-builder.js"></script>

No additional setup required – the auto-open features are automatically enabled.

Simple Examples

html

<!-- URL parameter trigger -->
https://yoursite.com?open-form=true

<!-- Hash trigger -->
https://yoursite.com#contact

<!-- Programmatic trigger -->
<button onclick="FormBuilder.open('my-trigger')">Custom Button</button>

URL-Based Triggers

URL Parameters

Add these parameters to any URL to automatically open the form:

Parameter	Example	Description
`open-form=true`	`?open-form=true`	Opens form immediately
`show-form=true`	`?show-form=true`	Alternative trigger
`modal=true`	`?modal=true`	Generic modal trigger
`form=open`	`?form=open`	Semantic trigger
`popup=true`	`?popup=true`	Popup-style trigger

Example URLs:

https://yoursite.com?open-form=true
https://yoursite.com/pricing?show-form=true&utm_source=email
https://yoursite.com/services?modal=true

URL Hash Fragments

Add these hash values to automatically open the form:

Hash	Example	Use Case
`#form`	`yoursite.com#form`	Generic form trigger
`#modal`	`yoursite.com#modal`	Modal trigger
`#contact`	`yoursite.com#contact`	Contact form
`#quote`	`yoursite.com#quote`	Quote requests
`#booking`	`yoursite.com#booking`	Appointment booking
`#schedule`	`yoursite.com#schedule`	Scheduling
`#popup`	`yoursite.com#popup`	Popup trigger

Example URLs:

https://yoursite.com#contact
https://yoursite.com/services#quote
https://yoursite.com/about#form

Marketing Campaign Examples

html

<!-- Email campaigns -->
<a href="https://yoursite.com?open-form=true&utm_source=email&utm_campaign=spring-sale">
    Get Your Quote
</a>

<!-- Social media bio links -->
https://yoursite.com#contact

<!-- QR codes for print materials -->
https://yoursite.com?open-form=true&utm_source=print&utm_medium=flyer

<!-- SMS campaigns -->
https://yoursite.com#quote

Behavior-Based Triggers

Time-Delayed Opening

Opens the form after a specified delay:

html

<!-- Open after 5 seconds -->
https://yoursite.com?auto-open-delay=5000

<!-- Open after 30 seconds (good for blog posts) -->
https://yoursite.com?auto-open-delay=30000

Parameters:

auto-open-delay – Delay in milliseconds before opening

Exit-Intent Detection

Opens the form when user tries to leave the page:

html

<!-- Enable exit-intent trigger -->
https://yoursite.com?exit-intent=true

Best Practices:

Use sparingly to avoid annoying users
Great for high-value pages like pricing or checkout
Combine with compelling offers

Scroll-Based Triggers

Opens the form when user scrolls to a specific percentage:

html

<!-- Open when user scrolls 50% down -->
https://yoursite.com?scroll-trigger=50

<!-- Open when user scrolls 80% down -->
https://yoursite.com?scroll-trigger=80

Parameters:

scroll-trigger – Percentage (1-100) of page scroll

Use Cases:

Blog posts: Open after user shows engagement
Landing pages: Open after key content is viewed
Product pages: Open after specifications are scrolled

Programmatic Control

Basic Functions

javascript

// Open form with custom tracking
FormBuilder.open('my-trigger-name');

// Close form
FormBuilder.close();

// Check if form is currently open
if (FormBuilder.isOpen()) {
    console.log('Form is open');
}

// Get current form data
const formData = FormBuilder.getFormData();

Legacy Support

javascript

// Alternative methods (same functionality)
window.openFormModal('trigger-name');
window.closeFormModal();

Custom Button Examples

html

<!-- Basic programmatic button -->
<button onclick="FormBuilder.open('header-cta')">Get Started</button>

<!-- Button with custom logic -->
<button onclick="handleCustomOpen()">Contact Sales</button>

<script>
function handleCustomOpen() {
    // Your custom logic here
    const userType = getUserType();
    FormBuilder.open('contact-' + userType);
}
</script>

Advanced Integration

javascript

// E-commerce integration
function handlePurchaseClick() {
    const cartValue = getCartTotal();
    
    if (cartValue > 500) {
        FormBuilder.open('high-value-customer');
    } else {
        FormBuilder.open('standard-customer');
    }
}

// A/B testing
function openFormVariant() {
    const variant = Math.random() > 0.5 ? 'variant-a' : 'variant-b';
    FormBuilder.open('test-' + variant);
}

// Conditional opening based on user status
function smartFormOpen() {
    if (isUserLoggedIn()) {
        FormBuilder.open('logged-in-user');
    } else {
        FormBuilder.open('guest-user');
    }
}

Analytics & Tracking

Automatic Tracking

All form opens are automatically tracked with detailed information:

javascript

// Example tracked data
{
    event_type: 'form_auto_opened',
    trigger_type: 'url_parameter',
    trigger_source: 'open-form',
    url: 'https://yoursite.com?open-form=true',
    referrer: 'https://google.com',
    timestamp: '2025-01-15T10:30:00Z'
}

Trigger Sources

The system automatically identifies and tracks these trigger sources:

Trigger Type	Description	Example Value
`url_parameter`	URL parameter triggered	`open-form`
`url_hash`	Hash fragment triggered	`hash-contact`
`programmatic`	JavaScript triggered	`header-cta`
`delayed`	Time delay triggered	`auto-open-delay-5000ms`
`exit_intent`	Exit intent triggered	`auto-open-exit-intent`
`scroll`	Scroll triggered	`auto-open-scroll-50%`

Custom Analytics Integration

javascript

// Google Analytics 4 example
function trackFormOpen(triggerSource) {
    gtag('event', 'form_opened', {
        'trigger_source': triggerSource,
        'page_location': window.location.href,
        'page_title': document.title
    });
    
    FormBuilder.open(triggerSource);
}

// Facebook Pixel example
function trackFormOpenFB(triggerSource) {
    fbq('track', 'InitiateCheckout', {
        content_name: 'Contact Form',
        content_category: triggerSource
    });
    
    FormBuilder.open(triggerSource);
}

Advanced Examples

Multi-Step User Journey

html

<!-- Quiz completion trigger -->
<button onclick="completeQuiz()">See My Results</button>

<script>
function completeQuiz() {
    const score = calculateQuizScore();
    const category = getQuizCategory(score);
    
    // Open form with quiz context
    FormBuilder.open(`quiz-${category}-score-${score}`);
}
</script>

Location-Based Forms

javascript

function openLocationForm() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(
            position => {
                const state = getStateFromCoords(position.coords);
                FormBuilder.open('location-' + state);
            },
            error => FormBuilder.open('location-unknown')
        );
    } else {
        FormBuilder.open('no-geolocation');
    }
}

Time-Sensitive Offers

javascript

function openTimedOffer() {
    const hour = new Date().getHours();
    const day = new Date().getDay();
    
    if (day === 0 || day === 6) {
        FormBuilder.open('weekend-special');
    } else if (hour < 9 || hour > 17) {
        FormBuilder.open('after-hours');
    } else {
        FormBuilder.open('business-hours');
    }
}

Device-Specific Triggers

javascript

function openDeviceSpecificForm() {
    const isMobile = /Mobi|Android/i.test(navigator.userAgent);
    const isTablet = /iPad|Android(?!.*Mobi)/i.test(navigator.userAgent);
    
    if (isMobile) {
        FormBuilder.open('mobile-optimized');
    } else if (isTablet) {
        FormBuilder.open('tablet-optimized');
    } else {
        FormBuilder.open('desktop-version');
    }
}

Troubleshooting

Common Issues

Form not opening automatically:

Check URL syntax: ?open-form=true (not ?open-form-true)
Ensure JavaScript is enabled
Check browser console for errors
Verify form embed script is loaded

Multiple triggers firing:

URL cleanup is automatic – shouldn’t cause duplicates
Check for multiple embed scripts on the page
Verify event listeners aren’t duplicated

Analytics not tracking:

Check browser console for tracking errors
Ensure analytics endpoints are accessible
Verify form UUID is correct

Debug Tools

javascript

// Check if form is loaded
console.log('Form loaded:', typeof FormBuilder !== 'undefined');

// Check current form state
console.log('Form open:', FormBuilder.isOpen());

// Test programmatic opening
FormBuilder.open('debug-test');

// Check for auto-open triggers in current URL
FormBuilder.utils.checkAutoOpen();

URL Testing

Test these URLs during development:

# Basic triggers
yoursite.com?open-form=true
yoursite.com#contact

# Delayed triggers
yoursite.com?auto-open-delay=3000

# Scroll triggers
yoursite.com?scroll-trigger=25

# Exit intent
yoursite.com?exit-intent=true

# Combined with tracking
yoursite.com?open-form=true&utm_source=test&utm_medium=docs

API Reference

FormBuilder Object

javascript

FormBuilder = {
    // Core methods
    open(triggerSource),           // Open form with tracking
    close(),                       // Close form
    isOpen(),                      // Check if form is open
    getFormData(),                 // Get current form data
    
    // Utility methods
    utils: {
        getUrlParameter(name, defaultValue, type),  // Enhanced URL params
        checkAutoOpen(),                            // Check auto-open triggers
        debugCapacity()                             // Debug ServiceTitan capacity
    }
}

Function Parameters

FormBuilder.open(triggerSource)

triggerSource (string): Identifier for analytics tracking
Returns: void
Example: FormBuilder.open('pricing-page-cta')

FormBuilder.utils.getUrlParameter(name, defaultValue, type)

name (string): Parameter name
defaultValue (any): Default if not found
type (string): ‘string’, ‘boolean’, ‘number’, ‘json’
Returns: Converted parameter value
Example: getUrlParameter('delay', 0, 'number')

Event Tracking

All auto-open events are automatically sent to your analytics endpoint with this structure:

javascript

{
    event_type: 'form_auto_opened',
    trigger_type: string,        // Type of trigger
    trigger_source: string,      // Specific trigger value  
    form_uuid: string,          // Your form UUID
    session_id: string,         // User session ID
    timestamp: string,          // ISO timestamp
    url: string,                // Current page URL
    referrer: string,           // Referrer URL
    user_agent: string,         // Browser user agent
    // ... additional tracking data
}

Best Practices

URL Design

Keep parameters simple and memorable
Use semantic hashes (#contact, #quote)
Preserve UTM parameters for marketing tracking
Test URLs before distributing

User Experience

Don’t overuse auto-open (avoid annoying users)
Use exit-intent sparingly
Consider mobile users with scroll triggers
Provide clear value proposition in auto-opened forms

Analytics

Use descriptive trigger source names
Implement A/B testing with different triggers
Monitor conversion rates by trigger type
Track user journey from trigger to submission

Performance

Auto-open checks are lightweight
Delay triggers don’t impact page load
Form lazy-loads only when needed
URL cleanup prevents browser history pollution

Getting Help

Support Channels:

📧 Email: help@launchsms.com
💬 Live chat: Available in dashboard
📚 Knowledge base: help.launchsms.com

When Contacting Support:

Include your Form ID number
Describe what you were trying to do
Share any error messages
Mention your account details

Updated on July 16, 2025

Tagged: booksmart Form

Was this article helpful?

Yes No

Table of Contents

Quick Start

Basic Setup

Simple Examples

URL-Based Triggers

URL Parameters

URL Hash Fragments

Marketing Campaign Examples

Behavior-Based Triggers

Time-Delayed Opening

Exit-Intent Detection

Scroll-Based Triggers

Programmatic Control

Basic Functions

Legacy Support

Custom Button Examples

Advanced Integration

Analytics & Tracking

Automatic Tracking

Trigger Sources

Custom Analytics Integration

Advanced Examples

Multi-Step User Journey

Location-Based Forms

Time-Sensitive Offers

Device-Specific Triggers

Troubleshooting

Common Issues

Debug Tools

URL Testing

API Reference

FormBuilder Object

Function Parameters

Event Tracking

Best Practices

URL Design

User Experience

Analytics

Performance

Getting Help

Related Articles

Leave a Comment Cancel