A Guide to Webflow Forms

Maray profile image thumbnail.
Ayk Martirosyan
December 24, 2023
Blog post cover image.

[Webflow forms](https://webflow.grsm.io/webflow-forms) seem easy to set up at first glance, but under the hood, they have serious limitations that lead to headaches down the road.

Issues like broken email notifications, spam submissions, confusing interfaces, and lack of customization options plague even seasoned Webflow users.

During [my Webflow development](https://www.maray.ai/webflow-developer) process, I've tested over a dozen form builders to find the best alternatives for common Webflow form problems.

In this guide, I’ll explain the core issues and walk through how tools like FormSpark, Basin, Tally, JotForm, and Google Forms.

## The Main Problems with Webflow Forms

To be clear, here I am talking about Webflow form submission and not the UI elements that you can build with the Form component.

When you build a form in Webflow, you must either use the native submission service or connect a 3rd party form service.

**The biggest problem with Webflow forms is spam.** There’s currently no solution. The integrated spam filters are easily bypassed by bots. The only solution is to use an external form submission management to avoid spam and have different options to process and integrate submissions with your internal tools.

Here’re the most common problems with native Webflow forms submission:

**Unreliable email notifications** - Webflow relies on Mailjet for email services, which scores a terrible 4.3/10 on deliverability.

**No spam protection** - Basic reCAPTCHA does nothing against modern bots. Easy to get flooded with spam (the biggest problem).

**Clunky admin interface** - Form and submission management lacks refinement compared to the front end interface.

**No view/edit submissions** - Can't view or edit individual entries easily in Webflow.

**Limited built-in features** - No calculated fields, conditional logic, multi-page forms, etc. Very basic.

**No native integrations** - Doesn't connect to email services, CRMs, etc without third-party tools.

Luckily, there’re some options that solve these problems and provide free tiers if the number of your form submissions is not high.

## Top 5 Webflow Form Management Alternatives

Here are the top form providers I recommend for different needs:

### Formspark

1. Type: form submission and processing.

2. Webflow integration guide: https://formspark.io/for/webflow/

3. Pricing: free tier unlimited number of forms and 250 submissions/mo.

4. Use-case: complex data processing and automation with other tools

### Basin

1. Type: form submission and processing.

2. Webflow integration guide: https://usebasin.com/docs/integrations/webflow

3. Pricing: no free tier. The basic plan costs $3.33/mo for 250 submissions/mo and 500MB file storage.

4. Use-case: complex data processing and automation with other tools

### Tally

1. Type: form builder and submission management.

2. Webflow integration guide: https://tally.so/help/how-to-embed-a-tally-form-into-webflow

3. Pricing: generous free tier.

4. Use-case: Notion-like UI to create any form and embed it with a code on the page.

### Google Forms

1. Type: form builder and submission management.

2. Webflow integration guide: https://webflow.com/blog/google-forms

3. Pricing: free or business, requires a Google account.

4. Use-case: integration with other Google business services.

### JotForm

1. Type: form builder and submission management.

2. Webflow integration guide: https://www.jotform.com/help/how-to-add-a-form-to-webflow/

3. Pricing: free tier provides 100 submissions/mo, 100MB, and 5 forms

4. Use-cases: a form builder that is embedded through a code on the page.

## Advanced spam protection and privacy for Webflow forms

Most form providers, including the one that is being used by Webflow, use Google’s reCaptcha v2 spam filter to protect form submissions from bots. However, it is now outdated and the bots can bypass it.

If you want more advanced spam protection and privacy (GDPR compliant), you can use hCaptcha. This filter makes you solve a puzzle to prove that you are a human. I am sure you stumbled upon it on some websites in the past.

It can be integrated with both FormSpark and [useBasin](https://usebasin.com/docs/features/spam-filtering). hCaptcha is not a free service, but it offers up to 1 million requests per month. The number of requests is not equal to the number of form submissions. If your form is attacked by bots, then it would count as a request. Nonetheless, 1 million requests should be enough for most use cases.

## How to create a multi-step form in Webflow

There are two ways.

1. Create a UI component using [Webflow tabs](https://webflow.grsm.io/webflow-tabs) or [slides](https://webflow.grsm.io/webflow-slider1852), or with a library like Swiper. Connect the form to a form provider such as FormSpark or Basin.

2. Create a multi-step form with a builder like Tally or Jotform and embed it on the page.

Both options are valid. If you want a simpler solution - use a form builder.

If you want more control over UI and design - use Webflow to build the form and power it with a form provider.

## Conclusion

Webflow forms could work well for simple use cases but are not usable due to spam problems. You’d most definitely need a third-party form provider. They solve deliverability issues, handle spam protection, and enable advanced functionality through intuitive interfaces.

## FAQ

How to use regex validation in Webflow forms?

Regex is a powerful way to validate form inputs, albeit difficult to write if you have no regex knowledge. Fortunately, there are many pattern examples for text, email, or password validation.

Here’re a regex for e-mail validation from https://regexr.com/:

```jsx

/[a-z0-9!#$%&'*+/=?^_{|}~-]+(?:\\.[a-z0-9!#$%&'*+/=?^_{|}~-]+)*@(?:a-z0-9?\.)+a-z0-9?/g

```

Use a custom attribute name "pattern" on form input. Use a regex value as the attribute value.

An image showing how to create a custom regex pattern attribute in Webflow.

**How to create forms using third-party services in Webflow?**

Follow the integration guide for services like FormSpark. Typically you need an action code that you insert in Webflow form settings and change the method to POST. See the integration link above.

**What does autofocus mean in Webflow forms?**

Autofocus automatically focuses on a specific form field when the page loads. Enable it in field settings.

**How to edit submissions for forms in Webflow?**

Not possible natively. Need to export data and edit in Excel or use a service with edit capabilities like FormKeep.

**How to embed Google Forms on Webflow sites?**

Get the embed code from Google Forms and paste it into an Embed element in Webflow.

Email icon.
send a message
ayk@maray.ai

Wenn Sie ein Webdesign- oder Entwicklungsprojekt planen, senden Sie mir eine Nachricht, und ich werde mich innerhalb weniger Stunden bei Ihnen melden.

Oder vereinbaren Sie einen kostenlosen Beratungstermin, um Ihr Projekt im Detail zu besprechen.

Book an appointment
discord_icon

Join discord

The Internet made meeting likeminded people much easier. Join my group if you want to ask something or collaborate on a project. Here's the invite link ↗.

Come to say hi 👋