The Complete Guide On Setting Up And Managing Webflow Forms

Learn how to create high-converting forms with NUMI and boost your Webflow SEO. Try our solution to improve user experience and generate more leads.

The Complete Guide On Setting Up And Managing Webflow Forms

Forms are an essential part of running a website. They enable visitors to communicate their needs so you can better serve them. For example, say you run a design firm. A potential client lands on your website and is intrigued by your portfolio. Before reaching out, they fill out a consultation form to communicate their project goals. When you receive their form submission, you already have some context about their design needs to help streamline your initial conversation. This improves user experience and ultimately enables you to close more jobs. Beyond improving user experience, forms also have SEO benefits. For instance, adequately optimized Webflow forms can help collect valuable data for your business and even create leads to improve your ranking on search engine results pages. 

This article will help you understand how to get started with Webflow forms so you can improve your website’s SEO and user experience. If you want to learn more about building forms in Webflow, NUMI can help. Our expert Webflow developers can create fully customized forms tailored to your business needs.

Webflow Forms: Can You Create A Form In Webflow?

man working on a laptop - webflow forms

Webflow forms are standard HTML forms that allow you to collect information from website visitors. Examples include newsletter subscriptions, signup and login, email opt-in, event registration, contact forms, lead gen forms, and application forms. You can create a contact form using Webflow form templates with different pricing and features. 

Web forms are frequently employed in marketing, gathering information on potential customers for different purposes. A customer may be asked to sign up for a newsletter in exchange for access to a specific type of content, such as:

  • A discount code
  • Free ebook
  • Webinar 

How to Create Webflow Forms

You can find several Webflow form templates online to create a Webflow form. Webflow forms pricing is part of the Webflow plans that you are using. Webflow templates come in different forms. You can style and customize it for your brand. You can choose from cloneable designs and edit the contact forms on the Webflow dashboard. A contact form from the Webflow community is the advanced Webflow form. 

You can also use the builder to create advanced Webflow forms without writing lines of code.

Related Reading

Elements Of Webflow Forms

man working on a laptop - webflow forms

Basic Webflow Form Elements

Webflow forms are composed of various elements that gather information from website visitors. These elements include:

  • Form Blocks: The foundational structure that houses other form elements.
  • Labels: Text that describes what information is requested in each form field.
  • Input Fields: Standard text fields where users can enter short answers.
  • Text Area: A larger text box for more extended responses.
  • Checkboxes: These are users' options for accepting terms or choosing preferences.
  • Select Menu: Dropdown menus allow users to select an option from a list.
  • Buttons: These are used to submit the form or reset the fields.
  • Success State: A message or action triggered when the form is successfully submitted.
  • Error State: A message or action triggered when the form submission encounters an issue.

Advanced Webflow Form Elements

Custom code can be integrated into Webflow forms for more advanced functionality. These advanced elements allow for a broader range of inputs and interactions most browsers support.

  • Range Sliders: While Webflow doesn't natively support range sliders, custom code allows for their creation. Range sliders can dynamically adjust values, such as visualizing data or adjusting inputs in real-time.
  • Dynamic Range Slider: This customized range slider can display varying numbers of images or data based on user input. It is ideal for visualizing impacts like donation amounts or other numerical data.
  • Add/Remove Input Fields: Webflow’s handling of form submissions allows users to add or remove input fields as needed dynamically. This is particularly useful for forms that require flexibility in the number of inputs.
  • Custom Select Fields: Custom select fields can be created for cases where more complex dropdowns are needed—such as a list of all countries with corresponding flags or all U.S. states. These fields can be integrated into Webflow forms to enhance user experience.
  • Date Pickers: Although Webflow doesn't offer a native date picker, third-party date picker scripts can be embedded into forms. These scripts can be styled to match the form's design and offer a range of functionalities, such as setting default dates, disabling specific dates, and more.
  • Google Places Autocomplete: Integrating Google’s Places Autocomplete API into a Webflow form can significantly improve user experience by auto-completing location fields.
  • Phone Input Formatting: Custom phone input formatting can be implemented for international telephone numbers, ensuring that numbers are correctly formatted and validated across different regions.

These advanced elements provide significant flexibility and customization options, making Webflow forms more robust and adaptable to various needs.

Numi For Startup Design Solutions

NUMI is a webflow development agency that world-class webflow developers and product designers power. Backed by Y Combinator, NUMI handles all of your startup's sourcing/vetting/hiring needs for design. Our fabulous design team ensures all your design work is done well. 

