Ajax Gravity Forms May 2026

if ( empty( $result['is_valid'] ) ) { // Validation failed. Get the validation HTML. ob_start(); GFFormDisplay::get_form( $form_id, true, true ); $validation_html = ob_get_clean();

function my_gf_ajax_submit_handler() { // Verify nonce if ( ! wp_verify_nonce( $_POST['security'], 'gf_ajax_nonce' ) ) { wp_die('Security check failed'); } $form_id = intval( $_POST['form_id'] ); $form = GFAPI::get_form( $form_id );

However, this built-in solution, while powerful, is the "lowest common denominator." It works reliably, but it lacks customization. The confirmation message fades in, the errors appear, but you have limited control over what happens next . What if you want to redirect to a custom "thank you" page using AJAX ? What if you want to close a modal window upon successful submission? What if you need to track the submission in Google Analytics? ajax gravity forms

wp_send_json_success( array( 'redirect_url' => $redirect_url ) ); } } add_action( 'wp_ajax_my_gf_submit_form', 'my_gf_ajax_submit_handler' ); add_action( 'wp_ajax_nopriv_my_gf_submit_form', 'my_gf_ajax_submit_handler' );

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. if ( empty( $result['is_valid'] ) ) { // Validation failed

Google's reCAPTCHA expects a normal form submission in many configurations. When using AJAX, you must ensure the reCAPTCHA token is included in your AJAX data and that you initialize reCAPTCHA on the new content if the form is dynamically loaded.

var formData = $form.serializeArray(); // Get all form data formData.push({ name: 'action', value: 'my_gf_submit_form' }); // Add action for admin-ajax formData.push({ name: 'security', value: my_ajax_obj.nonce }); formData.push({ name: 'form_id', value: formId }); What if you want to close a modal

$.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.