How to connect Webflow native forms to HubSpot and redirect after submission

Webflow + HubSpot = match made in heaven... until your form doesn't redirect properly!

‍

If you've been wondering how to connect your native Webflow form to HubSpot CRM and still redirect users to a /success page or a custom URL (like a Google Drive file or landing page), you’re in the right place.

‍

Let's fix this once and for all — cleanly, professionally, and with some style.

‍

The problem: Native forms + HubSpot app

‍

When you connect a Webflow native form to HubSpot using the HubSpot App for Webflow, you might notice:

‍

• Submissions go into HubSpot.
• The Webflow success message doesn’t appear.
• No automatic redirect to your /success page or custom link.

‍

Frustrating, right?

‍

This happens because the Webflow form expects a normal server response, but the HubSpot App captures it differently. Webflow is left hanging like... "Did the form even submit?"

‍

The solution: A tiny custom script

‍

Don't worry — you don't need Zapier, no third-party plugins, and no heavy lifting.

‍

All you need is a small, elegant JavaScript snippet to manually trigger the success state and redirect users.

‍

• Works with multiple forms.
• Respects Webflow’s native success message.
• Redirects anywhere you want — /success page or custom URL.

‍

Here’s the copy-paste JavaScript

‍

Paste this script inside your Webflow Page Settings → Custom Code → Before </body> tag:

‍

<script>
document.addEventListener('DOMContentLoaded', function() {
 var formIDs = ['#wf-form-MVPForm', '#wf-form-mvpchecklistform2']; // Replace with your real form IDs

 formIDs.forEach(function(id) {
   var form = document.querySelector(id);

   if (form) {
     form.addEventListener('submit', function(e) {
       e.preventDefault(); // Stop Webflow's default behavior

       // Let HubSpot capture the form submission
       setTimeout(function() {
         var successWrapper = form.querySelector('.w-form-done');
         var formWrapper = form.querySelector('.w-form');

         if (successWrapper && formWrapper) {
           formWrapper.style.display = 'none';
           successWrapper.style.display = 'block';
         }

         // Redirect after a short pause
         setTimeout(function() {
           window.location.href = 'https://yourcustomlink.com'; // <-- Replace with your custom URL
         }, 300);
       }, 500);
     });
   }
 });
});
</script>

‍

Pro Tip: Replace the form IDs and URL with your actual values.

‍

Step-by-step summary

‍

1. Connect your Webflow form to HubSpot via the HubSpot Webflow App.
2. Add a custom success message inside your form block (Webflow default).
3. Paste the JavaScript above into the page’s Before </body> section.
4. Publish your site.
5. Celebrate  — users submit, HubSpot captures the data, and your redirect works.

‍

Extra pro tips

‍

• Multiple forms? You can easily add more form IDs to the array.
• Want to delay the redirect a bit longer? Change the 300 inside setTimeout.
• Want a smoother UX? Show a "Loading..." spinner during redirect (easy to add).

‍

Need help? Let’s talk!

‍

If this guide helped you fix your Webflow + HubSpot form integration — awesome! But if you’re still feeling a little stuck, or just want it done perfectly without the stress...

You can schedule a free call with our team — no pressure, just friendly advice, expert tips, and a roadmap to get your forms (and your CRM) working exactly the way you want.

Let’s make your Webflow project unstoppable!