NUMI helps with:

  • Product design
  • Web design
  • Framer development
  • Webflow development
  • Mobile design
  • Prototyping
  • UX design
  • All of your startup's design needs

Expert Design Team

Subscribe to a guild of world-class designers ready to embed on your team today. Schedule a call with us today to learn more!

How To Set Up Webflow Forms

man working on a laptop - webflow forms

Webflow forms can help you increase business leads. Fifty percent of marketers say inbound marketing strategies, which include online forms, are a primary lead source. In addition to the statistics, seventy-four percent of companies use web forms to generate leads, with forty-nine point seven percent saying online forms are their top lead-generating tool.

What is its purpose now that you have added a form to your Webflow site? Do you want your visitors to register for an event or subscribe to your newsletter?

How Do I Set Up Webflow Forms?

To add a form in Webflow, go to the Add panel and then the Form list. You can pick between a few form elements and then drag them onto the canvas.

Form Structure

Initially, the form block inherits the full width of its parent element and contains 3 nested elements: 

  • The form itself
  • The success message
  • The error message

You can tweak or delete an element within the form without writing a single line of code. Webflow lets you easily adjust the web form to your brand image and requirements.

How Do You Create a Contact Form In Webflow?

person working alone - Webflow Forms

Boost Your Leads with Webflow Forms

Nearly all of your website's efforts are directed around getting users to submit contact forms so you can add them to your lead database. To do this, your contact forms should be easy to:

  • Maintain
  • Generate quickly
  • Not lose data when organizing contacts

How to Create a Contact Form in Webflow

Insert the Form Section

  • Open the Add Panel in the Navigator: Access the Navigator, giving you an overview of your site’s structure.
  • Drag a Section into the Navigator: This section will serve as the container for your contact form. Drag it from the Add Panel and drop it into the desired location on your page.
  • Style the Section: Go to the Style panel and use the Selector field to choose a Section from the existing classes. This lets you design the section for a professional look that aligns with the rest of your site.

Add a Container for Form Elements

  • Add a Container Inside the Section: Open the Add Panel again and drag a Container element into the section. This will ensure that your form elements are neatly organized and responsive.
  • Select the Container Class: Click on the Container element, and in the Selector field, choose the Container class. This ensures that your design is consistent across the site.

Insert a Form Block

  • Relaunch the Add Panel
  • Drag a Form Block into the container you just added

This will automatically generate the essential form elements, including name and email address fields. The form block is the foundation of your contact form and gives you a starting point to add additional fields as necessary.

Customize the Form Fields

  • Customize Default Fields: The form block will include fields for the user’s name and email by default. These are essential, but you can add more fields based on the information you need from your visitors.
  • Add Additional Fields: If you want to collect more information, such as a message or phone number, you can add additional form fields. 
  • Drag a Text Box: Open the Add Panel again, find the Text Box element, and drag it into the form block where you'd like it placed. 
  • Add a Label for Each Field: To clarify what each text box is for, drag a Label from the Add Panel and place it above the text box. Double-click on the label to edit the text and indicate what information is required (e.g., Leave a Message).

If needed, you can continue adding other elements like dropdown menus, checkboxes, or radio buttons.

Style and Finalize

Once you have all your form fields, you can style the form to match the rest of your website. Use the Style panel to customize the size, spacing, colors, and fonts. You can also set placeholders in your text boxes to guide users in what to input.

Set Up Form Submission Settings

After configuring your form, you must set up where the form submissions go (usually an email address or a database). Webflow makes it easy to integrate form submissions with tools like Zapier or to export the data to a CMS.

Test Your Contact Form

Before going live, test your contact form to ensure it:

  • Works appropriately
  • Captures the needed data
  • Routes submissions to the right location

Related Reading

Understanding Webflow Form Submissions

man working on a tablet - webflow forms

When a form is submitted on your Webflow site, the data is sent to your Webflow backend and the email address specified in your form notification settings. You also have the option to directly submit data to your backend or integrate it with third-party tools like:

  • Zapier
  • Make.com
  • Mailchimp
  • Typeform
  • HubSpot

While Webflow provides robust functionality, there are some limitations, but you can often find workarounds by engaging with the Webflow community. 

Advanced Form Submissions: Submit Your Webflow Form Data to Google Sheets

You can use native Webflow forms to submit data directly into a Google Sheet via Make.com. This integration can be set up using Google and Make's free tiers, making it accessible to many users.

Advanced Form Submissions: Submit Your Webflow Form Data to Your Backend

