// Tell Gravity Forms to process the submission but not to output anything $_POST['gform_submit'] = $form_id; $result = GFFormDisplay::process_form( $form_id, $form );
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 });
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?
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
By moving beyond the page refresh, you treat your forms not as isolated HTML islands but as dynamic, reactive components of a modern web application. Your users may not know the word "AJAX," but they will feel the difference. They will stay on the page, stay engaged, and—most importantly—complete your forms without the frustration of a spinning browser and a white, reloading screen. That is the quiet power of mastering AJAX with Gravity Forms.
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();