Uso de máscaras de entrada personalizadas

¿Desea exigir un formato específico para un campo de formulario? Las máscaras de entrada personalizadas le permiten establecer reglas para los valores que los usuarios pueden introducir en un campo. Esto puede ser útil para números de teléfono internacionales, códigos postales, etc.

Este tutorial le mostrará cómo crear y añadir una máscara de entrada personalizada a un campo de formulario.

---

Antes de empezar, asegúrese de que WPForms está instalado y activado en su sitio WordPress. A continuación, cree un nuevo formulario o edite uno existente.

Añadir una máscara de entrada personalizada

Puedes añadir una máscara de entrada personalizada a cualquier campo de Texto Unifilar. Después de añadir este tipo de campo a tu formulario, haz clic en él para abrir su panel Opciones de campo.

Dentro de las opciones de campo, tendrá que hacer clic en la pestaña Avanzado. A continuación, puedes añadir tu regla al campo Máscara de entrada.

Máscaras de entrada básicas

Para crear las reglas de una máscara de entrada personalizada, deberá utilizar un conjunto específico de caracteres especiales.

• 9: Numérico (0-9)
• a: Alfabético (a-z o A-Z)
• A: Alfabético en mayúsculas (A-Z)
• *: Alfanumérico (0-9, a-z o A-Z)
• &: Alfanumérico en mayúsculas (0-9 o A-Z)

Por ejemplo, si desea solicitar un número de 5 dígitos, introduzca 5 9s en el campo Máscara de entrada.

Cuando los usuarios hagan clic en este campo del formulario en el frontend, verán un guión bajo o un "espacio en blanco" para cada carácter requerido para ayudar a guiar su entrada. Además, como hemos utilizado el 9 la máscara de entrada sólo acepta valores numéricos (no letras ni otros caracteres).

También puede incluir símbolos como guiones (-) o paréntesis en la máscara de entrada. Por ejemplo, puede utilizar la siguiente máscara de entrada para solicitar un formato de número de teléfono con el código de país de EE.UU:

+1 (999)-999-9999

Cuando un usuario haga clic en este campo, verá espacios en blanco en lugar de los caracteres 9s. El +1, los paréntesis y los guiones se introducen automáticamente en el campo, por lo que los usuarios sólo tienen que rellenar los números.

Es importante tener en cuenta que los usuarios no pueden enviar un formulario si sólo han rellenado parcialmente una máscara de entrada. Deben introducir el número y tipo de caracteres requeridos por la máscara de entrada o verán un mensaje de validación que dice: "Rellene todos los espacios en blanco".

Sin embargo, añadir una máscara de entrada a un campo no lo convierte en obligatorio. Los usuarios pueden seguir enviando el formulario si la máscara de entrada de un campo no obligatorio está completamente vacía.

Añadir caracteres opcionales a las máscaras de entrada

A veces, puede que desee exigir un formato específico para un campo, pero también necesita permitir un número flexible de caracteres. Por ejemplo, en muchos países, los números de teléfono de distintas regiones pueden contener un número diferente de dígitos.

Coloque los caracteres opcionales entre corchetes de la siguiente manera:

99 9999-9999[9]

Dado que el último dígito es opcional, esta máscara de entrada aceptaría 10 dígitos, como por ejemplo 98 7654-3210u 11 dígitos, como por ejemplo 98 7654-32109.

Ejemplos adicionales de caracteres opcionales en máscaras de entrada

Nombre de usuario con 6-8 letras (la primera mayúscula, las demás minúsculas)

• Máscara: Aaaaa[a][a]
• Ejemplo de entrada: Sullie o Sulliewp

Código postal de EE.UU. con +4 opcional:

• Máscara: 99999[-9999]
• Ejemplo de entrada: 98765 o 98765-4321

Escapar caracteres de máscara especiales

Debido a los caracteres especiales que utilizan las máscaras de entrada para crear los formatos requeridos, hay ciertas letras, números y símbolos que pueden aparecer como espacios en blanco cuando no es su intención.

Para evitar convertir cualquiera de los caracteres especiales de la máscara de entrada en espacios en blanco en el frontend, puede añadir simplemente dos barras invertidas (\\) delante del carácter.

