Thursday , June 20 2024
Home > Magezon Extensions > Blue Form Builder Tutorials > How to Create Newsletter Signup form in Blue Form Builder (Part 2)

How to Create Newsletter Signup form in Blue Form Builder (Part 2)

Create Magento 2 newsletter signup form

Newsletter signup form is a great way to keep customers up-to-date with your business.

In the first part, we’ve looked at the importance of newsletter signup form as well as how to create this kind of form with Magento 2 Blue Form Builder.

In today’s article, we’ll focus on the second part with the following content:

This is the most common position to insert a newsletter signup.

– First, navigate to Content > Blue Form Builder > Widgets. Then on the upper right corner, click Add Widget button.

Newsletter signup form _ Add new widget

– You will land on this page:

Newsletter signup form _ Widget settings
  • In Type field, choose BlueFormBuilder form.
  • In Design Theme, choose the theme of your website.
  • Click Continue to move to this page:
Newsletter signup form _ Widget settings with 2 parts

– There are 2 parts: Storefront Properties and Widget Options

Storefront Properties

– Let’s look at the first section:

Newsletter signup form _ Storefront Properties _ Section 1
  • Widget Title: enter widget title.
  • Assign to Store Views: choose store views to insert the form.
  • Sort order: enter a number so that if there are 2 or more forms in the same position, the one with smaller number will come first.

– In the second section Layout Updates, you will choose pages and position to insert newsletter signup form.

Newsletter signup form _ Container in layout update for page footer
  • Display on: choose page to insert form. With this kind of form, we often choose All Pages.
  • Container: choose position. In this case, we choose Page Footer or Page Footer Container.

Widget Options

Newsletter signup form _ Widget Options for inserting from at page footer

In this section, you just need to pay attention to these settings:

  • Click Select Form to select Newsletter Signup form.
  • In Display Type field, there are 4 types of forms in a drop-down list. For newsletter signup form, we choose Inline Form.
  • Width: the form width.

Remember to save after finishing.

Now let’s see how it looks on frontend:

– If you choose Page Footer:

Newsletter signup form _ Add form at page footer

– If you choose Page Footer Container:

Newsletter signup form _ Add form at page footer container

2. As popup

Basically, it is the same as inserting form at page footer. But here are the differences:

– In Layout Updates section of Storefront Properties part, choose any position for Container field (see the below image):

Newsletter signup form _ Container in layout updates for popup type

– In Widget Options, choose Popup Form for Display Type field:

Newsletter signup form _ Widget options for popup

Then configure other settings:

  • Width: the form width.
  • Button Text: the text inside the popup button.
  • Button Align: where to insert the button.
  • Show Popup Automatically: if enabling this function, the form will auto pop up without customers clicking the button.
  • Show after X seconds: after how many seconds the form will auto pop up.
  • Cookie lifetime in X seconds: after how many seconds the form will auto pop up again.

Other configurations include Custom Class, Button Color, Button Color on Hover, Background Color, Background Color on Hover, Button Font Size(px).

Here is how the form looks on frontend store:

Newsletter signup form _ Popup type

Import email list to 3rd-party services

Now that you have collected customers’ email, you might want to create an email list and import it into email marketing services such as MailChimp.

To do that, you can follow these steps:

– Go to Content > Blue Form Builder > Manage Forms. Find and open newsletter signup form in the grid.

Newsletter signup form _ Open newsletter signup form

– Open Settings > Advanced. You will see the EXPORT SUBMISSIONS button at the bottom. All the submissions will be listed in a CSV file

Newsletter signup form _ Export form submissions

If you are using MailChimp, you can install our MailChimp plugin so that all submitted emails will be automatically added to your email marketing lists.


In this article, we’ve showed you how to add newsletter signup form at page footer and import submitted emails to email marketing services such as MailChimp in Blue Form Builder. If you have questions or need support, feel free to leave us a comment below.

Try FREE Blue Form Builder demo today

Create whatever type of Magento form in any style you want just in minutes. Just by drag & drop.

About Trang Vu

Trang Vu
Min is a content marketer with more than 2-year experience in Magento. She has great patience and high concentration ability to deal with every pressure at work.

Check Also

Limit the number of Blue Form Builder form submissions

How to Limit the Number of Blue Form Builder Form Submissions

Normally, your website’s forms are available all the time so that users can access and …

Leave a Reply