Easy Tech TutsHow to Add Contact Form in Webflow Easily 2026
By Impran M N
A working contact form is one of the most essential conversion points on any site, and Webflow's native Form Block makes it possible to build one without custom code. This guide covers adding input fields, designing success and error states, and setting up email notifications. It's for anyone building a lead capture or inquiry form for the first time.
01Add the Form Block
Open the Add Elements panel and drag the Form Block component onto your page.
02Add input fields
Insert text fields, a text area for longer messages, dropdown selections if needed, and a submit button inside the form.
03Set placeholders and required fields
Update each field's placeholder text and toggle the required setting on fields that must be filled out before submitting.
04Style the success and error states
Switch between the form's success and error states to design a clear confirmation message and error notice.
05Set up email notifications and publish
Open Site Settings to configure where form submissions get emailed, test the form on mobile, then publish your project.
Frequently asked questions
Where do form submissions go by default?
Webflow emails form submissions to the address configured in your site's form notification settings, and also stores them in the CMS-connected Forms panel.
Can I customize what happens after someone submits?
Yes, you can style the success message shown after submission, or redirect users to a separate thank-you page.
Is Webflow's form spam-protected?
Webflow includes basic spam filtering, but for extra protection you can add a reCAPTCHA element to the form.
Can I connect the form to an external tool instead?
Yes, you can point form submissions to services like Zapier or another automation tool to route leads elsewhere.
Watch the full walkthrough
The same steps, demonstrated on screen from start to finish.
