How to Create Webflow Forms: Setup, Styling and Integrations

Webflow forms are useful for much more than a basic contact page. You can use them to collect project enquiries, demo requests, newsletter signups, applications, and other information directly from your website.

In this guide, I'll walk you through the complete process of creating a Webflow form:

1. Adding the Form Block
2. Choosing and configuring fields
3. Styling the form
4. Creating success and error states
5. Making the form responsive
6. Configuring submissions
7. Connecting the form to other tools
8. Testing everything on the live website

If you prefer to follow along with a video, watch my 23-minute tutorial on Webflow forms for a practical walkthrough of the process. Although the video was published in 2024, this article itself is a current up-to-date guide.

What Is a Webflow Form?

A Webflow form is a collection of input fields that allows visitors to submit information through a Webflow website.

Common uses are: 

• Contact forms
• Project enquiry forms
• Quote request forms
• Newsletter signup forms
• Demo request forms
• Job application forms
• Download forms
• Customer feedback forms

A Webflow form usually includes:

• A form wrapper
• Field labels
• Input fields
• A submit button
• A success state
• An error state

Creating the visible form is only one part of the process. You also need to structure the fields, style the interface, configure where submissions go, and test the complete workflow on the live website.

How to Create a Webflow Form

The quickest way to create a form in Webflow is to add a Form Block to your page and then customize its fields and design.

Add a Form Block

Open the Webflow Designer and navigate to the page where you want to add the form.

Open the Add panel and search for Form Block. Drag the Form Block onto the page or into the section where you want the form to appear.

Webflow will create a basic form structure containing:

• A name field
• An email field
• A message field
• A submit button
• A success message
• An error message

Use this structure as a starting point rather than treating it as the finished form.

Give the Form a Clear Class Name

Select the Form Block and assign it a descriptive class name.

Some examples:

• form-contact
• form-project-enquiry
• form-demo-request
• form-newsletter
• form-application

A clear class name makes the project easier to maintain and helps you style the correct form without affecting other forms across the website.

If your website uses a design system, combine the form with your existing typography, spacing, input, and button classes wherever possible.

Define the Purpose of the Form

Before adding fields, decide what the form needs to achieve.

A basic contact form may only need name, email address and a message.

For example, a project enquiry form is more sophisticated:

• Company name
• Service required
• Budget range
• Project timeline
• Website URL

Only ask for information that's useful for the next step. Every additional field creates more effort for the visitor and can reduce the likelihood that they complete the form.

How to Add Webflow Form Fields

You can add different field types to a Webflow form depending on the information you need to collect.

Most common fields:

• Text fields
• Email fields
• Text areas
• Number fields
• Phone fields
• Select fields
• Checkboxes
• Radio buttons
• File upload fields

To add a field, open the Add panel and place the relevant input element inside the Form Block.

Text Fields

Use a text field for short answers:

• First name
• Last name
• Company name
• Job title
• Website URL

Use a specific label so visitors understand exactly what to enter.

For example "Company name" is much clearer than "Information."

Email Fields

Use an email field when you need to collect a visitor's email address.

The email field communicates the expected input type and allows the browser to apply basic email validation.

Use a clear label, something like "Work email", "Email address" or "Business email."

If the reason for collecting the email address is not obvious, explain what will happen next.

For example:

"We'll use your email address to reply to your project enquiry."

Text Areas

Use a text area for longer responses.

Typically:

• Project descriptions
• Questions
• Requirements
• Additional information
• Application notes

Give the text area enough height to feel comfortable. A very small text area suggests that only a short response is expected.

Select Fields

Use a select field when visitors need to choose one option from a longer list.

Examples:

• Service required
• Company size
• Budget range
• Location
• Preferred contact method

If there are only two or three options, radio buttons may be easier to scan than a dropdown.

Checkboxes

Use checkboxes when visitors can select multiple options or confirm a specific choice. Some examples that are widely used are services required, areas of interest, agreement to terms and consent to receive communications.

The checkbox label should explain exactly what the visitor is agreeing to or selecting.

Radio Buttons

Use radio buttons when the visitor needs to select one option from a small set.

Radio buttons are often easier to use than a dropdown when the number of available options is limited.

How to Label Webflow Form Fields

Every field should have a visible and understandable label.

A good label tells visitors what to enter, which format to use and why the information may be needed (where relevant).

Some good examples: 

• Work email
• Company name
• What do you need help with?
• Tell us about your project
• What service are you interested in?

Avoid using placeholder text as the only label. Placeholder text disappears when visitors start typing and can make the form harder to understand.

Use placeholder text as an example instead of a replacement for the label.

For example:

Label: Company website  

Placeholder: https://example.com

How to Make Webflow Form Fields Required

Select a field and enable the required setting when the information is necessary to process the submission.

Only make a field required when it helps you process, qualify, route, or personalize the enquiry: RevenueHero's 2025 benchmark of more than one million inbound leads found that high-performing B2B companies converted effectively with both very short and much longer forms, suggesting that the value and purpose of each field matter more than field count alone.

