How do I add forms in Webflow?

Create and manage forms in Webflow.

Forms let you collect information from your site visitors, such as contact details, survey responses, or file uploads. You can add forms to your site, customize their layout and design, and choose whether submissions are collected directly by Webflow or sent to third-party apps and services.

How to add a form

To add a form to your page in Webflow:

1. Open the Add panel (Elements tab)

2. Scroll to the Forms section

3. Drag a Form block onto the canvas or into the Navigator where you’d like it to appear

Form anatomy

When you add a Form block to the page, Webflow provides a simple default form structure, which you can fully customize. The default Form block includes these main elements:

• Form wrapper — wraps your form inputs and controls. By default, it includes:

  • Two text input fields, each paired with a label (Name and Email address)

  • A Form button to submit the form data

• Success message — displays after a form is successfully submitted (e.g., “Thank you! Your submission has been received!”)

• Error message — displays if there’s an issue submitting the form (e.g., “Oops! Something went wrong while submitting the form.”)

You can further customize your form by adding or removing elements within the Form wrapper:

How to add or remove form elements

To further customize your form, you can add extra form elements such as additional inputs, checkboxes, or a file upload element:

1. Open the Add panel (Elements tab)

2. Scroll to the Forms section

3. Drag the element you’d like (e.g., Input, Checkbox, File upload) directly into the Form wrapper, either on the canvas or within the Navigator

To remove a form element, select it (on the canvas or in the Navigator), then press Delete (Windows) or Backspace (Mac). You can also right-click the element and choose Delete from the context menu.

How to configure form elements

You can access and edit settings for each form element in several ways:

• Double-click the element on the canvas.

• Single-click the element on the canvas, then click the “settings” icon next to the element label.

• Select the element (on the canvas or in the Navigator) and open the Settings panel on the right.

Each form element offers different settings depending on its type:

Customize form settings and integrations

With Webflow Forms, you have full control over how your forms behave. You can customize the messages visitors see when they submit your form, choose who gets notified about new submissions, set up redirects, and even decide whether submissions are handled directly by Webflow or sent to a third-party service.

You can find all of these options by selecting your form on the canvas or in the Navigator, then opening the Settings panel on the right.

Name your form

By default, all new forms you add to your site are called “Email Form.” To easily track and manage submissions from different forms across your site, give each form a unique, descriptive name. This helps you quickly identify which submissions belong to each form in Site settings > Forms.

Change your form’s success and error messages

To change the messages visitors see when submitting a form, select your Form block, then open the Settings panel on the right. There, you can edit the following states:

• Normal — The default view before the visitor interacts with the form

• Success — The message visitors see after successfully submitting the form (e.g., “Thank you! Your submission has been received!”)

• Error — The message visitors see if there’s an issue submitting the form (e.g., “Oops! Something went wrong while submitting the form.”)

Choose where form submissions are sent

Webflow lets you choose where each form on your site sends submissions. You can specify whether submissions are stored directly in Webflow, trigger email notifications, send data via webhooks, route submissions through connected apps, or bypass Webflow entirely using a custom action.

New forms send submissions to Webflow and trigger email notifications by default, but you can adjust these settings in the Settings panel at any time. When someone submits your form, you can send the submission to one or more destinations.

Send submissions to Webflow (default)

When a visitor submits your form, Webflow stores the submission details in your site’s Site settings > Forms.

To send submissions to Webflow:

1. Select your form on the canvas or in the Navigator

2. Open the Settings panel on the right

3. Click the “add” icon next to Send to and choose Webflow

Send email notifications (default)

Send customized email notifications when someone submits your form. You can specify who receives notifications, customize sender details, and personalize email content.

To set up email notifications:

1. Select your form on the canvas or in the Navigator

2. Open the Settings panel on the right

3. Click the “add” icon next to Send to and select Email notifications

4. Click Email notifications to open the notification settings

5. In the To field, click the dropdown to select a Workspace member, or enter an email address. To add multiple recipients, press Return on your keyboard after entering each email address

6. Enter a Sender name (e.g., “My site” or your name)

7. Specify a Reply to email address. You can manually enter an email address or insert a form field value (e.g., the submitter’s email address)

