Subscribe to Download File Using Popup Maker and Ninja Forms

Overview

Use Popup Maker and Ninja Forms together to deliver a file download on form submit success. 

Correction: At +3:11, an Email action in Ninja Forms is shown that uses the wrong merge tag in the 'TO' field. The correct merge tag should be {wp:user_email}, NOT the default {wp:admin_email} tag as shown in the video.

This document describes the steps necessary to complete the setup shown in the video tutorial.

Prepare Your Site

Prepare for Popup Maker and Ninja Forms to work together by completing the following steps.

1)  Install and activate 3 plugins on your site:

The third plugin is used to add some custom JavaScript that links Popup Maker and Ninja Forms.

2)  Upload file(s) to the Media Library intended for download. Ninja Forms will be set up to link to one or more files in the Media Library.  The file(s) intended for download should be stored in the Media Library prior to the form setup.  WordPress assigns each stored file a unique URL. Copy the file URL(s) for use when setting up the form.

3)  Add a link (URL) and custom class for the file download to a page, post, or widget area.  Target the file download URL in a link added to a page, post, or widget area. In the tutorial, the link is added to a large button inside a post.  

Add a custom class to the link such as subscribe-to-download. In the classic WordPress editor, add the class to the link on the Text tab. 

In the block WordPress editor, select the block to be edited. In the editor sidebar, select Block >> Advanced to open the field labeled Additional CSS Class. Add your custom class in the field.  Set the Click Open trigger to target the custom class to trigger the popup display. 

Procedural Steps

Use the following procedural steps to navigate through the rest of the article.

1)  Use Ninja Forms to create and publish a new form.

Video time marks: 0:00 - 4:10

2)  Use Popup Maker to create and publish a new popup.

Video time marks: 4:10 -  6:10

3)  Add and configure custom jQuery/JavaScript to link the form and the popup.

Video time marks: 6:10 - 8:15

4)  Test the popup form submit and download on the front end.

Video time marks: 8:15 - 10:23

1) Use Ninja Forms to Create and Publish a New Form

Add and Create a New Form

1)  From the WordPress admin, open the Ninja Forms plugin admin and create a new form ( go to: Ninja Forms >> Dashboard >> Forms >> Add New ).

2) On the Forms menu page, select the Blank Form option.

3) On the Form Fields menu page, select and add the following fields to the form:

Field Name
 		Field Category
 Required Input?
First Name
User Information Fields
Yes
Email User Information Fields
Yes
Hidden Miscellaneous Fields
---
Submit Common Fields
---

Open the actions of the 'Hidden' field (gear icon) and change the field labeled 'Label' to 'File URL'.

[ Back to top ]

Edit the Success Message and Add a Link to the File Download

1)  Open the Emails & Actions menu page.

2)  Delete the Admin Email action as it's not needed. 

3)  Edit the Success Message action. In the Success Message row, click the gear icon ( edit ) in the Actions column. The Success Message editor will display to the right of the admin area.

4)  Customize the message as needed. Add a new line below the message to add the hidden field merge tag. The tag will be set to link to the file download URL.

5)  In the message editor, open the merge tag editor view tab ( screenshot above ). The available merge tags will display above the editor field.

6)  Point and click on the File URL merge tag for the Hidden field ( {field:file_url_{integer}} ). Ninja Forms automatically adds that tag to the message editor.

7)  In the message editor, open the HTML editor view tab (screenshot above). The message content will display as HTML.  Add a link to the text, and target the merge tag as the link source. Copy the merge tag to the clipboard for later reuse.

Note: For multiple download files, each file link can be set up to require either [1] a separate form submission to access each file; or [2] a single form submission to access all of the files. 

8)  Click the 'Done' button to close the Success Message editor.

[ Back to top ]

Add a Redirect Action to Start the Download After Form Submit

1)  From the Emails & Actions menu, select the Add New Action button ( large '+' sign ) at the bottom right corner of the screen to display all available actions (screenshot above).

2)  Select the Redirect action to display the Redirect form editor.

3)  Edit  the URL field of the Redirect action and paste the file download URL(s) from the Media Library.  For more than one file download, comma separate each URL within the field.  On form submit success, the file download will begin. 

4) Click the 'Done' button to close the Redirect editor.  A Redirect action will be added to the Email & Actions menu page.  [ The completed Redirect action is shown in the fourth row of the screenshot above. ]

