JSON response from webflow page

Design help Custom code
1

I’ve got kind of a strange situation, I’m trying to pass data from Webflow forms to Pardot. The issue is that Pardot will not accept an AJAX request, you get a CORS error. Pardot does have a workaround:

This is what’s known as CORS (Cross-Origin Resource Sharing). Pardot doesn’t currently support CORS or JSONP for form handlers. It is possible to simulate a JSONP response by setting the Success and Error URLs for the form handler to be JavaScript URLs that execute Success and Error callbacks, respectively.

I’ve actually got it working relatively well at this point using the solution for AJAX using @victornikitin’s solution found here: How to: Use Ajax to submit forms with default actions after submit

I modified that function a bit to this:

makeWebflowFormAjax = function( forms, successCallback, errorCallback ) {
forms.each(function(){
  var form = $(this);
  form.on("submit", function(){
    var container =   form.parent();
    var doneBlock  =  $(".w-form-done", container);
    var failBlock  =  $(".w-form-fail", container);

    var action =    form.attr("action");
    var method =    form.attr("method");
    var data =      form.serialize();
    var dataURI =   {};
    

    form.find("input, textarea, select").each(function() {
      var inputType = this.tagName.toUpperCase() === "INPUT" && this.type.toUpperCase();
      if (inputType !== "BUTTON" && inputType !== "SUBMIT") {
        dataURI[this.name] = $(this).val();
      }
    });

    dataURI = $.param(dataURI);

    console.log(dataURI);

    // call via ajax
    $.ajax({
      type: method,
      url: action + '?' + dataURI,
      dataType: 'jsonp',
      jsonpCallback: 'callback'
    });

    // prevent default webdlow action
    return false;
  });
});

}

Data is being passed to Pardot, I can actually see this updating in the pardot database. The issue is that the success and error conditions don’t seem to be working. In pardot I’ve set it to redirect to two separate pages based on success or error both in webflow. So a page in webflow called pardot success gets hit when it works. On that page there is nothing just a page body and in the custom code I’m trying to fire a JSON response of success:

return "callback({ 'result' : 'success' })"

This doesn’t seem to be working as I get a console error on the form, even though the form submission is working:

image

It looks like it’s hitting some html tags and not just the JSON response…

I know this is a complicated one and a really weird edge case, but just wanted to know if anyone had any thoughts on it.

1 Like