How to create a subscription form with SendinBlue

Looking for an easy way to create a form to get new subscribers to your website? Use SendinBlue’s form builder

TIP: this tutorial relates to the post: Website Diary #9 – installing an author bio box and using SendinBlue.

Here’s a step-by-step guide to create a subscription form using SendinBlue’s form builder.

What do I mean by a “subscription form”? A form that asks for a visitor’s email address to subscribe to your website’s newsletter.

TIP: for more information, read Melissa Griffin’s post “Why you should start building an email list“.

You know what they say, “an email list is the most important step to having a website”. That’s your audience.

SendinBlue’s a great value email marketing system for all types of websites.

It’s well worth your time to check it out, as it’ll probably save you money.

SendinBlue easily holds its own against other email companies, such as:

MailChimp – SendinBlue’s approximately 4 x cheaper and provides more services for free, including: SMS marketing, transactional emails/SMS, unlimited autoresponders and full marketing automation
MailJet – similar pricing but MailJet’s free plan allows less emails on a daily and monthly basis, and doesn’t have as many features as SendinBlue

For more information and to see a full list of features, visit SendinBlue’s website.

but, for now… let’s start the tutorial.

In this tutorial, you’ll learn how to use SendinBlue’s form builder to create a form to embed or use as a pop-up, landing page or widget, to get more subscribers

1. log into SendinBlue.com and select “Campaigns” in the top menu bar

2. select “API & Integration” in the left menu bar

TIP: there’s a small blue Help button in the top right of the screen to provide support specific to the webpage you’re currently reading.

Click the blue “Manage Your Forms” button in the Forms setting

3. select “Subscription Forms”

Click on “create a new subscription form” and decide if you want to collect email and/or SMS details (ie, the telephone number for text purposes), then click “Create”

4. name your subscription form

The form name won’t show on the subscription form once published – it’s just so that its recognisable to you when listed on the SendinBlue dashboard.

5. edit and format the subscription form

TIP: instead of a blank background around the form, change the background colour or upload an image (both options are available using the “Background” dropdown) – the form remains the size you choose, but the uploaded image automatically resizes to fit the whole screen so that it looks like a landing page.

The default form can be adapted to your website’s branding:

overtype the wording as required and use the formatting dropdown options in the menu bar to change the background, font, colour and size
TIP: if the form’s being placed within a website pop-up, you won’t need the display header or background options. Instead, just use the email fields (and name field, if required).

use the header and field options to the right of the form:
– Display Header: decide whether you’d like to display the header

If you’re including the header, decide whether you’d also like the title, sub-title and description fields (outlined green, red and blue respectively in the screen shot below, showing the areas affected if you tick/untick those options). Select and edit the text as required

– Add a Field: decide whether the email field is sufficient, or if you’d like the subscription form to collect other details, such as the subscriber’s name

Click “Save”.

6. choose your sign-up settings

Scroll down the page to set up your form’s sign-up settings.

You’ll see the following options:

subscriber confirmation

no confirmation – subscriber details are immediately added to your contact list, without a confirmation email being sent
TIP: the double opt-in cuts out spam and ensures the subscriber intended to subscribe to your email list.
An added benefit of using the double-optin is that you can include a redirect url on the confirmation screen, as well as send a final confirmation email, if required.

simple confirmation – subscriber details are immediately added to your contact list and then a confirmation email is automatically sent to the subscriber
double opt-in confirmation – an email is automatically sent to the subscriber, but their details are not added to your contact list until they’ve clicked the link in the email to confirm their subscription.

TIP: see the section below called “How to activate your double opt-in template” for more information.

IMPORTANT: if you decide to use the double opt-in option, you’ll also need to activate your chosen double opt-in template – for this tutorial, it’s the “default template” shown outlined red in the screenshot.

Success/Error messages

Amend or accept the default wording that subscribers will see for:

success message
email address already exists on contact list
invalid email address
error message

Advanced Settings

Add a url to redirect the subscriber after they’ve subscribed, or leave the url field blank, so that they see the confirmation message on the same page at the top of the form.

Corresponding lists

Select the list to add the new subscriber details.

Click “Save”

If you selected the double-optin template option, you’ll need to activate it.

How to activate your double-optin template

go to Campaigns in the top menu, then click on “Campaigns” in the side menu
select “SMTP Templates”. You’ll see the active templates listed

Unless you’d like to create your own template, select the default double opt-in template and on the Action dropdown, select “send a test”.

TIP: whichever email address you choose to send the double opt-in test email, must already be on your contact list – ie, if you’re going to receive the test email, your email address must already be on your contact list

Once the test email has been sent, you’ll notice that a new contact list has been automatically created – FORM [Temp – Double Opt-in].

From now on, whenever someone subscribes to your mailing list, their email address will first be placed in this Temp – Double Opt-in list and then moved across to your main mailing list when the subscriber has clicked the confirmation email.

And now the last step:

How to add the form to your pop-up or landing page

Now that you’ve created your subscription form and clicked Save, scroll to the top of the screen. Above the form, you’ll notice that there’s a new option showing on the drop-down menu – “Share” has been added.

Click “Share” for three different ways to use the form:

the link to the subscription form – link this url to your pop-up CTA or a subscription link, and your subscription form will have its own landing page
code to copy to your website – use this code if you’re adding the form directly on your website page or as a widget
html embed code to copy to your website – use this code if you’re embedding the subscription form into a third party pop-up

Select whichever one you’d like to use and copy/paste the code for your form.

Note: this blog post is intended to be a general resource only.

About
Latest Posts

Follow me:

Mrs P

I'm a full-time working wife and mum who loves searching for innovative products and learning how to run a successful website. I started PeasOnToast.co.uk to help people like you:
- reviews to save you time looking for good value, quality household/fintech products
- blog/tutorials for any of you website newbies to follow my PeasOnToast learning curve

Follow me:

How to create a subscription form with SendinBlue – step-by-step guide

Looking for an easy way to create a form to get new subscribers to your website? Use SendinBlue’s form builder