Usar máscaras de entrada personalizadas

¿Le gustaría 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 y más.

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 de WordPress. Luego, cree un formulario nuevo o edite uno existente.

Añadir una máscara de entrada personalizada

Puede añadir una máscara de entrada personalizada a cualquier campo de Texto de una sola línea. Después de haber añadido este tipo de campo a su formulario, haga clic en él para abrir su panel de Opciones de campo.

Dentro de las opciones del campo, deberá hacer clic en la pestaña Avanzado. Luego puede añadir su regla en el campo Máscara de entrada.

Máscaras de entrada básicas

Para crear las reglas de una máscara de entrada personalizada, necesitará usar 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 exigir un número de 5 dígitos, introduciría 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 guion bajo o un "espacio en blanco" por cada carácter requerido para ayudar a guiar su entrada. Además, como usamos el símbolo 9, la máscara de entrada solo aceptará valores numéricos (sin letras ni otros caracteres).

También puede incluir símbolos como guiones (-) o paréntesis en su máscara de entrada. Por ejemplo, podría usar la siguiente máscara de entrada para exigir 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 dentro de este campo, verá espacios en blanco en lugar de los 9s. El +1, los paréntesis y los guiones se introducen automáticamente en el campo, por lo que los usuarios solo tienen que rellenar los números.

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

Sin embargo, añadir una máscara de entrada a un campo no hace que el campo sea obligatorio. Los usuarios aún pueden enviar el formulario si la máscara de entrada en un campo no obligatorio está completamente vacía.

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

A veces, es posible 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 en diferentes regiones pueden contener un número diferente de dígitos.

Coloque cualquier carácter opcional entre corchetes, así:

99 9999-9999[9]

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

Ejemplos adicionales de caracteres opcionales en máscaras de entrada

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

• Máscara: Aaaaa[a][a]
• Entrada de ejemplo: Sullie o Sulliewp

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

• Máscara: 99999[-9999]
• Entrada de ejemplo: 98765 o 98765-4321

Escapar caracteres especiales de máscara

Debido a los caracteres especiales que utilizan las máscaras de entrada para crear formatos obligatorios, hay ciertas letras, números y símbolos que pueden aparecer como espacios en blanco cuando no se pretende que lo hagan.

Para evitar que los caracteres especiales de las máscaras de entrada se conviertan en espacios en blanco en el frontend, simplemente puedes añadir dos barras invertidas (\\) delante del carácter.

Como ejemplo, creemos 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 caracteres a se convertirán en espacios en blanco que los usuarios deberán rellenar en el frontend.

Para solucionarlo, solo tenemos que añadir una doble barra invertida delante de cualquier a que no queramos 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 del campo.

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

Ejemplos adicionales de caracteres especiales de escape en máscaras de entrada

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

• Máscara: \\9\\9-&&&
• Entrada de ejemplo: 99-654 o 99-BC8

Dirección de Gmail

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

Máscaras de entrada avanzadas

Si deseas aún más control sobre las máscaras de entrada de tu formulario, también puedes usar opciones de formato avanzadas. Funcionan en combinación con todos los caracteres especiales de máscara descritos anteriormente.

Caracteres repetidos

Puedes usar cualquiera de los caracteres especiales delante de {n} (donde n es un valor numérico) para requerir un carácter repetido.

Ejemplos de máscaras de entrada con caracteres repetidos

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

• Máscara: 9{5}[-9{4}]
• Ejemplos de entradas: 33409 o 33409-4053

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

• Máscara: &{12}
• Ejemplos de entradas: 29X483HK8192 o 10G7382ZR638

Rangos flexibles de caracteres

Puedes usar cualquiera de los caracteres especiales delante de {n,m} (donde n y m representan valores numéricos) para permitir que los usuarios introduzcan un rango de caracteres.

Ejemplos de máscaras de entrada con rangos flexibles

URL de Facebook (permite de 5 a 50 caracteres):

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

Nombre de usuario de Twitter (permite de 4 a 15 números, letras mayúsculas o minúsculas)

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

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

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

SKU de producto de 8 a 11 caracteres (permite números o letras mayúsculas):

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

Enmascaramiento para múltiples valores de entrada posibles

Otra opción es crear una máscara de entrada que acepte múltiples valores de entrada posibles. Para ello, introduce 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
• Ejemplos de entradas: +1 2127893920 o +52 3307490285

