Retrieving Gravity Forms AJAX Confirmation Message programmatically in JavaScript instead of displaying it

Question

Retrieving Gravity Forms AJAX Confirmation Message programmatically in JavaScript instead of displaying it

I have set up the Gravity Forms plugin in my Wordpress website and implemented the AJAX feature on my form. Currently, upon submission, a Confirmation message is displayed automatically. However, I am interested in retrieving the content of this message using Javascript instead of having it directly shown on the form.

I am unsure about how to retrieve the Confirmation Message before it appears or prevent it from being displayed altogether.

It seems like the 'gform_post_render' javascript hook is triggered just before the message is displayed, but I am uncertain about where to access the confirmation message value or stop it from appearing.

Is there a method to override the default output of the confirmation message? Alternatively, is there a more effective way to configure Gravity Forms to provide a dynamic value through AJAX so that I can then decide what action to take next?

Thank you!

javascript ajax wordpress gravity-forms-plugin

Answer 1

Answer №1

After seeking assistance from the Gravity Forms support team, I received a recommendation to explore the Gravity Forms Web API instead of relying on the built-in AJAX functionality. Specifically, they directed me to the /forms/{ID}/submissions endpoint:

The solution I implemented ended up resembling the following code snippet:

$('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);
  });

});

By utilizing this approach, you can now submit the form using AJAX and easily manipulate the response stored in the data.response.confirmation_message variable.

Answer 2

After seeking assistance from the Gravity Forms support team, I received a recommendation to explore the Gravity Forms Web API instead of relying on the built-in AJAX functionality. Specifically, they directed me to the /forms/{ID}/submissions endpoint:

The solution I implemented ended up resembling the following code snippet:

$('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);
  });

});

By utilizing this approach, you can now submit the form using AJAX and easily manipulate the response stored in the data.response.confirmation_message variable.

Retrieving Gravity Forms AJAX Confirmation Message programmatically in JavaScript instead of displaying it

Answer №1

Similar questions

Challenge with row identification in Datatables when rowId begins with a number

Excessive delay in executing Javascript loops

Having trouble retrieving the data from the angular app factory

I am having trouble getting the Express Router delete method to function properly when using mongoose with ES8 syntax

Unable to locate video identifier on ytdl

What is the best way to combine elements from different arrays to create a comprehensive listing?

Retrieve and save only the outcome of a promise returned by an asynchronous function

AjaxModalPopup does not appear in Visual Studio 2013

An uncaught error occurred in ReactJs while trying to read the property 'map' of an undefined variable within the {Component} component

Simulating dynamic route parameters in the Next 13 application directory

Typescript/Three.js encounters the issue of game objects becoming undefined

Testing out a login form in Vue framework

My AJAX request seems to be redirecting to my PHP file instead of simply returning the response text. What could be causing this issue?

Displaying a submenu upon hovering within its designated CSS region

Add two columns for mobile devices in the Woocommerce platform

Using jQuery's AJAX method: How to access a referenced element outside of a closure

Using Node.js Express to pass data from both the URL and session into a JavaScript file being served

Revamping Legacy React Native Projects with the Redux Toolkit

Remove a div using JavaScript

Solving compatibility problems with jquery AJAX requests on multiple browsers