Getting started | Step-by-step tutorial

How to create a subscription form step by step

To build a new subscription form, go to the Forms menu at the top of your screen
or, from the quick toolbar on your left, click the icon Icône Create a subscription form for your website.

Once in the Subscription Forms section, click the + Add Subscription Form button at the top right to get started.
Select one of our form templates or start from a blank form.

Looking for a shortcut? The final result of this tutorial is available in our forms templates. You will have practically nothing to do! You just have to select it and adapt it slightly, according to your needs.
Click the Choose option on the selected form, a window will open asking you the name and language of your form. Select the form type and click Start to confirm. You’ll then be directed to the editor to customize it.

The name of your form is for your internal management only and will not be visible to your contacts. We suggest you give it a name that will help you know where it is used, for example: “Website registration - en” or “Facebook sharing form”.

The language will determine the language of the form as well as the language of the contact who will subscribe. For example, if you choose English, all contacts who subscribe through this form will get this language in their profile and the system will automatically interact with them in that language for the rest of the subscription process.

In this tutorial, we will work from a hosted form. That being said, editing an iFrame form is very similar since it is done from the same editor and the same tools.

If you have a bilingual website, create a different subscription form for each language. To do this quickly, wait until you're finished building the first form, then duplicate it and change its language at the same time. This way, you won’t have to start your design from scratch: all you’ll have to do is translate your labels. Also, don’t forget to change the groups associated to your form! Keeping your subscribers from different languages in separate groups will greatly help you plan your mailings.
Add additional fields to your form such as first and last name, for example, to collect more information about your subscriber. Ask for information that will help you personalize your mailings or segment your contacts.

To do this:
Go to the Content tab, located in the sidebar to your right. While keeping the left mouse button pressed, drag and drop the fields into the form. In addition to regular fields, you can also add custom fields.

To reorder the fields, hover your mouse over them in the form preview and drag them in the desired order.

To remove a field, hover your mouse over a field in the form preview area and click the trash icon to the right.

Be careful not to ask for more information than you need! If it takes too long to fill out your form, this may discourage some future subscribers.
Learn more >

Custom fields are additional fields that you can use in addition to regular fields. Personalizing their label will help you remember the information you chose to save in each one. To do so, go to the menu Icone Settings > Account settings > Custom fields.

Did you know that you can offer answer choices by using custom fields?
The cool thing about using custom fields in a form is that they be used in different ways. To collect open-ended responses, choose the text field type. To limit the possible responses, use instead field types like radio buttons, checkboxes, or dropdown menus. Every answer selected by your new subscriber will be saved in the custom field. Then, you can use this information to effectively segment your contacts or personalize your emails. Learn more about custom fields >
Select the groups in which the contacts who subscribe to your form will be added.

To do this:
1. Go to the Settings tab, located at the top left of the form editor.
2. Choose the subscription type. If you want your new subscribers to be able to choose by themselves in which group(s) they wish to register, choose Multiple choices (checkboxes) or Single selection (drop-down menu). If you don't want your subscribers to make a choice, select Hidden.
3. In the Target groups section, select the groups to associate to your form and adjust their labels, if need be.
4. Click the Forms tab at the top left of your screen to continue to edit the visual of your form.
  
  If you choose Multiple choices or Single selection, the selected groups will be displayed visually in the form. You can change the order the groups appear on your form by following the instructions here.
  
  Read our recommendations about types of subscriptions and target groups here >
When you offer your subscribers the possibility to subscribe to multiple groups simultaneously, we recommend that you use public groups. In doing so, it allows them to continue to choose their groups in the unsubscribe process. When subscribers click the unsubscribe link at the bottom of an email, if they are part of one or more public groups, they will be able to see the (public) groups to which they are subscribed and to choose from which group(s), they wish to withdraw. It is for this particular reason that it's not possible to change the public groups’ label in your forms, because the name of the group must be the same in the subscription and unsubscription process. When contacts are only part of private groups, unsubscribing is systematic and instantaneous. As soon as they click the unsubscribe link, they are removed from all groups they're subscribed to and they're added to the unsubscribed contacts' list. You will then no longer be able to send them emails. Find out more about public and private groups >
Modify your fields’ label and add, if need be, a placeholder text..

To do so:
Simply select the field to edit in the visual of your form. Then, go to the Content tab, located in the sidebar to your right, to change the label and add the placeholder text

In fields with multiple choices of response, such as the Gender field or custom fields with radio buttons, dropdowns and checkboxes, you can also edit the label of the answers and add new ones (in custom fields only).

Use placeholder text to provide a short explanation or an example of the information to enter in the field.
Customize the title of your form and its style.

To do this:
1. Click the title in your form to select it.
2. Go to the Content tab on your right.
3. Edit the title.
4. Click the Title styles panel to expand it and see the available options. You can adjust its font, size, color and alignment.
5. Open the Spacing panel to add or remove space between your title and other elements of your form.
Learn more >
Change the appearance of your form box (such as its background color and border).

