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.
🗂️ 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.
- Go to Contacts > Forms.
- From the Sign-up tab, click Create sign-up form.
- Select the Pop-up card.
-
Click the Website dropdown and click + Add website. Enter your website URL and click Add website to confirm.
💡 Good to knowTo 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. - Click Install Brevo Pop-ups or Update Brevo Pop-ups, depending on whether you've already installed the Brevo tracker for another app.
- Choose how you want to install the Brevo Pop-ups on your website:
- Choose an installation option:
- With Google Tag Manager
- Install Brevo tracker manually
- Click Continue.
- Choose an installation option:
- Add the set up files to your website:
- Follow the instructions displayed for the installation option you have chosen.
- Click Verify setup files.
- Add the Brevo tracker to your website:
❗️ ImportantIf 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.
- 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.
- 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:
- Go to Contacts > Forms.
- From the Sign-up tab, click Create sign-up form.
- Select the Pop-up card.
- Select your Website or add its URL.
- Enter your form name to quickly identify it. This name is only visible to you.
- Click Create form.
🎨 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.
You can customize:
- the form,
- the sign-up confirmation that appears once a contact has submitted the form, and
- the design of the pop-up window and the background overlay.
Form
Click the Form tab to start designing your pop-up sign-up form.
Expand the following accordions to learn more about the blocks available to design your form.
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.
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.
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
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.
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.
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.
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. |
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. |
Click the submit button on the preview to edit its alignment, color, borders, and corners. |
Click the close button to edit the X-shaped icon color, the fill color, borders, and shadow. |
Mobile view
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.
-
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.
- When the page loads
- Select how many visits before the pop-up appears to a visitor.
- Select how many times a visitor can see the same pop-up form.
- (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.
- Click Save.
-
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.
-
Show on all pages
- Click Save.
-
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.
- Click the Select a template dropdown and select one of the following options:
- 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.
- Or select a custom template you have already created.
❗️ ImportantIf 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.
- (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.
- Click the Select a template dropdown and select one of the following options:
-
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.
- Click the Select a template dropdown and select one of the following options:
- 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.
- Or select a custom template you have already created.
- Click the Select a template dropdown and select one of the following options:
-
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.
-
[Recommended] Double opt-in confirmation
- Click Save.
- 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. - (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.
- 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.
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:
You can check if a specific contact subscribed through your form by checking their history on their details page:
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.
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.
🤔 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.