Simulate a JSONP Response with JavaScript URLs

Question

I am using Gravity Forms on a WP site. My POST forms via ajax on Pardot using Pardot form handlers . I am facing a problem when Pardot processes a 6x form without any other errors. Studies show that this is because Pardot does not support CORS or JSONP and thus gets stuck in a loop when using ajax to send. It processes the view, but never "ends" when the URL of the form handler is set as the URL of the link. He tries 6 times before giving up, process the provided data and send new letters with a notification of prospects each time.

Pardot help docs offers the following solution:

You can simulate a JSONP response by setting the Success and Error URLs for the form handler as JavaScript URLs that execute Success and Error callbacks, respectively.

I'm not quite sure what this means or how to approach it. I did some stackoverflowing and googling, but I can't seem to wrap my head around how to do this. Can someone help clarify this concept or point me in the right direction?

Thanks!

Answer 1

What Pardot offers is to create 2 static URLs on your own server that return a simple JSON response.

So for example:

• mysite.com/pardot-success

Returns: {"result":"success"}

2. mysite.com/pardot-error

Returns: {"result":"error"}

You will then use these two URLs as the URLs of your success and URL redirects for your Pardot form handler settings.

An AJAX request can then be passed to your Pardot form handler using JSONP, which will wrap and return a JSON response from one of these URLs (depending on the result).

Your AJAX response data will include your JSON result (success or error).

Answer 2

EDIT: So, after a few days fighting this, I will post my final solution, which may help others trying to contact Pardot using JSONP. This is a problem with three parts:

• Send a JSONP request to the Pardot form handler
• Redirect the successful / error Pardot form handler to your own server.
• Return JSONP from your server.

Send JSONP request for Pardot From Handler

To submit form data to a form handler, you need the URI to encode field names and values.

(An example of using jQuery. '? Callback =' is added by ajax () when specifying dataType: 'jsonp'):

 var data = { 'field1' = 'value1', 'field' = 'value2' }; var uriEncodedParams = $.param(data); var targetUrl = <Pardot Form Handler URL> + '?' + uriEncodedParams; $.ajax({ action = targetUrl, dataType: 'jsonp', jsonpCallback: 'callback' }); window.callback = function (data) {...} 

Pardot Redirection From Success / Error Handler to Your Own Server

See @nickjag answer:

Set the location of the location of successful tasks and the location of the error to the endpoints on your server.

Since pardot will not redirect any of the GET parameters you passed, you will have to use some default values, that is, the name of the callback function (therefore, specify jsonpCallback and not succeed in my request).

Return JSONP from your server

I am having problems with console errors ( Uncaught SyntaxError: Unexpected token : when using: return "{ 'result' : 'success' }" because it is a JSON object and JSONP is expecting a file with JavaScript. Thus, the format for the return should be: return "callback({ 'result' : 'success' })"

And how again Pardot does not redirect the GET parameters, the generated callback function name from JQuery did not propagate, and I could not return the correct JavaScript code. By default, the callback function name is used if none were provided.

Guide for returning JSONP from the .NET MVC backend