When you submit your custom form, does it contain empty fields called “Field 1”, “Field 2”, “Field 3”, and so on? read on to find out why and how to fix it.
I am a freelance Webflow Developer, creating complex Webflow forms for marketing agency clients. I encountered a really tricky bug with complex forms which had me spending hours and hours trying to debug. It’s come up in 2 separate projects now.
I’ve finally worked out what the bug is, so if any other Webflow Developers come across it, I hope this saves you the stress I had.
And if the Webflow team read this, I hope this makes it onto your backlog, because I couldn’t figure out how to report bugs to you.
–
When building a complex form in Webflow, you might find yourself using <button> elements. E.g. a multistep form with ‘Back’ and ‘Next’ buttons, where using <button> is better for accessibility than a link.
Or, you use a plugin which adds <button>s in for you, like adding a slider somewhere within the form block that uses <button>s for its navigation arrows or dots.
Unfortunately, every time you add a <button> element into your form, the Webflow form code will think this is an input field and include it in the form submission data. You’ll see empty fields which you don’t recognise in the email notification and in the “Forms” tab of the Site Settings, all called "Field " followed by a number.
To solve the problem, either:
-
Use Javascript to remove all the
<buttons>before the form is submitted. (I create a “fake” submit button, which, when clicked, removes the<button>s on the page and then triggers a click on the “real” form submit button to post the data to Webflow) -
Don’t use the
<button>s in the first place. Find another way of achieving that functionality without them.
I hope this helps someone.