Streaming live at 10am (PST)

Webflow’s form success message — Mailchimp integration

Hi, Webflowers!

Is it possible to use a native Webflow form’s success message instead of users being redirected to Mailchimp’s one?

I connected my other form to Basin and used AJAX script, so now users will see a custom success message I designed instead of being redirected to the Basin’s success message.

However, I did try a similar way with Mailchimp but kinda failed — I mean I did get some errors in Google Chrome’s console at least, heh (see on the screenshot below).

Here is a screenshot of the errors:

Here is a custom code I used in Project Setting’s head code:

 <script type="text/javascript">

          // id of your form, with prefix # for jquery
          var formId = "#newsletter-form";

          makeWebflowFormAjax = function( forms, successCallback, errorCallback ) {
                  var form = $(this);
                  form.on("submit", function(event){
                      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");

                      // collect data from form inputs, you need to change according to you form input and it's ids.
                      var data = {
                          'email': $(formId+" #newsletter-email").val(), 
                          'name': $(formId + " #newsletter-name").val()

                      // call via ajax
                          type: method,
                          url: action,
                          cors: true,
                          dataType: 'json',
                          headers: {
                              'Accept': 'application/json',
                              'Content-Type': 'application/json'
                          data: JSON.stringify(data),
                          success: function (resultData) {
                              if (typeof successCallback === 'function') {
                                  // call custom callback
                                  result = successCallback(resultData);
                                  if ( ! result ) {
                                      // show error (fail) block
                              // show success (done) block
                          error: function (e) {
                              // call custom callback
                              if (typeof errorCallback === 'function') {
                              // show error (fail) block
                      // prevent default webflow action
                      return false;

          makeWebflowFormAjax( $(formId) );

Hope you can help!

Thank you for your replies in advance!

P.S: I found the custom code on Webfow Forum. I’m still learning the code, so my apologies if the code isn’t actually supposed to work with my setup.