WP Popup Plugin (CMP) + Forms Builder Add-on - Use Case - Adding Popup Forms to Your Site


Use Case - Adding Popup Forms to Your Site

Back to User Guide

This guide requires:


Introduction

WP Popup Plugin allows you to show different kinds of popups on your website.

Use Case Front-End

Example of the popup with the form that the user needs to fill in:

Example of the popup with the form - WordPress Popup Form
Example of the popup with the form

Example of the email with user's information: 

Example of the email notification with info which the user filled in the popup form  - Lead Generation Plugin
Example of the email notification with info which the user filled in the popup form

Use Case Assumptions

In this example use case guide, we'll cover how to create and display WP popup form on your site.

We consider that you have already bought the plugin and addon, but not installed them yet. 

It follows:

Installing the Plugin

The process is the same for all CM plugins.

CreativeMinds Customer Account Dashboard - Downloads tab
CreativeMinds Customer Account Dashboard
  • Download the plugin from your customer dashboard.
  • Log in to WordPress and navigate to the WordPress Admin  → Plugins settings.
  • Click on Add New.
  • Activate it and add the license.

Learn more: Getting Started - Plugin Overview


Plugin Settings

First, let's start with the configuring the WP Popup plugin and add-on. Navigate to Admin Dashboard → CM Pop-Up banners for WordPress PRO → Settings.

Navigation to the plugin settings - Popup Campaign Plugin
Navigation to the plugin settings

There you can find two tabs.

General

First tab is General. The options are:

General plugin settings - WP Popups
General plugin settings
  • Collect Statistics - Enable this option to collect the statistics about views and clicks for popup campaigns.
  • Custom Post Types - Select post types on which you want to display popup campaigns. Showing a specific campaign on a custom post type also depends on each campaign settings. 
  • Allow scripts in editor - If enabled, the invalid HTML tags and tag attributes will not be stripped.
  • Select max width for mobile devices - Allows to set the max popup width for mobile devices. Campaign popups can have different dimensions on devices smaller than this value. Will apply to all popup campaigns.

Form Builder

Second tab is Form Builder - it is displayed only when the Popup Forms Builder Add-on is activated. Here you can configure the labels that appear in forms:

Popup Form Builder Settings - Timed Popup WordPress Plugin
Popup Form Builder Settings
  • Submit button text - Displayed in the form.
  • Success message - Displayed when the form is successfully submitted.
  • Error message - Displayed when an error occurs during submission.

Click the button Save Changes after editing the plugin settings.

Building a WP Popup Form

Next step - we need to create a form that will be displayed in the popup. To create it, navigate to Admin Dashboard → CM Pop-Up banners for WordPress PRO → Forms. Note: this menu item is displayed only when the Popup Forms Builder Add-on is activated.

Navigation to Popup Forms Builder - Best WordPress Popup Plugin
Navigation to Popup Forms Builder

You can see the list of all created by you forms on that page. You can filter, search them and apply bulk actions. Hovering the mouse near their title shows shortcuts.

To create a new one, click the button Add Form above the table.

Adding new form for a popup - WordPress Popups
Adding new form for a popup

In the middle of the page you can see a few blocks for configuring the form:

Popup Form Builder - WordPress Plugin Popup
Popup Form Builder

First, add the title to the relevant field. This is for internal use only, it will not be displayed on the front-end.

Popup Form Title - WordPress Popup Form
Popup Form Title

Next box is Form. This is where you can add and customize different types of fields. Enter the title for the form that will be displayed on the front-end in the field Heading text.

Form Builder Area - Lead Generation Plugin
Form Fields Area

To add fields to the form, drag needed fields from the list on the right and drop them in the Form Fields area.

Drag-and-Drop a field to the form - Popup Campaign Plugin
Drag-and-Drop a field to the form

All fields have a menu in the top right corner where you can EditCopy or Remove the field:

Field menu - WP Popups
Field menu

The following settings are available for all fields:

  • Required - To mark a form field as required, check the box at the very top of the field settings.
  • Change Label - This option changes the label for the field. Keep this short and descriptive.
  • Field Description - With this option you can add additional information about the field. The text is displayed as a tooltip when the visitor hovers over the field.
  • CSS Class - You can change the style of your field to better match your WordPress theme by adding custom CSS classes. Classes needs be separated by a space. Note: It is not recommended to remove existing classes. Only remove these if you have a custom design that you want to use instead.
  • User Meta Key - This key is a unique identifier that sets fields apart. For instance, two separate text fields will be differentiated by their Meta Key. Note: Only the admin can see it and it's recommended to change this to something more easily remembered. The key can include alphanumeric characters and underscores.

Some fields can have additional fields, we will consider them later. 

Form Field Types

Now let's add the fields to our form.

Text Input

This field is for short text information. It has the following additional fields:

  • Placeholder
  • Default Value
  • Type
  • Max Length

Let's make the first field required, where the user should enter his name.

Field Settings - Timed Popup WordPress Plugin
Field Settings

And let's add the second Text Input field that will ask the user to enter an email address. To add an email validation, we choose the email option in the dropdown Type.

Field Settings - Best WordPress Popup Plugin
Field Settings

Text Area

The field Text Area is designed for longer text content than the field type Text Input. So, let's add a field, where the user can provide some short info about himself. This field has the same additional fields as in Text Input, plus one more field - Rows, which lets limit the amount of allowed rows.

Text Area type field - WP Popup Plugin
Text Area type field

Number

The field Number allows to enter the info that contains only digits. Let's add for entering the phone number. You can also use additional fields Default Value, Min, Max and Step in cases when you need to limit some specific range - let's keep these fields empty for our case.

Number type field - WordPress Popups
Number type field

Select