[ Back to top ]

Add an Email Action to Send A File Download Link

1)  From the Emails & Actions menu, select the Add New Action button ( large '+' sign ) at the bottom right corner of the screen to display all available actions.

2)  Select the Email action to display the Email form editor.

3)  Use Ninja Forms to add the mail tag to the TO field.  Select the merge tag icon located to the right of the TO field. From the 4 option tabs displayed on the left, select the WordPress tab.  

Scroll down the list to locate the User Email option and click the item link. Ninja Forms automatically loads the {wp:user_email} mail tag into the TO field. 

Delete the default {wp:admin_email} mail tag. The User Email mail tag ensures that the email is sent to the visitor who submits the form and not the site administrator.

4)  Customize the email subject and message fields to your needs.  In the message editor, add a new line below the email message.

5)  In the message editor, open the merge tag editor view (screenshot above).

6) On the Fields option tab, select the File URL option and click the item link.  Ninja Forms will add the merge tag to the editor. 

7)  Use the cursor and highlight the File URL merge tag. Select the link icon from the editor menu.  A popup will open to set a URL on the highlighted text. Inside the popup, copy the link text ( entire File URL merge tag) and paste it into the URL field.  Select the checkbox labeled 'Open In New Window'.  Select the 'Insert' button. 

Ninja Forms will set the File URL merge tag as a link. Open the message editor HTML view tab to confirm that the link is set correctly. 

8)  Click the 'Done' button to close the Email editor.  An Email action will be visible on the Email & Actions menu page.

[ Back to top ]

Assign a Title and Publish the Form

1)  Select the Publish button to publish the form.  In the Form Title field, enter a form title and click Publish again. The form will be saved and assigned a shortcode ID ( tag: [ninja_form id={integer} ). The shortcode is visible on the Ninja Forms plugin admin page ( Ninja Forms >> Dashboard ).

2)  To change the form title, click the title on the plugin admin page.  From the form builder page, navigate to 'Advanced' >> 'Display Settings' to open the Display Settings editor. Select 'Done' to save any changes to the Display Settings. 

[ Back to top ]

2)  Use Popup Maker to Create and Publish a New Popup

The popup in this tutorial is customized as follows:

1)  The newly published form is added to the popup editor (classic or block).

2)  A Click Open trigger is set to target a custom class added to the file download link in a post. The video targets 2 classes: .subscribe-to-download, and .subscribe-to-download a. The a selector ( the link tag ) is a child selector of the parent .subscribe-to-download.

Related article:  Child and Sibling Selectors // From CSS-Tricks

3)  A cookie is set and linked to the trigger to prevent the popup from reopening after the form is submitted.

To review how to create and publish a popup, see the following article.

Related article:  Create Your First Popup -- Summary Guide

To target the page, post, or advanced targeting conditions under which the popup will be targeted for display, see the following article. If no targeting conditions for your popup are set, the popup will be activated to display on every page and post of your your site.

Related article:  'Targeting' option settings

[ Back to top ]

Add the Ninja Forms Shortcode to the Popup Editor

Classic Popup Editor

[1] Ninja Forms adds an Add Form button to the classic popup editor above the content field.  

[2] Click the button to open the Insert Form popup. 

[3] Select the file download form from the available menu options. 

[4] Select the Insert button to add the Ninja Form shortcode to the editor. 

Popup Maker adds the Ninja Forms shortcode tag for the newly published form to the Visual tab of the popup editor.

[ Back to top ]

Block Popup Editor

[1] Ninja Forms adds an Add Form button to the block editor. The button is located to the right of the initial block field. Click the block to open the Ninja Forms shortcode block.

[2] Select the file download form from the available menu options. 

[3] Ninja Forms will load the form into block editor. 

[ Back to top ]

Add a Click Open Trigger using the Extra CSS SelectorsMethod

In the popup editor Popup Settings box, set a new Click Open trigger.  In the Click Trigger Settings box, add the custom class added to the download link. In the tutorial, this class is added to the link ( a large button ) placed inside a sample post. 

To review the Extra CSS Selectors method for a Click Open trigger, refer to the following article.

Related article:  Trigger: Click Open -- Add Popup Maker Classes to Set a Trigger

