Enter (Asynchronous JavaScript and XML). When combined with Gravity Forms, AJAX transforms the user experience from a jarring interruption into a seamless, fluid interaction. This piece explores the power, implementation, and best practices of using AJAX with Gravity Forms, turning a standard contact form into a modern, high-performance interface. What is AJAX, and Why Does It Matter for Forms? AJAX is a set of web development techniques that allows parts of a web page to update without reloading the entire page. Think of the "Like" button on social media: you click it, the count increments, and the heart turns red—all without the page refreshing. The same principle applies to forms.
jQuery(document).ready(function($) { var formId = 1; // Change this to your form's ID var $form = $('#gform_' + formId); $form.on('submit', function(e) { e.preventDefault(); // Stop normal submission
function my_gf_ajax_scripts() { if ( has_shortcode( get_post()->post_content, 'gravityform' ) ) { wp_enqueue_script( 'my-gf-ajax', get_template_directory_uri() . '/js/gf-ajax.js', array('jquery'), '1.0', true ); wp_localize_script( 'my-gf-ajax', 'my_ajax_obj', array( 'ajax_url' => admin_url( 'admin-ajax.php' ), 'nonce' => wp_create_nonce( 'gf_ajax_nonce' ), ) ); } } add_action( 'wp_enqueue_scripts', 'my_gf_ajax_scripts' ); This script will find your form (using its ID, e.g., gform_1 ), override the submit behavior, and send the data via AJAX. ajax gravity forms
var formData = new FormData(this); formData.append('action', 'my_gf_submit_form'); formData.append('security', my_ajax_obj.nonce); $.ajax({ url: my_ajax_obj.ajax_url, type: 'POST', data: formData, contentType: false, // Important for file uploads processData: false, // ... rest of AJAX config });
This custom approach gives you complete control. You can close modal popups, play success sounds, trigger analytics events, or animate a custom thank-you message—all without ever leaving the page. Even with a solid understanding, AJAX and Gravity Forms can present challenges. Enter (Asynchronous JavaScript and XML)
wp_send_json_error( array( 'validation_html' => $validation_html ) ); } else { // Success! Define a redirect URL (from confirmation or custom) $confirmation = GFFormDisplay::handle_confirmation( $form, $entry, false ); $redirect_url = is_array( $confirmation ) && isset( $confirmation['redirect'] ) ? $confirmation['redirect'] : home_url( '/thank-you/' );
Traditional AJAX using serializeArray() does not handle file inputs. For forms with file uploads, you need to use the FormData API: What is AJAX, and Why Does It Matter for Forms
$.ajax({ url: my_ajax_obj.ajax_url, type: 'POST', data: formData, beforeSend: function() { $form.find('input[type="submit"]').prop('disabled', true).val('Submitting...'); }, success: function(response) { if (response.success) { // Custom success behavior: Redirect! window.location.href = response.data.redirect_url; } else { // Display validation errors (Gravity Forms sends back HTML) $form.find('.gform_validation_errors').remove(); // Clear old errors $form.prepend(response.data.validation_html); $form.find('input[type="submit"]').prop('disabled', false).val('Submit'); } }, error: function() { alert('An error occurred. Please try again.'); $form.find('input[type="submit"]').prop('disabled', false).val('Submit'); } }); }); }); Finally, you need a PHP function that receives the AJAX request, tells Gravity Forms to process the submission, and returns a structured JSON response.
