Booksmart Forms

Getting Started

Creating Your First Form

1. Navigate to Form Builder
   • Click on “Forms” in your main navigation
   • Select “Create New Form” or use the “+” button
2. Choose a Template
   • Select from pre-built templates or start from scratch
   • We currently offer the following templates
     • Housecall Pro
       • Features included:
         • Customer Lookup
     • Jobber
     • ServiceTitan
       • Featured included:
         • Zone (Zip Code) Look-up
         • Customer Look-up
3. Build your form

Form Builder Interface

The Form Builder uses a simple drag-and-drop interface:

• Right Panel: Available form fields and elements
• Center Panel: Your form preview in real-time

Form Builder

Available Field Types

Basic Fields

• Text Input: Single-line text (name, email, etc.)
  • Configurable options for
    • Password
    • Email
    • Color
    • Tel
• Textarea: Multi-line text for longer responses
  • Configurable options for
    • Textarea
    • Tinymce
    • Quill
• Number: Numeric input with validation
• Date: Date picker interface

Selection Fields

• Select: Single selection from a list
• Radio Buttons: Single selection with visible options
• Checkboxes: Multiple selections allowed

Advanced Fields

• User Agreement: Check box to validate and store user agreement
• Autocomplete: Check box to validate and store user agreement
• Button
• Paragraph
  • Configurable options include:

    • address: The <address> element is used to provide contact information for its nearest article or body element. This can include physical addresses, phone numbers, email addresses, or other contact details. When used in a form, it semantically indicates that the enclosed content is related to contact information.

      2. blockquote: The <blockquote> element is designed for quoting blocks of content from another source. It typically renders the quoted text with indentation and may include citation information. In forms, this can be useful for displaying testimonials, references, or any quoted material.elementor.com+1autodatadirect.github.io+1

      3. canvas:  The <canvas> element provides a space in the form where you can draw graphics on the fly via scripting (usually JavaScript). It’s a powerful feature for rendering graphs, game graphics, or other visual images. However, it’s important to note that <canvas> is a container for graphics and doesn’t inherently provide drawing capabilities without accompanying scripts.

      4.output: The <output> element is used to represent the result of a calculation or user action. In forms, it’s often used to display the outcome of computations based on user input, such as showing the total price after selecting items. It helps in providing immediate feedback to users without requiring a page reload.

      By selecting these options in the paragraph field, you’re choosing the HTML tag that will wrap the content, thereby affecting its semantic meaning and default styling. This allows for better structuring and accessibility of your form content.

• Header: Check box to validate and store user agreement

Field Configuration

Each field can be customized with:

• Label: The field name shown to users
• Placeholder: Helper text inside the field
• Required: Make field mandatory
• Validation: Custom validation rules
• Conditional Logic: Show/hide based on other fields
• Default Value: Pre-populate with default data

Conditional Logic

Create dynamic forms that adapt based on user responses:

1. Select a field to add logic to
2. Choose “Add Conditional Logic”
3. Set conditions: “If [Field] [is/is not/contains] [Value]”
4. Choose action: Show, Hide, Required, or Set Value

Example:

• If “Service Type” = “Consultation”, show “Preferred Date” field
• If “Budget” > “$10,000”, mark “Priority Contact” as required

Multi-Step Forms

Break long forms into manageable steps:

1. Click “Add Page Break” in the form builder
2. Configure page titles and descriptions
3. Add progress indicator (optional)
4. Set up page navigation rules

Best Practices:

• Keep each step to 3-5 fields maximum
• Ask for contact info early (in case of abandonment)
• Use progress indicators for forms with 3+ steps

Analytics Dashboard

Overview Metrics

Your dashboard displays key performance indicators:

Form Performance Summary

• Total Views: Number of times forms were loaded
• Submissions: Completed form submissions
• Unique Visitors: Individual users who viewed forms
• Conversion Rate: Submissions ÷ Views × 100

Daily Performance Chart

• Views Line: Daily form view counts
• Submissions Bar: Daily submission counts
• Trend Analysis: Week-over-week and month-over-month comparisons

Top Performing Forms

The leaderboard shows your best-performing forms by:

• Submission Count: Total number of submissions
• Conversion Rate: Percentage of views that convert
• Performance Score: Weighted score considering both volume and conversion rate

Performance Badges:

• 🔥 Excellent: 50%+ conversion rate
• 👍 Good: 25-49% conversion rate
• 📈 Average: 10-24% conversion rate
• 🔧 Needs Work: <10% conversion rate

Traffic Source Analysis

Understand where your form traffic comes from:

