Insert a Form using JQuery Ajax in few steps

Jun 29, 2018

Hello Howdy, if you are facing an issue to show a Formidable form using jQuery Ajax you are in the correct place.

Let use our imagination to generate a use case for this. Imagin you need to show the form in a Page but it depends on a link chosen by the user.

We can add a link to a page using the next HTML code.

<a href="#" id="load_form1">Load the form 1?</a>

<div class="form_content"></div>

Remeber you need to add the code in the text tab.

The first line of the code is to show the link, where we plan to add the jQuery Ajax call.

<a href="#" id="load_form1">Load the form 1?</a>

The second line is where the response of the Ajax will insert the Formidable Form.

<div class="form_content"></div>

Then you need to add this code in a Javascript file. If you need to read more about how to add the script to your plugin or theme read the next link

jQuery(document).ready(function ($) {
    jQuery('#load_form1').click(function() {
        jQuery.ajax({
            url: '/wp-admin/admin-ajax.php',
            type: 'GET',
            data: {
                action: 'frm_forms_preview',
                form:'up39e'
            },
            success: function(html) {
                jQuery('.form_content').html(html);
                jQuery.getScript( "/wp-content/plugins/formidable-pro/js/frm.min.js" );
                jQuery.getScript( "/wp-content/plugins/formidable/js/formidable.min.js" );
                jQuery.getScript( "/wp-content/plugins/formidable-pro/js/formidablepro.min.js" );
                jQuery.getScript( "/wp-content/plugins/formidable-pro/js/dropzone.min.js" );
            }
        });
    });
});

The important part of this Ajax call is the data object. The action used is a built-in ajax call of Formidable Forms frm_forms_preview.  The form is the form key to identify what form will be loaded.

In the success of the response, we add the content to the div we had with the next line.

jQuery('.form_content').html(html);

The others lines are to load the Formidable Form related scripts. If you want to read more about the getScript please read in the next link.

I record this video to show you the result.

If you have any doubt or question, let me know to help you. I would happy if you send me your feedback with a comment on the site, or the FB page, Twitter, Skype … where you like most  😉

El Guille.

PD if you have any block in your project or there is something about what you would like me to write let me know it would be a pleasure to help you.

No comments

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Interested to get more tips!