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.

modal form popup for real estate

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

ninja form settings
  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

ninja form field settings

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
ninja form shortcode id

  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?

You can have a beautiful, hardworking website for your small business.

Tell me about your website project for a personalized solution!


Do you need website tips?

Sign up to get easy-to-use WordPress tutorials, Genesis theme customizations, and other helpful tips for your small business website.

Your email address will be used to send you blog posts. Privacy Policy


Comments

27 responses to “How to Add a Popup Form to Your WordPress Site with Ninja Forms”

  1. Vikrant says:

    Do we need to install a separate plugin ‘Ninja Modal Form’ for popup form or will the normal ninja form plugin work.???

    Can we add a button to the modal form..if so then how do we do it????

    • Marcy Diaz says:

      You create any form as usual in Ninja forms and add the usual “Submit” button.
      Then you install and activate Ninja Forms – Modal plugin to add the form as a popup.

  2. Anand says:

    Can we open the popup by default?

  3. Carrie says:

    Marcy, thank you so much for posting this! I just switched from Gravity Forms to Ninja Forms, and was looking for instructions on how to use the modal plugin. Your tutorial was just what I needed!

  4. Tarun Rai says:

    Great post Marcy. We have used Ninja Forms for some projects in the past and it works well. I would like to share this solution with you on PayU integration with Ninja Forms. Hope you find it interesting!

  5. Sara says:

    So, will installing Ninja Form Modal allow me to make at automatic pop up when a visitor comes to my site? Or do I need to use Optinmonster.com?

  6. Yasmin says:

    Thanks for this, however I am looking to add this to a button, is there any way the form can pop-up when clicking a button?

  7. David says:

    I have downloaded the custom Ninja form and created a form with the following short code: ninja_forms_display_form id=4. I also downloaded the ninja modal form , but could not see where to modify the modal form so that it can show on my screen when a user click:
    What can i do so that it will be :
    Asking Price:[ninja_forms_modal_form id=4 text_link=”Request for Quote”]

    • Marcy Diaz says:

      You will need to add the ninja_forms shortcode in your content where you want the popup link.
      Make sure that id=4 is the correct id for your form.
      Use single, not double quotes, around the link text.
      Make sure you use straight quotes, and not curly; I think yours are curly.
      [ninja_forms_modal_form id=4 text_link=’Request for Quote’]

      • David says:

        Thanks Marcy, When i used single straight quote, the output is not fine. It shows small window with the content within but not large enough for user to view. It shows horizontal line and the vertical line i think is very small. How can i solve this? Probably make the height higher.

        • Marcy Diaz says:

          This is most likely interference between the plugin and some other plugin or script on your site. It’s not something I can fix for you; this isn’t my plugin.

  8. Cliff says:

    Thank you. This tutorial was very helpful!

  9. sneha says:

    how to add this in my heade.php file?

    • Marcy Diaz says:

      You can add the shortcode to a text widget in a widget area in your header. If you don’t have a header widget area, you can add one add one or you can add the php next to the Forms > All Forms to add to your header.php.

  10. riley says:

    Thanks for sharing. This post is very helpful when I was building my site.
    I am adding some more info I have used for my site.

    1. The ninja_forms_modal_form has image_link parameter (image_link=”full path”)
    2. This shortcode does not work with Visual Composer, but you can use it in a text block.

  11. Lali Ratnayake says:

    I am not sure if this is the right place to ask this question.

    Is it possible to submit the information in a Ninja Popup Form via a REST API to a remote server (say a CRM system)? I see that sending an e-mail is supported. The REST API would be an (machine-to-machine) extension. I am interested in how to implement this capability in the context of Ninja Popup Forms / WordPress.

    Thanks.

  12. prateek agarwal says:

    How I can open modal pop up on page load?

  13. Michael says:

    Hi

    Great article.
    I tried it using with Ninja Forms 3.0 but it’s not working.
    I found another one which worked with Ninja Forms 3.0+.
    https://wordpress.org/plugins/popup-addon-for-ninja-forms/
    Hope it helps someone else looking for Ninja Forms popup addon.

Leave a Reply

Your email address will not be published. Required fields are marked *