Create a pop-up sign-up form in Brevo

Brevo pop-ups are in beta and only available to some users. They will be available to all users in the future.

Pop-ups are responsive sign-up forms and can be triggered after a delay, during exit intent, and on specific pages only, making lead generation easier! Pop-up forms are designed to grab attention and are typically smaller and simpler than full page/embedded sign-up forms.

To learn how to create a full page/embedded sign-up form, check our dedicated article Create a sign-up form in Brevo.

This article is provided for informational purposes only and does not constitute legal advice. While we strive to ensure the accuracy and relevance of the information, laws and regulations regarding email marketing and data protection, including but not limited to GDPR, CAN-SPAM, and other regional privacy laws, may vary and are subject to change. Readers are advised to consult with a qualified legal professional or compliance expert to ensure their Double Opt-In process aligns with applicable laws and regulations in their jurisdiction. The use of any examples, templates, or guidelines from this article is at your own discretion and risk.

🗂️ Step 1: Install Brevo Pop-ups on your website

The first time you create a pop-up form, you need to install Brevo Pop-ups on your website to activate and show pop-ups on your website. In the meantime, you can still create and design pop-up forms.

  1. Go to Contacts > Forms.
  2. From the Sign-up tab, click Create sign-up form.
  3. Select the Pop-up card.
  4. Click the Website dropdown and click + Add website. Enter your website URL and click Add website to confirm.
    💡 Good to know
    To install Brevo pop-up forms on multiple websites, start by adding the URL of your primary domain and installing the Brevo Pop-ups on that site. You don't need to re-install the setup files for the other websites.
    ➡️ For example, if you want pop-up forms on both https://www.brevo.com and https://shop.brevo.com, start with https://www.brevo.com.
  5. Click Install Brevo Pop-ups or Update Brevo Pop-ups, depending on whether you've already installed the Brevo tracker for another app.
  6. Choose how you want to install the Brevo Pop-ups on your website:
    1. Choose an installation option:
      • With Google Tag Manager
      • Install Brevo tracker manually
    2. Click Continue.
  7. Add the set up files to your website:
    1. Follow the instructions displayed for the installation option you have chosen.
    2. Click Verify setup files.
      forms_step2-tracker_EN-US.png
  8. Add the Brevo tracker to your website:
    ❗️ Important
    If you've already installed the Brevo tracker for another app, you still need to check which version you have: only version 2.0 supports Brevo Pop-ups.
    1. Follow the instructions displayed for the installation option you have chosen. Depending on if you've already installed the Brevo tracker for another app or not, the instructions will differ.
    2. Click Verify Brevo tracker.

You can now create Brevo Pop-ups for your website!

✅ Step 2: Set up your pop-up sign-up form

Once you've installed Brevo Pop-up forms on your website, you can create your pop-up sign-up form:

  1. Go to Contacts > Forms.
  2. From the Sign-up tab, click Create sign-up form.
  3. Select the Pop-up card.
  4. Select your Website or add its URL.
  5. Enter your form name to quickly identify it. This name is only visible to you.
  6. Click Create form.
    forms_set-up-popup-form_EN-US.png

🎨 Step 3: Design your pop-up form

You can now start designing what your pop-up form and sign-up confirmation will look like on your website, on both desktop and mobile devices.

You can drag and drop blocks and configure other elements to design your pop-up sign-up form and sign-up confirmation.

Pop-up forms should be simple to better grab the attention of your visitors and short to incite them to sign up quickly without having to give too much information about themselves yet. To stay GDPR compliant, it is highly recommended to use the GDPR opt-in, GDPR Declaration, and Captcha.

Design your pop-up form and sign-up confirmation

Click Create design to start designing your pop-up sign-up form.

forms_create-design-popup_EN-US.png

You can customize:

Form

Click the Form tab to start designing your pop-up sign-up form.

forms_popup-create-design_EN-US.pngExpand the following accordions to learn more about the blocks available to design your form.

✏️ Text

forms_text-block_EN-US.png

The Text block allows you to include descriptive text in your sign-up form. You can add an engaging introduction and provide more context regarding the form's purpose. When you click on a Text block, a top bar appears. This bar allows you to modify the text's formatting (such as style, font, size, color, and alignment) and insert links.

💬 Input field

forms_input-block_EN-US.png

The Input field block allows you to include fields in your sign-up form to collect essential information from your new subscribers. The fields available are based on the contact attributes you have created in Brevo, such as email addresses, names, phone numbers, and more.

