// 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 = $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 });
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
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' );
In the early days of the web, submitting a form was a dramatic event. You filled out your name, email, and message, clicked "Submit," and then... the screen went white. The browser churned, the page reloaded, and you found yourself either staring at a "Thank You" message at the top of a freshly rendered page or, more frustratingly, back at the same form, squinting to see which red error message had appeared.