For a basic contact form, the required fields are:

• Name
• Email address
• Message

A phone number, budget, company size, or project timeline should only be required when it's genuinely necessary for the next step.

The goal is not to remove every field. The goal is to remove unnecessary friction and collect information that helps your team respond, qualify the enquiry, route it to the right person, or personalize the follow-up.

If a field is useful but not essential, make it optional and explain why you are asking for it.

How to Structure a Webflow Form

A form should always follow a logical order.

Start with simple information and move towards more detailed questions.

A project enquiry form could use a sequence like this:

1. Name
2. Work email
3. Company
4. Project type
5. Project description
6. Preferred next step

This sequence works because visitors can begin with easy answers before reaching the more demanding questions.

Group related fields together. For example:

• Personal details
• Company details
• Project information
• Contact preferences

Avoid making visitors jump between unrelated questions.

How to Style a Webflow Form

A Webflow form consists of multiple elements, and each element needs to be styled.

The main elements:

• Form wrapper
• Field labels
• Text inputs
• Text areas
• Select fields
• Checkboxes
• Radio buttons
• Submit button
• Success message
• Error message

Style the Form Wrapper

Use the form wrapper to control:

• Maximum width
• Overall spacing
• Internal padding
• Background color
• Border
• Border radius
• Layout direction

A limited form width is usually easier to scan than a form that stretches across the full desktop viewport.

Use consistent spacing between field groups so visitors can understand which label belongs to which input.

Style the Labels

Labels should be visually connected to their fields.

Pay attention to:

• Color contrast
• Typography
• Font size
• Line height
• Spacing
• Visual hierarchy

Don't make labels so small or faint that they disappear into the design.

Style Input Fields

Input fields should be immediately recognizable as interactive elements.

Pay attention to:

• Height
• Padding
• Border color
• Border radius
• Font size
• Background color
• Focus state
• Error state
• Disabled state

The form should match the visual language of the rest of the website, but usability should come before decoration.

Style the Submit Button

The submit button should clearly describe the action that will happen.

Good button labels:

• Send enquiry
• Request a consultation
• Get the guide
• Submit application
• Get a demo

Avoid using "Submit" when a more specific label is possible.

Make sure the button has clear default, hover, focus, and disabled states.

How to Create Success and Error States

Webflow forms include success and error states that appear after a visitor submits the form.

These states are essential because they tell visitors whether the form worked.

Create a Useful Success Message

The success state should confirm that the form was received and explain what happens next.

Example:

Thanks - your enquiry has been sent. We'll review the details and get back to you within two business days.

A success message should have:

• Confirmation that the submission worked
• The expected response time
• Information about the next step
• A link to another useful page

Avoid using only "Success" or "Thank you" and similar options - these messages don't provide enough information.

Create an Error Message

The error state should explain that something went wrong and tell the visitor what to do next.

Example:

Something went wrong while sending your message. Please check your details and try again. If the problem continues, contact us directly.

Never blame the visitor or rely only on color to communicate an error.

Style Validation Feedback

Validation feedback should make errors easy to correct.

Good validation feedback:

• Identifies the affected field
• Explains what needs to change
• Remains visually clear
• Works without relying only on color
• Does not erase information the visitor has already entered

For example:

"Please enter a valid work email address."

This is way more useful than:

"Invalid input."

How to Make a Webflow Form Responsive

Your form needs to work on mobile as well as desktop.

Check the form at each major breakpoint.

On smaller screens:

• Stack fields vertically
• Avoid cramped two-column layouts
• Keep labels visible
• Use comfortable input heights
• Make the submit button easy to tap
• Prevent horizontal scrolling
• Test long error messages
• Check the form on a real device

If first name and last name sit next to each other on desktop, make sure they stack cleanly on mobile.

Don't make fields unnecessarily short just to reduce the form's height. Comfortable interaction is more important than saving a small amount of vertical space.

How to Configure Webflow Form Submissions

Creating the visible form is only part of the process. You also need to decide where submitted information should go.

Depending on your Webflow setup, submissions may be handled through:

• Webflow's form submission system
• Email notifications
• Connected automation tools
• CRM integrations
• Email marketing platforms
• Custom workflows or endpoints

Define the destination before publishing the form.

A form that looks correct but sends submissions to the wrong place is still broken.

Check the Form Name

Give the form a clear name so you can identify it later.

Examples of good names: 

• Contact form
• Project enquiry
• Newsletter signup
• Demo request

This becomes especially important when a website contains several forms.

Configure Notification Recipients

Make sure form notifications go to the correct person or team.

Check:

• The recipient email address
• The sender information
• The subject line
• The form name
• The fields included in the notification
• Whether replies go to the visitor's email address or an internal address

Don't assume that the notification workflow works simply because the form appears correctly on the page.

How to Connect Webflow Forms to Other Tools

Webflow forms can be connected to external tools when you need to send submissions into another system.

Connection goals: 

• Sending a notification to a team
• Adding a lead to a CRM
• Adding a subscriber to an email list
• Storing submissions in a spreadsheet or database
• Triggering an internal workflow
• Sending data to a custom application

