booking and lead forms with crm

SDX VISION

Cover Image for booking and lead forms with crm

SDX VISION

December 16, 2025

Integrating booking and lead forms with CRM systems automates lead capture, management, and follow-up. This guide will teach you how to connect forms to popular CRM platforms.

Why Integrate Forms with CRM?

Benefits:

Automated Lead Capture: Forms automatically create CRM records
No Manual Entry: Eliminates data entry work
Immediate Follow-up: Instant notifications
Better Organization: Centralized lead management
Improved Conversion: Faster response times

Popular CRM Integrations

1. HubSpot

Integration Methods:

HubSpot Forms (native)
Third-party form builders
API integration
Zapier/Make automation

HubSpot Forms:

<!-- HubSpot Form Embed -->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
    region: "na1",
    portalId: "YOUR_PORTAL_ID",
    formId: "YOUR_FORM_ID"
  });
</script>

2. Salesforce

Integration Options:

Web-to-Lead forms
API integration
Third-party tools
Automation platforms

Web-to-Lead Setup:

Setup → Customize → Leads → Web-to-Lead
Create form
Get HTML code
Embed on website

3. Pipedrive

Integration:

Pipedrive Forms
API integration
Zapier/Make
Custom integration

Form Builder Integrations

1. Typeform + CRM

Setup:

Create Typeform
Add CRM integration
Map fields
Test submission

Supported CRMs:

HubSpot
Salesforce
Pipedrive
Zoho
Custom via webhook

2. Gravity Forms + CRM

WordPress Plugin:

Gravity Forms
CRM add-ons available
Multiple CRM support
Field mapping

3. Formspree + CRM

Setup:

Create form
Add webhook
Connect to CRM API
Map fields

Custom Integration Implementation

Step 1: Create Form

HTML Form:

<form id="lead-form" class="lead-form">
  <input type="text" name="name" placeholder="Name" required>
  <input type="email" name="email" placeholder="Email" required>
  <input type="tel" name="phone" placeholder="Phone">
  <textarea name="message" placeholder="Message"></textarea>
  <button type="submit">Submit</button>
</form>

Step 2: Form Submission Handler

JavaScript:

document.getElementById('lead-form').addEventListener('submit', async (e) => {
  e.preventDefault();
  
  const formData = new FormData(e.target);
  const data = Object.fromEntries(formData);
  
  // Submit to your API
  const response = await fetch('/api/submit-form', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(data)
  });
  
  if (response.ok) {
    // Show success message
    showSuccess();
  }
});

Step 3: API Endpoint

Next.js API Route:

// app/api/submit-form/route.js
export async function POST(request) {
  const data = await request.json();
  
  // Save to database
  await saveToDatabase(data);
  
  // Send to CRM
  await sendToCRM(data);
  
  // Send confirmation email
  await sendConfirmationEmail(data.email);
  
  return Response.json({ success: true });
}

Step 4: CRM Integration

HubSpot API Example:

async function sendToHubSpot(formData) {
  const response = await fetch(
    `https://api.hubapi.com/contacts/v1/contact`,
    {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${process.env.HUBSPOT_API_KEY}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        properties: [
          { property: 'email', value: formData.email },
          { property: 'firstname', value: formData.name.split(' ')[0] },
          { property: 'lastname', value: formData.name.split(' ')[1] || '' },
          { property: 'phone', value: formData.phone },
          { property: 'message', value: formData.message }
        ]
      })
    }
  );
  
  return response.json();
}

Salesforce API Example:

async function sendToSalesforce(formData) {
  // First, get access token
  const tokenResponse = await fetch('https://login.salesforce.com/services/oauth2/token', {
    method: 'POST',
    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
    body: new URLSearchParams({
      grant_type: 'client_credentials',
      client_id: process.env.SALESFORCE_CLIENT_ID,
      client_secret: process.env.SALESFORCE_CLIENT_SECRET
    })
  });
  
  const { access_token } = await tokenResponse.json();
  
  // Create lead
  const response = await fetch(
    `${process.env.SALESFORCE_INSTANCE_URL}/services/data/v58.0/sobjects/Lead`,
    {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${access_token}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        FirstName: formData.name.split(' ')[0],
        LastName: formData.name.split(' ')[1] || '',
        Email: formData.email,
        Phone: formData.phone,
        Company: formData.company || 'Unknown',
        Description: formData.message
      })
    }
  );
  
  return response.json();
}

Booking Form Integration

Appointment Booking:

Form Fields:

Name
Email
Phone
Service type
Preferred date/time
Additional notes

Integration Flow:

Form Submission
    ↓
Create CRM Contact
    ↓
Create Calendar Event
    ↓
Send Confirmation
    ↓
Notify Team

Implementation:

