Success/Error messages and Pardot Form Handlers with Webflow

Hello world,

We love building custom forms in Webflow, but we’re running into an issue when it comes to using Pardot form handlers to direct form data to our marketing automation software. After adding the form handler, it appears as though Pardot sends the user to a success or error location based on the form handler itself (rather than Webflow updating the user’s page to the success/error version as it does without the form handler).

Here is how I have the form set up in Webflow: WebFlow%20values

And here is how I have the form handler set up in Pardot: Pardot%20values

Does anyone have a suggestion of how to both use the Pardot form handler to take in the form submission data while using our error/success page versions built in Webflow?

Read-only link: Webflow - Remix

Live link: https://www.remix.com/demo-copy

Thanks for any support/assistance!

So this is a pain in the ass, but I can give you an overview of how I did it. Pardot does not allow AJAX posts, it throws a CORS error at you. What it will allow is jsonp, so I used the information found in this post: How to: Use Ajax to submit forms with default actions after submit

And combined it with a few things I found on Stack Overflow.

Here is the result:

  window.logResult= function(json) {
    if(json.result === "success"){
      formSuccess();
    } else if(json.result === "error") {
      formError();
    }
  };
  
  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);
        
        if($('#newsletter-requests').length !== 0) {
          if($('#newsletter-requests').val().length == 0) {

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

          }
        } else {

          $.ajax({
            type: method,
            url: action + '?' + dataURI,
            dataType: "jsonp",
            jsonpCallback: 'logResult'
          });

        }
        
        formSuccess = function() {
          form.hide();
          doneBlock.fadeIn();
          failBlock.hide();          
        }
        formError = function() {
          form.show();
          doneBlock.hide();
          failBlock.fadeIn();         
        }       
        // prevent default webflow action
        return false;
      });
    });
  }

makeWebflowFormAjax($('#newsletter-form'));

Essentially you need to host two .js files elsewhere since Webflow won’t let you (I used RawGit, but you could probably use Github pages) for a response that you place in your Pardot success and error location fields that contains this script. So one page simply has the success response and the other has the error response (below) and you just insert the url to those pages in Pardot.

logResult({ 'result' : 'success’ });

logResult({ 'result' : 'error' });

Apologies if this doesn’t make much sense, I did it over a year ago and I’m having a bit of trouble recalling all of the details. It is currently working and in essence you are submitting an AJAX request to Pardot, which is not otherwise possible.

Thanks @sam-g! Appreciate the overview here - I shared this with our Webflow developer to explore this as a possible solution.

Quick question - do we replace ‘#newsletter-form’ with the form ID (in our case, ‘wf-form-Test_Form’)?

@joeremix yes, or you could loop through all forms on the page. Depends on your use case.

Have any luck?

@joeremix and @sam-g, could either of you please provide a step-by-step guide of how to integrate a Pardot form handler with Webflow in the first place? We are running into so many snags with the site we’ve got going for a client and we’re pretty much stumped. How can we make a Pardot form handler work with our Webflow form? Thanks for any and all help you can give!

@Chase.MESH my instructions above do work, I’ve currently got that exact setup posting from Webflow to Pardot and returning the success/failure back to Webflow.

Without seeing your site and more detail on what’s going on it is almost impossible to troubleshoot what is happening. Can you provide additional information?

Thanks,

Sam

I think my problem with using your instructions above is that they’re a bit over my head. :sweat_smile:

I don’t have any experience with the AJAX, jsonp, javascript stuff you guys talked about. Any way you could dumb it down for a novice who only knows a beginner’s amount of html and css?

Thank you so much for your reply, @sam-g!!

@Chase.MESH unfortunately this is just a bit complicated and is probably going to require some development knowledge or bringing in a dev to complete.

Hi, can you confirm if the above works even if the form action is “post” since I guess you can only use “get” method while using JSONP.
Thanks!
Here’s the form page btw: [Form page](https://www.cialfo.co/lead-gen/help-your-students-find-their-dream-college-with-our-resources)