Webflow is a very powerful drag-and-drop editor for building powerful responsive websites.
Exported sites on Webflow can’t receive webflow backed form submissions anymore. So in this article we’re going to dive into how to receive form submissions on an exported Webflow site using FormBackend.
Log in to your FormBackend account and visit the forms index page. Go ahead and create a new form and give it a name you can remember it by. A form is basically just a blank slate for the form you add to your website. You can add as many fields as you’d like to the form on your website and the data that is submitted will show up for the form on FormBackend.
After your form has been created, you’ll see the “Submissions” page which is where new submissions will appear. If you navigate to the “Set up” page you can see the unique URL for your form. We’ll copy that!
Go to the page you want to add a form to in Webflow and add a new “Form Block”
Select the newly added “Form Block” in the Webflow editor and add your unique FormBackend form url (the https://www.formbackend.com/f/{your-identifier} url you copied when creating your form) to the Action field and set the Method to “POST”
Now when you submit the form on your webflow site, the submission will show up in FormBackend.
Every form field you add in Webflow’s designer gets a name attribute, which is how FormBackend identifies each field. Make sure each field has a unique, descriptive name (e.g. “name”, “email”, “company”). You can set this in the field settings panel in Webflow.
If you want to accept file uploads through your Webflow form, you can add a file input field and set the form’s encoding to multipart/form-data in the custom attributes.
Now that your Webflow form is sending submissions to FormBackend, here’s what to configure:
Looking for a code-based approach? See our guides for React, Next.js, HTML, WordPress, and more.
Learn how to add a form to your Webflow site that sends submissions to your inbox. Step-by-step guide with spam filtering and notifications.
