Form Validator

Use this attribute-based validation system on Webflow to handle multiple forms with email blocking, country-aware phone validation, and real-time feedback. It dynamically checks business email domains and country codes, stays up to date automatically, and works smoothly with light and dark themes.

1

Add this <script> inside the <head> tag of your page or project

<script src="https://cdn.jsdelivr.net/gh/Everything-Design/everythingflow@main/Tools/form.js"><script>

2

Add this attribute to the form block

ef-form-div="your-form-name"

Name

ef-form-div

Value

your-form-name

** It should be unique per form

3

Add this theme attribute to the form block to set the theme.

ef-form-theme="light/dark"

Name

ef-form-theme

Value

light

**Apply this attribute to the element having attribute ef-form-div="your-form-name"

Attribute for Dark Theme

Name

ef-form-theme

Value

dark

**Apply this attribute to the element having attribute ef-form-div="your-form-name"

4

Add these attributes to the form inputs

ef-form-input="plain"

Add this attribute for plain text

Name

ef-form-input

Value

plain

**Apply this attribute to the Input elements in the forms

Add this attribute for business email and email

Name

ef-form-input

Value

business email

**Apply this attribute to the Input elements having email input in the forms

Value

email

**Apply this attribute to the Input elements having email input in the forms

Add these attributes for Phone number

Name

ef-form-input

Value

phone

**Apply this attribute to the Input elements having phone input in the forms

5

Add these attributes to the input should be required

ef-data-required="required"

Name

ef-data-required

Value

required

**Apply this attribute to the element having attribute ef-form-input="attribute value"

6

Add these attributes for the validation svg's or image

ef-data-required="required"

Add these for right attribute

Name

ef-form-val

Value

right

**Apply this attribute to the element which can be image or svg embed

Add this for wrong attribute

Name

ef-form-val

Value

wrong

**Apply this attribute to the element which can be image or svg embed

7

Add these attributes for form buttons

ef-form-submit=”Any name”

Name

ef-form-submit

Value

Any name

**Apply this attribute to the form button

8

Add these attributes to select field (Optional)

ef-form-submit=”Any name”

Name

ef-form-select

Value

Country Code

**Apply this attribute to the select element

9

Add these attribute for inputs to change their color on border or background

ef-bd=”validation”

Add these for background color change

Name

ef-bg

Value

validation

**Apply this attribute to the the element having attribute ef-data-required ="required"

Add these for border color change

Name

ef-bd

Value

validation

**Apply this attribute to the the element having attribute ef-data-required ="required"

Combining Webflow and coding skills to develop for any complexity

© Copyright EverythingFlow 2026 All Rights Reserved.

Website Design Agency | Everything Design

Last Updated: 20 January 2026