8. Enter a Subject line for your notification email. You can also dynamically insert form field values

9. Customize the Body of the notification email. You can add text and dynamically insert fields such as:

   • Site name

   • Form name

   • Form data (contents of the submission)

   • Link to form submissions in Webflow

10. Click Apply to save your email notification settings

You can clear notification settings at any time by clicking Reset to defaults in the bottom-left corner of the Email notifications window.

Send submissions to a Webhook

You can use webhooks to send form submissions automatically to external services.

To set up a webhook:

1. Select your form on the canvas or in the Navigator

2. Open the Settings panel on the right

3. Click the “add” icon next to Send to and choose Webhook

4. Enter the webhook URL (the external endpoint you want submissions sent to)

5. Click Save

6. After adding the webhook, you’ll see a unique Secret key. Webflow shows this key only once, so copy and securely store it immediately. You’ll need this key to authenticate webhook messages Learn more about validating request signatures.

7. Click Hide key forever to confirm you’ve copied and stored the secret key securely

You can add multiple webhooks by repeating these steps for each additional endpoint.

Send submissions using a Custom action

Use a custom action to send form submissions directly to an external service, bypassing Webflow’s built-in form handling entirely. When you set a custom action, submissions won’t be sent to or stored in Webflow. Use an App instead to send submissions to both Webflow and your external service.

To set up a custom action:

1. Select your form on the canvas or in the Navigator

2. Open the Settings panel on the right

3. If Webflow or Email notifications are selected, click the “delete” icon next to each to remove them (These options can’t be used together with a custom action)

4. Click the “add” icon next to Send to and select Custom action

5. Enter the URL for your custom action (the external endpoint where you want to send submissions)

6. Choose your preferred method (POST or GET)

7. Click Save

Send form submissions to Apps

Send form submissions directly to third-party Apps (e.g., HubSpot, Zapier, or Make).

To send submissions to an App:

1. Select your form on the canvas or in the Navigator

2. Open the Settings panel on the right

3. Click the “add” icon next to Connected Apps and select an App from the list. If you don’t see the App you need, click Find more Apps to open the Apps panel

4. Follow the prompts to connect your chosen App to Webflow

5. Once connected, configure the App settings as needed to specify how submissions are handled

View form submissions in Webflow

If you choose to send a form’s submissions to Webflow, you can view the submissions in Site settings > Forms. Additionally, if you’ve enabled Spam filtering, submissions identified as spam are automatically routed into a dedicated spam inbox. You can review and manage spam submissions separately from your valid form submissions. Learn more about managing form submissions.

Redirect site visitors after form submission

You can choose to automatically redirect visitors to a different page after they submit your form. In your form’s Settings panel, you can either choose a static page on your site or manually enter a URL.

Form data and GDPR

If you host websites that collect personal data from EU residents (e.g., via form submissions or third-party scripts), you have responsibilities as a data controller. Take the time to understand your responsibilities as a data controller, and take steps to abide by the GDPR. The UK Information Commissioner’s Office data-protection self-assessment checklist can be helpful. 

If you’re creating forms that request personal data in Webflow, make sure to clearly ask for and get consent, unless another lawful basis for processing applies. 

If you’re creating websites for clients who collect personal data through their websites, make sure your clients understand their responsibilities as a controller of that personal data. 

If you’re using third-party tools (e.g., Zapier) to connect your Webflow forms to external data sources and send personal data using those integrations, make sure to review your responsibilities as a data controller.

Learn more: How to get ready for the General Data Protection Regulation – and what Webflow’s doing

Troubleshooting

If you’re experiencing issues with your form, try these troubleshooting steps:

• Check reCAPTCHA: If you’ve enabled reCAPTCHA (Site settings > Apps & Integrations), make sure every form on your site contains a reCAPTCHA element. Forms without a reCAPTCHA element will fail to submit.

• Check autofocus settings: If your page automatically scrolls down on load and you don’t want this behavior, ensure Autofocus is off for hidden fields or fields below the fold.

• Check submission limits: If you’re on the free Starter Site plan, you’re limited to a maximum of 50 form submissions total. To continue receiving submissions beyond this limit, you’ll need to upgrade your Site plan.

If you’ve tried these steps and still have issues, please contact Webflow Support.