Webflow Forms: Adding and Setting Up a Form on Your Site

When creating a website, you should consider adding a form to capture relevant information from potential clients. Webflow forms have got you sorted. They are easy to customize and add to your site.

You can add email newsletters to your site, lead gen forms, contact forms, application forms, etc. There are different ways of setting up Webflow forms.

Do you want to find out more about Webflow forms? We'll guide you through how to set up Webflow forms on your site. 

Let's dive in.

How Do I Create a Form in Webflow?

You can create a Webflow form from scratch or use a Webflow integration app. Webflow allows you to customize and optimize the form elements for your site.

Webflow also has responsive form templates. The Webflow templates are customizable on the Webflow editor.

Besides, you can clone Webflow forms from the Webflow community. To get started, select a cloneable form from the Webflow showcase and edit it on Webflow.

Since Webflow is a no-code CMS, you do not have to be a web developer to create unique forms. You can use the drag & drop feature to create a form from scratch, customize a form template, clone Webflow showcase forms, or use Webflow forms integrations.

How to Add Webflow Forms

After creating your website, you need to embed a form for your site users to sign up for your newsletters or capture leads through lead generation forms.

A form has different elements. Webflow lets you customize forms with multiple form elements. So, how do you add a form on Webflow?

Click on the add panel, and from the elements, navigate to forms. Drag the form block and drop it on a canvas. The form block may not have all the fields, so you have to customize it. 

Open the form block by clicking on the drop-down on the left side of the panel. You have three options - a form, a success message, and an error message.   

To customize your form, drag and drop elements from the form tab. Examples of form elements are the radio button, checkbox, text area, reCaptcha, and form button. And that is how you add Webflow forms to your site. 

How to SET Up Webflow Forms

To increase your business leads, you should consider setting up Webflow forms. 50% of marketers feel that inbound marketing strategies, which include online forms, are a primary lead source.  

In addition to the statistics, 74% of companies use web forms to generate leads, with 49.7% saying online forms are their top lead-generating tool. 

Now that you have added a form to your Webflow site, what is the purpose of having a form? Do you want your visitors to register for an event or subscribe to your newsletter?

By default, the form block has 3 elements - the name, email, and a submit button. How about adding more form elements? 

To customize a form, drag elements and drop them into the form. For instance, if you want to add a text area, drag it from the form tab and drop it into the Webflow form. 

To edit the element settings, double-click on it to open the settings. Form element settings are not the same. For instance, if you want your users to submit their first and second names, you have to select the required option. 

Selecting the required option ensures that users must submit the details. Another field for the element's input settings is the placeholder. 

It displays the field text and guides users on the text to add. The placeholder is overwritten automatically when the user begins to add custom information. 

Make sure you have clear button text and waiting text for the button. For example, you can set the button text as submit, and the waiting text as submission is successful. 

The benefit of using Webflow is that you have more customization options. Therefore, you can style the form typography, background, position, text, and effects. 

Webflow Forms Integrations

Creating a form from scratch can be tedious. Instead of using the drag & drop feature, you can use Webflow form integrations.

Webflow has multiple integration tools. You can pick a form integration and follow the installation guide to set up a form on your site.

Examples of Webflow forms integrations are - 123formbuilder, Jotform, POWr, and MightyForms.

You can also use Zapier Webflow forms to create Webflow collection items for new form submissions. When a user submits a form, it helps you organize the form submissions in one place.

Zapier has actions and triggers. It allows you to set an action based on a trigger. Zapier Webflow forms make it easier to set a trigger every time you receive a new submission.

The action for the trigger is that it automatically creates a new item for a specific collection. You can keep track of form submissions from your site. 

Zapier has multiple triggers and actions. You can set them up based on your site goals without coding. 

So, what if you're using a CRM and want to add your forms to your Webflow site? An example of a CRM is Hubspot.

You can create your forms on Hubspot and connect them to Webflow and vice versa. With a Hubspot integration, you can connect your Webflow forms to Hubspot from the project settings.

Here's how to go about integrating Webflow forms to Hubspot:

1. On the project with the Webflow form, click on project settings.
2. On the forms tab, navigate to form integrations at the bottom of the page. 
3. Click on map new forms.
4. From the drop-down menu on the marketing platform, select Webflow.com (Hubspot).
5. Select your form from the marketing form name.
6. From the Webflow form name, select a corresponding Webflow form. 
7. Map the Webflow form fields to the Marketing lead fields.
8. Click on connect form to link your Webflow form to Hubspot. 

How Do You Create a Contact Form in Webflow?

As mentioned earlier, you can create a contact form using Webflow forms templates. The templates have different pricing and features.

Webflow templates come with a contact form. Hence you can style and customize it for your brand. You can also look for Webflow contact forms inspiration from the Webflow showcase.

You can also choose from cloneable designs and edit the contact forms on the Webflow dashboard. An example of a contact form from the Webflow community is the advanced Webflow forms.

You can use the builder to create advanced Webflow forms without writing lines of code. It features the Webflow forms conditional logic to trigger custom animations when a condition is met. 

It also helps to build workflows that show, hide, disable, enable, and require depending on your logic. The advanced Webflow forms let you add multiple steps with input validation and additional options like custom interactions and alerts. 

Webflow Forms Pricing

Webflow pricing lets you choose a workspace plan or a site plan. The two pricing plans have a free starter plan.

How many forms can you have on Webflow? That depends on the pricing plan you're using. If you're using a free starter plan for the site plans, it allows up to 50 form submissions. 

With a premium plan, you can have more monthly form submissions. The premium plans for the site plan are CMS, basic, Business, and enterprise.

The basic plan allows you up to 500 monthly form submissions, the CMS plan lets you collect 1,000 monthly forms, and the business plan allows you up to 2,500 monthly form submissions.  

You can also use the enterprise plan with advanced features. It gives you custom monthly form submissions. You need to select a Webflow pricing plan that meets your monthly target for your monthly form submissions.

Where Are Webflow Forms?

There are 2 ways you can access Webflow forms submissions. First, go to the site settings on your Webflow project, and from the forms tab, select form submissions.  

The second method is from the Webflow editor, then select the forms tab. Webflow allows you to download form submissions in CSV format. 

From the form submission data, scroll to the bottom section of the table and select download CSV.

Webflow Forms Submissions

Webflow recommends using a name-based email to receive form submissions. Otherwise, using role-based emails like admin@ or info@ will have your email submissions blocked. 

Webflow allows you to hide, download, or delete form submissions from the forms tab. You can increase the number of monthly form submissions by upgrading the pricing plan. 

With Webflow, you can collect form submissions, download submissions as CSV files, and customize notification emails. 

So, what happens when you exceed the monthly form submissions? Webflow charges $1 per extra 100 submissions. 

If you're not receiving the monthly submissions, check your notification settings. Also, check the billing tab to confirm if your site plan is active. 

Lastly, ensure that you're using a name-based email since role-based emails are often blocked by transactional email providers.

You do not need a custom domain to receive form submissions. You can use the free site plan to publish your site on the webflow.io domain. 

However, if you need a custom domain, you need a premium plan. If you're using external hosting, you will need a third-party hosting tool to collect form submissions or use an integration tool like Zapier. 

The Bottom Line

You can add Webflow forms using Webflow forms integrations, templates, or creating one from scratch. Webflow lets you customize the forms.

You can use a Webflow integration tool like Zapier to process your form submissions and send the data to a 3rd party software like Hubspot or Mailchimp.

The Webflow forms pricing offers different monthly form submissions. If you're using the free starter plan, you have a lifetime of up to 50 form submissions. But, the number of form submissions changes as you upgrade to the premium plans.