• Direct: Users typing your URL directly
• Organic Search: Google, Bing, and other search engines
• Social Media: Facebook, LinkedIn, Twitter, etc.
• Referral: Other websites linking to your forms
• Email: Links from email campaigns
• Paid Search: Google Ads, Bing Ads

Date Range Filtering

Analyze performance over specific periods:

• Quick Filters: Last 7 days, 30 days, This month, Last month
• Custom Range: Select any start and end date
• Comparison Mode: Compare current period to previous period

Form Management

Form Library

Your form library shows all created forms with:

• Form Name: Internal reference name
• Status: Active, Draft, or Archived
• Views: Total view count
• Submissions: Total submission count
• Conversion Rate: Overall performance percentage
• Last Modified: When form was last updated

Form Actions

Publishing Forms

1. Embed Code: Copy HTML code to embed in your website

Form Sharing Options

• Public Link: Anyone with the link can access

Integrations

CRM Integration

Connect BookSmart Forms to your CRM:

Supported Platforms

• Housecall Pro
• ServiceTitan
• Jobber
• Salesforce***
• HubSpot***
• Pipedrive***
• Zoho CRM***
• ActiveCampaign***

Setup Process

1. Go to Settings → Integrations
2. Select your CRM platform
3. Enter API credentials or OAuth authorization
4. Map form fields to CRM fields
5. Set up lead routing rules

Email Marketing ***

Automatically add form submissions to email lists:

Supported Platforms

• Mailchimp***
• Constant Contact***
• ConvertKit***

Configuration

1. Connect your email marketing platform
2. Select target lists for each form
3. Configure double opt-in settings
4. Set up welcome email sequences

SMS Notifications

Get instant notifications for new submissions:

1. Phone Number Setup: Add your team’s phone numbers
2. Notification Rules: Choose which forms trigger SMS
3. Message Templates: Customize notification content
4. Delivery Times: Set quiet hours for notifications

Webhook Integration

Send form data to custom endpoints:

{
  "form_id": "uuid-here",
  "form_name": "Contact Form",
  "submission_id": "submission-uuid",
  "timestamp": "2025-06-01T10:30:00Z",
  "data": {
    "name": "John Doe",
    "email": "john@example.com",
    "message": "I'm interested in your services"
  },
  "metadata": {
    "ip_address": "192.168.1.1",
    "user_agent": "Mozilla/5.0...",
    "referrer": "https://google.com"
  }
}

Settings & Configuration

Form Defaults

Set default settings for new forms:

• Thank You Message: Default success message
• Behavior: Form submission actions

Security Settings

Data Protection

• Encryption: All data encrypted in transit and at rest
• Data Retention: Configure how long to keep form submissions ***
• GDPR Compliance: Enable GDPR consent checkboxes
• SPAM Protection: reCAPTCHA and honeypot fields ***

Troubleshooting

Common Issues

Form Not Displaying

1. Check if form status is “Active”
2. Verify embed code is correct
3. Check for JavaScript conflicts on your website

Low Conversion Rates

1. Simplify the form: Remove non-essential fields
2. Improve form design: Use clear labels and good spacing
3. Add trust signals: Security badges, testimonials
4. Test on mobile: Ensure mobile-friendly experience
5. Check loading speed: Optimize for fast loading

Submissions Not Received

1. Check spam/junk email folders
2. Verify notification email addresses
3. Check integration settings (CRM, email marketing)*
4. Review webhook endpoint responses
5. Check form validation settings

Analytics Not Updating

1. Allow 24-48 hours for data processing
2. Check date range filters
3. Verify tracking code installation
4. Clear browser cache and refresh
5. Check if ad blockers are interfering

Form Optimization Tips

Increase Conversions

• Lead with value: Explain what users get for filling out the form
• Use action-oriented CTAs: “Get My Free Quote” vs “Submit”
• Minimize required fields: Only ask for essential information
• Add progress indicators: For multi-step forms
• Use social proof: Display testimonials or submission counts

Improve User Experience

• Clear field labels: Use descriptive, jargon-free language
• Helpful placeholder text: Provide examples of expected input
• Real-time validation: Show errors as users type
• Mobile optimization: Test on various device sizes
• Fast loading: Optimize images and minimize code

Performance Monitoring

Key Metrics to Watch

• Conversion Rate Trends: Monitor week-over-week changes
• Drop-off Points: Identify where users abandon forms
• Device Performance: Compare desktop vs mobile conversion
• Traffic Source Quality: Which sources convert best
• Time to Complete: How long users take to submit