async function handleBooking(formData) {
  // Create contact in CRM
  const contact = await createCRMContact(formData);
  
  // Create calendar event
  const event = await createCalendarEvent({
    title: `Appointment with ${formData.name}`,
    start: formData.dateTime,
    duration: 60, // minutes
    attendees: [formData.email]
  });
  
  // Send confirmation
  await sendConfirmationEmail(formData.email, {
    date: formData.dateTime,
    service: formData.service
  });
  
  // Notify team
  await notifyTeam(contact, event);
  
  return { contact, event };
}

Automation Workflows

Workflow 1: Lead Capture

Process:

Form Submission
    ↓
Create CRM Lead
    ↓
Assign to Sales Rep
    ↓
Send Welcome Email
    ↓
Create Follow-up Task

Workflow 2: Booking Confirmation

Process:

Booking Form Submission
    ↓
Create CRM Contact
    ↓
Check Calendar Availability
    ↓
Create Appointment
    ↓
Send Confirmation
    ↓
Add to CRM

Workflow 3: Lead Qualification

Process:

Form Submission
    ↓
Score Lead (AI)
    ↓
Route Based on Score
    ├─ High Score → Sales Team
    └─ Low Score → Nurture Campaign

Using Zapier/Make

Zapier Integration:

Setup:

Create Zap
Trigger: Form submission
Action: Create CRM record
Map fields
Test and activate

Example Zap:

Trigger: Typeform New Submission
Action: Create HubSpot Contact
Action: Send Email
Action: Create Task

Make (Integromat) Integration:

Scenario:

Webhook (Form) → 
CRM Create Contact → 
Email Send → 
CRM Create Task

Best Practices

1. Field Mapping

Guidelines:

Map all important fields
Handle missing data
Validate before sending
Standardize formats

2. Error Handling

Implementation:

try {
  await sendToCRM(data);
} catch (error) {
  // Log error
  console.error('CRM integration error:', error);
  
  // Save to database as backup
  await saveToDatabase(data);
  
  // Notify admin
  await notifyAdmin(error);
}

3. Data Validation

Validation:

function validateFormData(data) {
  const errors = [];
  
  if (!data.email || !isValidEmail(data.email)) {
    errors.push('Invalid email');
  }
  
  if (!data.name || data.name.length < 2) {
    errors.push('Name required');
  }
  
  return errors;
}

4. Duplicate Prevention

Check for Duplicates:

async function checkDuplicate(email) {
  const existing = await crm.searchContact(email);
  return existing.length > 0;
}

// Before creating
if (await checkDuplicate(data.email)) {
  // Update existing instead
  await updateContact(data);
} else {
  // Create new
  await createContact(data);
}

Testing Integration

Testing Checklist:

[ ] Form submits correctly
[ ] Data reaches CRM
[ ] Fields map correctly
[ ] Duplicates handled
[ ] Errors handled
[ ] Notifications sent
[ ] Automation triggers
[ ] Email confirmations work

Common Issues

Issue 1: Data Not Reaching CRM

Solutions:

Check API credentials
Verify field mapping
Test API connection
Check error logs

Issue 2: Field Mapping Errors

Solutions:

Verify field names
Check data types
Handle missing fields
Test mapping

Issue 3: Duplicate Records

Solutions:

Implement duplicate check
Use email as unique identifier
Update instead of create
Merge duplicates

Implementation Checklist

[ ] CRM account set up
[ ] API credentials obtained
[ ] Form created
[ ] Integration configured
[ ] Field mapping done
[ ] Error handling implemented
[ ] Testing completed
[ ] Automation set up
[ ] Notifications configured
[ ] Monitoring enabled

Next Steps

Choose CRM: Select platform
Set Up Integration: Configure connection
Create Forms: Build forms
Test Thoroughly: Validate integration
Set Up Automation: Configure workflows
Monitor Performance: Track submissions

Thanks for reading the blog. If you want more help, do contact us at https://sdx.vision

Blog.

booking and lead forms with crm

Why Integrate Forms with CRM?

Benefits:

Popular CRM Integrations

1. HubSpot

2. Salesforce

3. Pipedrive

Form Builder Integrations

1. Typeform + CRM

2. Gravity Forms + CRM

3. Formspree + CRM

Custom Integration Implementation

Step 1: Create Form

Step 2: Form Submission Handler

Step 3: API Endpoint

Step 4: CRM Integration

Booking Form Integration

Appointment Booking:

Automation Workflows

Workflow 1: Lead Capture

Workflow 2: Booking Confirmation

Workflow 3: Lead Qualification

Using Zapier/Make

Zapier Integration:

Make (Integromat) Integration:

Best Practices

1. Field Mapping

2. Error Handling

3. Data Validation

4. Duplicate Prevention

Testing Integration

Testing Checklist:

Common Issues

Issue 1: Data Not Reaching CRM

Issue 2: Field Mapping Errors

Issue 3: Duplicate Records

Implementation Checklist

Next Steps