For those with coding knowledge, submitting your Webflow form data to your own backend is possible. This process involves setting up the form, intercepting submissions, serializing the data to JSON, and submitting it via AJAX. It also includes:

  • Setting up success
  • Error feedback mechanisms

Advanced Form Submissions: Save Your Webflow Form Data to Local Storage

You can create a to-do list or similar functionality that saves data directly to your browser's local storage, allowing for:

  • Quick access
  • Persistence across sessions

Advanced Form Submissions: Allow Multiple Webflow Form Submissions

If you need to allow multiple submissions from the same form, you can implement a solution that resets the form after each submission. 

This can be useful in scenarios where users need to submit several entries without refreshing the page.

Advanced Form Submissions: Add a Reset Button to Your Webflow Forms

To enhance user experience, you can add a reset button to your forms to reset the entire form or specific fields. This gives users greater control and flexibility when filling out forms on your site.

Webflow Forms Integration

woman working on a laptop - webflow forms

Creating forms from scratch in Webflow can be time-consuming, but you can simplify it using Webflow form integrations. These integrations allow you to bypass manual form creation and set up forms quickly using various tools.

Common Webflow Form Integrations

123FormBuilder, Jotform, POWr, and MightyForms are popular tools you can integrate with Webflow to create forms. 

Each tool has an installation guide to help you create and customize forms directly on your site without complex coding.

Automate Your Webflow Forms with Zapier 

Zapier is a powerful tool for automating workflows in Webflow. With Zapier, you can set up triggers and actions for form submissions. Zapier can automatically create a new item in a specific Webflow collection when a user submits a form on your site. 

This helps you keep all form submissions organized in one place. Zapier offers various triggers and actions that can be configured to align with your site goals without requiring coding skills.

Integrating Webflow Forms with HubSpot

If you’re using a CRM like HubSpot, you can easily connect your Webflow forms to HubSpot to manage and track leads more efficiently. Here’s how you can integrate Webflow forms with HubSpot:  

  • Access Project Settings: Go to the project settings of the Webflow site that contains the form you want to integrate.
  • Navigate to Form Integrations: In the forms tab, scroll down to the bottom of the page, where you’ll find the form integrations section.
  • Map New Forms: Click "Map New Forms" to begin the integration process.
  • Select HubSpot: From the drop-down menu under marketing platforms, select "Webflow.com (HubSpot)."
  • Choose Forms: Select the relevant marketing form from HubSpot and the corresponding Webflow form you want to map.
  • Map Form Fields: Map the Webflow form fields to the appropriate HubSpot marketing lead fields.
  • Connect Form: Click "Connect Form" to finalize the integration, linking your Webflow form to HubSpot. 

This integration allows for seamless data transfer between your Webflow site and HubSpot, ensuring that form submissions are efficiently tracked and managed within your CRM.

How Do I Style A Form In Webflow? 8 Best Tips For Creating A Responsive Form

man styling forms - webflow forms

1. Start With the Basics: Setting Up Your Webflow Form

Begin by dragging and dropping a form block from the Add panel onto your canvas. Webflow provides default fields like:

  • Name
  • Email
  • Message

Add or remove fields to ensure your form captures the correct information. 

2. Customize Form Fields: Get Detailed to Improve Functionality and Design

Each form field can be tailored to fit your design and functional requirements. For instance, you can change the field types to include:

  • Dropdowns
  • Checkboxes
  • Radio buttons

To do this, select the form element and access the settings panel to modify the field types and their properties.

3. Use Clear Labels and Placeholders: Enhance User Experience for Your Webflow Form

Ensure each field has a clear label describing what information is required. Use placeholder text to provide hints or examples of the expected input. This:

4. Adjust Layout and Spacing: Improve Readability With Your Webflow Form

Webflow allows you to choose different layouts for your form, such as stacked, inline, or multi-column. Selecting the proper layout can enhance readability and usability. 

Ensure ample white space around the form elements to prevent clutter and facilitate user interaction.

5. Style With Custom Fonts and Colors: Match Your Webflow Form to Your Brand

To create a cohesive look, customize the:

  • Font styles
  • Colors
  • Sizes of your form elements

Webflow’s design tools enable you to match your form’s appearance with your overall website branding. You can also apply custom CSS for more advanced styling options.

6. Implement Validation Rules: Ensure Users Enter the Correct Information

Adding validation rules ensures that users enter the correct information. For example, you can require valid email formats or set character limits for text fields. This helps maintain data quality and provides immediate feedback to users if they make errors.

