Embedding Request Forms

Overview

BluePro Embeddable Forms allow you to add customizable contact/request forms to any website that automatically create contacts and service requests in your BluePro workspace. This powerful feature enables you to capture leads directly from your website while maintaining your existing workflow.

Key Features

• Fully Customizable: Configure form fields, styling, and messages
• Secure Integration: API key-based authentication with workspace-specific permissions
• Real-time Preview: See exactly how your form will look before embedding
• Multiple Integration Options: HTML/JavaScript, Next.js/React, and WordPress
• Automatic Data Processing: Submissions create contacts, properties, and requests automatically
• Responsive Design: Forms adapt to desktop and mobile devices
• Spam Protection: Built-in honeypot fields and rate limiting

Getting Started

Step 1: Access the Embed Form Generator

1. Log into your BluePro dashboard
2. Navigate to Integrations → Embed Form
3. You’ll see the Embed Form Generator

Step 2: Configure Your Form

Basic Settings

Include Property/Address Fields

• Toggle on to add address fields for property-related requests
• Includes: Street Address, City, State, ZIP Code
• Useful for contractors, real estate, and service businesses

Thank You Message

• Customize the message shown after successful form submission
• Default: “We have received your request and we will reach out shortly.”
• Keep it professional and set clear expectations

Theme Customization

Primary Color

• Sets the color for buttons and form accents
• Use your brand colors for consistency
• Accepts hex color codes (e.g., #0070f3)

Border Radius

• Controls the roundness of form elements
• Options: None, Small, Medium, Large, Extra Large
• Choose based on your website’s design style

Font Family

• Select from common web fonts
• Options include: Sans Serif, Serif, Monospace, Arial, Georgia, Helvetica
• Should complement your website’s typography

Step 3: Generate API Key

Before you can use the embed code, you need to create an API key:

1. In the Form Code section, enter a descriptive name for your form
2. Click Create Form
3. Your API key will be generated and automatically included in all code snippets
4. Important: API keys are shown only once for security. Save it if needed for manual use.

Step 4: Get Your Embed Code

Choose the integration method that best fits your website:

HTML/JavaScript (Universal)

Perfect for any website or CMS. Simply copy and paste the provided code where you want the form to appear.

Next.js/React

Optimized for React applications with proper cleanup and TypeScript support.

WordPress

Includes a custom shortcode for easy integration. Add the code to your theme’s functions.php file, then use [bluepro_form] anywhere in your content.

Form Fields Explained

Required Fields

• First Name: Contact’s first name (max 50 characters)
• Last Name: Contact’s last name (max 50 characters)
• Email: Valid email address for contact
• Phone: Phone number in international format
• Project Description: Details about the request (10-1000 characters)

Optional Property Fields (when enabled)

• Street Address: Property street address
• City: Property city
• State: Property state/province
• ZIP Code: Property postal code

Additional Features

• Company: Optional company name field
• Custom Fields: Workspace-configurable additional fields
• Spam Protection: Hidden honeypot field prevents bot submissions

What Happens When Someone Submits Your Form

1. Contact Creation:

• New contact is created with submitted information
• If contact already exists (matched by email + phone), existing contact is used
• No existing contact data is overwritten for security

1. Property Creation (if address provided):

• Property record is created and linked to the contact
• Defaults to “Single Family” property type
• Contact is assigned as property owner

1. Request Creation:

• Service request is created with the project description
• Linked to the contact and property (if applicable)
• Assigned to workspace system user initially
• Ready for your team to review and assign

1. Notifications:

• Your team receives notifications based on workspace settings
• Contact receives confirmation based on your notification preferences

Troubleshooting

Form Not Appearing

1. Check Container Element: Ensure the target element exists (e.g., #bluepro-form-container)
2. Verify API Key: Make sure your API key is valid and not revoked
3. Check Browser Console: Look for JavaScript errors
4. Test Network: Ensure your website can reach BluePro servers

Submissions Not Creating Records

1. Check Required Fields: All required fields must be completed
2. Validate Data Format: Email and phone must be in correct format
3. Review Rate Limits: Check if you’ve exceeded submission limits

Styling Issues

1. CSS Conflicts: Your website’s CSS might override form styles. This may be intended to keep your website’s style uniform.
2. Theme Settings: Adjust colors and fonts in the Form Configuration panel
3. Responsive Design: Test on different screen sizes
4. Browser Compatibility: Ensure your target browsers are supported

Best Practices

Form Placement

• Place forms prominently on high-traffic pages
• Consider multiple forms for different services
• Use clear call-to-action text above the form

Customization

• Match your brand colors and fonts
• Keep thank you messages professional and specific
• Test forms on different devices and browsers

Data Management

• Regularly review and assign new requests
• Set up notification preferences for your team
• Keep API keys secure and rotate them periodically

Performance

• Forms load asynchronously to avoid slowing your website
• Minimal JavaScript footprint for fast loading times
• CDN delivery for optimal performance worldwide

API Reference

JavaScript SDK

// Create and render a form
const form = window.BluePro.createForm({
  target: '#bluepro-form-container',
  apiKey: 'your-api-key',
  workspaceId: 123,
  config: {
    includePropertyFields: true,
    thankYouMessage: 'Thank you! We will contact you soon.',
    theme: {
      primaryColor: '#0070f3',
      borderRadius: '8px',
      fontFamily: 'sans-serif'
    }
  }
});

form.render();

// Programmatic methods
form.validate();           // Validate current form data
form.getFormData();       // Get current form values
form.setFormData(data);   // Pre-populate form fields
form.destroy();           // Remove form from DOM

Configuration Options

interface EmbedConfig {
  target: string;                    // CSS selector for container
  apiKey: string;                   // Your workspace API key
  workspaceId: number;              // Your workspace ID
  apiUrl?: string;                  // API endpoint (usually auto-detected)
  config?: {
    includePropertyFields?: boolean; // Show address fields
    thankYouMessage?: string;       // Success message
    submitButtonText?: string;      // Button text
    theme?: {
      primaryColor?: string;        // Hex color code
      borderRadius?: string;        // CSS border-radius value
      fontFamily?: string;          // CSS font-family value
    };
    customFields?: string[];        // Custom field IDs
  };
}