Limitar Caracteres en un FORMULARIO *HTML Y WORDPRESS*

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.

 

Agradecemos mucho el apoyo a los anuncios:

Abrir chat
¿Podemos ayudarlo?