Search code examples
javascriptajaxwordpressgravity-forms-plugin

Getting Gravity Forms AJAX Confirmation Message in Javascript Instead of Outputting


I have the Gravity Forms plugin setup in Wordpress, and I am using the AJAX feature on my form. I have it configured to return a Confirmation message upon submission, but I want to grab the value contained in the confirmation message in Javascript instead of having it automatically output onto the form.

I'm not sure how to get grab the Confirmation Message before it is output, or how to prevent it from being output.

It looks like the 'gform_post_render' javascript hook is called right before the message is output, but I'm not sure where to target the confirmation message value or prevent it from outputting.

Is there a way to override the confirmation message output? Or is there a better way to setup Gravity Forms to return a dynamic value through AJAX where I can then determine what to do next?

Thanks!


Solution

  • I ended up getting help from the Gravity Forms support team, and they recommended that instead of using the included AJAX functionality, that I look into the Gravity Forms Web API, specifically the /forms/{ID}/submissions endpoint:

    https://www.gravityhelp.com/documentation/article/web-api/#form-submissions

    My solution ended up looking something like this:

    $('form').submit(function(e) {
    
      e.preventDefault();
    
      // Get Form ID for submission URL //
      var formID = $(this).attr('id');
      formID = formID.replace('gform_', '');
      var formURL = '/gravityformsapi/forms/'+formID+'/submissions';
    
      // Get Form Input Data and Format JSON for Endpoint //
      var formArray = $(this).serializeArray();
      var formData = [];
      $.each(formArray, function(index, data) {
        var name = data['name'];
        var value = data['value'];
        formData[name] = value;
      });
      formData = $.extend({}, formData);
      var data = { input_values : formData };
    
      // AJAX to Submit Form //
      $.ajax({
        url: formURL,
        method: 'POST',
        data: JSON.stringify(data)
      }).done(function (data, textStatus, xhr) {
        // This is the HTML that is output as a part of the Confirmation Message //
        console.log(data.response.confirmation_message);
      });
    
    });
    

    This allows you to submit the form via AJAX, but then you can chose what to do with the response in the data.response.confirmation_message variable.