Webflow Forms

Webflow forms are standard HTML forms and allow you to collect information from your website visitors. Common examples include: newsletter subscriptions, signup and login, email opt-in, event registration, contact forms, lead gen forms, application forms, etc. But that’s only scratching the surface. With a bit of creativity and custom code, your Webflow forms can become components in a web application.  

Webflow Form elements

Basic Webflow Form Elements 

Forms are made up of elements that work together to collect information from your website visitors. Different elements include; Form Blocks, Labels, Input, Text Area, Checkbox, Select Menu, Buttons, a Success state, and an Error State.

If you’re new to Webflow we recommend watching this 2 minute tutorial on configuring form elements  -

Building a web form - Web design tutorial

Advanced Webflow Form Elements 

Custom code is the key to unlocking the power of Webflow forms. If there’s an <input> supported by browsers, then it’s supported by Webflow. The following are a list of cloneable, community made Webflow form elements which rely on custom code. 

Webflow Range sliders  

Webflow does not support range sliders natively, but there’s nothing stopping you from building your own! Better still, the community has kindly already shared their own custom range sliders for you to use.

Flowbase created a beautiful Weblfow range slider which can capture a single value or a range of values from high to low. Better still, the range slider outputs a value in real time to another element on the page. 

‍

Freelance web designer and youtuber KC Katalbas created a dynamic range slider which displays a certain number of images based on the input. Perfect for visualizing the impact of a donation to a charity or really any numerical input.

Add / Remove Input fields in Webflow

The clever way Webflow handles form submissions means that you can allow users to dynamically add and remove input fields on the fly! 

‍

Here’s a solution to Add-a-field by Corey Moen using jQuery. The solution is simple enough and works quite well if you want to create a dynamic form on a static page. Each new element has a name attribute, which is important since Webflow will use that name as the label when displaying form submission results. 

Custom Webflow Select Fields

The native Webflow select field is perfect 80% of the time when you don’t mind manually filling in each option and value… but let’s talk about that other 20% of the time. Say you need a dropdown with everyone's country on earth with their corresponding flag? 

‍

‍

Or, you need a list of every state in the US. You’re in luck! Both of those links will take you directly to an open source Webflow project with exactly what you need. Just copy and paste. 

‍

Webflow Form Date Picker

There isn’t a native Webflow date picker, but that won’t stop us. Really any 3rd party date picker project inside of a code embed will work, but we’ve linked to two of our favorite projects to get you started - no research required. 

‍

Styleable data picker by Flowbase is an excellent choice if you want a simple date picker with lots of design control. All of Flowbase’s work comes 10/10 out of the box, but you can tweak the styles to fit the look and feel of your project. 

An end-to-end tutorial showing you how to integrate Flatpickr.js into your Webflow form. Matt and the team at the Visual Developers Podcast have done a fantastic job of exposing the features and functionality of Flatpickr. Including but not limited to… 

• Setting up a Simple Date Picker
• Date Picker with Time
• Human-friendly Dates (Alt Inputs)
• Setting a Default Date
• Setting a Minimum or Maximum Date
• Disabling a Specific Date
• Disabling a Date Range
• Selecting Multiple Dates
• Selecting a Date Range
• Showing Week Numbers
• Force Calendar Open on Page Load
• Using Javascript to Open/Close/Clear the Calendar

Google Places Autocomplete Inside Webflow

Delighting users with helpful APIs is one of the things we do best. Although Webflow has yet to incorporate Google’s Places Autocomplete, that doesn’t mean you can’t use the service. 

Check out this step-by-step tutorial from community member Alex Iglesias, which creates a simple and elegant Google Places Autocomplete for your form.

https://showcased.webflow.io/projects/google-places-autocomplete-in-webflow-forms

‍

Phone Input formatting Inside Webflow 

Award winning designer and engineer Oz Hashimoto has designed an  International Telephone Input form for entering and validating international phone numbers. Simply click on the following link to clone the project to use.

‍

‍

Form submissions 

Basic Form Submissions

When a form is submitted through one of your sites, the data will be sent to your Webflow backend and to the email specified in your form notification settings. You also have the freedom to send submission data to your own backend or a 3rd party tool like Zapier, Make.com, Mailchimp, Typeform, Hubspot, etc. 

Although Webflow is thriving and has expanded their functionality, there are still some limitations. Tapping into the Webflow community is where you will find ways to work around any limitations you encounter, and meet some awesome people.

If this is your first time working with Webflow forms, we recommend watching this 3 minute tutorial on what happens when a user submits a form. 

Building a web form - Web design tutorial (03:23)

Advanced Form Submissions 

How to submit a Webflow Form to Google Sheets

Nocodequest created a great tutorial showing you how to use Native Webflow Forms to submit info into a Google Sheet through Make.com. You can use google and make free tiers for this without issue. 

