Tutorial and simple example for jquery form in wordpress, learn how to use jquery form and make ajax call in custom form for wordpress.

What is jQuery

jQuery is JavaScript library, using jQuery you can do more without learn JavaScript Language, now we will learn how to use jQuery Form in WordPress and make AJAX call easily.

How To Use jQuery Form In WordPress

Very easy, firstly we will include jQuery Form in our wordpress plugin, and we will make HTML Form shortcode, after that we will make “ajax.js” file to make Ajax call, finally we will make ajax call in wordpress init action.

jQuery Form Example

Firstly we will include jQuery Form in our wordpress plugin, function code:

function include_jquery_form(){
    wp_enqueue_script( 'include-jquery-form', plugins_url( '/js/ajax.js', __FILE__ ), array('jquery-form'), false, false);
}
add_action('wp_enqueue_scripts', 'include_jquery_form');

Now make “js” folder in your plugin folder, and make “ajax.js” file and paste it in “js” folder, now in “ajax.js” file, paste this code:

jQuery(document).ready(function() { /* Code By Qassim Hassan - https://wp-time.com */
    jQuery('#form-submit').click(function() {
        jQuery('#result').hide();
        jQuery("#ajax-load").show();
        jQuery("#my-form").ajaxForm({
            target: '#result',
            success: function() 
            {
                jQuery("#ajax-load").hide();
                jQuery('#result').hide().slideDown('fast');
            },
        });
    });
});

Now we will make HTML Form shortcode:

function my_html_form_element(){
 ?>
    <div id="my-form-wrap">
        <form id="my-form" action="<?php echo esc_url( $_SERVER['REQUEST_URI'] ); ?>" method="post">
            <p>Enter Your Name<br><input type="text" value="" name="my_text_input"></p>

            <p><input type="submit" name="my_form_submit" value="Submit!" id="form-submit"></p>

            <p id="ajax-load" style="display:none;"><img src="https://wp-time.com/wp-content/uploads/2015/10/ajax-load.gif"></p>
        </form>

        <div id="result" style="display:none;"></div>
    </div>
 <?php
}

function my_html_form_shortcode(){
    ob_start();
    my_html_form_element();
    return ob_get_clean();
}
add_shortcode('my_html_form', 'my_html_form_shortcode'); // your shortcode is [my_html_form]

Your shortcode is [my_html_form], finally we will make ajax call in wordpress init action:

function my_ajax_call(){

    if( isset($_POST['my_form_submit']) and $_SERVER['REQUEST_METHOD'] == "POST" ){

        if( empty($_POST['my_text_input']) ){
            echo '<p>Name field is empty! Please enter your name.</p>';
            exit(); // exit() function is important!!
        }else{
            echo 'Your name is: '.$_POST['my_text_input'];
            exit(); // exit() function is important!!
        }

    }

}
add_action('init', 'my_ajax_call');

Done!

You can download jquery form example plugin, and you can check source code of just contact form plugin to learn more.