Skip to main content

​
Connect Brevo with Framer Forms

Capture leads from your Framer forms and automatically add them to your Brevo contact list using the Forms Plugin.

​
Step 1 — Generate Brevo API Key

Before connecting Brevo to your form, generate an API key from your Brevo dashboard. This API key allows the Forms Plugin to securely send form submissions to your Brevo contact list. Brevo dashboard showing the SMTP & API settings page
  1. Login to your Brevo account
  2. Open Settings
  3. Navigate to SMTP & API
  4. Click Create New API Key
  5. Copy the generated API key
Open Brevo Dashboard →
Keep your API key in a secure password manager. Never share it publicly or commit it to a code repository.

​
Step 2 — Insert Brevo Component Into Your Form

Select your form in the Framer canvas and insert the Brevo component. The component connects your form to Brevo and automatically detects the form fields in your form layout. Forms Plugin panel in Framer showing the Brevo Integrations screen with the Insert Brevo Component button

​
Step 3 — Configure Brevo API Settings

After inserting the Brevo component, configure the API settings in the component properties panel. Framer canvas with Brevo component selected showing the API Settings modal
  1. Select the Brevo Integration component in your form
  2. Open the properties panel on the right side
  3. Paste your Brevo API Key
  4. Enter your Brevo List ID

​
Required Fields

  • Brevo API Key — Paste the API key generated from your Brevo dashboard.
  • Brevo List ID — Enter the Brevo contact list ID where new subscribers should be added.

​
Step 4 — Configure Field Mapping

Map your form fields to Brevo contact attributes. The component automatically detects your form field names. You simply connect each field to the correct Brevo attribute. Framer canvas showing the Mappings modal with form fields mapped to Brevo attributes

​
Example Mapping

Form FieldBrevo Attribute
emailEMAIL
nameFIRSTNAME
phoneSMS

​
Step 5 — Result

When a user submits the form, their details will automatically be added to your Brevo contact list. You can then manage contacts, send campaigns, and set up automations directly from Brevo. Completed Brevo integration on a form with Integration active status

​
Next Steps