Customize SendInBlue opt-in forms on WordPress


Let’s be honest. SendInBlue is not the friendliest of email services and kinda lacks integrations when compared with many alternatives out there. While you could use third-party plugins and Zapier (everything is possible with Zapier!), with just a bit of coding you can get good looking opt-in forms with the official plugin (CSS included below!).

Sharing is caring!

Get the plugin and set it up

Of course, you first need the official plugin. Simply install it from the WordPress repo and activate it. It works fine in WordPress 5+.

SendInBlue plugin in the WP repo

In your dashboard, go to the new SendInBlue menu. Log in with your credentials and add your API key. You can find your API key in your SendInBlue dashboard. You need to use the v2 version; the plugin does not support the newer one.

Customize the opt-in form

Once you are set up, simply go to the SendInBlue –> Forms menu in your WordPress dashboard and add a new form.

By default, new forms have this appearance, although they might vary with different themes.

Feel like crying yet?

Don’t worry, we can easily fix it with some CSS. This is the end result:

Field customization is done directly in the guided menu (fields used, placeholders, lists, captcha, …). To change the default form style, select Custom style at the bottom.

Use this code, or tweak it your needs (parts like these are /*notes and comments*/):

[form] {
    -moz-box-sizing:border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%; /*To change form width you can edit this*/
    margin: 0 auto;
}

/*To change size for mobile only edit width here*/
@media only screen and (max-width: 600px) {
[form] {
    width: 100%; /*Edit this*/
    margin: 0 auto; }
}

/*Text input fields*/
[form] input[type=text],[form] input[type=email], [form] select {
    width: 100%; /*Width of text input fields*/
    color: #3a3a3a; /*Text color*/
    background-color: #fff; /*Background color*/
    border: 1px solid #3a3a3a; /*Border width, style, color*/
    height: auto;
    margin: 5px 0 0 0;
}

/*Submit button*/
[form] .sib-default-btn {
    margin: 5px 0;
    padding: 8px 24px;
    display: block;
    width:100%; /*Button width*/
    color:#fff; /*Text color*/
    background-color: #51b2d8; /*Background color*/
    font-size: 28px; /*Font size*/
    font-weight:600; /*Bold font*/
    line-height: 1.4285;
    text-align: center; /*Center text inside the button*/
    cursor: pointer;
    vertical-align: middle;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    white-space: normal;
    border:1px solid transparent; /*Button border width, style, color*/
    border-radius: 3px; /*Rounded edges/*
}

/*Change button color when hovering it*/
[form] .sib-default-btn:hover {
    color:#51b2d8;
    background-color: #fff;
    border-color: #51b2d8;
}

/*Adds some margin between rows*/
[form] p{
    margin: 10px 0 0 0;
}

/*Adds some margin if you use checkboxes*/
[form] input[type=checkbox] {
    margin-right: 10px;
}

The same code can be used for more complex opt-in forms, like this one.

These forms are responsive. They occupy all the available space of the element containing them. To make them smaller, you can adjust “width”. However, it is better to keep these settings and simply insert them in an element with the exact desired size.

For example, for the forms above I used the Atomic Blocks plugin, added an AB Container block and fixed its max size at 500px. This way, the form will have a max width of 500px as well.

Why not the form builder

In your SendInBlue dashboard you can create some very nice opt-in forms, style them as you wish with an intuitive builder, and embed them on your website.

Why not just do that? Well, the embedded form comes in a container with a fixed size instead of being responsive. While you can change the container size, it’s much harder to handle to fit multiple places and different devices. Here’s how it looks by default:

It’s really not user-friendly. Making that form truly responsive and requires more coding. Overall, I don’t think it’s worth the effort.

Using the official plugin you can have simpler and cleaner optin form that look native rather than embedded and that fit all needs and devices. Moreover, shortcodes are supported to easily place them wherever you want.

Author box picture for blog ADV

Alessandro De Vecchi

Marketing, web, and anything-tech enthusiast.
Newbie blogger, spends his nights studying, testing, creating content and job hunting.
Gray and blue are his favourite colours. Loves minimalism.

Sharing is caring!

Leave a Comment

Want to know more about me?

Get my introduction sequence 
and subscribe for updates!

Interact with my chatbot!

Get it by email!

After signing up you will immediately receive an email with a confirmation link

You only receive the content you choose.

I’ll never spam you! Your information will never be shared.