A newsletter lets you provide regular content to your users and its also a way to grow your email list. The Page Designer lets you insert a newsletter email opt-in module where your visitors will be able to subscribe to your newsletter list.
Go to the Page Designe and add a new module by clicking on the gray plus sign. Choose the Email Optin Module from the list. If you prefer to find the module automatically, it’s also possible to type it in the search bar on top.
Define Contents
The contents tab includes the following options:
Text
Define the title of the signup form, as well as the subscribe button text, the module content that will appear below the title, and the footer text that will show below the subscribe button.
Email Account
This is where you can define the mailing list provider, between the supported options that appear on the dropdown selection. Then, you can select a list from your email provider to add customers to. You can check the newsletter integrations section for more information on each supported newsletter integration.
Fields
Here you can enable using a single name in the form, or whether the first and last name should be included.
Success Action
When the user submits the form, select if a success message is displayed and which is it, or if the user is redirected to a URL that you can define.
Link
If you want that the module opens a new URL when someone clicks on it, paste that link here and decide if the link will open in the same window or tab.
Background
Add a background color, gradient, image or video to your module.
Admin label
You can modify the module’s label for easier identification.
Customize the design
With these settings, you can customize your design.
Layout
Define the position of the body and form and pick which fields you wish to be displayed fullwidth.
Fields
Adjust the background color, the focus (when a user focuses the field with the mouse) background color and text color, the corners, borders, and shadow.
Text
Control how your text is displayed in terms of alignment, color (dark or light), and text shadow.
Title Text
Define the font, color, alignment, line height, and other settings for the title.
Field Text
You can also adjust the font settings for the field text.
Body Text
Customize the font settings for the body text.
Result Message Text
Customize the font settings for the result message text.
Button
Define the button alignment. If you want to enable button custom styles, you can adjust the button’s text size, text color, background color, border width, border color, border radius, letter spacing, font settings, icon settings, text shadow, and box shadow.
Sizing
Adjust the width of the module.
Spacing
Customize margins and padding sizes.
Border
Define the border’s corner, style, color and width for your module.
Box Shadow
Here you can enable box shadow.
Filters
Adjust the hue of the module as a whole.
Animation
Give an animation style to the module, like fading or sliding when it appears.
Advanced settings
Here you can define whether the IP address of the user should be included in the data you send to your email provider. Using this tab you are also able to insert CSS code, define a button rel attribute, select device visibility, and manage transitions. Check this guide to know more about how to use these settings.
Use Case
Let’s create an email opt-in form.
We are using the following options:
Title: Subscribe to our newsletter!
Button Text: Subscribe
Description: Join our newsletter list to get the latest news and updates.
Footer: We promise not to spam you!
Use Background Color: #e8e8e8
Layout: Body on Top, Form on Bottom
Form Field Background Color: #f7f7f7
Focus Background Color: #ffffff
Focus Text Color: #ffffff
Fields Border Width: 2px
Fields Border Color: #000000
Use Focus Border Color: NO
Text Color: Dark
Text Orientation: Center
Title Text Size: 30px
Field Text Color: #a8a8a8
Field Text Alignment: left
Body Text Size: 14px
Body Text Color: #000000
Use Custom Styles for Button: YES
Button Text Size: 20px
Button Text Color: #000000
Button Background Color: #fffd6b5
Button Border Width: 2
Button Border Color: #000000
This is how it looks!
