Page Designer Modules

  1. Home
  2. Support
  3. Page Designer Modules
  4. Newsletter and Email Opt-in Module with the Website Page Designer

Newsletter and Email Opt-in Module with the Website Page Designer

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!

Something missing? Contact us
Was this article helpful to you? Yes No

How can we help?