What are some suggestions for easily converting Webflow designs to third-party forms without damaging the site's design, considering the phasing out of support for exported websites' forms?

TL;DR

Choose a style-compatible third-party form service like Formspree or Formsubmit.
Export Webflow site's code with form structure intact, then replace the form's action URL with the provider's endpoint.
Preserve all Webflow CSS classes and structure to maintain design and styling.
Manually implement success/error messages and test form responsiveness and validation.
Use built-in spam protection from your form provider such as honeypot or reCAPTCHA.

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.

1. Choose a Design-Compatible Form Provider

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.

2. Export Webflow HTML with Form Structure Intact

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.

3. Replace Default Webflow Form Action

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.

4. Preserve and Reapply Webflow's Form Styling

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.

7. Secure the Form to Avoid Spam

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.

Webflow Resources

Webflow templates

Webflow inspiration

Rate this answer