Create a subscription form - Part 2: Design your subscription form

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.

Sendinblue 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). 

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.

mceclip1.png

Blocks and fields

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

Conception_tab_EN.png

  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 or an SMS 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, y
    ou 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. 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.
  9. GDPR Declaration
    We've created a pre-made GDPR declaration stating that you are using Sendinblue as your marketing tool.
  10. Captcha
    We strongly recommend using a captcha (reCAPTCHA) confirmation to prevent spambots from adding fake data to your lists. Please check our dedicated article: Add a captcha to your subscription form
  • 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.

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

mceclip0.png

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.

mceclip13.png

⏩ What's next?