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.
The contents tab includes the following options:
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.
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.
Here you can enable using a single name in the form, or whether the first and last name should be included.
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.
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.
Add a background color, gradient, image or video to your module.
You can modify the module’s label for easier identification.
Customize the design
With these settings, you can customize your design.
Define the position of the body and form and pick which fields you wish to be displayed fullwidth.
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.
Control how your text is displayed in terms of alignment, color (dark or light), and text shadow.
Define the font, color, alignment, line height, and other settings for the title.
You can also adjust the font settings for the field text.
Customize the font settings for the body text.
Result Message Text
Customize the font settings for the result message text.
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.
Adjust the width of the module.
Customize margins and padding sizes.
Define the border’s corner, style, color and width for your module.
Here you can enable box shadow.
Adjust the hue of the module as a whole.
Give an animation style to the module, like fading or sliding when it appears.
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.
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!