Streaming live at 10am (PST)

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: https://preview.webflow.com/preview/remix-2017?utm_medium=preview_link&utm_source=dashboard&utm_content=remix-2017&preview=598aaa0788f430c4b6703cb67541c113&mode=preview

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?