‍

‍

Here is the Google Sheet this form is submitted to and here is the full step by step tutorial with Webflow + Google sheets + Make. 

‍

How to Submit Webflow Forms to your Backend

If you have some coding knowledge, Bjorn Krols created a tutorial to teach you how to submit your webflow form to your own backend. You’ll learn how to set up a form, intercept submissions, serialize to JSON, submit JSON with AJAX, success and error feedback and the final code snippet. 

‍

‍

Save to local storage

Save a ‘To Do’ list that you can quickly access from your browser’s local storage with Timothy Ricks’ clonable project.

Example to-do list project by Timothy Ricks

‍

Allow Multiple Form Submissions

We found a solution for how to submit multiple forms on Webflow. Well, we tapped into the community and found Chris Spags and Noah Raskin’s solution to simply reset the form. It’s nice having smart friends! Checkout on the following link to clone their project. Multiple Form Submissions 

‍

Form Reset Button

To give your users more flexibility, Andrew Vaughan of JollyGoodWeb, has designed two options for a reset button. One allows you to reset the entire form, while the other lets you reset a specific field. Click this link to have access to cloning the project. Form Reset button 

‍

Form styling

Basic Form Styling

If you’re new to Form Styling, we recommend you check out this tutorial on Form Styling, specifically typography, field focus and columns - https://www.youtube.com/watch?v=Z-NHY7h4974&t=2s

The hardest part of styling a form is deciding how it should look. Here are the top 3 places we go for inspiration:

1. Wufoo forms are straight forward looking and will help you nail down your needs. This link takes you to their template page where you can view their vast array of data collection options.

‍

‍

2. Pinterest has a huge selection of form examples that you can browse from this link, or by using the search term “forms ui” in their search box.

‍

3. Jotform boasts of having the largest selection of free form templates on the web, and they aren’t kidding. Click the link to go directly to their templates page and get inspiration for your forms!

Form integrations

Go beyond the basic form with integrations.

Zapier allows you to automate where your form submissions go, with Form-Data; essentially taking care of business without lifting a finger. Their site has a great number of valuable resources, as well. Zapier helped Thibault Bain  build a project about local restaurants, for his community, that you can recreate.

‍

Or, clone Josh Jacob’s Magnetic buttons, from the future! to add a bit of hover micro-interaction to your site.

‍

‍

Make.com, formerly Integromat, is another one of the best tools around for automatically integrating your forms to other apps. It has a visual interface that offers a nice user experience, and allows you to directly embed the form onto your Webflow site, or link to the form. For instance, you could have a specific form field sent to an email when a trigger action is activated.

Matt Varughese used Make to create a website to support local businesses during Covid. Check out his project, COVID-19 Support Website, that can be cloned and used in your city.

‍

‍

Embed tweets to your Webflow site with Digidop Agence Webflow’s Twitter Embed - Free project.

‍

Hubspot

The Hubspot form tool gathers marketing information from visitors. Changes made on these forms will reflect immediately, whether the form is hosted on the Hubspot site, or embedded on your Webflow site. See How to Connect Hubspot and Webflow in 4 ways with this project from Flow Ninja doo . Here’s an impression of one the first way…

‍

Vibrand Design is using Hubspot to make an Odometer Count-Up that lets you set triggered number animations, and of course, count up by your chosen, or random interval.

‍

Mailchimp

Mailchimp is great for email marketing automation, targeting and segmentation, A/B testing, and team features. You can embed a signup form and combine it with a special offer to engage new visitors, offer a newsletter, or some other targeted campaign. 

If you have some familiarity working in Webflow’s designer, the following tutorial will help you easily connect your Webflow site to Mailchimp. Integrating Mailchimp and Webflow — Webflow tutorial

Try cloning one of these useful projects:

Brad Stallcup from Minim Design Co. made this Minim Mailchimp Form that helps you connect your form faster to Mailchimp.

‍

Youssef Sarhan has designed a Free Newsletter Sign-Up Landing Page

template for your newsletter, to help you grow an audience. Just clone the project to get started.

‍

2 Alternatives to Webflow Forms

When Webflow Forms doesn’t give you exactly what you need, there are alternatives.

Automating form activity has become common today, with a multitude of providers able to design that perfect form for your needs. The two most popular with designers and developers are Paperform and Typeform.

Paperform: Online Form Builder And Form Creator is easy for anyone to use, whether you are a beginner or pro. They make it easy to design a form that lets you take sales, bookings, or communicate with customers automatically. They have a free trial, then a monthly fee of $17.

‍

‍

Typeform is also easy to use with a clean and enjoyable interface that makes embedding the form onto your site simple. Their monthly fee is $29.

Embed Typeform into Webflow