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. Open the API keys & MCP tab
  5. Click Generate a new API key
  6. Give it a name and 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.
IP Blocking - Keep It Deactivated for API KeysBy default, IP blocking is deactivated for API keys in Brevo, which is the recommended setting for the Forms Plugin to work correctly.
Brevo Authorized IPs page showing API keys row with Deactivated status
If you have activated IP blocking under Security → Authorized IPs, the plugin’s requests will be blocked because they come from rotating server IPs. To fix this:
  1. Open Security → Authorized IPs
  2. Locate the API keys row
  3. If it shows Activated, click Deactivate (or remove the IP restriction)
Keeping it Deactivated ensures form submissions reach Brevo without being blocked.

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
Field Names Must Match ExactlyThe Form Field Name in Framer and the Brevo Attribute name must be identical (case-sensitive). If they don’t match, data will not sync to Brevo.

Where to Find Each Name

1. Form Field Name - Set in the field’s properties panel in Framer.
Framer field properties panel showing the Field Name input set to company_name
2. Brevo Attribute Name - Managed in Brevo → Contact Attributes. Use the value from the Attribute ID column.
Brevo Contact Attributes page showing the Attribute ID column with values like FIRSTNAME, LASTNAME, COMPANY_NAME
3. Map Them in the Plugin - In the Mappings modal, paste the same value into both Form Field and Brevo Attr.
Forms Plugin Mappings modal mapping the form field company_name to Brevo attribute COMPANY_NAME

Example Mapping

A common best practice is to use Brevo’s default attribute names (in UPPERCASE) as your form field names. This guarantees an exact match and avoids mapping mistakes. Whenever you add a new form field, also add a matching attribute in Brevo first, then map them together.

Step 5 - Add the Attribute to Your Contact List View

Even after data is synced correctly, new attributes (like FIRSTNAME or a custom field) won’t appear as columns in your Brevo contact list until you add them to the list view.
  1. Open Brevo → Contacts
  2. Open the contact list connected to your form
  3. Click Customize columns in the top right of the contact list
Brevo Contacts page with arrow pointing to the Customize columns button
  1. In the Attributes visible as columns panel, click Select attributes and add the attributes you want to display (e.g., FIRSTNAME, LASTNAME, COMPANY_NAME)
Brevo Attributes visible as columns modal with Select attributes dropdown showing COMPANY_NAME
  1. Save your changes
After this, every new submission will display the mapped values directly in the list view.

Step 6 - 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

Troubleshooting

If submissions are not appearing in Brevo, check the following before reaching out to support:
  • Field names match exactly - Form field names and Brevo attribute names are identical, including casing.
  • Attribute exists in Brevo - Each mapped form field has a matching attribute in Contact Attributes.
  • Attribute is added to list view - Custom attributes are enabled as columns in your contact list.
  • API key is valid - The API key is active and copied correctly into the component.
  • List ID is correct - The List ID matches the list you want to populate.
  • IP blocking is deactivated - Under Security → Authorized IPs, the API keys row is Deactivated.
If the issue persists, please contact support and include a short screen recording showing the form, the field mapping, and the Brevo dashboard. This helps us debug much faster.

Next Steps