How to Add a Form to Webflow

November 16, 2023 |
3 min read

Webflow is a powerful web design and development tool, offering an intuitive platform for creating responsive and aesthetically pleasing websites and landing pages. It empowers users to design without code, providing a convenient experience for both beginners and seasoned developers. With its drag-and-drop interface and comprehensive set of features, Webflow has become a go-to choice for building websites ranging from simple portfolios to complex eCommerce platforms.

What are Webflow Forms?

Webflow forms enhance the interactivity and functionality of websites built on the platform. These forms enable valuable communication exchange between website visitors and site owners, serving various purposes such as gathering user feedback, collecting leads, and facilitating customer inquiries. The ability to integrate forms into Webflow helps businesses and individuals looking to engage their audience and gather valuable information.

Adding Forms in Webflow Using Embed Widget

One of the key features that Webflow offers for integrating external elements, such as forms, is the Embed Widget. This tool allows users to embed custom code and third-party content into their Webflow projects.

In the context of forms, the Embed Widget is used to incorporate forms from external sources, expanding the possibilities for creating dynamic and interactive web pages.

In the next section, we will have a look into the step-by-step process of adding forms in Webflow using this Embed Widget.

How to Add Online Forms to Webflow?

Adding your online form to Webflow is a breeze with Formester. Let’s have a look at the complete step-by-step process:

Copy Webflow Embed Code

Webflow Embed Code

Step 1: Login to your Formester account and select the form you want to embed

Step 2: Open the form you have selected to add in Webflow

Step 3: Click on the Embed Tab

Step 4: Copy the embed code by clicking on the copy code button

Add Form using Embed Widget

Webflow Dashboard

Step 1: Go to your Webflow dashboard to edit the website

Step 2: Select the website page where you want to embed the form

Step 3: Click the Add Element (+) icon on the left side

Step 4: Scroll below to the Component section

Step 5: Click on the Embed element or drag and drop it to the website page

Step 6: Paste your form’s embed codes in the embed component

Step 7: Click the Save and Close button.

Step 8: Publish your changes by clicking the Publish button.

Create your first form for free

plane image on call to action section