Form Validator

Create a form field validator inside of your native Webflow form element.
Thank you!
Oops! Something went wrong while submitting the form.
Give us feedback

[.c-title_step]How do you create Form Validators in Webflow?[.c-title_step]

Use the Refokus Form Validator to create ‘valid’ and ‘non-valid’ states when a user enters information into a form field. This supports Names, Email Addresses and Phone Numbers.

[.c-title_step]Step #1: Copy/Paste tool URL[.c-title_step]

Paste the following script in the “Before tag" field under the "Custom Code" section in the page settings.

<script src="https://tools.refokus.com/form-validator/bundle.v1.0.0.js"></script>

[.c-title_step]Step #2: Set custom attributes[.c-title_step]

Everything is made using custom attributes, so when we say “Add” that  means “Add a custom attribute”.

Add a custom attribute of [.c-tool_tag]data-wt-fv-form=1[.c-tool_tag] on the ‘Form’ element that Webflow creates in the native form component.

To start, we must build our form element in our Webflow project. For this, we must have one or more fields, obviously. The first thing we are going to do is create a class to use on all the different form field instances, and create combo classes for the different states. These will be the ‘Valid State’ and the ‘Error State.’ We will use the combo class for the Valid State as [.c-tool_tag]‘cc-valid’[.c-tool_tag] and for the Error State we will use the combo class [.c-tool_tag]‘cc-error’.[.c-tool_tag] You can style these fields however you want. (Note: You will want to temporarily remove the combo classes, but not delete them, entirely)

[.c-text_step] ​​If you want error messages to appear, you need to add an element right next to the form element with the [.c-tool_tag]‘c-error-message’[.c-tool_tag] class. Create a notice, like the example below in our demo. It is important to place this element below the ‘field element’ in the navigator. You will need to set this element to display: none, and add this element inside every ‘form field’ you need validated.[.c-text_step]


Thank you!
Oops! Something went wrong while submitting the form.
Give us feedback

Hello! 👋

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.