To do this:
1. Go to the Design tab in the sidebar on the right, then to the Form sub-tab.
2. Click the Form panel to expand it and see the available options.
3. Change the background color of the form using the color picker under the option of the same name. Pick a color by clicking somewhere in the different shades offered or enter a code, hexadecimal or RGB.
4. Show or hide the border around the form box by turning the switch on /off. Change its color using the color picker and the line's thickness by moving the slider in the Size option.
5. Be creative! Try different things and explore the multiple options available. You have full control over the visual of your form: center it vertically, adjust the spacing around your form and its dimensions, go for square or round corners, add shading... the possibilities are endless.
Learn more >

Create effects by adding transparency to your colors!
Adjust the opacity of the background color of your form by changing the value in the A (alpha) field of the RGBA color. Enter a number from 0 to 100. At 100, the color is fully opaque. The closer you get to 0, the more the color will become transparent and you will be able to see the background of the page through the form box. You can apply transparency to several other form elements such as gradients, submit button, and fields to create stunning effects. Have fun!
Customize the fields’ style (e.g.: their appearance as well as the color, font and size of their text and labels).

To do this:
1. Go to the Design tab in the sidebar on your right, then open the Fields sub-tab.
2. Click the field preview, in the Fields styles panel, to choose a predefined style.
3. Then, if needed, access the advanced options by clicking the Customize fields’ styles button to adjust items separately such as the label position, the roundness of the corners, the borders and the shadow.
4. Go to the Label and Fields panels to customize the text style (color, font and size).
5. Go to the Fields panel to change the background color of the fields.
Learn more >

If the labels outside the fields look too close to them, increase the Line height value in the Label panel.
Personalize the page behind your form by adding, for example, a background image

To do this:
1. Go to the Design tab in the sidebar on your right, then open the Form sub-tab.
2. Activate the switch to the right of the Background Image option.
3. Click the Choose an image button to select a picture. To use one of your own images, choose My images. If you don’t have one ready, select Image library and enter a keyword to find one that suits your needs. Images in the library are free of charge and copyrights.
  
  By default, the image you chose will cover the whole page. Uncheck this option to make it a tile or change its size.
It is also possible to customize the background color of the page and add a gradient to it. You can even use all of these effects simultaneously. Learn more >
Add your logo in your form.

To do this:
1. In the sidebar on your right, open the Content tab.
2. Click the Others panel to expand it.
3. While keeping the left mouse button pressed, drag and drop an Image element to the appropriate place in your form.
4. Click the Image row in your form to select it.
5. Click the Choose an image button in the sidebar, then choose My Images.
6. If your logo is already in your account files, go to the next step. If it isn’t, to add it, click the Upload button located at the top left of the box. Browse your folders until you find your image, then double-click it to download it.
7. Back in your Images folder, locate your logo preview and double-click it to add it to your form.
8. Open the Image styles panel, in the sidebar, to change its dimensions, the top and bottom spacing as well as its alignment. You can also add a shadow or round corners.
9. Go to the Attributes panel to add a link to your website on your logo.
Learn more about adding images >
Change the label of the button and customize its style.

To do this:
1. Click the button in your form to select it. Go to the Content tab to change its label.
2. Open the Button styles panel to change the appearance of the button's text (font, size, and color) and its styles (rounded corner’s radius, background color, border and shadow).
3. Go to the Spacing panel to change the button's dimensions and its alignment. The button can also have the same width as the form by checking the Full width option.
Get inspired by our different examples of buttons here >
Save your form by using the button at the top right of your screen.
Get the form’s link (or code)

To do this:
1. Click the </> Get link (hosted form) or </> Get code (iFrame form) option.
2. Copy the link or code that will appear in the new window.
Test your form.

To test a hosted form: simply paste the form link into a new tab in your browser and fill out the form.
To test an iFrame form: paste your form code into the HTML of a test page on your website or copy and paste the form url (you’ll find it in the “src” attribute in your iFrame code) into a new tab in your browser.

Don't forget to confirm your subscription by clicking the button in the subscription confirmation email. Your email will be added to your subscription form’s groups only after that action is taken

Find out more tips on how to properly test your form here >

To see what your form will look like on different platforms, switch between the full screen and mobile view while you’re in the form builder. To do so, press the Desktop and Mobile switches, located on top of the form preview. Any changes you make in either of the previews will be applied for both. These options are only available for hosted form.
Post your subscription form on your website and/or share it on your social media.

If you have created a hosted form, all you have to do is add the generated link to the different places where you want to share it (e.g .: on a subscription button on your website, on Facebook, in your email signature, etc.)

Need help integrating your iFrame form on your website? Read our tips here >