Webflow Forms Basics

Capturing data from your users is a key requirement for many sites, and forms are one of the central mechanisms for doing that.

In Webflow, you get good designer control over your form layouts and some built in form-submission handler options, however there are important things you need to know.

Webflow & Forms

Webflow offers the ability to construct basic forms in the designer. It also has a built-in forms submission handler, and the ability to connect forms to Logic's automation flows.

However, Webflow does not directly support;

• Multi-step forms
• Certain form element types, such as date fields, rich text entry, and range sliders
• Logic, or complex form validations to ensure good data is submitted

These limitations are significant, however there are many solutions which we'll point you towards in this course.

Webflow's Form Submission Handler

By default, when you just drop a new Form Block on your page, it's configured to use Webflow's default form submission handler.

• Responses will be automatically captured into a site-level database
• Responses can be automatically emailed to clients you designate

Email Notifications

Webflow's email notifications offers a quick and simple way to notify the site owner when a form is submitted. If you are the designer, you can add your client's email address under site settings to receive those notifications.

This feature has some limitations;

• One notification email for all forms. A notification recipient will receive notifications for all form submissions, site wide. If you have a contact-us form, and also a newsletter-signup form, you cannot choose to only notify them of the contact-us form submissions.
• There is no styling or branding ability and very little ability to format the form data contents.
• No whitelabelling ability, it's clear the form notification emails are from Webflow.
• No line breaks are shown for multiline content, from textarea fields. However line breaks are captured and will appear in CSV exports as well as ( probably ) the API webhook data.
• Unsubscribe problem. Since Sept 2022 there is a mandatory unsubscribe link. If anyone clicks it, that email address will be unsubscribed and will no longer receive any more notifications. Forms will still be captured, in the site database ( you can see this in the Editor also ), and you can re-add that email if you notice it has been removed, but this creates problems for a lot of site owners.

Form Submission Limits

Also, it's important to note that Webflow's forms have a concept of form submission limits. Every time a form submission is received, it's counted towards a monthly limit that is defined by your site's hosting plan.

If you exceed that, you will be charged an additional $0.01 ( 1 cent ) per submission.

Normally, that's a non-issue, however these limits also apply to Logic forms, which means that if you're making frequent calls to Logic, those costs can rack up quickly.

reCAPTCHA Anti-Spam Protection

Optionally, you can enable reCAPTCHA anti-spam protection, however this is enabled site-wide and not per-form. If you enable it under your site settings, every Webflow-managed form must have a reCAPTCHA block added to it from the elements panel.

When you do this, make certain that the element is within the form itself.

SPAM Issues

Since the beginning of 2023, Webflow has been targeted by some spammers which mean a significant increase in SPAM.

They've added features to block it, but this has resulted in occasional instabilities in the form handling system.

At present Aug-2023, everything seems to be functioning.

Forms Processing Flow

To a new Webflow user, all forms look pretty much the same, however there are essential configuration details that completely change how the form operates.

Webflow forms always run in one of three basic configurations;

1. Default form handler. This is the default setup for a new form. You can identify these by looking at the form settings. If the Action setting is blank, it's using the defautl form handler.
2. > Submissions are captured by Webflow's own form handler, SPAM-checked, and saved to your site's form submission history.
3. > These "cost" 1 form submit.
4. > Unstyled email notifications can be sent.
5. > Webflow's API can also be used to notify external webhooks, to trigger other processes and systems.
6. > These have built-in success/fail message support that you can style.
7. Logic form handler. Logic forms are specially routed to trigger a custom Logic flow that you set up. Under the form's settings' you'll see that these are specifically bound to a Logic flow.
8. > These also cost 1 form submit, and also display the success/fail message.
9. External form handler. Here, the default form handler is bypassed, and submissions are sent directly to a webhook URL you provide. Webflow is not involved. You are responsible for everything, including SPAM checking, notifications, submission storage, and what happens next in terms of UX messaging or page redirection. An external form handler is used any time the form's Action property contains a URL.
10. > This approach gives you the most control, but the most responsibility as well.
11. > You can easily plug in third party form handlers like Basin or FormSpark which give you a lot of the notification branding and SPAM protection features Webflow does not yet support.

Here's a breakdown of these three basic configurations, and how they each behave differently.

‍

Key points to research further;

• Are Logic forms SPAM-checked?
• Are SPAM submits counted towards your form submits? ( likely not )

‍

‍