Número de cuenta que comienza con TN o KY

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

Máscaras de fecha/hora

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

Para configurar una máscara de entrada para fecha u hora, necesitarás empezar con date: seguido del formato que deseas requerir.

Máscaras de fecha

Usando las opciones a continuación, puedes crear máscaras de entrada de fecha personalizadas que se ajusten a tus necesidades.

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

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

Máscaras de hora

Usando las opciones a continuación, puedes crear máscaras de entrada de hora personalizadas que se ajusten a tus necesidades.

• h: Horas; sin cero inicial para horas de un solo dígito (reloj de 12 horas).
• hh: Horas; cero inicial para horas de un solo dígito (reloj de 12 horas).
• H: Horas; sin cero inicial para horas de un solo dígito (reloj de 24 horas).
• HH: Horas; cero inicial para horas de un solo dígito (reloj de 24 horas).
• M: Minutos; sin cero inicial para 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 mayúscula para evitar conflictos con los meses.
• s: Segundos; sin cero inicial para segundos de un solo dígito.
• ss: Segundos; cero inicial para segundos de un solo dígito.
• l: Milisegundos. 3 dígitos.
• L: Milisegundos. 2 dígitos.
• t: Cadena de marcador de tiempo de una sola letra minúscula: a o p.
• tt: Cadena de marcador de tiempo de dos letras minúsculas: am o pm.
• T: Cadena de marcador de tiempo de una sola letra mayúscula: A o P.
• TT: Cadena de marcador de tiempo de dos letras mayúsculas: AM o PM.

Como ejemplo, date:h:MM permitirá a los usuarios introducir una hora como 8:30. En el frontend, los usuarios verán marcadores de posición en el campo cuando pasen el ratón sobre él.

Usar alias para añadir máscaras de entrada

Puedes introducir un alias en el campo Máscara de entrada en las opciones avanzadas del campo para usar una máscara de entrada preempaquetada.

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 a los usuarios introducir valores numéricos en el 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 de número 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 comience con http://.
• alias:email: Añade una máscara de entrada para una dirección de correo electrónico.

Preguntas frecuentes

Aquí, discutiremos algunas de las preguntas más comunes que recibimos sobre las máscaras de entrada en WPForms.

No encuentro la opción Máscara de entrada en la configuración de mi campo. ¿Dónde está?

La opción Máscara de entrada solo está disponible para el campo Texto de una sola línea. No la encontrarás en otros tipos de campo como Teléfono, Correo electrónico, Números o Párrafo.

Para usar una máscara de entrada personalizada, añade un campo de Texto de una sola línea a tu formulario, haz clic en él para abrir las Opciones del campo, luego ve a la pestaña Avanzado donde encontrarás el campo Máscara de entrada.

¿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 combinas límites de caracteres y máscaras de entrada en campos de Texto de una sola línea, el límite cuenta todo, incluidos los símbolos como guiones, como parte del límite. Para asegurarte de que los usuarios puedan introducir su información sin problemas, ajusta 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, consulta nuestra guía sobre limitar los límites de caracteres y palabras.

¿Por qué se eliminan mis caracteres especiales escapados del campo de máscara de entrada?

Por defecto, WordPress elimina las barras invertidas cuando se procesan los datos del formulario. Si estás escapando caracteres especiales de la máscara (como \9 o \*) y notas que desaparecen, puedes conservarlos habilitando el "slashing" de los datos del formulario.

Para hacer esto, añade la siguiente línea a tu archivo wp-config.php, justo antes de la línea que dice /* That's all, stop editing! */:

define( 'WPFORMS_ENABLE_FORM_DATA_SLASHING', true );

Esto asegurará que las barras invertidas se conserven y que las máscaras de entrada funcionen correctamente. Si no estás seguro de cómo editar el archivo wp-config.php de tu sitio, consulta la guía de WPBeginner sobre cómo editar el archivo wp-config.php en WordPress.

¡Eso es todo! Ahora puedes crear máscaras de entrada personalizadas para requerir formatos específicos en los campos de tus formularios.

¿A continuación, te gustaría hacer tus formularios más compactos? Asegúrate de consultar nuestro tutorial sobre cómo usar diseños multicolumna para aprender a organizar los campos en filas dentro de tu formulario.