The form should at least include a field for Email, SMS, or WhatsApp so that you can later communicate with your subscribers.

⚖️ GDPR opt-in

forms_gdpr-field_en-us.jpg

The GDPR opt-in block allows subscribers (referred to as data subjects in the GDPR) to use a checkbox to consent to receiving your newsletters and accessing your data privacy policy, which should be linked to the form. You can and should amend the text according to your individual legal requirements.

➡️ To learn more about how to make your sign-up form GDPR-compliant, check our dedicated article Guidelines for a GDPR-compliant sign-up form.

If you use the double opt-in confirmation method for your form, we recommend adding the consent text from your GDPR field to your double opt-in confirmation email template. This is the only way to prove which consent text the subscriber agreed to. To learn more, check our dedicated article Double opt-in (DOI): What it is and how to track user sign-ups

📜 GDPR declaration

forms_gdpr-declaration_EN-US.png

The GDPR Declaration block notifies subscribers (referred to as data subjects in the GDPR) that you are using Brevo as your marketing tool and that the data they provide in the form will be transferred to Brevo for processing in accordance with our Privacy Policy. You can and should amend the text according to your individual legal requirements.

➡️ To learn more about how to make your sign-up form GDPR-compliant, check our dedicated article Guidelines for a GDPR-compliant sign-up form.

🤖 Captcha

forms_captcha-block_EN-US.png

We strongly recommend using a CAPTCHA confirmation to prevent spambots from adding fake data to your lists. With Brevo, you can choose between Google reCAPTCHA or Cloudflare Turnstile CAPTCHA.

➡️ To learn more, check our dedicated article Add a CAPTCHA to a sign-up form created in Brevo.

Sign-up confirmation

Click Sign-up confirmation to start designing the message that will appear to your visitors once they submit your pop-up sign-up form. This message lets them know the sign-up is complete and what they can expect from you next.

Expand the following accordion to learn more about the block available to design your sign-up confirmation.

✏️ Text

forms_text-confirmation_EN-US.png

The Text block allows you to include descriptive text in your sign-up confirmation. You can add an engaging sign-up confirmation message and let your visitors know what to expect from you next. When you click on a Text block, a top bar appears. This bar allows you to modify the text's formatting (such as style, font, size, color, and alignment) and insert links.

Pop-up window and background overlay

You can customize what your pop-up will look like on your website. The design is applied to both the form and the sign-up confirmation. Click each element in the preview to edit it. You can also add individual images to the top of your form and sign-up confirmation.

Expand the following accordions to learn more about what elements of the pop-up you can customize.

🔳 Background overlay
forms_bg-overlay_EN-US.png Click the background overlay in the preview to customize it. You can choose a color and opacity for the background to make your pop-up window stand out.
💬 Pop-up window (layout, image, style)
forms_window_EN-US.png

Click the pop-up window in the preview to customize it. Configure the design of the pop-up window, including the layout, width, alignment, background, opacity, and other settings.

You can also toggle Show image and click Select image to insert an image at the top of your form or sign-up confirmation. You can add your brand logo or any other image to make your form visually appealing and more engaging to visitors.

💡 Good to know
You can only include one image at the top to avoid overloading your visitors.
🖱️ Button
forms_button_EN-US.png Click the submit button on the preview to edit its alignment, color, borders, and corners.
✖️ Close button
forms_close-button_EN-US.png Click the close button to edit the X-shaped icon color, the fill color, borders, and shadow.

Mobile view

forms_mobile-popup_EN-US.png

All of Brevo's forms are designed to be responsive by default.

You can preview how your pop-up form will look on a mobile device by toggling the view from desktop to mobile at the top of the editor. Note that you can't edit the mobile view.

Once you're satisfied with how your pop-up form looks, click Save and exit.

⚙️ Step 4: Configure your pop-up form

Expand the following accordions to see the options available to configure your pop-up form.

When
  1. Choose when visitors will see the pop-up on your website.
    • When the page loads
      Select the delay in seconds.
    • When the user is about to leave the page
      The pop-up form appears when the user is about to leave the page: when trying to close the tab of the page, entering a new URL or moving their mouse away from the page.
  2. Select how many visits before the pop-up appears to a visitor.
  3. Select how many times a visitor can see the same pop-up form.
  4. (Optional) If a visitor can see the same pop-up form at least twice, select the delay before a visitor sees this pop-up form again.
  5. Click Save.
