En esta ocasión aprenderemos a limitar caracteres en nuestro formulario de nuestro sitio web, Vamos a ver 2 formas diferentes, la primera si nuestro sitio esta en HTML yo WordPress.
Primero vamos a ver la opción de HTML, para esto vamos a nuestra carpeta y vamos a seguir los siguientes pasos.
Empecemos con HTML
Vamos a ubicar el Input deseado de nuestro formulario normalmente es el input de teléfono y es normal limitarlo a una cantidad de caracteres.
Ya ubicado el Input deseado vamos a agregar una regla y es la siguiente maxlength=”10″ limitando el Input a solo 10 caracteres.
Ahora pasamos a WordPress
Ahora pasamos a WordPress, es necesario contar con la herramienta de ELEMENTOR que es un editor visual, si es así vamos a seguir con los pasos (en caso de no contar con elementor, es recomendable descargar un formulario que te deje editarlo como código) por ejemplo Contact Form 7 y seguir con los pasos de arriba.
Tomando en cuenta que tienes elementor procedemos.
.-Accedemos al Editor visual y vamos a nuestro formulario.
.-Buscamos el Widget de HTML y agregamos ese Widget abajo de nuestro formulario.
.-Ahora copiamos y pegamos este Script: <script> document.getElementById(“form-field-field_b36b88f”).maxLength = “10”; </script> (Si lo dejamos así, la regla de maxleght todavía no va a funcionar)
.-Ahora tenemos que buscar el ID de nuestro campo, para eso es necesario ubicar el cursor en la casilla donde le deseamos poner la regla, dar clic derecho e inspeccionar.
.-Ahora buscamos el ID de nuestro campo,
.-Finalmente ponemos ese ID es nuestro Scrip. <script> document.getElementById(“form-field-field_b36b88f”).maxLength = “10”; </script>
En dado caso que no funcione vamos al editor de ELEMENTOR, Seleccionamos nuestro formulario vamos a la casilla que le deseamos agregar la regla, vamos a AVANZADO y en ID agregamos estos caracteres field_b36b88f, ese es el ID que tiene el Script entonces nada más es copiar y pegar.
Es todo, de igual forma dejo un video donde explico el procedimiento a detalle.