CRM Integration

60-120 minAdvanced

Integrate forms with CRMs (HubSpot, Salesforce) using Next.js Server Actions or API Routes to keep secrets secure.

Prerequisites

CRM API Key
Form component

Intermediate Recommended

Server Actions

Next.js 14+ specific.

Create Action

Define a server action to handle the form submission and call the CRM API.

This ensures your API keys are never exposed to the client.

Example

'use server'

export async function subscribe(formData: FormData) {
  const email = formData.get('email')
  await fetch('https://api.hubapi.com/contacts/v1/contact', {
    method: 'POST',
    headers: { Authorization: `Bearer ${process.env.HUBSPOT_KEY}` },
    body: JSON.stringify({ properties: [{ property: 'email', value: email }] }),
  })
}

Bind to Form

Use the action attribute on your form element.

Example

<form action={subscribe}>
  <input name="email" type="email" />
  <button type="submit">Subscribe</button>
</form>

Verification Checklist

Submit the form and verify the contact appears in your CRM.
Check network traffic to ensure no API keys are sent in the payload.