[ Back to top ]

In the tutorial, the cookie term is changed from the default value of 1 month to 1 year. The cookie prevents the popup from showing again to a visitor who successfully submits the popup form.

To review the use and setup of cookies with Popup Maker, refer to the following articles.

Related article: 'Cookies' option settings

Related article: Close/Open Popup and Create Cookie After Ninja Forms Submission

[ Back to top ]

Publish or Update the Popup

1)  Click the Publish ( or Update ) button to save the popup. 

2)  A popup set to Published is now available for preview and inspection on the front end with the Popup Maker Admin Toolbar and web inspection tools. See the related article for guidance on how to use the toolbar. 

Related article:  The Popup Maker Admin Toolbar

[ Back to top ]

3)  Add and Configure Custom jQuery/JavaScript to Link the Form and Popup

Open the JavaScript Code Editor

The WordPress plugin Simple Custom CSS and JS allows users to add supplemental CSS and JS to a site. For this tutorial, we add a block of jQuery/JavaScript to link the form and popup together.

1)  From the WordPress admin, open the plugin's JavaScript code editor ( Custom CSS & JS (menu) >> Add Custom JS ( submenu ) ). If the plugin admin is already open, navigate to the JS code editor ( All Custom Code >> Add JS Code (button) ). 

[ Back to top ]

Add the Custom JavaScript to Link the Popup and Form

Copy and paste the following code block to the JS editor. The code block is also available from our GitHub repo at PopupMaker/Library/How_To.

/*  Custom JavaScript to deliver a file download after a popup form
 *  is submitted successfully.
 *
 *  The code snippet requires two custom values: [1] the popupID, and
 *  [2] the form field ID for the hidden field. Replace the placeholder
 *  values assigned below to 'popupID' and 'hiddenFieldSelector' with the
 *  actual values from your site.
 */

(function ($) {
    var popupID = 123,
        hiddenFieldSelector = '#nf-field-1';

    $(document).on('pumBeforeOpen', '#pum-'+popupID, function () {
        var trigger = $.fn.popmake.last_open_trigger[0],
            field = $(hiddenFieldSelector);

        if (trigger && "" !== trigger.href) {
            field.val(trigger.href);
        }
    });
}(jQuery));

View the source on GitHub.

[ Back to top ]

Locate the Values for the popupID and hiddenFieldSelector Variables

In the custom JS code, change the value of the popup ID and the hiddenFieldSelector to match your use case.  

1) The popupID value.  The value for the popupID is found on the Popup Maker admin page. Go to: ‘Popup Maker’ >> ’All Popups’ >> Classes (column) and retrieve the integer ID number for the intended popup from the Classes column.  In the JS code editor, enter the value for popupID as a number.  Do not add quotation marks around the number as this will generate an error.

2) The hiddenFieldSelector value.  The value for the hiddenFieldSelector is the form ID attribute. It is located in the hidden field added to the form. 

Navigate to the front end of your site and use the Popup Maker Admin Toolbar to open the form popup.  Use your browser's web inspection tools to inspect the form inside the popup. See the related article below on how to open these tools.

Related article: Open Browser Inspection Tools on Your Site

Inspect the HTML markup of the form and locate the hidden-container class wrapper for the Ninja Forms hidden field (underlined above).  Inspect the HTML structure of the hidden field and locate the value of the field ID on the <input> tag.

Copy the value of the hidden field form ID, and paste it as the value of the hiddenFieldSelector in the JS code editor.  The ID should be wrapped in opening and closing single parentheses ('') and preceded by a hash-tag ( # ) symbol ( '#nf-field-{integer}' ).

[ Back to top ]

Enter a Title and Publish the JS Code Block

1)  Accept the default settings in the plugin's Options box.  

2)  Enter a title for the jQuery/JavaScript code and select Publish the save your changes. For this tutorial, the JS code block is named 'Subscribe to Download'.

[ Back to top ]

4) Test the Popup Form Submit and Download on the Front End

Navigate to the front of your site and view the page or post where the file popup will display. Test the Click Open trigger by selecting the link to display the form popup. Enter the required data and submit the form. Check that the file download is immediately available.

A success message should also display that has a link to the file download. Check your email client for an email sent by the site. Check the file download link in the email to ensure that it works.

[ Back to top ]

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.