7. Create Success and Error Messages: Communicate Effectively With Users

After form submission, it's crucial to communicate with users effectively. Customize success messages to thank users for submitting and provide the next steps. Similarly, clear error messages should be set up to inform users what went wrong and how to fix it.

8. Test Your Form: Ensure Everything Works Before Going Live 

Before going live, thoroughly test your form to ensure all elements function as intended. Check for any validation, submission, and responsiveness issues across different devices. This step is crucial for providing a seamless user experience.

Webflow Forms Pricing

dollar biils - webflow forms

Webflow offers flexible pricing options through its workspace and site plans, including a free starter plan. The number of form submissions you can collect on Webflow depends on your chosen pricing plan.

Free Starter Plan

If you’re using the free starter plan under the site plans, you're limited to 50 form submissions per month. This is ideal for small-scale projects or testing Webflow's features.

Premium Plans

For those needing more form submissions, Webflow’s premium site plans provide increased limits:

  • Basic Plan: Allows up to 500 monthly form submissions. This plan is suitable for small websites with moderate traffic.
  • CMS Plan: Offers 1,000 monthly form submissions. This plan is designed for content-heavy sites that require more frequent user interaction.
  • Business Plan: Provides 2,500 monthly form submissions. This plan is aimed at larger websites with higher traffic and greater form submission needs.

Enterprise Plan

For organizations with even more extensive requirements, the Enterprise Plan offers custom limits on monthly form submissions and advanced features tailored to your needs. This plan is ideal for large-scale operations requiring significant form data collection.

When selecting a Webflow pricing plan, it’s essential to consider your monthly form submission targets to ensure you choose a plan that meets your needs.

What Is The Limit Of Forms In Webflow?

man working on a laptop - webflow forms

When using Webflow, each plan has a specific limit on the number of form submissions you can receive. If you're on the CMS plan, you can receive up to 1,000 form submissions monthly.

Handling Overages: What Happens If You Go Over?

If you exceed this limit, Webflow will automatically bill you for every additional set of 100 submissions. The cost for each set of 100 extra submissions is $1. 

This charge is automatically processed using your default payment method on file, so there's no need to enable anything for this to occur manually.

Tracking Form Submission Usage and Notifications

Webflow typically sends notifications when you approach or exceed your submission limit. These alerts help you monitor your usage and avoid unexpected charges. 

Staying aware of these notifications is essential for managing your account effectively and preventing overages from becoming costly.

What Happens to Your Submission Data if You Exceed the Limit?

Even if you exceed your submission limit, Webflow ensures that all form submissions are captured and stored. No data is lost due to exceeding your plan's limit, so you can be confident that all submitted information is securely saved. 

Keeping your payment information current is crucial to avoiding service disruptions or issues with handling overage charges. 

What Is The Best Form Builder For Webflow? 5 Options To Choose From

person choosing the best tool - webflow form

1. Webflow's Native Form Builder: The Built-in Solution for Webflow Forms

Webflow has a built-in form builder that integrates seamlessly with its design platform. It offers customizable form elements, styling options, spam protection, and integrations with tools like:

  • Zapier
  • HubSpot

The native form builder is an excellent option for creating forms that match your Webflow site's design.

2. Jotform: A Feature-Rich Option for Webflow Forms

Jotform is a popular form builder known for its extensive features and integrations. It provides vast templates, customizable form elements, conditional logic, and integrations with services like:

  • Salesforce
  • Google Sheets
  • PayPal

Jotform also offers collaboration tools and advanced form analytics.

3. Typeform: The Conversational Form Builder for Webflow

Typeform is a versatile form builder with a unique conversational approach to creating engaging and interactive forms. It offers:

  • Customizable question types
  • Conditional logic
  • Response piping capabilities

Typeform integrates with Webflow and popular third-party services like:

  • Mailchimp
  • Google Sheets
  • Salesforce

4. Feathery: A Robust Form Builder for Product Teams

Feathery is a powerful form builder designed for product teams. It offers:

  • A visual editor
  • Drag-and-drop elements
  • Custom layouts
  • Styling options to create brand-native forms

Feathery also provides:

  • A free template library
  • React and JavaScript SDKs for extensibility
  • Over 5,000 native and Zapier integrations

5. Basin: A Simple Backend for Webflow Forms

Basin is a simple and effective form backend that can be used with Webflow forms. It:

  • Offers a free plan for up to 250 monthly submissions 
  • Provides spam protection

Basin integrates seamlessly with Webflow, allowing you to point your form action to their service.

