1. Register your variables with WP

//Register your REQUEST variables with WP
// Sample URL: www.mydomain.com/?submit=true&name=Brian

add_filter('query_vars', 'my_form_vars');

function my_form_vars($public_query_vars){
    $public_query_vars[] = 'myName';
    $public_query_vars[] = 'mySubmit';
    return $public_query_vars;
}

2. Assign Your Variables To An Array

function get_my_vars(){
    global $myVars;
    if(get_query_var('myName')):
        $myVars['myName'] = mysql_real_escape_string(get_query_var('myName'));
    endif;
    if(get_query_var('mySubmit')):
        $myVars['mySubmit'] = mysql_real_escape_string(get_query_var('mySubmit'));
    endif;
    return $myVars;
}
//Now all you have to do is call get_my_vars() in your other functions
//Your requests can be accessed by typing: $myVars['myName']

3. Create Your jQuery Script

Create a file named ajax_tutorial.js with the following code

$(document).ready(function() {

	      $('#mySubmit').click(function(){

	          var myName = $('#myName').val();
		  var mySubmit = $('#mySubmit').val();
		  $.ajax({
	                url: "http://www.yourdomain.com",
	                type: 'GET',
	                data: "myName=" + myName + "&mySubmit=" + mySubmit,

	                success: function(result) {
	                      $('#ajaxResponse').append(result);
                        }
	       });
	      return false;
      });
});

4. Include The Latest jQuery And Your Custom Script

add_action('init', 'queue_scripts');

function queue_scripts() {
    wp_enqueue_script('wp_jq_script', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js');
    wp_enqueue_script('wp_my_script', 'http://brian.fegter.com/js/ajax_tutorial.js');
// You can also use the included jQuery in WP
// Look up wp_enqueue_script() in the CODEX
}

5. Add Shortcode To Insert Your Form In Pages/Posts

add_shortcode('my_form', 'plugin_form');

function my_form(){
	$my_form = '



	


';
	if(is_single() || is_page()):
		return $my_form;
	endif;
}
//Notice the empty DIV near the bottom for your AJAX response.
}

6. Add A Template Redirect For AJAX Requests

The template redirect hook simply processes whatever function you’ve selected prior to sending the headers or rendering the template. We are going to use this to process our AJAX requests. This is the Wordpress magic that lets you access $wpdb without including wp-config.

add_action('template_redirect', 'form_ajax');

function form_ajax(){
     global $myVars;
     get_my_vars();
     if($myVars['myName'] && $myVars['mySubmit']):
	echo "
Thanks for visiting ".$myVars['myName'].".

";
         exit;
     endif;
     if($myVars['myName'] == null && $myVars['mySubmit']):
	echo "
You didn't enter a name!

";
        exit;
     endif;
}

Check Out The Demo Here

Download Source Files