Webflow’s form success message — Mailchimp integration

Design help Custom code
1

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:

image
image1920×1022 171 KB

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 ) {
              forms.each(function(){
                  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
                      $.ajax({
                          type: method,
                          url: action,
                          cors: true,
                          contentType:'application/json',
                          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
                                      form.show();
                                      doneBlock.hide();
                                      failBlock.show();
                                      console.log(e);
                                      return;
                                  }
                              }
                              // show success (done) block
                              form.hide();
                              doneBlock.show();
                              failBlock.hide();
                          },
                          error: function (e) {
                              // call custom callback
                              if (typeof errorCallback === 'function') {
                                  errorCallback(e)
                              }
                              // show error (fail) block
                              form.show();
                              doneBlock.hide();
                              failBlock.show();
                              console.log(e);
                          }
                      });
                      // prevent default webflow action
                      event.preventDefault();
                      return false;
                  });
              });
          }

          makeWebflowFormAjax( $(formId) );
      </script>

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.

2

Did you ever figure this out? I just want my form that I built in webflow to send the info to my mailchimp, redirect to a custom page that I also created in webflow and then for mailchimp to do it’s part sending the welcome email. I’m stumped - this is a nightmare!

3

Have you tried the Logic approach?

4

I got it to work with Formspree, but now I’m having issues figuring out how to get new subscribers to be tagged when they come through a specific form.

5

Using Logic, you’d just define a field in your form that contains the form identifier or page name. You can hide that field if you don’t want users to see it.

Then Logic has that form-unque value and can pass it to Mailchimp however you like.