Show Webflow Forms Inline Success/Error Message On Submit to Outside Tools (No Redirect)

If you've ever tried hooking up an outside email marketing platform or CRM to Webflow's forms (eg. like Audienceful), you'll quickly realize Webflow doesn't allow native form-handling with 3rd-party tools.

This means your form will submit data properly, however, Webflow won't show the inline success or error messages without a page redirect.

One solution is to redirect to a success page after the user submits the form, however, not everyone wants to do this.

Luckily we have a fix. With some custom code, you can bring Webflow's native form-handling back and submit forms without a page redirect.

Step 1: Create an Audienceful account

If you haven't already, sign up for Audienceful here.

Then go to signup forms and create a URL for submitting your form. Hook this URL up to your form action and set it to POST. If you need help, follow our guide for adding forms to your webflow site.

Step 2: Ensure your form is submitting data

Before adding this custom code to your site, it's important to ensure your form is already submitting data successfully (even if not showing the inline success/error messages).

Testing is important to properly isolate the cause of any problems. If your form wasn't submitting data before adding this custom code, this won't fix it.

Step 3: Add this custom code to your site

In the Webflow admin dashboard, go to Project Settings > Custom Code. If you don't know how to do this, here's Webflow's official doc about adding custom code to your site

Copy and paste the following code into the Footer section:

 <script type="text/javascript">
 // Applies only to forms pointing to Audienceful
 $('form[action^="https://app.audienceful.com"]').each(function(i,el){
   form = $(el);
   form.submit(function(e){
     e.preventDefault();
     form = $(e.target);
     action = form.attr('action') + "?res=json";

     $.ajax({
       url: action,
       method: "POST",
       data: form.serialize(),
       dataType: "json",
       success: function(data) {
         parent = form.parent();
         $("form", parent).css('display', 'none');
         $(".w-form-done", parent).css('display', 'block');
       },
       error: function() {
         parent = form.parent();
         $(".w-form-fail", parent).css('display', 'block');
       }
     });
   });
 });
 </script>

Now re-publish your site and give it a test. If you see both the inline success message and the data being submitted to Audienceful, you're good!

How this custom code works

This custom code was modified from this Webflow forum post.

It uses Javascript to find any form on-page that matches the endpoint of the outside service you're using (in our case, all of Audienceful's form endpoints begin with app.audienceful.com).

It then prevents the normal post action of the form, and instead submits the form using AJAX. This doesn't require a page redirect or refresh, and allows you to mimick how Webflow's native form-handling.

Adapting this code to get the inline success/error messages when submitting forms to other tools

You can also adapt this code to work with pretty much any outside tool, you just need to do a bit of reverse-engineering to figure out the raw forms endpoint url of the platform and the way they structure their JSON data.

Theoretically this should be possible in any email marketing, newsletter or CRM platform like ours that offers forms (eg. Hubspot, Salesforce Pardot, Eloqua, Brevo, ActiveCampaign, GetResponse, Moosend, Omnisend, Sendgrid, Mailjet, Convertkit, Mailerlite, Drip, Klaviyo, Constant Contact, Braze, Campaign Monitor, etc. etc.)

If you're having trouble, since Audienceful is setup to support this out of the box, we make it super easy and offer spambot protection (like Akismet) on signups by default. So another option is to collect the signups using Audienceful, and then sync them elsewhere automatically using Zapier.