If you click on the Block Forms menu entry you see an overview of your current existing block forms.

Once you have enabled the plugin you can find a new menu entry “Block Forms” in the Newsletter menu.

Click on “Add New” to create a new Block form.

Select a template

You now can give your form a name and start with one of the predefined patterns.

If you close the modal Mailster will start with a basic form only containing the email address field and the submit button.

Adding/Removing Form Fields

You can add additional fields to your form by adding them like other blocks in the Block editor. Click on the plus sign at the very top to get a list of available blocks.

Not all blocks are supported inside the form.

Customize Form Fields

There are several ways to customize your form. The forms will inherit the styles of your current theme.

Labels

Define a label for the field.

Inline Labels

Enable this option will display the label inside the input field.

Required Field

This makes this field required. The email address is always required. The validation of the fields happens on the server side.

Show asterisk

Enable an asterisk (*) after the label on the required fields

Use native Form element

By default, an email is used type="email" for its fields. This is recommended for accessibility. If disabled forms are always using type="text".

Some sections are may not available depending on your WordPress version and used Theme.

Width

Define the width of the element. Since the form uses Flex-box for the layout elements will show up in one line if the width is reduced to a certain point.

Options

Each form has several options which help you customize the look and feel of your form.

To access the current form options click on “Form” in the inspector.

Form Name

Define the name of your form. This is useful to recognize them at other places on your site.

Enable double op in

All subscribers who sign up will get a confirmation message where they have to confirm their email addresses.

GDPR compliant

enables a dedicated checkbox block on your form which must be checked in order to submit the form. This makes sure you get the consent of your subscribers to actually send emails to their email addresses. While this is required by law for all European citizens

Merge Data

Allow users to update their data with this form. Data like tags and lists will get merged together. This is useful if you have multiple forms on your site and people can sign up at various places to different lists.

Redirect after submit

Enter an URL to redirect people to a certain address after they have submitted the form.

Edit Error/Success Messages

Clicking this button reveals the hidden messages block to define the look and content of error and success messages.

Double Opt-in/Single Opt In

Define the content of the email confirmation message where people can confirm their email address. (Only if double-opt-in is enabled on this form)
You can use placeholder tags like {firstname} in all of the fields (except redirection)

Subject

The subject of the email.

Headline

The extra headline above the content of the email.

Content

The actual content of the email. Must include a {link} tag.

Link text

The text of the link used in the content.

Redirect after confirm

You can redirect users to a specific URL once they click the confirmation link in the email.

Lists

You can define which lists people get subscribed to if they submit the current form. While you can not use any list here it’s recommended to have at least one list checked.

Users Choice

Decide if users can decide which lists the subscribe to. If checked a new block with selected lists will get added to your form. If unchecked users will get subscribed to all checked lists.

Form Styles

Apply some basic styling to your forms here. You can define a text color (Color) and a background color. Sometimes a CSS rule with higher specificity will overwrite this setting.

Input Styles

Define the style for your form elements. While you can do this for all form elements globally you can edit the styling of each individual element as well by clicking on it and choosing the Input Styles options of that particular form element.

Custom CSS

Define additional CSS for your form here. Use the General tab to apply CSS for every device, Tablet only for tablet-sized screens, and Mobile for mobile screen resolutions.

The Selectors drop-down will help you find the right selector for the most common elements of Mailster Block Forms.

All selectors will be prefixed to only get applied to your current form to not affect other elements on your website.

Placement

The placement option lets you define where and when your form should get displayed.

Currently, you can display the form inside your content (blog post, page content, product description etc.)

There’s an explicit way and an implicit way to display a form. The most commonly used is the implicit way where you define conditions and Mailster will determine – based on content type, time, and user properties – to display the form or not.

In Content

This option helps you to display the form in your content. This is useful if you like to collect leads from your blog posts or on your product pages.

Popup

Display your form as a popup. This option gives a lot of attention and users are more likely to subscribe to your newsletter.

Display Options

Define on which pages you like to display the form.

Triggers

If you use a popup form you have to decide how the popup gets triggered.

Trigger after delay

Show the form after a certain time on a single page. The timer will be reset if the page gets reloaded

Trigger after scroll

Show the form after a certain scroll position in percent is reached. 0% is the very top of the page and 100% is the very bottom of the page

Trigger after click

Show the form after the user clicks an element with a defined selector. Read more about selectors here

Trigger exit intent

Show the form after the user moves the mouse outside of the page. This often indicates leaving the page.

Schedule

Define time frames when the form gets displayed. This is useful if you have a promo running for a certain amount of time and don’t like to have signups outside this time period.

Define the start and the end date when the form should get displayed. If you don’t set any schedule the form will get displayed if the conditions in Display Options meet

Appearance

Define further options for how your form appears on your page. These settings are specific to the current display form.

Tagged: