How to make a Ninja Form open up when you click on a bootstrap modal button (inside of a wordpress widget)

Question

I am using the following: Ninja Version: 3.4.25 / WordPress Version: 5.5 / Bootstrap Version: 3 (or maybe 4)

I have a WordPress template based on bootstrap, and I am using the latest Ninja forms version.

I have created a Bootstrap button in a widget, that I want to open up a model window displaying my Ninja Contact form.

I have actually been successful with this setup with an older version of Ninja form. But since the latest updates, they have changed all their form field names, and so now it won't work on my new site, because I am not using the correct field names.

If anyone knows what the old field name: "ninja_forms_display_form" is now, then you don't have to read the rest of my documentation. I did try: "ninja_forms", but that didn't work either.

I will provide the coding I use on another site using the same template but using an older version of Ninja Forms (3.2.11). This modal button does work, and can be seen on the sidebar's green 'contact us' button here: www.oasisflighttraining.com.au/about-oasis-flying-school/

Here is the Sidebar Widgets code that uses the Bootstrap button:

<div class="im-centered">
    <button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#contactform">Contact Us</button>
</div>

And here is the code that creates the Bootstrap button (found at the bottom of my footer.php file just before the call to wp_footer function.

<div class="modal fade" id="contactform">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Contact Us</h4>
      </div>
      <div class="modal-body">
        <?php 
        
            if( function_exists( 'ninja_forms_display_form' ) ){ ninja_forms_display_form( 1 ); }           
        
        ?>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->  

The code referencing "ninja_forms_display_form" is the part that doesn't work on my new site with the latest version of Ninja Forms. I know that field name has changed, but I can't figure out what to replace it with.

Can anyone give me some help figuring out how to make this bootstrap modal button work with my Ninja Form created with the updated version with new field names?

Thanks!

Answer 1

The newer Ninja Forms can use shortcode, so I just changed this:

    <?php 
    
        if( function_exists( 'ninja_forms_display_form' ) ){ ninja_forms_display_form( 1 ); }           
    
    ?>

to this:

    <?php echo do_shortcode( '[ninja_form id=1]' ); ?>

(And as a public service advice.. just make sure that you don't have the bootstrap js pulled in twice, or the modal window won't stay displayed after you click the button. I found that the bootstrap shortcode plugin added another bootstrap.js)