Webflow Custom Forms

by: Alex Nichol
alexandernichol.com

The Basics

Webflow Forms are powerful. If you use them in combination with the embed widget they can do even more.
On the left you find a demonstration of all the from elements available in Webflow. On the right you can see the form elements constructed with the embed widget. Both sets of fields are submitted with the save submit button provided by Webflow.

Available Form Inputs 

Extendable Form Inputs 

Date Pickers
Numbers
Other Feilds

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form :(

A little more advanced

Lets take a look at an examples of multi page forms created completely in Webflow.

The first example is a form block with a slider widget embedded in it. I turned the traditional right and left arrows into “continue" and “review" buttons. Because the slider is contained by the form element the form will still function normally.
Keep in mind that it will be hard to manage required fields on previous slides. In the example I kept all the required fields on the last slide.

Step 1 - Basic Info

Step 2 - Select

Step 3 - Register

Step 1
Step 2
Step 3

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form

Price Range Slider

$ 1

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form