Webflow Forms

Using Regex Patterns in Forms Validation

No items found.
Overview
Webflow Forms Basics
Intro
001
Webflow Forms Limitations & Bugs
002
Basic Form Controls
Form Select
051
Form Textarea
052
Customizing Input Controls
Customizing Radio Buttons & Checkboxes
Intro
101
Input Number & Decimal Places
Intro
102
Numeric Range Sliders
Intro
102
Multi-Select Dropdown
Intro
104
Auto-Size Textareas
Int
110
Date Pickers
Intro
111
Forms Validation
Forms Validation Basics
Intro
200
Input Types
Intro
201
Using Regex Patterns in Forms Validation
Intro
202
Custom Validation Errors
Adv
203
Forms Validation Techniques
Validating Emails
Intro
301
Blocking Free Email Provider Addresses
Intro
302
Requiring Checkboxes
Intro
302
International Phone Numbers
Int
6:50
304
Databinding
Databinding CMS Collections to a Form Select
8:42
401
Forms Validation Techniques
3rd Party Form Handlers
Intro
401
Making Forms Dynamic
Displaying Form Parts Conditionally
14:36
501
Multi-Step Forms (MSFs)
Intro
501
SPAM Blocking Techniques
CAPTCHA Approaches
601
Form Handlers
3rd Party Form Handlers
901
Integrating the Basin Form Handler
902
Uploading Files
904
No items found.

Regex Patterns offer a much more complex pattern-matching approach.

They allow you to specify precise rules that determine whether entered data is considered valid or not, and whether the form can be submitted.

If the pattern rules are not met, the form will not be considered valid, and most browsers will refuse to submit it.

WARNING: Regex syntax is very picky and can be difficult to code and debug, but a good regex is hugely helpful in validating your inputs.

Which Input Types Support Patterns

To my knowledge, only a few input types make sense with patterns;

  • text
  • email
  • url

However you should research this yourself if you want to explore other types. Make sure to test across browsers if you're doing something unusual, like trying to force time inputs in military format.

Using in Webflow

Webflow does not provide direct designer support for patterns, however you can add them easily through custom attributes.

  • Select the INPUT field you want the pattern on
  • Add a custom attribute of pattern
  • As the value, give the regex value you want

Notes;

  • Usually, you do not need the start and end anchors in the regex string, since this is automatically assumed by the browser.
  • The regex string must be encoded for use in an HTML attribute before it can be pasted into the Webflow designer. Webflow does not encode the custom value for you.

Controlling the Error Message

When a pattern rule is not met, the browser will display its own error message, however, most browsers will also display the title of the input field for added context.

Choose a message that describes valid input, and apply it as a custom attribute, e.g.;

title = Enter a valid US zip code

Nov-2022 - Webflow does not offer direct designer support for setting the title attribute, but currently allows creation of the title attribute in custom attributes.
Table of Contents
Did we just make your life better?
Passion drives our long hours and late nights supporting the Webflow community. Click the button to show your love.