Connect a Website Form to Your CRM via Direct API Integration

Description and use

Directly connect a website form to a CRM via API, bypassing third‑party platforms, with full error control and security.

Problem

Integrating a website form directly with a CRM API without third‑party platforms to avoid monthly limits, latency, and lack of control over error handling.

Outcome

A secure, direct integration that eliminates third‑party limits, reduces latency, and gives full control over data transformation and error handling.

Workflow

• Create an HTML form and intercept its submit event with JavaScript to POST JSON to /api/submit-lead.
• Implement a server‑side endpoint (Node.js/Express) that receives the payload, validates required fields, maps them to the CRM’s property names, and injects the Authorization header.
• Use the CRM’s REST endpoint (e.g., https://api.hubapi.com/crm/v3/objects/contacts) to POST the mapped payload.
• Handle non‑OK responses by logging error details and returning a 502 status to the client.
• Return a success response with the CRM record ID when the API call succeeds.
• Implement duplicate handling logic (e.g., treat 409/400 as update or error).
• Consider rate limiting and queueing for high‑volume forms.
• Store the CRM API key in an environment variable (process.env.CRM_API_KEY).

Evidence

Never submit form data directly from the client browser to a CRM API using front-end JavaScript. Exposing secret API keys or Bearer tokens in client-side code creates a severe security risk.

Source

The HTML form captures user input and sends a JSON payload to your server or serverless function via fetch().

Source

Your server validates the input, formats the payload to match the CRM's requirements, injects authentication headers securely, and performs an HTTP POST request to the CRM API.

Source

Use the CRM’s REST endpoint (e.g., https://api.hubapi.com/crm/v3/objects/contacts) to POST the mapped payload.

Source