Where
  1. Choose the pages where visitors will see the pop-up on your website:
    • Show on all pages
      Your pop-up form can appear on every page of your website.
    • Show on these pages only
      Enter the URL of the pages you want the pop-up to appear. You can add up to 20 URLs.
    • Show on all pages except these ones
      Enter the URL of the pages you don't want the pop-up to appear. You can add up to 20 URLs.
  2. Click Save.
Consent management
❗️ Important
Double and single confirmations are only available if you have added an email address field to your sign-up form. Otherwise, no confirmation will be sent.
  1. Decide whether visitors should confirm their sign-up, get an email confirmation, or not:
    • [Recommended] Double opt-in confirmation

      With the Double opt-in confirmation option, your subscribers will go through a double opt-in process. This means that they will receive an email containing a confirmation link (double opt-in email) after submitting your sign-up form. They have to click this link to confirm their subscription and be added to your contact database in Brevo. Otherwise, they won’t be added nor subscribed.

      The double opt-in process is useful to verify that the email address is valid and recommended for GDPR compliance.

      ➡️ To learn more, check our dedicated article Double opt-in (DOI): What it is and how to track user sign-ups.

      1. Click the Select a template dropdown and select one of the following options:
        1. Select the Default Template Double opt-in confirmation. You can modify the default template by going to Campaigns > Templates > Email and searching for "Default Template Double opt-in confirmation" in the search bar.
        2. Or select a custom template you have already created.
          ❗️ Important
          If you want to create your own custom template, make sure you follow the procedure in our dedicated article Create a custom double opt-in (DOI) confirmation template for Brevo sign-up forms to include the mandatory field. Otherwise, your custom template won't be displayed in the dropdown.
      2. (Optional) Check the Send confirmation email box if you want visitors to receive an email confirming their sign-up, and select the template of the confirmation email.
    • Single opt-in confirmation

      With the Simple opt-in confirmation option, your contacts receive a confirmation email and are added to your contact database in Brevo right after submitting your sign-up form.

      1. Click the Select a template dropdown and select one of the following options:
        1. Select the Default Template Single opt-in confirmation. You can modify the default template by going to Campaigns > Templates > Email and searching for "Default Template Single confirmation" in the search bar.
        2. Or select a custom template you have already created.
    • No confirmation

      With the No confirmation option, your subscribers are added to your contact database in Brevo right after submitting your sign-up form. They don't receive any email confirming their subscription.

  2. Click Save.
Contact management
  1. Choose the list(s) to which the contacts should be added.
    Select or create the list(s) you want to add your contacts to when they submit the form.
  2. (Optional): Check Block sign-ups with a disposable email address to add an additional layer of protection to prevent fake email addresses or uninterested contacts from signing up.
  3. Click Save.

🚀 Step 5: Activate your pop-up form

Once you've designed and configured your pop-up form, click Activate and Activate form to confirm. Your pop-up form is now live on your website. 🎉

👀 Step 6: View which contacts subscribed through your sign-up form

You can access information about subscribers who signed up through your form. Expand the following accordions to learn where you can view details about your sign-up form submissions.

Number of new contacts and submissions

To view how many new contacts signed-up through your form and how many times the form was submitted, go to Contacts > Forms and look at the New contacts and Submits column:

forms-listing-submits_en-us.png

Subscription of a specific contact

You can check if a specific contact subscribed through your form by checking their history on their details page:

Form submission automation event logs

To view and download the events related to form submission, go to Automations > Logs > Event logs and select Forms from the All Events dropdown. Then, click the download icon 📥  to download your events in a .CSV file. Once downloaded, open the file and filter the events based on the name of your sign-up form.

forms_event-logs_en-us.jpg

Double, single, or no confirmation

After you include a double confirmation in your sign-up form, a new contact attribute named DOUBLE_OPT-IN will be automatically added to your contact database in Brevo.

Contacts who went through the double opt-in process will have the value Yes within this field. If the contact subscribed with simple or no confirmation, this field value will be No. If the contact was added through a method other than a sign-up form, this field will be blank.

double_opt-in_attribute.jpg

🤔 Have a question?

If you have a question, feel free to contact our support team by creating a ticket from your account. If you don't have an account yet, you can contact us here.

If you’re looking for help with a project using Brevo, we can match you with the right certified Brevo expert partner.

💬 Was this article helpful?

1 out of 8 found this helpful