Create a subscription form

This guide demonstrates the newest version of the form builder (released in November 2018). If you are editing a form created using the old form builder, please reference this guide. Learn more about the new form builder here.

 

Overview

In this tutorial, we’ll show you how to create your subscription form in just a few clicks. You will be able to customize the form's design, content, behavior, and fields collected.  

You may use these shortcuts to jump to a specific step: 

  1. Creating a form
  2. Customizing form design
  3. Selecting a contact list(s)
  4. Customizing form settings
  5. Customizing form messages
  6. Sharing your form

1. Creating a subscription form

Navigate to the tab Contacts.

Forms_1_EN.png

 

Now click to Manage your forms.

Create-Form-EN-02.png

Let's get started by clicking on the Create a subscription form button. 

Create-Form-EN-03.png

Give your form a name to help you organize & locate it within your account.

Create-Form-EN-04.png

2. Designing a subscription form

You can achieve a great level of personalization by modifying:

  • Background
  • Text Fonts, Sizes & Colors
  • Form fields (add as many fields as you want)
  • Instruction Text (directing users how to subscribe)
  • Success Message (confirming that a user has successfully unsubscribed)

New form field types 

Add additional form fields to collect information about your subscribers and populate existing contact attributes (such as a text, number, date, category, or boolean values).

Add Opt-in confirmation to your form to record your subscribers' consent to receive newsletters and promotional emails.

You may also add a multi-list subscription field to allow subscribers to declare interests or preferences at signup and place them in corresponding lists.

Each new form field will correspond to a contact attribute or contact list:

  • Text (contact attribute)
  • Number (contact attribute)
  • Date (contact attribute)
  • Multi-list subscription (contact list)
  • Double opt-in (contact attribute)

Create-Form-EN-05.png

Captcha 

To protect you from spam, we include a Captcha in your form by default. To configure the Captcha that matches your website, go to this site.

Once this has been set up, enter the site key in the field provided in your SendinBlue form.

You can also enable Invisible captcha by checking the Invisible captcha checkbox on the left menu of the form editor.

Create-Form-EN-06.png

Customize the form

You can drag and drop various form elements blocks, including Title, Text, Image & Divider, to your form similar to Form Fields. To further customize your form design, click on the Form Design tab on the left panel of the form editor.

Create-Form-EN-07.png

You will be able to customize:

  • Background color or image
  • Text font style, format, color, size, and alignment of a Title, Text, a Label and Help text
  • Form container background, layout, width, alignment, border, opacity, and corners
  • Button color, button text font style, size, format and color, button alignment, and corners
  • Success/Error alert message color, text font style, format, color, size and alignment, alert message box background color, border color, and corners

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 on the top of the form editor. 

Create-Form-EN-08.png

3. List selection

Once you are done designing your form, the next step is to select the list (or lists) where your new contacts will be saved after the form is submitted. You can search for lists by typing the list name or by the folder containing the list.

Create-Form-EN-09.png

You can also choose to create new lists from here.

Create-Form-EN-10.png

4. Form settings

This section is where you can choose what type of confirmation message your subscribers will receive (if any).

Create-Form-EN-11.png

4.1  No confirmation Choose this option if you do not want to send a confirmation email once the person has subscribed.

After clicking the subscription button on the form your contacts will automatically be redirected to the URL you entered, e.g. http://www.my-website.com, or a confirmation page. If you do not select URL or confirmation page, then a subscription confirmation message will appear at the top of the form without the page changing. To set a redirect URL or confirmation page, check the Confirmation Page checkbox.

Create-Form-EN-12.png

4.2  Simple confirmation Choose this option if you want to send a confirmation email to a new subscriber confirming that they will now receive your emails. Next, select the SMTP template you would like the system to use when sending the confirmation. The default template, titled "Default Template – Single Confirmation", is available and you can customize it or create another template confirmation.

