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

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

For additional support, contact your form provider or check the developer console for detailed error messages.

Updated on June 23, 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

Related Articles

Leave a Comment Cancel