Submit Pardot form handler with React and Gatsby

Question

I'm using a Pardot form handler to submit custom forms in Gatsby/React. I also want success/failure messaging for the user so I want to update the UI based on what the Pardot server sends back.

Pardot uses JSONP to submit form data, which is fine, but I need to read the response from Pardot. I get a true response; success for success and failure for failure. Pardot is suggesting to create 2 static URLs on your own server that returns a simple JSON response. I've done that:

success.json
{"status":"success"}

or

successTwo.json
callback({"status":"success"})

or

successThree.js
return "callback({ 'status': 'success' })"

I am under the impression that JSONP will wrap my response in a callback which I've defined as 'callback'.

I get success and failures for respective form submission, so adding data to Pardot works, but I can't read the response from the /success*.json,.js or /error*.json,.js files I receive back.

Things I've tried: - Setting a few file types, .json and .js - Wrap the JSON in my returned files in the callback - Wrapped and returned in quotes - Make the callback window.callback = data => {...} - I've reviewed these to SO questions: -- Simulate a JSONP response with JavaScript URLs -- How to properly implement a JSONP form post submission on a Gatsby site - I'm not opposed to Jquery, but I'm pretty sure I shouldn't need it here

It's as if the browser is looking for the response in the originally queried URL from Pardot, the one to add the form data, and not the URL responded from Pardot.

So, how to I read the responses URLs from Pardot?

Code: (FWIW, I'm using Formik, but I don't think that matters here) I'm also using a NPM library called fetch-jsonp since Pardot needs JSONP

    <Formik
      initialValues={{ email: '' }}
      validationSchema={Yup.object({
        email: Yup.string()
          .email('Invalid email address')
          .required('Required'),
      })}
      onSubmit={(values, { setSubmitting }) => {
        fetchJsonp(`${formId}?${encode(values).toString()}`, {
          jsonpCallbackFunction: 'callback',
          timeout: 10000,
        })
          .then(function(data) {
            console.log('data', data)
            window.callback(data)
          })
          .then(function(response) {
            return response.json()
          })
          .then(function(json) {
            console.log('parsed json', json)
          })
          .catch(function(ex) {
            console.log('parsing failed', ex)
          })

      }}
    >

Submit Pardot form handler with React and Gatsby

0 Answers0