5 Best Practices For Advanced Webflow Forms

man following best practices - webflow forms

1. Keep It Simple

Simplicity is key when designing forms. Aim to limit the number of fields to only what is necessary. A shorter form reduces users' cognitive load, making it easier for them to complete and submit. 

This can lead to higher submission rates, as users are less likely to abandon lengthy or complicated forms.

2. Use Clear and Concise Labels

Each form field should have a clear label that succinctly describes the required information. Avoid jargon or overly complex language. When users can quickly understand what is being asked, they’re more likely to fill out the form correctly and completely.

3. Provide Helpful Instructions

Sometimes, users may need a little extra guidance. If a field requires specific formatting (like a phone number or date), include helpful instructions or examples right next to the field. This can ensure clarity and that users provide the correct information on their first attempt.

4. Use Visual Cues

Visual cues can significantly enhance the usability of your forms. Using asterisks to indicate required fields or color coding can help users navigate through the form more easily. These small design elements can make a big difference in guiding users through submission.

5. Test Your Forms

Before going live, it’s essential to test your forms thoroughly. Check for any issues with:

  • Submission
  • Validation
  • Data collection 

Testing helps ensure that everything works as intended and you receive the data you need. It’s also a good idea to gather feedback from a few users to identify potential pain points.

Troubleshooting Webflow Forms

discussion on troubleshooting techniques - webflow forms

Check reCAPTCHA Configuration: Prevent Submission Errors

If you have enabled reCAPTCHA on your site, ensure that every form includes a reCAPTCHA element. Missing this element can prevent forms from submitting successfully.

Review Hidden Fields: Fix Submission Issues

If you’ve hidden any form fields, ensure the Autofocus option is not checked for those fields. Autofocus on hidden fields can cause submission issues since the form may try to focus on an element that is not visible.

Verify Your Webflow Plan: Check Submission Limits

Different Webflow plans have varying limits on the number of monthly form submissions allowed. Check your plan to ensure you haven’t exceeded your submission limits, as this could prevent further submissions.

External Hosting Considerations: Know the Limitations

If you export your Webflow site for external hosting, be aware that Webflow will not process form submissions on that site. You must implement a third-party tool or service to handle form submissions effectively.

Test Without Custom Code: Eliminate Interference 

If you have added custom code to your site, it may interfere with form functionality. Temporarily remove all custom code and republish your site to see if the form works without it. If it does, gradually reintroduce your code to identify the problematic section.

Check for Required Fields: Fix Submission Errors

Ensure that all required fields are filled out correctly. The submission will fail if users attempt to submit the form without completing the required fields. Consider adding clear instructions or visual cues to guide users.

Monitor for Spam Filters: Troubleshoot Potential Issues

Webflow has internal spam detection mechanisms that might block specific submissions. If you suspect this is the case, contact Webflow support to check if legitimate submissions are being flagged as spam.

Test Across Different Browsers: Troubleshoot Form Issues

Sometimes, form submission issues can be browser-specific. Test the form in different browsers (e.g., Chrome, Firefox, Safari) and incognito mode to rule out cache or cookie-related problems.

General Data Protection Regulation - GDPR

students working on a laptop - webflow forms

The General Data Protection Regulation (GDPR) is an EU law regulating data protection and privacy. Implemented in 2018, it protects internet users in the European Union and the European Economic Area. 

When you host a website that collects personal data from EU residents, you must do this in compliance with GDPR law.

Why Does GDPR Matter for Webflow Forms? 

Webflow forms, or any other method of collecting user data on the internet, can be a target for malicious actors. If you're not careful, you could compromise your website's security and lose sensitive information that could expose you to legal action. 

This is why you need to comply with data protection laws like the GDPR, especially if you have customers or visitors based in the EU. If you’re not compliant and get hacked, you could face severe penalties from the EU of up to 4% of your annual revenue or £17 million—whichever is higher.

Subscribe To A Guild of World Class Webflow Developers with Our Webflow Development Agency Today

NUMI is a remarkable webflow development agency that builds stunning and high-performing websites using Webflow. With a fabulous design team backed by Y Combinator, we help startups with their webflow design needs.

Webflow boasts powerful built-in SEO tools to help your site rank higher on search engine results pages. With NUMI’s SEO experts, we’ll improve your Webflow site’s optimization and performance and set up a plan for ongoing SEO success.

Related Reading

Tap into the most driven engineers and designers on the planet

Hire Designer 　
© NUMI
All Rights Reserved