Before being able to send your first newsletter with MailPoet, you need to build an email list first. To do so, you need to have a subscription form. In this post, I will show you to create an email subscription form in MailPoet.
In MailPoet itself, you have two options to create an email subscription form. First, you can use its built-in form builder feature. Second, you can use a form or page builder plugin like Breakdance, Divi Builder, to Elementor Pro.
In this post, I will show you how to create the form using the first method so that you don’t need to install an extra plugin in case you haven’t done it yet.
Creating a Subscription Form Using MailPoet Form Builder
In case you don’t know it yet. MailPoet comes with a built-in form builder feature which you can use to create an email subscription form.
Its form builder is designed specifically to create an email subscription form. You can’t use it to create other form types although you can add more fields to your form such as checkbox and radio button.
You have no option to change the form action.
More About MailPoet Form Builder
The built-in form builder feature of MailPoet is sophisticated enough to create a professional form. You can add several field types to your form other than email. Here are the form field types supported by MailPoet Form Builder:
- First name
- Last name
- Text input
- Text area
- Radio buttons
- Checkbox
- Select
- Date
However, since the form builder is designed specifically to create an email subscription form for MailPoet, you have no option to change the form action. All form submissions will be sent to the MailPoet table on your WordPress database.
Also, you can’t remove the email field from your form, even if you create the form from scratch.
Regarding the placement, MailPoet offers five options where you can display your form:
- Below pages/posts
- Fixed bar (at the top)
- As a popup
- As a slide-in
- Using shortcode
MailPoet utilizes Gutenberg to create and the design the form. So, you need to be familiar with Gutenberg to be able create a form with its form builder.
In addition to form fields, you can also add other elements like text, image and divider to your form.
Start Creating a Subscription Form Using MailPoet Form Builder
You have two options to create a new subscription form using MailPoet form builder. First, you can create the form from a pre-made template. Second, you can start everything from scratch.
In this post, I will show you how to create a new form from scratch so you will understand how the MailPoet form builder works.
To get started, go to MailPoet -> Forms on your WordPress dashboard and click the New Form button.
Since we want to create the form from scratch, you can click the start with a blank form button on the next step.
You will be redirected to the Gutenberg editor after clicking the above button. As you can see, the email field is already in place. You can’t remove it as the MailPoet form builder is designed specifically to create an email subscription form as I have mentioned earlier.
If you want to add more fields, you can click the plus button and select the field type you want to add.
Adding a New Form Field and Element
As I have just mentioned, you can simply click the plus button to add a new form field or other elements to your form. A list of the allowed fields/elements will show up after you click the button. Simply select the one you want to add.
To show all of the allowed elements, you can click the Browse all button on the above element inserter.
To set the arrangement of the form fields, you can use the arrow icons to move a field (or other elements) upward or downward.
Adding a Custom Form Field
There are 9 form field types you can add to your form in total. But by default, you can only see the First name and Last name on the elements list.
To add fields like radio buttons, checkbox, and select, you can click the Create Custom Field button on the elements panel. To show the elements panel itself, you can click the Browse more button on the element inserter.
Select a field you want to add from the dropdown. Afterward, you can set the field name, field label, and validator (optional). Click the Create button to add the field to the form.
Pro tip: You can use the Columns element for a complex form layout.
Styling Up the Form and the Elements
If you already familiar with Gutenberg, styling up the form won’t be a serious problem. You can go to the settings panel on the right side to style up the form and its elements.
There are two tabs on the settings panel as shown below:
The Form Tab
This tab hosts the settings and styles of the form as a whole. From this tab, you can set things like form background, space between fields and elements within the form, typography, and so on.
You can open the Styles settings block to apply the available styling options.
The Block Tab
This tab hosts the settings and styles of individual elements within the form. From fields, image, text, to button.
To start styling up an element, you need to first click the element you want to style up on the Gutenberg editor to turn it into an editing mode. Next, you can open the Styles settings block to access the available styling options.
Advanced Style Up via Custom CSS
If you want to achieve a certain style and the option it’s not available by default, you can use CSS snippet.
For instance, the following CSS snippet will place the submit button to the center in a non-full width size.
display: inline-block;
position: relative;
left:50%;
transform: translate(-50%);MailPoet already provides all the CSS classes of the form elements so you don’t need to inspect them yourself.
To access the custom CSS feature in MailPoet, you can open the Custom CSS block under the Form tab on the settings panel.
Once you are done styling up the form, you can click the Preview button to preview the form. You can use the dropdown on the top-left to preview the form on different locations.
Applying the Form
Once you are done creating your form, the next step is to apply it to your website. But first, you need to select a list.
A list itself is a kind of group which you can use to gather email addresses. By default, MailPoet comes with a list called Newsletter mailing list.
To select a list, you can go to the Form tab on the settings panel and open the Settings block. Select the list from the dropdown.
From the Settings tab, you can also give your form a name and set the message to be shown once the form is submitted.
Setting the Form Placement
As I mentioned earlier, you can display your form below the page (or post), as a notification bar at the top, as a modal popup, and as a slide-in popup.
MailPost allows you to set multiple placements for a single popup. In other words, the same popup can be displayed below the post and as a popup.
To select a placement location, first, click the Form Placement block under the Form tab on the settings panel. Select a location you want.
Switch the Enable button on.
As you can see, there are some settings you can set. Such as location (pages and posts), form width, delay, and so on. Set the settings according to your need and click the Save button.
Done!
Your form should now show up on the location you have set.
Summary
MailPoet, a popular newsletter plugin for WordPress, has a built-in form builder feature which you can use create an email subscription form. You don’t need to install an extra plugin only to create a subscription form.
The form builder of MailPoet uses the Gutenberg editor to create the form. Plenty of styling options are available to make the form match your website design. To create the form itself, you can use a pre-made template or start from scratch.
Once the form is done, you can set a location to display it. Whether beneath the post, beneath the page, at the top bar, or as a popup.
