I’ve been using the very useful Gravity Forms (www.gravityforms.com) plug-in for a number of different projects. It does a lot of great stuff, but one thing it doesn’t do (at least not yet) is allow for ajax form submission. For some projects, that’s a bit of a drawback.

After poking around looking for a solution, I decided to cobble something together tonight. At some point I’ll put it into a proper plug-in that you can install to exend Gravity Forms, but for now here you go.

Try it Out

Let’s say you’re inserting a form via a shortcode in a post — pretty standard issue. My solution is to wrap the shortcode in a <div> tag. The id of the div tag in my example is rsvp-box (since I’m using it to insert an ajaxified RSVP form) but you can call yours whatever you want. So, in your post you’ve got something like this:

Code block

<div id='rsvp-form'>
[gravityform id=9 title=false description=false]
</div>

Now to “ajaxify” it. Open up your theme’s functions.php file (if you don’t have one, you’re going to need to create one). Add in the following code:

Code block

<?php
//ajax submit for gravity forms
add_filter("gform_submit_button", "form_submit_button");
function form_submit_button($button){
?>
<script type="text/javascript">
jQuery(document).ready(function($jq) {
 
    $jq("#rsvp-box form").submit(function(){
    var str = $jq("#rsvp-box form").serialize();
    var formid = $jq("#rsvp-box form").attr('id');
    str +="&ncg-gform=ajax-submit&form-id="+formid.substring(6);
    $jq.post(" ", str,function(data){
      $jq("#rsvp-box").html(data);
       });//end of post function
 
    return false;
    });//end of submit function
 
});//end of doc.ready
</script>
<?php
return "<input type='submit' value='Register' />";
}
 
function ncg_gforms_query_vars($vars) {
    $vars[] = 'ncg-gform';
    return $vars;
}
add_filter('query_vars', 'ncg_gforms_query_vars');
 
function ncg_gform_parse_request($wp) {
 if (array_key_exists('ncg-gform', $wp->query_vars) && $wp->query_vars['ncg-gform'] == 'ajax-submit') {
  require_once(GFCommon::get_base_path() . "/form_display.php");
 $result = GFFormDisplay::get_form($_POST['form-id']);
 echo $result;
 exit;
 }
 }//end of ncg_gform_parse_request
 
add_action('parse_request', 'ncg_gform_parse_request');
 
/////end of gravity forms ajax stuff
?>

Basically what’s happening is that in the gform_submit_button API call we’re adding in some jQuery script that looks for a form inside of a div with an id of rsvp-form. It then takes that form data, serializes it, gets the form id, and uses jQuery .post to send it to … itself.

In the next part, we register a new WordPress Query Variable – a POST or GET variable that WordPress knows it is supposed to do something with before it outputs a page. What we’re telling it is that if you see a query variable called ncg-form, run a function called ncg_gform_parse_request before you output the page. That function uses Gravity Forms’ get_form method to then process the submitted form and return either any errors or your success message (or redirect).

NOTE: IE is picky (to put it mildly). In your jquery.post call above, make sure you have a space between the quotes at the start or it will kick an error.

$jq.post(“SPACE HERE ”, str,function(data){

This is a pretty quick and dirty solution. For example, if they submit the form and there are errors, it doesn’t reload the page, so the shortcode isn’t re-parsed. Which means that any additional shortcode attributes — like if you have the title set to not display — will be lost if it returns any errors. As in: You have a form shortcode like what I used above — with the title and description not showing. You fill out the form but neglect a required field. When you submit the form gets re-output with the error messages showing, but now the title does as well. You can overcome that by giving the title a class in the form set up and making the style for that class be display:none.

To pass along things like the Post Title, I just use hidden fields and pre-populate them.

Hope it helps some other people out and maybe spurs some further push towards fully ajaxifying the plug-in.