Good to know: To create a new SMTP template, navigate to the Transactional tab and click on Templates and then on the New Template button. If you create a new SMTP template, be sure to activate it so that it will appear as an option when setting up a form with Simple Confirmation.

You can choose the redirect URL or confirmation page within this option as well.

4.3  Double Opt-in Confirmation The double opt-in subscription process requires the subscriber to complete two steps to be added to your email list: 

  1. Your new subscriber enters their email address on your sign-up form.
  2. After submitting the form, the subscriber must click the link in a confirmation email.

The double opt-in confirmation feature allows subscribers to verify that they want to receive your emails. This feature eliminates accidental subscriptions and potential annoyances. This option is also advised for GDPR compliance. Advantages of double opt-in confirmation:

  • For your contacts:
    • Allows them to verify they didn’t make a mistake when registering.
  • For you:
    • You have the assurance of knowing a subscriber is truly interested in receiving your emails.
    • Since the subscriber confirmed their email address twice, you drastically reduce the number of hard bounces (invalid email addresses) in your campaigns.
    • You have protection against malicious competitors who may provide you with phony email addresses to damage your reputation.
    • You remain compliant with laws and regulations in some countries: the double opt-in is mandatory in several countries, including the European Union.

The confirmation email must be one of your SMTP templates and include double opt-in formatting (details below). You can use:

  • The default template we provide, "Default template - Double opt-in confirmation"
  • Or a new template that you create.

Create-Form-EN-13.png

a. Opt-in Email  You also have the ability to create or select your own template for the Opt-in email. To do this, go to SMTP Templates and click Create a Template.

  • In the first step, Setup, expand the Advanced Options and add a new Tag with this exact text: 
optin

Create-Form-EN-19.png

  • Create your template using one of the different newsletter editors.
  • Next, edit the template as desired and insert this exact text as the double opt-in link:
{{ params.optin_url }}
  • Finally, save and activate the template, and return to your subscription form.

Create-Form-EN-14.png

b. Confirmation Page (optional) Use this tool if you want your subscriber to be redirected to a specific page (i.e. a confirmation page or your website homepage) after registering.

c. Final Confirmation Email (optional) Use this tool if you want your subscribers to receive a final confirmation email after they have completed the double opt-in process. As with the other confirmation emails, the default template is simply called “Default template - Final Confirmation”.  You can find and modify it in your SMTP templates.

Good to know: Sendinblue will automatically create a "Temporary Double Opt-in" list to save the contact information of the subscribers who have not yet completed the second step of the double opt-in process (confirming their email addresses).

Your SendinBlue contact database will also be updated to include a new attribute (column) labeled "Double_opt -in". Contacts who are added via double opt-in will have a value of "Yes" within this column. If the contact subscribed through another type of form, this field value will be "No". If you did not use a SendinBlue subscription form to add contacts to your database, this field will be blank.

Create-Form-EN-15.png

4.4  Advanced settings (Optional)

a. Temporary Emails Select this checkbox under Advanced settings to refuse temporary email addresses created on disposable email address services like Ypomail, MyTrashMail, etc. These addresses will not be added to your contact database from form submissions.

b. Completed form behavior This will hide the form after it has been submitted by the subscriber. If you do not select this checkbox the form will still appear in input mode to the visitor even after they have filled & submitted it successfully.

Create-Form-EN-16.png

5.  Form messages

This is where you can customize/edit the default success and error alert messages to be displayed on your form.  

Create-Form-EN-17.png

6.  Share your form

After Saving, the next step is Share to get the code for integrating the form into your website or a link for quick sharing. There are three types of code:

    • Iframe: easy to integrate, this code allows you to embed the form within a pop-up or page on your website.
    • HTML: this code is much more customizable, with Ajax animation for messages.
    • Simple HTML: this is a simplified version of HTML form code that does not require calling JavaScript. 

Good to know: Captcha that requires calling JavaScript cannot be included in this form code. 

Create-Form-EN-18.png

Finally, just paste the code on your website, and the form will appear!