How to Create a Form in Webflow: Easy Steps

Every lead you capture starts with a form. Miss this, and visitors leave without a trace.

Learning how to create a form in Webflow takes about 10 minutes. No code required.

Webflow’s native form builder handles everything from simple contact forms to multi-field lead capture setups with email notifications, spam protection, and third-party integrations.

This guide walks you through adding a Form Block, configuring input fields, setting up submission handling, and customizing success messages.

By the end, you’ll have a fully functional form collecting data on your published site.

How to Create a Form in Webflow

Creating a form in Webflow is the process of adding a Form Block element to collect user data through input fields, submit buttons, and configurable submission settings.

Users need this when building contact forms, lead capture forms, newsletter signups, or any data collection feature on their website.

This guide covers 6 steps requiring 10-15 minutes and a free or paid Webflow account.

Webflow forms use native HTML form elements with built-in styling through the visual editor, so you never touch code.

Prerequisites

Before you start, make sure you have:

• Webflow account (free Starter plan or paid site plan)
• An existing Webflow project with at least one page
• Basic familiarity with the Webflow Designer interface
• 10-15 minutes of time

The free plan allows up to 50 form submissions per month.

Paid plans (Basic, CMS, Business) increase this limit to 500, 1,000, and 2,500 submissions respectively.

Step One: How Do You Access the Form Elements in Webflow?

Open the Add Panel by pressing A on your keyboard or clicking the plus icon in the left toolbar, then scroll to the Forms section to find all available form elements including Form Block, inputs, and buttons.

Action

1. Keyboard shortcut: Press A to open Add Panel
2. Manual access: Click the plus (+) icon in the left toolbar
3. Location: Scroll down to Forms section

Purpose

The Add Panel contains all draggable elements for your Webflow project.

Form elements are grouped separately from basic elements like divs and text blocks.

Step Two: How Do You Add a Form Block to Your Page?

Drag the Form Block from the Forms section directly onto your canvas or into the Navigator panel, which creates a complete form structure with default name and email fields, a submit button, plus success and error message containers.

Action

1. Select Form Block: Click and hold the Form Block element
2. Drag to canvas: Drop it where you want the form to appear
3. Alternative method: Drag into Navigator for precise placement

Default Form Block Structure

Every Form Block includes these child elements:

• Form Wrapper – contains all input fields and the submit button
• Name input field with label
• Email input field with label
• Submit Button
• Success Message – displays after successful submission
• Error Message – displays when submission fails

You can delete any default field except the Form Wrapper itself.

Purpose

The Form Block acts as the parent container for all form elements.

Form inputs only function when placed inside this wrapper, so you cannot drag inputs directly onto the page without it.

Step Three: How Do You Configure the Default Form Fields?

Double-click any input field to open its settings, or select the element and use the Settings Panel (D) on the right side to configure field type, placeholder text, required status, and custom field names for your form submission data.

Action

1. Select input field: Click the Name or Email field on canvas
2. Open settings: Press D or click the gear icon
3. Configure options: Adjust Type, Name, Placeholder, Required

Input Field Settings

Each text input field has these configurable options:

• Type: Plain text, Email, Password, Phone, Number
• Name: Identifier for form submission data (e.g., “customer-name”)
• Placeholder: Gray text shown before user types
• Required: Toggle to make field mandatory
• Autofocus: Automatically selects this field on page load

Label Configuration

Double-click any label to edit its text directly on the canvas.

Labels connect to their input fields automatically when placed directly above them.

Building accessible forms requires proper label associations, which Webflow handles by default.

Purpose

Proper field configuration affects both user experience and data collection.

The Name attribute determines how submissions appear in your Webflow dashboard and any connected integrations like Zapier or webhooks.

Step Four: How Do You Add Custom Input Elements to Your Form?

Drag additional form elements from the Add Panel directly into the Form Wrapper to expand your form beyond the default name and email fields, including text areas, checkboxes, radio buttons, dropdowns, and file upload fields.

Action

1. Open Add Panel: Press A, navigate to Forms section
2. Select element: Choose from Input, Text Area, Checkbox, Radio Button, Select, File Upload
3. Drag into Form Wrapper: Place above the Submit Button
4. Add label: Drag a Label element above your new input

Available Form Field Types

• Input Field – single-line text, email, phone, password, number
• Text Area – multi-line text for messages or comments
• Checkbox – multiple selection options
• Radio Button – single selection from multiple choices
• Select Dropdown – compact single selection menu
• File Upload – allows document or image submissions

Configuring Dropdown Options

Double-click the Select element to open settings, then add each option on a separate line in the Choices field.

The first line becomes the placeholder text unless you check “Include empty first option.”

Purpose

Different input field types serve different data collection needs.

Contact forms typically need a text area for messages; lead generation forms benefit from dropdowns for qualifying questions.

Step Five: How Do You Set Up Form Submission Settings?

Select the Form Wrapper element (not the Form Block), open Settings Panel (D), and configure your form name, submission handling, email notifications, redirect URL, and optional webhook connections for third-party integrations.

Action

1. Select Form Wrapper: Click the form or use Navigator to select “Form”
2. Open Settings: Press D or click gear icon
3. Configure Form Name: Enter a descriptive name for dashboard organization
4. Set Send To options: Choose Webflow, Email, or Custom Action

Submission Handling Options

• Webflow: Stores submissions in your site dashboard (Site Settings > Forms)
• Email Notification: Sends submission data to specified email addresses
• Webhook: Posts form data to external services via API endpoints
• Custom Action: Sends to external URL, bypasses Webflow storage entirely

Redirect Settings

Enter a URL in the Redirect field to send users to a thank-you page or landing page after successful submission.

