Custom Error Messages

Provide immediate feedback with customised error messages for empty or incorrectly filled required inputs.

Additional code/setup

Add these scripts before the </body> tag

<!-- Call Code Select Script-->
<script src="https://cdn.jsdelivr.net/npm/tom-select@2.2.2/dist/js/tom-select.complete.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/videsigns/webflow-tools@latest/countrycode.js"> </script>

Add a select input

Add a 'select' element, add 1 choice with the placeholder text and set the value as empty.

You add powerups to this select element.

Attributes

Enable Custom Error Messages

Add this attribute to the Form element.

Custom <div> attributes
data-custom-error-message
=
true

Note: Enabling this feature will keep your Next Buttons active, but it will prevent users from progressing to the next step if any required inputs are left unfilled.

In such cases, your custom error message will be displayed, ensuring that users cannot proceed without completing the necessary information.

Error message

Add a Text Block/Div Block within the same parent element as the input you want to enable custom error messages.

You need to place one error message for every required input.
‍
Custom <div> attributes
data-text
=
error-message
01

Note: You must add one error message for every required input.

03

Cloneable

Here is a prebuilt form with all the attributes added to help you get started! :)

Join our awesome Slack community with over 300+ Webflow users!

Seek support, vote on new features, stay updated and network with other community members.

Join Slack community