Newsletter: Subscribe Forms

Newsletters > Subscribe Forms

Newsletters > Subscribe Forms

Subscribe forms lets you create forms, each with it’s own fields, settings and purpose.
Each form can then be displayed on your WordPress website for users to subscribe.

The subscribe forms builder is extremely easy to use.

 

Manage Subscribe Form

Go to Newsletters > Subscribe Forms to see an overview of all subscribe forms. You can add a new form or manage forms in this section of the plugin.

1.) Add New

Add a new Subscribe form by clicking the Add New button. It will open an overview with the form builder to add a new form. (See below more details for adding a form)

2.) Bulk Actions

Apply bulk actions by selected subscribe forms. The only bulk action available at this moment is delete.

3.) Search Forms

Search for a form in the search field provided.

4.) Title

The name/ title of the subscribe forms.

5.) Shortcode

Each form get a shortcode. You can use this shortcode anywhere on your site to show the subscribe form. e.g., "[[newsletters_subscribe form=11]]"

6.) Subscriptions

This column show the number of subscriptions per form. If you click on the number an overview with subscribers will open. You can manage subscribers in this section per  form.

 

Add a New Form

Newsletters > Subscribe Form – Add new

click to enlarge

 

1.) Form Builder

A drag and drop form builder to add and remove fields for your form.

 

2.) Settings

General Settings

Add button text, enable Ajax, and CAPTCHA for this form under general settings.

 

Confirmation Settings

Set confirmation type – Message or Redirect link to show after successfully subscribed on the form.

 

Emails Settings

Write the custom email message the subscribers will receive upon subscription or leave blank to use system default.

 

Styling settings (Form Styling, Field Styling, Button Styling, Custom HTML, Custom CSS)

 

Form Styling

1. Layout
Choose between a normal or Inline/Horizontal subscription form layout.

2. Two Columns Inside Posts/Pages
Tick the “Yes, display two columns inside posts/pages” checkbox to display two columns instead of one inside posts/pages.

3. Padding
Set the subscription form padding.

4. Title Color
Set the subscription form title color, such as when you use the widget.

5. Text Color
Select subscription form text color.

6. Background Color
Select subscription form background color.

7. Loading Indicator
Tick the “Yes, show a loading indicator on Ajax calls”, which displays an animated loading icon, such as when a user clicks on the Subscribe button.

8. Loading Icon
Set the loading icon.

9. Loading Color
Set the loading icon color.

 

Field Styling

1. Padding
Set the field padding.

2. Text Color
Set the field text color when typing.

3. Placeholder Text Color
Set the field placeholder text color.

4. Background Color
Set the background color of the field.

5. Dropdown Background Color
Set the background color of the dropdown field, which appears when you display the mailing list selection to your users (User Choice > Single).

6. Border Radius
Set the field border radius.

7. Show Label
Tick “Yes, show the label for each field” if you want to show the labels above the fields.

8. Label Color
Set the field label color.

9. Show Captions
Tick “Yes, show captions below fields” if you want to show the captions below the fields.

10. Caption Color
Set the field caption color.

11. Show Errors
Tick “Yes, show error messages below fields on validation” option to show errors below the fields when a user clicks the Subscribe button but hasn’t filled the required fields.

12. Error Color
Set the field error color.

 

Button styling

1. Full Width
Set the button to be full width.

2. Location
Set the location of the button, if Full Width is not ticked.

3. Padding
Set the button padding.

4. Background Color
Set the button background color color.

5. Background Hover Color
Set the button background hover color.

6. Text Color
Set the button text color.

7. Text Hover Color
Set the button text hover color.

8. Border Radius
Set the button border radius.

9. Border Size
Set the button border size.

10. Border Color
Set the button border color, if Border Size is above 0px.

11. Border Hover Color
Set the button border hover color, if Border Size is above 0px.

 

Custom HTML

Fill in your custom HTML code for the subscription form.

 

Custom CSS

Fill in your custom CSS code for the subscription form.

You can get a live preview of all your subscription form settings at any time by hitting the Preview button in the right upper corner of the settings screen.

 

3.) Preview

Preview the form – it will show the exact preview on how the form will look on the front end of the website.

 

4.) Embed/Codes

1. Shortcode
Put that shortcode on a post, page or any other area that supports shortcodes to output the subscribe form.

2. Before/After Post
Automatically display this subscribe form before/after all posts.

3. Widget
Go to Appearance>Widgets to add a widget of this subscribe form.

4. Hardcode
You can use this PHP code inside a theme or another plugin.

5. Offsite URL
Use this URL in 3rd party applications like Facebook or an opt-in plugin.

6. Offsite HTML
Copy this HTML code and use it on an external website, an opt-in/popup plugin, etc.

 

5.) Subscriptions

In this section it will show a manage subscription screen where you can manage all subscription per form.

 

6.) Switch Form

Switch to one of your other forms by clicking on it in the dropdown menu provided.

 

7.) Form Name

Add a name / title for your form.

 

8.) Shortcode

A shortcode for each form will be generated automatically. Use this shortcode on any page on your website to show this form. e.g., [[newsletters_subscribe form=11]]

 

9.) Use two columns inside posts/pages

Tick this option on/off to see the subscribe columns in one or two columns inside posts/pages. You will notice changes directly in form builder.

 

10.) Form Fields

The current fields in your form. You can drag more fields from section 9 to this section and reorder them by drop and drag. Mailing list and email is required for each form.

 

11.) Custom Fields

Drag and drop these fields to the form builder. These fields can be created under Newsletters > Custom Fields.

 

12.) Save

Save the form after building it with the form builder.

 

Configure a field

Configure a field in the form builder, by clicking the arrow to expand the box.

It’s basic details of the custom field. It will automatically use the settings per field specified when creating the field under Newsletters > Custom Fields.

You can manually change each setting per field by filling it in the fields provided in the expanded box.

Below an example of a text field (First Name)

 

Video

Watch the video of subscribe forms