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 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.
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.
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.
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.
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.
In the popup that appears, select the form you created for the content upgrade and click “Insert”. A new Ninja Forms shortcode should appear.
Step 3: Set Targeting
By default, Popup Maker will open our popup on all pages, posts, products, and everywhere else. To adjust where the popup opens, 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.
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.
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.
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.
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.
Once clicking the “Popup Trigger” option, select which popup to open in the next menu.
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.
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.