popup-maker-final-example

Content Upgrade Popups Using Ninja Forms

Content upgrades are a great way to convert blog post visitors to email subscribers. Let’s look at how we can set one up using Popup Maker and Ninja Forms.

Step 1: Create Ninja Form

If Ninja Forms is not already installed, go to “Plugins” -> “Add New” and search for “Ninja Forms.” After installing, make sure the plugin is activated.

Go to the “Ninja Forms” admin menu and click “Add New.”

Ninja Forms dashboard with arrows pointing to the button that says "Add New".

Ninja Forms contains many form templates to help you get started. Since we are only using a few fields, I am just going to click on “Blank Form”.

To keep the form small, I am only going to add an Email field and a Submit field, as shown in the image below.

Ninja Forms "Form Fields" editor with an Email field and a Submit button.

Next, over on the “Emails & Actions” tab, we need to set up our success message.

Ninja Forms has many direct integrations with the most popular email providers, such as MailChimp and ConvertKit. If you are using one of those integrations, you can add that here. Then, you should add “Thanks! Check your email to confirm your subscription” to the success message and remove any email actions here since you will be delivering the content upgrade in your email provider.

However, if you do not have an email provider or Ninja Forms does not have a direct integration, you can still collect emails and provide the link to the content upgrade, which is how I am going to do it.

I edited the success message to include a link to the content upgrade and then added an email to be sent to the user that also contains a link.

Ninja Forms "Emails & Actions" tab with success message, user email, and store submission actions.

Since our form will appear inside a popup with other content, I recommend disabling the form title from appearing. To do so, go to the “Advanced” tab and select the “Display Settings.”

One of the first options should be “Display Form Title” which you can turn off.

Ninja Forms' "Display Settings" with the "Display Form Title" option turned off.

Now, click “Publish” to publish your form.

Step 2: Create Popup Content

Next, go to the “Popup Maker” menu and click “Add Popup”. Alternatively, you can click the “Add New Popup” button on the “All Popups” page.

Popup Maker dashboard showing no popups. Shows arrows pointing to "Add New Popup"

On the new popup page, enter the name for the popup. The name is for internal use only so that you can find the popup in the list of popups. No site visitor will see this name.

Then, enter the title, which will be the main headline in the popup. You can leave this blank if you do not need a headline.

Next, enter the content of the popup.

Lastly, click the “Add Form” button that Ninja Forms adds right above the content editor.

Ninja Forms popup labelled "Insert Form" with a dropdown menu where you can select which form. At the bottom, has an "Insert" button.

In the popup that appears, select the form you created for the content upgrade and click “Insert”. A new Ninja Forms shortcode should appear.

Content editor showing the name, title, and content for a popup.

Step 3: Set Targeting

To set where the popup loads, we use the “Targeting” settings.

For this popup, we can target the specific post that it will be featured in. Or, if it will be included in multiple posts, we could target all posts or specific posts.

Switch to the “Targeting” tab of the popup settings. Click on the “Choose a condition” dropdown.

Popup Maker's "targeting" tab. Contains a dropdown for a variety of conditions.

There are many conditions you can choose from, including targeting the home page, only posts, only pages, or specific pages.

For this popup, I am going to select “Posts: Selected” which will open a second text box. This second box allows us to choose a specific post to load the popup on.

Targeting conditions for Popup Maker. Shows "Posts: Selected" as the option in the dropdown that is selected.

Once selected, new “And” and “Or” options will appear. You can use these to target multiple areas of your website with the same popup. For this popup, I will not use those since I am only targeting the one post.

Step 4: Adjust Display Settings

Now that we have told the popup what pages to load on (targeting), we can adjust what the popup looks like using the “Display” settings.

Popup Maker provides many granular settings so you can fine-tune your popup. For this popup, we want a simple popup that appears in the middle of the screen.

Now, go to the “Display” settings tab. You will see “Display Presets” first. Along the top will be links for other display settings, including size, animation, and position.

To help us get started, we will click on the “Center Popup” display preset.

Popup Maker's "Display" settings with the "Display Presets" tab selected. Shows 4 optional presets to choose from.

Once clicked, a message will appear saying the display settings have been updated.

All that is left is to click the “Appearance” link. This will let us select the “theme” for the popup. Popup Maker comes with several built-in themes, and you can also create your own themes that match your site.

For this popup, I am going to choose the “Cutting Edge” theme.

Popup theme settings found on the "Appearance" tab. Currently set to "Cutting Edge".

Step 5: Publish

Now that we have our popup set up, it’s time to publish and set up the click trigger. First, click publish to save your popup.

Step 6: Add Click Trigger

Next, edit the post you are targeting with your popup. In our case, it’s my “Example Article.” We have two main ways we can add our popup.

First, we can use a link that, when clicked, will open the popup. To do, highlight some text within the block editor. In the block toolbar, click on “Popup Trigger.” This may be within the arrow icon as shown in the image.

Highlighted text in the post editor showing a few options in the block toolbar including bold, italics, and Popup Trigger.

Once clicking the “Popup Trigger” option, select which popup to open in the next menu.

Popup trigger showing dropdown labelled as "Which popup should open?".

Once selected, click the “Apply” button. Your popup is ready!

The other way to add the popup is to add the trigger to an entire block, such as the button block. To do so, add or select which block you want to open the popup once clicked.

Along the block settings to the right of the screen will be a “Popup Controls” area.

The "Popup Controls" section is within the right sidebar used for block settings.

Select which popup to open in the “Open Popup” option.

If you preview or save your post, you will see that clicking on the link or element will now open your popup.

When a visitor clicks on the link or button, the popup will open.

Once the visitor fills in the form and clicks submit, they will see the download the upgrade.

Get Notified

Get notified when we post new guides, articles, and new Popup Maker versions.