How to Add a Popup Form to Your WordPress Site with Ninja Forms

Ninja Forms is an easy-to-use, lightweight form builder plugin for your WordPress website. It can be used for simple contact forms or for more complex forms. You can see an example on my Contact page. The form has minimalist styling that blends in well with most WordPress themes. The basic plugin is available from the WordPress plugin repository, but there are additional premium add-ons, if you need them.

For a recent real estate website project, my client wanted to provide a Comparable Market Analysis Form for the convenience of their clients. They wanted to use a popup or modal form, so that visitors would remain on the page discussing their home selling options in case they weren’t ready to complete the form. This tutorial will show you how to first create a form and then add it to a page as a popup, using the the free Ninja Forms and Ninja Forms – Modal plugins.

Note: If you already use Ninja Forms and just need the modal or popup form, it’s near the end of the post.

About Ninja Forms

No Spam

A form plugin needs a good method of preventing spam submissions, and Ninja Forms has two great methods.

• You can add a Spam question and answer, like a simple math problem or “Type this word in the space below: apple”, something that everyone will be able to answer correctly.
• The second spam prevention method adds a honey pot field, which is easier for visitors to use. A honey pot is a hidden field that a human will leave empty because they don’t see it, but a spam bot will fill it in, and in that case, the form submission will be discarded.

Get the Response

Ninja form responses can be emailed to you and to the person completing the form, but they are also saved in the WordPress Admin, so that you never miss a response. The submissions can also be exported as a csv file, so that you can use the info in a spreadsheet application.

Select a Form

You can add a form to any WordPress page or post using a shortcode, like most form plugins. But Ninja Forms also adds the convenience of an “Append a Ninja Forms” section to the post editor screen that allows you to select the form of your choice. This makes it really fast to add a form to your WordPress website.

How to Create a Form

You will need to add and activate the two plugins to your WordPress website – Ninja Forms and Ninja Forms – Modal. Click on Plugins > Add New in your WordPress Admin.

Ninja Forms has a documentation and video for creating forms. Here are the basic steps.

Form Settings Tab

1. From your WordPress Admin menu, click Forms > Add New.
2. You will see the Form Settings tab.
3. Add the name of your form to the field at the top that says: Enter form title here.
4. You can also edit the Email Settings and the Basic Form Behavior Settings on the Form Settings tab. You can leave these for now. You will still be able to view your form submissions in your WordPress Admin. Click on Forms > Submissions. From here you can also export the form submissions as a csv. See the Ninja Forms website.
5. Click the blue Save Form Settings button at the bottom.

Form Fields Tab

Next click on the Field Settings tab. This is where you will actually create your form. You can create a simple contact form to use for this tutorial.

1. For each field that you want to add, find it over on the left.
2. Click on it, and it will move to the right with an open dialog box.
3. In the open dialog, you can change the Label, Label Position and other settings.
4. First look in the User Information section on the left.
   • Click on First Name. Change the Label Position to Above Element. Click the little down arrow on the field header to close that field dialog.
   • Next on the left, click Email. Change the Label Position to Above Element, and  note that “Is an email address” and “Send a response email to this email address?” are also checked. Close the email field dialog by clicking the little arrow again.
5. Next on the left, find the Template Fields section.
   • Click on Textarea. Change the Label to Message, and the Label Position to Above Element. You also have other options, like adding a Rich Text Editor to the Textarea field. Close the email field dialog by clicking the little arrow again.
   • Next on the left click on Honey Pot. You can just close the dialog opened on the right; there is nothing to edit.
   • Then on the left, click on Submit to add a Submit button to your form. Change the Label to Send Message.
6. Now click the blue button, Save Field Settings.

Now you have your form ready to use.

Find Your Form ID and Shortcode

1. First you need to find the form id.
2. In the WordPress Admin menu, click on Forms > All Forms.
3. Find your form in the list and look at the Shortcode column.
4. Find the ‘id=’ and note the form id number. For New Contact Form, mine is ‘3’.
5. Also note the shortcode.

Add a Form to Your Page or Post

Add Form to Bottom of Page

1. Open a Page or Post.
2. Over on the left, find the Append a Ninja Form drop down.
3. Use the drop down to select your form.
4. Click the blue Publish button for your post or page.

Add Form Anywhere With Shortcode

1. Open a Page or Post.
2. Place your cursor in the text on a new line where you want the form to appear.
3. Type or paste the shortcode for your form.
4. Click the blue Publish button for your post or page.

When you view your page, you will see the form on your page.

Add a Popup or Modal Form

But what if you want your visitors to click a link and have the form pop open? A popup form is useful when you need visitors to stay on the page, especially for marketing.

1. Open a Page or Post.
2. Place your cursor where you want the link to the popup.
3. Then type this code:
   [ninja_forms_modal_form id=1 text_link='Contact Me']
   (Be sure to use straight quotes.)
4. Replace the text ‘Contact Me’ with your link text. Maybe you want to use ‘Contact me with your questions.’
5. Also change the ‘id=1’ to use your form id number.
6. Publish your post or page.
7. And now when you view your page, it should have a link to your modal form.

Now you have a contact form, and you can make it modal. What other forms will you create?