We've created a series of articles to help you build your subscription form. In this article, we'll have a look at the Design step for your subscription forms.

Brevo lets you personalize various elements of the signup form including background, text (font, size, color), form fields, call to action text, and success message (confirming that a user has successfully subscribed). 

• Introduction to subscription forms
• Part 1: Set up your subscription form
• Part 2: Design your subscription form - YOU ARE HERE
• Part 3: Select your list
• Part 4: Add a double opt-in confirmation to your form
• Part 5: Share your form

Drag and drop the elements

Design the form by simply dragging and dropping the required content blocks (e.g. title, text, image, divider) onto the form body and rearranging them as necessary.

Check our video to learn more about the blocks and fields you can add to your form, feel free to activate the subtitles in your own language:

In the form builder, you will find a pre-made form that you can customize. On the left of the builder, you will find Blocks and Fields in the Build tab, and design elements in the tab Form design.

Blocks and fields

In the Build tab, you'll find the blocks and fields you can use to design your form.

1. Title
2. Text
3. Image
   
4. Divider
5. Attribute
   Choose the contact attributes (email, name, birthday, etc.) according to the type of information you want to gather about your new subscribers. There should be at least an Email, SMS, or WhatsApp attribute in order to reach your subscriber.
   Check the below section: What fields should I include in the form?.
6. Multi-select subscriptions
   This will allow subscribers to declare interests or preferences at signup and place them in corresponding lists. Please check our dedicated article: Adding multi-list subscriptions to your forms.
7. Single choice
   You first need to create a "category" attribute field with different choices. You'll be able to give the choice to your client, for instance on the frequency of the newsletter, or the language. You can choose to display the choices using a radio button or a drop-down list.
   To customize the text "Select one" in the drop-down, you can search for the below-mentioned code block in your form HTML and the change the text value “Select one” enclosed in the <option> tag to desired value : <option value="" disabled selected hidden>Select one</option>
8. Checkbox
   You first need to create a "boolean" attribute field (yes/no). You'll be able to give the choice on one attribute: "yes" if the client checks the box, "no" if they don't.
   For example, that can be a field to ask if they're interested in your commercial partner's offers.
   
   💡 Good to know

   If you enable the Enable GDPR fields option in the setup of your subscription form, the GDPR field and GDPR Declaration blocks will be automatically included.
9. GDPR field
   To be GDPR-compliant, you need to add the GDPR field. You should provide a link to your private policy under "data privacy statement". Make sure to add the link before finalizing your form.
   
   💡 Good to know

   Adding the GDPR field to your subscription form automatically creates the OPT_IN attribute in your contact database. This boolean attribute registers whether a contact has checked the GDRP field in your form. However, it does not control whether a contact is subscribed to your marketing communications.
10. GDPR Declaration
    We've created a pre-made GDPR declaration stating that you are using Brevo as your marketing tool.
11. Captcha
    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 how to create and add a CAPTCHA to your form, check our dedicated article Add a CAPTCHA to your subscription form.

What attributes should I include in the form?

The email address field is a must, but you may also wish to gather a bit more information about your new subscribers by adding contact attribute fields. Things like name, date of birth, and location can be extremely useful when it comes to personalizing your emails and segmenting your audience.

However, user experience should take priority here. If they have to manually enter too many details, they may abandon the process altogether.

If you do decide to add more fields, pick just a few and make them optional. This way, the user can skip them if they want to, and you still get that all-important email address. You can always build up user profiles later: the number one priority at this stage is to get them on your email list.

Form design

In the tab Form design, you'll be able to change the design, colors, and fonts of your form. 

• Text
  From there you can change the formatting (font, color, size, etc.) of the text and titles as well of help text, labels, and placeholders.
• Background
  You can select a background color or background image. You can design the container (where you drag all the fields): alignment, borders, background, etc.
• Button
  You can select the color of the subscription button, its alignment, text font, etc.
• Alerts
  An example of an alert will appear when you click on this field. This will allow you to modify the design. There are Error state alerts and Success alerts.
• Spacing
  You can choose between 3 types of spacing: tight, default, spaced.

Mobile View

All forms are designed responsively by default. You can view how your form will look on a mobile device by toggling the view from desktop to mobile at the top of the form editor.

⏩ What's next?

• Part 3: Select your list
• Part 4: Add a double opt-in confirmation to your form
• Part 5: Share your form
• Create a subscription form - FAQ
• Add a captcha to your subscription form
• Create a double opt-in (DOI) confirmation template for Brevo form
• Adding multi-list subscriptions to your forms

🤔 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.