Utilice el validador de formularios de Refokus para crear estados "válidos" y "no válidos" cuando un usuario introduce información en un campo de formulario. Esto admite nombres, direcciones de correo electrónico y números de teléfono.
[.c-title-3-primary]¿Cómo se crean los validadores de formularios en Webflow?[.c-title-3-primary]
Utilice el validador de formularios de Refokus para crear estados "válidos" y "no válidos" cuando un usuario introduce información en un campo de formulario. Esto admite nombres, direcciones de correo electrónico y números de teléfono.
Paso 1
Copiar el
Form Validator
<script> and paste it before the </body> of your page
Para empezar, debemos construir nuestro elemento de formulario en nuestro proyecto Webflow. Para ello, debemos tener uno o más campos, obviamente. Lo primero que vamos a hacer es crear una clase para utilizar en todas las instancias de los diferentes campos del formulario, y crear clases combinadas para los diferentes estados. Estos serán el [.c-tool_tag]'Estado válido'[.c-tool_tag] y el [.c-tool_tag]'Estado de error'[.c-tool_tag] Utilizaremos la clase combo para el Estado válido como 'cc-valid' y para el Estado de error utilizaremos la clase combo 'cc-error'. Puedes estilizar estos campos como quieras.
(Nota: Querrá eliminar temporalmente las clases combinadas, pero no eliminarlas por completo)
Si quieres que aparezcan mensajes de error, tienes que añadir un elemento justo al lado del elemento del formulario con la clase [.c-tool_tag]c-mensaje-de-error[.c-tool_tag]. Cree un aviso, como el ejemplo que aparece en nuestra demostración. Es importante colocar este elemento debajo del 'elemento campo' en el navegador. Tendrás que establecer este elemento como display: none, y añadir este elemento dentro de cada 'campo de formulario' que necesites validar.