Como ejemplo, vamos a crear una máscara de entrada para una URL de Instagram.

Si introducimos la máscara de entrada como https://instagram.com/*{1,30}todos los a se convertirán en espacios en blanco que los usuarios deberán rellenar en el frontend.

Para solucionarlo, basta con añadir una doble barra invertida delante de cualquier archivo a que no queremos convertir en un espacio en blanco. Así, para este ejemplo, introduciríamos la máscara de entrada como https://inst\\agr\\am.com/*{1,30} en las opciones de campo.

Ahora, cuando veamos este campo dentro del formulario incrustado, sólo aparecerán espacios en blanco donde pretendíamos.

Ejemplos adicionales de caracteres especiales en máscaras de entrada

SKU del producto (2 9 seguidos de otros 3 números o letras mayúsculas)

• Máscara: \\9\\9-&&&
• Ejemplo de entrada: 99-654 o 99-BC8

Dirección de Gmail

• Máscara: *{1,50}@gm\\ail.com
• Ejemplo de entrada: [email protected]

Máscaras de entrada avanzadas

Si desea un mayor control sobre las máscaras de entrada de su formulario, también puede utilizar las opciones avanzadas de formato. Funcionan en combinación con todos los caracteres de máscara especiales descritos anteriormente.

Repetición de caracteres

Puede utilizar cualquiera de los caracteres especiales delante de {n} (donde n es un valor numérico) para requerir un carácter de repetición.

Ejemplos de máscaras de entrada con caracteres repetidos

Código postal de EE.UU. con +4 opcional

• Máscara: 9{5}[-9{4}]
• Ejemplo Entradas: 33409 o 33409-4053

Número de pedido de 12 caracteres con números y letras mayúsculas

• Máscara: &{12}
• Ejemplo Entradas: 29X483HK8192 o 10G7382ZR638

Rangos flexibles de caracteres

Puede utilizar cualquiera de los caracteres especiales delante de {n,m} (donde n y m representan valores numéricos) para permitir a los usuarios introducir un rango de caracteres.

Ejemplos de máscaras de entrada con rangos flexibles

URL de Facebook (permite 5-50 caracteres):

• Máscara: https://f\\acebook.com/*****[*{0,45}]
• Ejemplo Entradas: https://facebook.com/wpforms o https://facebook.com/monsterinsights

Twitter Handle (permite 4-15 números, mayúsculas o minúsculas)

• Máscara: @****[*{0,11}]
• Ejemplo de entrada: @easywpforms o @WPBeginner

Correo electrónico para un dominio específico (permite 1-51 caracteres):

• Máscara: *[*{0,50}]@mysite.com
• Ejemplo de entrada: [email protected] o [email protected]

SKU del producto con 8-11 caracteres (permite números o letras mayúsculas):

• Máscara: &{4}-&{4}[&{0,3}]
• Ejemplo de entrada: A987-BC65 o A987-BC65D43

Enmascaramiento de varios valores de entrada posibles

Otra opción es crear una máscara de entrada que acepte múltiples valores de entrada posibles. Para ello, introduzca una barra invertida seguida de los valores permitidos entre paréntesis separados por barras verticales como en \(x|y).

Ejemplos de máscaras que permiten múltiples entradas posibles

Número de teléfono con código de país para EE.UU. (+1), Australia (+61) o México (+52)

• Máscara: +\(1|61|52) 9999999999
• Ejemplo de entradas: +1 2127893920 o +52 3307490285

Número de cuenta en TN o KY

• Máscara: \(TN|KY)9{10}
• Ejemplo de entradas: TN3756284765 o KY2975387529

Máscaras de fecha y hora

También puede utilizar máscaras de entrada personalizadas para requerir un formato específico de fecha u hora.

Para configurar una máscara de entrada para la fecha o la hora, tendrá que empezar con date: seguido del formato que desee.

Máscaras de fechas

Utilizando las opciones siguientes, puede crear máscaras de introducción de fechas personalizadas que se ajusten a sus necesidades.

