La versión 4.1 de Contact Form 7 ha introducido opciones de longitud mínima y máxima para algunas etiquetas de formulario, y un nuevo tipo de etiqueta de formulario para un recuento de caracteres, similar a como lo hace Twitter.
Opciones de longitud mínima y longitud máxima
Las opciones maxlength y minlength están basadas en los atributos HTML5 del mismo nombre que especifican la longitud mínima y máxima permitida para los campos de entrada.
Los tipos de etiquetas de formulario que son compatibles tanto con maxlength como con minlength son: text, textarea, email, url, tel, quiz y captchar (respuesta CAPTCHA). Estas etiquetas de formulario (excepto quiz y captchar) también son compatibles con la validación de entrada del usuario basada en la longitud de los caracteres.
Ejemplo:
[textarea* tu-mensaje minlength:10 maxlength:140]
Con la etiqueta de formulario textarea del ejemplo anterior, verás un mensaje de error de validación si tu entrada tiene menos de 10 caracteres o más de 140 caracteres. Sin embargo, la mayoría de los navegadores te impedirán escribir más allá del límite de longitud máxima.
El formato anterior para establecer una longitud máxima (ejemplo: [textarea* tu-mensaje 40/140]) todavía está disponible, pero si la opción explícita maxlength está establecida, lo sobrescribirá.
Recuento de caracteres
Es posible que quieras un recuento de caracteres para un campo de entrada con la opción maxlength, que indique cuántos caracteres has escrito, o puedes escribir en el campo, hasta alcanzar el límite de longitud máxima.
Para añadir un recuento de caracteres, inserta una etiqueta de formulario count en tu formulario. La etiqueta count solo funciona como un marcador de posición para un recuento de caracteres (entero). Ten en cuenta que la etiqueta debe tener el mismo nombre del campo de entrada al que quieres asignarla.
Por ejemplo, si tienes este campo (nombre = «tu-mensaje»):
[textarea* tu-mensaje minlength:10 maxlength:140]
y quieres activar el recuento de caracteres en este campo, añade [count tu-mensaje]:
[textarea* tu-mensaje minlength:10 maxlength:140] [count tu-mensaje]
Por defecto, la etiqueta count muestra el número de caracteres en el campo asignado, por lo que su valor entero aumenta a medida que escribes.
También puedes invertir el conteo para que muestre el número de caracteres restantes hasta la longitud máxima del campo asignado. Para ello, añade la opción down en la etiqueta de formulario count:
[textarea* tu-mensaje minlength:10 maxlength:140] [count tu-mensaje down]
En este caso, la etiqueta count muestra «140» al comienzo, disminuyendo a medida que escribes: cuando hayas escrito 140 caracteres, mostrará «0».
Demostración:
Mira el código fuente del formulario anterior:
[textarea* tu-mensaje minlength:10 maxlength:140]
[count tu-mensaje]
[textarea* tu-mensaje-2 minlength:10 maxlength:140]
[count tu-mensaje-2 down]