Skip to Content
IntegrationsWebhook Integration

Webhook Integration

Send form submission data to any HTTP endpoint using webhooks. Perfect for custom integrations, CRMs, and automation tools.

Features

  • Send data to any HTTP endpoint
  • Support for GET, POST, PUT, PATCH methods
  • Custom headers and authentication
  • JSON payload formatting
  • Retry logic for failed deliveries

Use Cases

  • CRM Integration: Send leads to Salesforce, HubSpot, etc.
  • Custom Applications: Feed data to your own APIs
  • Automation Tools: Trigger Zapier, Make.com, or similar
  • Database Updates: Sync form data with external databases
  • Notifications: Send to custom notification services

Setup

1. Prepare Your Endpoint

Your endpoint should:

  • Accept HTTP requests (GET/POST/PUT/PATCH)
  • Handle JSON payloads
  • Return appropriate HTTP status codes
  • Have proper authentication if needed

2. Configure Integration

  1. In your dashboard, go to Integrations
  2. Click “Add Integration”
  3. Select “Webhook”
  4. Enter webhook details:
    • URL: Your endpoint URL
    • Method: HTTP method (POST recommended)
    • Headers: Custom headers (Authorization, Content-Type, etc.)
    • Payload Format: JSON structure
  5. Click “Test Integration”
  6. Click “Save”

Payload Format

Default JSON Payload

{
  "submission_id": "sub_123456",
  "form_id": "form_789",
  "timestamp": "2024-01-15T10:30:00Z",
  "data": {
    "name": "John Doe",
    "email": "john@example.com",
    "message": "Hello world"
  },
  "metadata": {
    "user_agent": "Mozilla/5.0...",
    "ip_address": "192.168.1.1",
    "referrer": "https://yourwebsite.com"
  }
}

Custom Payload

You can customize the payload structure using form field variables:

{
  "lead": {
    "first_name": "{{first_name}}",
    "last_name": "{{last_name}}",
    "email": "{{email}}",
    "company": "{{company}}",
    "message": "{{message}}"
  },
  "source": "website_contact_form",
  "timestamp": "{{timestamp}}"
}

Authentication

API Key Authentication

{
  "Authorization": "Bearer your_api_key_here"
}

Basic Authentication

{
  "Authorization": "Basic base64_encoded_credentials"
}

Custom Headers

Add any custom headers your endpoint requires.

HTTP Methods

POST (Recommended)

  • Sends data in request body
  • Most common for creating records
  • Supports large payloads

GET

  • Sends data as URL parameters
  • Limited by URL length
  • Good for simple notifications

PUT/PATCH

  • For updating existing records
  • Requires record identification

Error Handling

Retry Logic

  • Automatic retries for failed requests (up to 3 attempts)
  • Exponential backoff (1s, 2s, 4s delays)
  • Configurable retry conditions

Status Codes

  • 200-299: Success
  • 400-499: Client error (no retry)
  • 500-599: Server error (retry)

Monitoring

  • View delivery status in dashboard
  • Failed webhook logs
  • Success/failure statistics

Security Best Practices

HTTPS Only

  • Always use HTTPS endpoints
  • Verify SSL certificates

Authentication

  • Use strong authentication methods
  • Rotate API keys regularly
  • Don’t send sensitive data in URLs

Data Validation

  • Validate incoming data on your endpoint
  • Sanitize data before processing
  • Handle malformed payloads gracefully

Testing

Test Integration

Use the “Test Integration” button to send sample data:

{
  "test": true,
  "sample_data": {
    "name": "Test User",
    "email": "test@example.com"
  }
}

Webhook Testing Tools

Troubleshooting

Connection Failed

  • Verify endpoint URL is accessible
  • Check firewall/network restrictions
  • Ensure HTTPS is used

Authentication Issues

  • Confirm API keys are correct
  • Check header formatting
  • Verify token permissions

Data Not Received

  • Check endpoint logs
  • Verify payload format matches expectations
  • Test with simple payloads first

Rate Limiting

  • Implement rate limiting on your endpoint
  • Handle 429 status codes appropriately
  • Use queuing for high-volume forms

Advanced Configuration

Conditional Webhooks

Only trigger webhooks based on form responses:

  • Send to different endpoints based on form type
  • Skip webhooks for test submissions
  • Conditional headers based on data

Multiple Webhooks

Create multiple webhook integrations for:

  • Different endpoints
  • Different payload formats
  • Different authentication methods

Performance Considerations

  • Response Time: Keep endpoint response under 10 seconds
  • Payload Size: Limit to reasonable sizes (<1MB)
  • Rate Limits: Implement proper rate limiting
  • Async Processing: Process data asynchronously when possible

Examples

CRM Integration (HubSpot)

{
  "properties": {
    "firstname": "{{first_name}}",
    "lastname": "{{last_name}}",
    "email": "{{email}}",
    "company": "{{company}}",
    "message": "{{message}}"
  }
}

Slack Webhook Alternative

{
  "text": "New lead: {{name}} <{{email}}> - {{message}}",
  "channel": "#leads"
}

Database API

{
  "table": "leads",
  "data": {
    "name": "{{name}}",
    "email": "{{email}}",
    "source": "website_form",
    "created_at": "{{timestamp}}"
  }
}

Need Help?

For webhook integration issues:

Last updated on
Slack Integration