• d: Día del mes en dígitos; sin cero inicial para días de un solo dígito.
• dd: Día del mes en dígitos; cero a la izquierda para días de un solo dígito.
• m: Mes en dígitos; sin cero inicial para los meses de un solo dígito.
• mm: Mes en dígitos; cero a la izquierda para meses de un solo dígito.
• yy: Año como 2 últimos dígitos; cero a la izquierda para años inferiores a 10.
• yyyy: Año como 4 dígitos

A modo de ejemplo, date:dd/mm/yyyy requerirá una fecha como 12/08/2021. Cuando un usuario visite su formulario y pase el ratón por encima del campo, verá marcadores de posición para el formato requerido.

Máscaras del tiempo

Utilizando las opciones siguientes, puede crear máscaras de entrada de tiempo personalizadas que se ajusten a sus necesidades.

• h: Horas; sin cero inicial para las horas de un solo dígito (reloj de 12 horas).
• hh: Horas; cero a la izquierda para horas de un solo dígito (reloj de 12 horas).
• H: Horas; sin cero a la izquierda para las horas de un solo dígito (reloj de 24 horas).
• HH: Horas; cero a la izquierda para horas de un solo dígito (reloj de 24 horas).
• M: Minutos; sin cero inicial para los minutos de un solo dígito. M mayúscula para evitar conflictos con los meses.
• MM: Minutos; cero inicial para minutos de un solo dígito. MM en mayúsculas para evitar conflictos con los meses.
• s: Segundos; sin cero inicial para los segundos de un solo dígito.
• ss: Segundos; cero a la izquierda para segundos de un solo dígito.
• l: Milisegundos. 3 dígitos.
• L: Milisegundos. 2 dígitos.
• t: Cadena de marcador de tiempo de un solo carácter en minúsculas: a o p.
• tt: Cadena de marcador de tiempo de dos caracteres: am o pm.
• T: Cadena de marcador de tiempo de un solo carácter: A o P.
• TT: Cadena de marcador de hora de dos caracteres: AM o PM.

A modo de ejemplo, date:h:MM permitirá a los usuarios introducir una hora como, por ejemplo, las 8:30. En el frontend, los usuarios verán marcadores de posición en el campo cuando pasen el ratón por encima.

Uso de alias para añadir máscaras de entrada

Puede introducir un alias en el campo Máscara de entrada de las opciones avanzadas de campo para utilizar una máscara de entrada preconfigurada.

Los alias de máscara de entrada disponibles en WPForms incluyen:

• alias:numeric: Permite a los usuarios introducir cualquier valor numérico.
• alias:currency: Permite introducir valores numéricos en formato 0,00.
• alias:decimal: Permite a los usuarios introducir cualquier valor numérico con o sin decimales.
• alias:integer: Permite a los usuarios introducir cualquier valor numérico entero.
• alias:percentage: Permite a los usuarios introducir cualquier número del 1 al 100 como porcentaje.
• alias:url: Añade una máscara de entrada para una URL que empiece por http://.
• alias:email: Añade una máscara de entrada para una dirección de correo electrónico.

Preguntas frecuentes

Aquí, vamos a discutir algunas de las preguntas más comunes que recibimos acerca de las máscaras de entrada en WPForms.

¿El uso de Limitar longitud con una máscara de entrada restringirá la entrada de caracteres en los campos de texto de una sola línea?

Sí. Cuando se añaden límites de caracteres y máscaras de entrada juntos en campos de texto de una línea, el límite cuenta todo, incluidos símbolos como guiones, como parte del límite. Para asegurarse de que los usuarios pueden introducir su información sin problemas, ajuste el límite de caracteres para incluir estos símbolos adicionales.

Para más información sobre cómo ajustar los límites de caracteres, consulte nuestra guía sobre la limitación de los límites de caracteres y palabras.

Ya está. Ahora puede crear máscaras de entrada personalizadas para requerir formatos específicos en los campos de sus formularios.

A continuación, ¿quieres que tus formularios sean más compactos? Asegúrese de consultar nuestro tutorial sobre el uso de diseños de varias columnas para aprender a organizar los campos en filas en su formulario.