The MailerLite Form Styler element allows you to take full creative control over your MailerLite forms. No more restrictions on typography, sizing, padding, colors, and button placement.
Requirements
In order to use the MailerLite Form Styler element, you should have the MailerLite plugin installed and an account with MailerLite. You will need to create forms you wish to use on your website in the MailerLite web application before they can be used with the MailerLite Form Styler.
After you have created forms on MailerLite, you will need to import them. Follow the instructions for the MailerLite plugin to import your forms into WordPress.
Activate the element
This element is active by default. If it does not show in the elements list of Bricks Builder you can turn in on from the WordPress admin menu. Go to the Dashboard -> Screenflicker -> Elements -> General Elements page. You should be able to see a list of all of the general elements included with Screenflicker Bricks and their current status (enabled or disabled).
Find “MailerLite Form Styler” and make sure the toggle button is enabled.
Then click “Save Settings”.
With the element enabled, load your template, page, or post in Bricks Builder.
How to use MailerLite Form Styler
In Bricks Builder, drag the MailerLite Form Styler element from the elements panel onto your page. Choose which form you’d like to display and go through the options to customize the form to your liking.
Controls
Form
Margin/Padding – Sets the margins and padding around the form container.
Max. width – By default MailerLite form containers are 100% width. Setting the max width will allow the form to be set to any size you want. Default is 400px.
Background – Sets the background of the entire form container.
Border – Sets the border around the form container.
Title
MailerLite allows you to include a title or remove an existing title in embedded forms. If there is no title, the html element will still be included in the embedded form. To remove any weird gaps due to not having a title, enable the Hide title toggle
Hide title – This toggle will essentially remove all html associated with the title in MailerLite embedded forms. Enabling it will remove the title and any empty space it would normally show if the title was simply left blank.
Margin/Padding – Sets margin and padding around the title element. Will only be available when the Hide title toggle is disabled.
Width – Sets the width of the title element. Will only be available when the Hide title toggle is disabled.
Typography – Sets font properties for the title element. Will only be available when the Hide title toggle is disabled.
Background – Sets the background for the title element. Will only be available when the Hide title toggle is disabled.
Border – Sets border properties on the title element. Will only be available when the Hide title toggle is disabled.
Description
MailerLite does a weird thing with their embedded forms where the html element (a html paragraph element) is always present in the form, whether you include a description or not. This can add a big empty space between the title and the first form element if you have no text. These controls allow you to manage (including removing that empty space) the description element.
Hide description – This toggle controls whether the description text and element should be displayed or not. Enabling this toggle will hide the description text and html.
Margin/Padding – Sets the margin and padding around the description. Will only be available when the Hide description toggle is disabled.
Width – Sets the width of the description. Will only be available when the Hide description toggle is disabled.
Typography – Sets font properties for the description text. Will only be available when the Hide description toggle is disabled.
Background – Sets the background for the description element. Will only be available when the Hide description toggle is disabled.
Border – Sets the border for the description element. Will only be available when the Hide description toggle is disabled.
Labels
Margin/Padding – Sets margins and padding around labels.
Width – Sets the width of label elements.
Typography – Sets font properties for all labels in the form.
Background – Sets the background for all labels in the form.
Border – Sets borders around all labels in the form.
Fields
Background color – Sets the background color for all input fields including text fields, textareas, dropdown, radio buttons, and checkboxes.
Border – Sets the border around all inputs.
Text
Margin/Padding – Sets margins and padding on text input fields. Margins are outside the input field and padding is inside the input field.
Width – Sets the width of text input fields.
Textarea
Margin/Padding – Sets the margin and padding around textarea inputs. Margin is outside the textarea input, padding is inside the textarea input.
Width – Sets the width of the textarea input.
Radio & Checkbox
Margin/Padding – Sets margins and padding around radio and checkbox inputs. This spacing is outside of the radio and checkbox inputs as well as the labels beside those inputs. This control does not change spacing around the input itself.
Inline label typography – Sets font properties of the label text for all radio buttons and checkboxes.
Dropdown
Margin/Padding – Sets margins and padding around dropdown menus.
Width – Sets the width for dropdown menus.
Typography – Sets the font properties of text in dropdown menus.
Button Container
MailerLite adds a container around the submit buttons. The following controls will effect that container but not the button itself.
Margin/Padding – Sets margins and padding on the element that contains the button.
Width – Sets the width of the element containing the button.
Background color – Sets the background for the element that contains the button.
Border – Sets border properties on the element which contains the button.
Button
Margin/Padding – Sets margins and padding on the button element.
Width – Sets the width of the button.
Typography – Sets font properties on the button.
Background color – Sets the background color of the button. This only accepts colors, no images.
Border – Sets the border for the button.
Box shadow – Sets a box shadow on the button element.
Align button – Sets the position of the button. Options are left and right. This only works when the button width is less than 100%.
Response Message
These controls affect the message displayed after the form has been submitted.
Margin/Padding – Sets the margins and padding around the response message container.
Background – Sets the background for the response message container element.
Title
Margin/Padding – Sets the margins and padding around the title in the response message.
Typography – Sets the font properties of the title.
Background – Sets the background for the title only.
Border – Sets the border properties around the title only.
Body Content
Margin/Padding – Sets the margins and padding around the body text of the response message.
Typography – Sets the font properties for the main message text only.
Background – Sets the background for the message only.
Border – Sets the border properties for the message text only.
Privacy Policy
MailerLite privacy policy blocks show as a block of text with a link to your privacy policy page
Margin/Padding – Sets the margins and padding around the privacy policy text block.
Typography – Sets the font properties of the privacy policy text.
Background – Sets the background for the privacy policy container.
Border – Sets the border of the privacy policy container.
Marketing Permissions, GDPR
With MailerLite, the GDPR and Marketing Permissions are displayed as a few blocks of text with some checkboxes. These controls will allow the customization of those elements.
Margin/Padding – Sets the margin and padding around the main container for GDPR and marketing permissions.
Title
Margin/Padding – Sets the margins and padding for the title only.
Typography – Sets the font properties for the title only.
Body
Margin/Padding – Sets the margins and padding for the body text only (this is the bulk of the content for these types of sections).
Typography – Sets the font properties of the body text only
Marketing Options
Margin/Padding – Sets the margins and padding for the marketing permissions section.
Checkbox typography – Sets the font properties for checkbox labels.
Description typography – Sets the font properties for description text below the checkboxes.
GDPR
Typography – Sets the font properties for the GDPR block of text.
Confirmation Checkbox
MailerLite’s confirmation checkbox is an element you can add to your forms which will confirm that the visitor has given permission to receive emails from you.
Margin/Padding – Sets the margin and padding around the checkbox and label.
Typography – Sets the font properties of the text next to the checkbox.