With Webflow phasing out support for forms on exported sites after August 1, 2024, integrating third-party form providers is essential to maintain both function and design. Here's how to do it without damaging your site's layout.
- Popular and reliable third-party form services include Formspree, Formsubmit, Basin, Zapier with Webflow, Getform, and Netlify Forms.
- Make sure the provider allows custom HTML and CSS styling or offers embeddable forms that can be styled to match your website.
- In your Webflow project, retain the visual form layout (form wrapper, field labels, and input styles).
- Export the static site using Export Code.
- After exporting, edit the form element manually in your code editor.
- Webflow forms in exported sites use a non-functional form action (e.g.,
//example.webflow.io
). - Replace the action URL with that of your third-party service. For example:
- For Formsubmit, use
https://formsubmit.co/your@email.com
. - For Formspree, use
https://formspree.io/f/yourFormID
.
- Do not delete or disturb the class names and structure of the form divs and inputs.
- Ensure that all classes used in Webflow’s Designer are retained in the exported HTML and CSS files.
- If you change HTML tags, make sure you're not breaking the CSS targeting (e.g., forms with
.w-input
, .w-button
).
5. Test Behavior and Style Responsiveness
- Open the exported site locally or deploy it on your server to test input validation, layout spacing, button alignment, responsiveness, and submission behavior.
- Some services allow AJAX-based (JavaScript) submissions so the page doesn’t reload—use these if you want smoother UX.
6. Handle Success/Error Messages Manually
- With native Webflow form processing gone, you must customize your own success/error messages.
- Solutions include:
- Redirect to a custom "Thank You" page using
redirect
attributes (if supported). - Use JavaScript (e.g., show/hide elements on form submit).
- Use third-party libraries (e.g., Alpine.js or plain JS) to toggle visibility of confirmation messages.
- Use features offered by form providers like honeypot fields, reCAPTCHA, or double opt-in emails.
- Also configure auto-responders and notifications from your form provider dashboard.
Summary
To seamlessly convert Webflow forms on exported sites, keep the existing design structure, swap in a third-party form action, preserve all CSS classes, and manually handle submission responses. Services like Formspree, Formsubmit, and Getform offer the easiest integration while maintaining your site's design integrity.