0

I'm posting a follow-up to another question asked here: Simulate a JSONP response with JavaScript URLs. I was following steine's answer in combination with nickjag's and got stuck at the end.

I'm successfully getting a submission to pass to Pardot, I used a little each loop to get all of the form names and values:

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 webflow action
    return false;
  });
});
}

I created two pages in webflow with the following as a custom script in the custom code section of the page:

<script>
return "callback({ 'result' : 'success' })"
</script>

The form is definitely hitting Pardot and passing the data through as I can see tests in the prospect database, but I am getting a console error in Chrome: Uncaught SyntaxError: Unexpected token < returning from the success page it appears. What it seems like I should be doing is based on the page that Pardot hits afterward running a function to show or hide the Webflow success/failure messages.

Something like this:

form.hide();
doneBlock.show();
failBlock.hide();

Any thoughts on what I need to do next? I feel like it's very close, but I'm just not sure how to tie those together.

Sam
  • 76
  • 4
  • Sounds like a you're getting an `html` instead of a `json` response. I would check the network tab to see exactly what that page is (error confirmation). I've seen this on Marketo and it turned out to be a space on the endpoint url token – Tony M May 15 '18 at 22:45
  • @TonyM Okay thanks, I'll take a look at that and let you know, seems like that might be it. – Sam May 17 '18 at 14:28
  • @TonyM I ended up just using a rawgit url as webflow won't let me create a page with the .js extension. https://rawgit.com/and-also-agency/responders/master/success.js. This is no longer throwing errors and I can see the success page getting hit in the network panel once the form submission occurs. Any thoughts on "grabbing" that response in my function to fire the success / error methods in webflow? I'm not sure what to do with the js that "fires" when that page is hit. – Sam May 29 '18 at 17:01
  • did you make changes in the backend ? – TaouBen Feb 04 '21 at 19:45

0 Answers0