Most popular tools:

• Zapier
• Make
• HubSpot
• Salesforce
• Mailchimp
• Klaviyo
• Airtable
• Google Sheets
• Custom webhook or API workflows

The exact implementation depends on the tool and the current Webflow setup.

For a simple contact form, native Webflow handling may be enough. For a form that needs lead routing, scoring, CRM assignment, marketing automation, or conditional workflows, an external integration may be necessary.

Start by defining what should happen after submission:

1. The visitor submits the form.
2. The submission is received.
3. The data is sent to the relevant tool.
4. The team or automation responds.
5. The visitor receives confirmation.

Test every stage of that workflow rather than checking only whether the form appears on the page.

How to Test a Webflow Form

Don't consider a form finished because it looks correct in the Designer.

Test the complete process on the published website.

Submit Valid Information

Submit the form with realistic test data.

Check that:

• The form submits successfully
• The success message appears
• The submission reaches the expected destination
• Notifications arrive at the correct address
• Every field is included correctly
• Any external integration receives the data

Test Required Fields

Try submitting the form without completing required fields.

Check that:

• The correct field is identified
• The error message is clear
• The visitor can fix the error easily
• Entered information is not unnecessarily lost

Test Invalid Information

Use an invalid email address and test any other validation rules.

The error should explain exactly what needs to change.

Test the Mobile Version

Test the form on a real phone where possible.

Check:

• Whether the form fits the viewport
• Whether fields are easy to tap
• Whether the keyboard hides the active field
• Whether the submit button remains visible
• Whether success and error states work
• Whether long messages break the layout

Test the Live Domain

A form that works in the Designer or preview environment should also be tested on the published domain.

Repeat the test after:

• Publishing a new version
• Changing the form structure
• Adding custom code
• Changing integrations
• Moving the website to a new domain
• Updating form settings

Common Webflow Form Problems

The Form Does Not Submit

Check:

• That the website is published
• That required fields are completed
• That the form is inside the correct Form Block
• That no custom code is preventing submission
• That the live version of the page has been tested

The Form Submits but No Notification Arrives

Check:

• The notification recipient
• Spam or junk folders
• The form's submission settings
• Whether the submission appears in the relevant Webflow area
• Whether an external automation workflow is running
• Whether the notification email is configured correctly

The Form Works in Preview but Not on the Live Website

Publish the latest version and test the live URL directly.

Also check:

• Custom code
• Domain configuration
• Embedded scripts
• Third-party integrations
• Whether the live page contains the latest form version

The Success Message Does Not Appear

Check that the success state has not been hidden or covered by another element.

Review:

• Display settings
• Positioning
• Z-index
• Custom interactions
• Responsive styles
• Visibility settings at different breakpoints

The Form Receives Spam

A basic form may attract spam depending on the website and traffic source.

Possible fixes:

• Reducing publicly exposed contact details
• Adding suitable bot protection
• Reviewing suspicious submission patterns
• Using validation and rate-limiting approaches where available
• Connecting the form to an appropriate filtering workflow

Spam protection should be handled according to the form's purpose and the sensitivity of the collected data.

Webflow Form Best Practices

Keep the form focused: Ask only for information needed for the next step.

Use visible labels: Do not make placeholders carry the entire meaning of a field.

Make the call to action specific: Tell visitors what will happen when they click the button.

Design every state: Style default, hover, focus, filled, error, success, and disabled states.

Make mobile a first-class experience: Do not treat responsive behaviour as an afterthought.

Explain what happens next: A clear success message builds confidence and reduces uncertainty.

Test the complete workflow: Check the form, notification, submission destination, integration, and follow-up process.

Before You Publish Your Webflow Form

Before publishing, I always run through the form once as if I were the person filling it out. This catches issues that are easy to miss in the Designer: an unclear label, a required field that is not really necessary, a success message that doesn't explain what happens next, or a mobile layout that feels awkward to use.

Here is the checklist I use:

1. The form has one clear purpose.
2. Every field has a visible, understandable label.
3. Required fields are genuinely necessary.
4. The fields appear in a logical order.
5. The button label describes what happens after clicking it.
6. The input fields are easy to recognise and use.
7. Focus states are visible.
8. Error messages explain what needs to be fixed.
9. The success message confirms the submission and explains the next step.
10. The form works properly on mobile.
11. A test submission reaches the correct destination.
12. Notifications go to the right person or team.
13. Any connected tools receive the expected data.
14. The form does not ask for personal information you do not actually need.

Then publish the site and submit the form again on the live domain. Preview mode is useful for checking the layout, but it doesn't tell you whether the real submission, notification, or integration workflow is working properly.

That is the part I would not skip. A form can look finished in Webflow and still fail at the point where it matters: when someone tries to use it.

If you want to see the full setup in action, watch the tutorial at the beginning of this guide and build along with it. Otherwise, use the steps above as a practical reference while creating your own form.

And if you would rather have someone take care of the structure, styling, integrations, and testing with you, get in touch with Designbase.