Leave blank to show the Success Message on the same page.

Purpose

Proper form submission settings determine where your data goes and how users experience the process.

Most sites use Webflow storage plus email notifications for simple contact forms.

Step Six: How Do You Customize Success and Error Messages?

Click the Form Block in Navigator to reveal Success Message and Error Message child elements, then select each one to edit the text content, styling, and layout using the Style Panel.

Action

1. Expand Form Block: Click the arrow in Navigator to show child elements
2. Select Success Message: Click to select, double-click text to edit
3. Select Error Message: Click to select, customize text and styling
4. Preview states: Use Form States dropdown to view each message

Styling Form States

The Form Block has three states visible in the Settings Panel dropdown: Normal, Success, and Error.

Switch between states to style each message container with custom colors, padding, and typography using CSS properties.

Purpose

Clear feedback messages improve usability and reduce user confusion after form submission.

Custom error messages help users understand what went wrong.

Verification

Test your form before publishing to confirm everything works correctly.

Testing Steps

1. Publish your site: Forms only work on published sites, not in the Designer preview
2. Submit a test entry: Fill out all fields with sample data
3. Check email notification: Verify you received the submission email
4. View dashboard: Go to Site Settings > Forms to see stored submissions
5. Test required fields: Try submitting with empty required fields to confirm validation

Export Form Data

Download submissions as CSV from Site Settings > Forms > Export.

Use this for importing into spreadsheets, CRM systems, or email marketing platforms.

Troubleshooting

Form Does Not Submit

Issue: Clicking submit button does nothing or shows error.

Solution: Check Site Settings > Apps & Integrations for reCAPTCHA status; if enabled, add a reCAPTCHA element inside your Form Wrapper.

Email Notifications Not Received

Issue: Form submits successfully but no email arrives.

Solution: Verify email address in Form settings, check spam folder, confirm “Email” is selected in Send To options.

Required Fields Not Working

Issue: Users can submit form with empty required fields.

Solution: Select each input field, open Settings Panel, toggle Required to ON.

Form Styling Not Appearing

Issue: Custom styles disappear on published site.

Solution: Republish the site; check that styles are applied to a class, not just the element.

File Upload Fails

Issue: File upload element shows error on submission.

Solution: Check file size limit (10MB max), verify allowed file types in element settings.

Next Steps

After creating your basic form, consider these improvements:

• Add reCAPTCHA: Drag the reCAPTCHA element into your form for spam protection
• Connect to Zapier: Set up webhook integrations to send data to Google Sheets, Mailchimp, or HubSpot
• Style form elements: Apply custom classes for consistent responsive design across devices
• Create multi-step forms: Use third-party tools like Inputflow or custom JavaScript for stepped form experiences
• Set up conditional logic: Show or hide fields based on user selections with custom code or form apps

For more Webflow techniques, learn how to use Webflow or explore how to create a blog in Webflow for content-driven sites.

FAQ on How To Create A Form In Webflow

What is a Form Block in Webflow?

A Form Block is the parent container element that holds all form components. It includes the Form Wrapper, input fields, submit button, success message, and error message. All form elements must be placed inside this block to function properly.

Can I create forms on Webflow’s free plan?

Yes. The free Starter plan allows up to 50 form submissions per month. Paid site plans increase limits: Basic (500), CMS (1,000), and Business (2,500). Submissions are stored in your Webflow dashboard under Site Settings.

How do I add a file upload field to my Webflow form?

Drag the File Upload element from the Add Panel into your Form Wrapper. Configure allowed file types and size limits (10MB max) in the Settings Panel. File uploads work on published sites only, not in Designer preview.

Why is my Webflow form not submitting?

Check if reCAPTCHA is enabled in Site Settings. If enabled, you must add a reCAPTCHA element inside your form. Also verify the form is published, as forms do not work in Designer preview mode.

How do I receive email notifications from form submissions?

Select the Form Wrapper, open Settings Panel, and add email addresses under the Email Notification section. Multiple recipients can be added. Ensure “Email” is checked in the Send To options for notifications to work.

Can I connect Webflow forms to external services?

Yes. Use webhooks to send form submission data to Zapier, Make, HubSpot, or Mailchimp. Add your webhook URL in Form Settings. Alternatively, set a Custom Action URL to bypass Webflow storage entirely.

How do I make form fields required in Webflow?

Select the input field on your canvas, open Settings Panel (D), and toggle the Required option to ON. Users cannot submit the form until all required fields contain valid data. Works with all input types.

How do I style form elements in Webflow?

Select any form element and use the Style Panel to adjust typography, colors, spacing, and borders. Create reusable classes for consistent styling across multiple forms. Style focus and hover states for better micro-interactions.

Can I create multi-step forms in Webflow?

Webflow does not include native multi-step forms. Use third-party tools like Inputflow or Formly, or build custom solutions with Ajax and conditional visibility. These tools add step navigation without replacing Webflow’s form handling.

How do I add a dropdown select field to my form?

Drag the Select element from the Add Panel into your Form Wrapper. Double-click to open settings and enter each option on a separate line. The first line becomes placeholder text unless you enable empty first option.

Conclusion

You now know how to create a form in Webflow from start to finish.

The process covers adding a Form Block, configuring input elements, setting up submission handling, and customizing form states.

Webflow’s drag and drop interface makes form design accessible without writing code. Your forms can handle lead capture, contact requests, newsletter signups, and file uploads.

Connect your forms to external services through webhooks or Zapier for automated workflows. Add reCAPTCHA for spam filtering.

Test every form on your published site before driving traffic to it. Check email notifications, verify required field validation, and confirm your success message displays correctly.

Start simple. One working contact form beats five broken ones.