The field Select allows users to choose answers from the provided list. If you check the box Allow Multiple Selections, the user will be able to choose more than one option from the list. Otherwise the list will look like a dropdown where the user can choose only one of the options.

Select type field - WordPress Plugin Popup
Select type field

The admin can add any amount of possible options by clicking on the button Add Option + or delete not needed options by clicking on the X-button for the relevant option. Each option has two important input fields - Label and Value. The text in the Label field will be shown in the select list. You can also choose any option as predefined.

Radio Group

Next field that we add is Radio Group. It allows users to choose one of the provided options in the radio buttons list. The same as in the previous field, the admin can add any amount of possible options by clicking on the button Add Option + or delete not needed options by clicking on the X-button for the relevant option. You can also choose some option as predefined.

Radio Group type field - WordPress Popup Form
Radio Group type field

This field has two more additional options:

  • Inline - If enabled, the radio buttons will be displayed in horizontally. Otherwise, the list will be displayed vertically.
  • Enable "Other" - If enabled, the option "Other" will be automatically added to the end of the provided options.

Let's enable both of these options for our case.

Checkbox Group

The field Checkbox Group lets users choose a few options from the provided list. The field has two additional fields as in the previous field - Inline and Enable "Other", and one more option - Toggle. If Toggle is enabled, the list will look like a list of switches, otherwise it will look like a list of checkboxes. Let's enable this option for our case.

Checkbox Group type field - Lead Generation Plugin
Checkbox Group type field

The same as in the previous field type, the admin can add any amount of possible options by clicking on the button Add Option + or delete not needed options by clicking on the X-button for the relevant option. You can also choose some options as predefined.

Date Field

One more type of field that you can add is Date Field. It allows users to choose the date in the calendar. Let's add it to our form to ask users provide their birthday date and make it required.

Date type field - Popup Campaign Plugin
Date type field

Changing the Order of Fields In the Form

You can change the order of the added fields by simple dragging them and dropping to the needed place. So let's change the order of some of them.

Changing fields order in the form - WP Popups
Changing fields order in the form

Email Template

Next box is Email. Here you can edit the email template that will contain the info that users provide, and here you need to the email address where to send the collected info. It has 3 fields:

  • To - Here you set the email for sending collected information.
  • Subject - Here you can edit the email subject.
  • Message Body - Here you can edit the email body. Important: The email body must contain the shortcode [cm_popflyin_fields] as it will be replaced by the collected information.
Email template of the form - Timed Popup WordPress Plugin
Email template of the form

Now click the button Publish to create the form.

Publishing the form - Best WordPress Popup Plugin
Publishing the form

Each created form has a shortcode that you need to add to the popup for displaying the form on the front-end.

You can find this shortcode in two ways:

1) On the page of creating/editing the form, in the metabox Shortcode. For the convenience, it has the button Copy that you can use for copying the shortcode.

Popup Form Shortcode - WP Popup Plugin
Popup Form Shortcode

2) In the table with the list of created forms, you can find a shortcode for each form:

Popup Form Shortcode - WordPress Popups
Popup Form Shortcode

Now let's head to creating the popup campaign. Navigate to Admin Dashboard → CM Pop-Up banners for WordPress PRO → Campaign → Add New Campaign.

Adding new popup campaign - WordPress Plugin Popup
Adding new popup campaign

On the Add New Campaign page, first you need to give a name to the campaign in the field Add Title.

Popup campaign title - WordPress Popup Form
Popup campaign title

Second step - you need to create a banner in the box Advertisement Items. You can add any number of banners using the button +Add Advertisement Item. For our case with the form it's enough to have only one banner.

Creating a popup banner - Lead Generation Plugin
Creating a popup banner

You can add the form to the banner in two ways.

1) Paste the shortcode that you've copied earlier into the Content area.

2) Click on the button Add Form above the Rich Editor and choose needed form in the list - the relevant shortcode will be added automatically:

Adding form to the popup banner - Popup Campaign Plugin
Adding form to the popup banner

Next step - we need to configure campaign options in the box Campaign - Options. For this use case we will need only a couple of them.

First - under the tab Basic Visual let's choose the Pop-Up type of the popup in the dropdown Type.

Popup Basic visual settings - WP Popups
Popup Basic visual settings

Second - under the Activity tab let's enable displaying the campaign on all pages by checking the box Show on every page.

Popup Activity settings - Timed Popup WordPress Plugin
Popup Activity settings

Then click the button Publish to create the popup campaign.

Publishing created popup campaign - Best WordPress Popup Plugin
Publishing created popup campaign

Learn More

There are lots of different options for customizing the appearance and behavior of the popup campaign. You can learn more detailed about the whole process of configuring the campaign in this use case guide: WP Popup Plugin (CMP) - Use Case - Adding Popups With Image, HTML and Video to Your Site

The campaign with the form is created, now let's see the result on the front-end.

When any page on the site is loaded, the popup with the form will appear. The user fills in needed information and clicks the button Submit.

Filling the created popup form on the front-end - WP Popup Plugin
Filling the created popup form on the front-end

After that, the user's information will be sent to the email address that you've set: 

Email notification with info from the filled popup form - WordPress Popups
Email notification with info from the filled popup form

End Result

Following instructions found in the plugin and guides, you should be able to create and display forms in popups on your site.

Use Case Front-End

Example of the popup form that the user needs to fill in:

Example of the popup form - WordPress Plugin Popup
Example of the popup form

Example of the email with user's information: 

Example of the email notification with info which the user filled in the popup form - WordPress Popup Form
Example of the email notification with info which the user filled in the popup form

More information about the WP Popup Plugin

Other WordPress products can be found at CreativeMinds WordPress Store

Let us know how we can Improve this Product Documentation Page

To open a Support Ticket visit our support center
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.