Custom form validation in Webflow

How to modify the custom form validators

Our form validator script can be easily edited in a matter of a few minutes (or seconds, if you are fast enough). In order to modify it, please follow the instructions below.

If you don't feel confident on implementing this and need a hand, feel free to get in touch with our Webflow agency — our team will be more than happy to assist you!

<brix-header id="1" title="Locate the form validator code">You can locate the script in the Home page settings, under the before body tag code block.</brix-header>

<brix-divider>

<brix-header id="2" title="Modify form validators">Inside the const formValidators you can modify or add new validators, along with their individual blocked words and error messages. To add a new validator you can follow the same pattern as the two shown in the example. Make sure to add a , after the last } and update the id.</brix-header>

window.onload = function() {
    // Form Validation Configurations
    const formValidators = [
        {
            id: '1', // First validator
            blockedWords: ['spam', 'test', 'unwanted'],
            errorMessage: 'Sorry, this content is not allowed.'
        },
        {
            id: '2', // Second validator (optional)
            blockedWords: ['competitor1', 'competitor2'],
            errorMessage: 'Please remove competitor references.'
        }
    ];

<brix-divider>

<brix-header id="3" title="Modify selectors (Optional)">In case you want to modify the current selectors (you don't need to, this is just in case you don't want to use this ID name), you can do it by updating the following:

For the validation message, modify the id brix-form-validator-message.

For the submission button, modify the id brix-form-validator-button.

The input fields follow the pattern brix-form-validator-{number}, you can change the validator prefix (aka brix-form-validator- ), please just make sure you update it on the script and on your fields.</brix-header>

// Error Message
    const messageElement = document.getElementById('brix-form-validator-message');

// Validator Input
    const inputField = document.getElementById(`brix-form-validator-${validator.id}`);

// Submit Button
    const submitButton = document.getElementById('brix-form-validator-button');