¿Quieres aprender a crear máscaras de entrada para los formularios de tu sitio?
La posibilidad de personalizar la forma en que se introducen los datos en los formularios de WordPress facilita la experiencia del usuario y garantiza que siempre se introduzcan los datos correctos.
Cree su formulario WordPress ahora
En este artículo
¿Qué es una máscara de entrada?
Las máscaras de entrada son una forma de restringir los caracteres que se pueden escribir en un campo.
Por ejemplo, puede limitar el campo para que sólo acepte números o texto. También puede restringir el número de caracteres.
Las máscaras de entrada son estupendas para cosas como números de teléfono o nombres de usuario de redes sociales que siempre siguen el mismo formato.
Cómo funcionan las máscaras de entrada
Las máscaras de entrada utilizan los siguientes caracteres para construir una plantilla de los datos que se aceptarán:
- 9 representa cualquier número (0-9)
- a representa cualquier letra minúscula o mayúscula
- A restringe los caracteres aceptados a mayúsculas
- & restringe el campo a mayúsculas alfanuméricas (0-9 o A-Z)
- * permite introducir cualquier letra o número (0-9, a-z o A-Z)
También puedes añadir guiones o paréntesis ( ) en la máscara de entrada. Esto es especialmente útil cuando quieres que la gente rellene su número de teléfono en el formulario de tu sitio.
Si desea añadir algún carácter opcional, después de haber utilizado ya el paréntesis, deberá colocarlo entre corchetes [ ].
Por ejemplo, esta máscara de entrada requeriría un mínimo de 4 caracteres, pero también se permitirían entradas más largas:
**** [***********]
Ejemplos de máscaras de entrada
Ahora que ya sabes lo que es una máscara de entrada, es hora de echar un vistazo a algunos de los ejemplos más básicos que puedes utilizar en tus formularios de WordPress.
Estados Unidos Código postal:
- Máscara:
99999 - Ejemplo de entrada de usuario: 89023
Código postal de Estados Unidos con cuatro más opcionales:
- Máscara:
99999 [-9999] - Ejemplo de entrada de usuario: 89023 o 89023-5678
Nombre de usuario con 6-8 letras (la primera en mayúsculas y el resto en minúsculas):
- Máscara:
Aaaaaa [aa] - Ejemplo de entrada de usuario: Minnie o Minniems
X (antes conocido como Twitter) Nombre de usuario con 4-15 números o mayúsculas/minúsculas:
- Máscara:
@**** [***********] - Ejemplo de entrada de usuario: @easywpforms
Para obtener ayuda con símbolos de máscara de entrada avanzados, consulte este tutorial sobre cómo añadir máscaras de entrada a sus formularios de WordPress.
Cómo crear máscaras de entrada en campos de formulario
Ahora que ya tienes una idea de lo que son las máscaras de entrada, vamos a crear una.
1. Crear un nuevo formulario de WordPress
Lo primero que tendrá que hacer es instalar y activar el plugin WPForms. Para más detalles, siga esta guía paso a paso sobre cómo instalar un plugin en WordPress.
A continuación, tendrá que crear un nuevo formulario. Recomendamos utilizar el Formulario de contacto simple como punto de partida sencillo para realizar pruebas.
2. Añadir un campo de texto de una línea
Para añadir una máscara de entrada a su formulario de contacto, tendrá que añadir un campo de formulario de texto de una sola línea .
Arrastre y suelte el campo del formulario desde el panel izquierdo a la vista previa del formulario.
Una vez hecho esto, haga clic en el campo de formulario de la derecha para abrir el panel Opciones de campo.
Haga clic en la pestaña Avanzado. Aquí es donde definirás tu máscara de entrada personalizada.
En nuestro ejemplo, pediremos a las personas que rellenen nuestro formulario que introduzcan su código postal de Estados Unidos:
Esta máscara restringirá el campo para que sólo acepte 5 números.
Haga clic en Guardar.
3. Añada el formulario a su sitio web
Ahora que el formulario de contacto está personalizado con una máscara de entrada, es el momento de incrustar el formulario en su sitio web.
Haga clic en el botón Incrustar y elija la ubicación de su formulario.
A continuación, publica tu post o página para que tu formulario de contacto aparezca entre los visitantes de tu sitio. Echa un vistazo:
Fíjese en los guiones bajos que guían al usuario para que termine de rellenar su código postal.
Cree su formulario WordPress ahora
A continuación, controle el envío de formularios
Y ya está. Ahora ya sabes cómo crear máscaras de entrada para los formularios de tu sitio.
Si buscas más formas de controlar el funcionamiento de tus formularios, consulta estos recursos:
- Limite las entradas de formularios según la fecha con esta sencilla guía del complemento Form Locker
- Impida que los visitantes menores de edad rellenen sus formularios con un complemento de verificación de edad.
¿Listo para crear tu formulario? Empieza hoy mismo con el plugin más sencillo para crear formularios en WordPress. WPForms Pro incluye un montón de plantillas gratuitas y ofrece una garantía de devolución de dinero de 14 días.
Si este artículo te ha ayudado, síguenos en Facebook y Twitter para más tutoriales y guías gratuitas sobre WordPress.
¿Puedo definir una longitud mínima/máxima, por ejemplo, para un campo de una sola línea, y se validará correctamente?
Hola Christian,
Actualmente no disponemos de una opción integrada para esto, aunque si quieres crear un código personalizado, tenemos un documento para desarrolladores sobre cómo establecer un límite máximo de caracteres.
Y si quieres probarlo, aquí tienes nuestro tutorial adicional sobre cómo añadir código personalizado como éste a tu sitio.
Espero que te sirva de ayuda 🙂 .
¿Qué pasa si no tiene un campo llamado Máscara de Entrada? ¿No hay nada bajo el campo Clases CSS en Opciones Avanzadas?
Hola Dianne,
Le pido disculpas por cualquier problema que pueda surgir. Al añadir una máscara de entrada, asegúrese de que está utilizando un campo de texto de una sola línea (este es actualmente el único tipo de campo que permite máscaras de entrada). Además, esta es una característica más reciente, así que asegúrese de que su plugin WPForms está totalmente actualizado.
Si lo intenta y sigue sin ver las opciones que espera, póngase en contacto con nosotros para que podamos ayudarle. Si tiene una licencia de WPForms, tiene acceso a nuestro soporte por correo electrónico, así que por favor envíe un ticket de soporte.
De lo contrario, ofrecemos soporte gratuito limitado en el foro de soporte de WPForms Lite WordPress.org.
Gracias 🙂 .
Hola, en este artículo: https://wpforms.com/docs/how-to-use-custom-input-masks/
Utilice la máscara de entrada de ejemplo para una dirección de correo electrónico en "mysite.com"
Mask: *[*{0,50}]@mysite.com
Example Input: [email protected] or [email protected]
Pero, ¿y si su sitio web lleva la letra "a"? Por ejemplo...
Using this layer mask: *[*{0,50}]@mydomain.com
actually renders a field that has a blank for the “a” in domain.
Example input: _______@mydom_in.com
¿Cómo doy formato a la máscara de capa para que toda la cadena "midominio.com" permanezca intacta?
Gracias de antemano por su ayuda.
Hola Re,
Siento el problema. He replicado el problema que describes y lo he compartido con nuestro equipo para que trabajen en una solución. Gracias por avisarnos para que podamos solucionarlo 🙂 Saludos.
Hola. Quiero utilizar la herramienta de máscara de entrada para limitar la entrada de caracteres en algunos de mis campos.
I’m using this mask: *[*{0,30}].
Sin embargo, no incluye los "espacios" como carácter.
¿Qué máscara de entrada puedo utilizar para incluir los espacios como carácter en mi límite de 30 caracteres?
Hola Alicia,
Nuestras máscaras de entrada no proporcionan actualmente un requisito de "espacio" de esta manera. En su lugar, puedes considerar el uso de un poco de código personalizado para añadir este límite de caracteres(aquí está nuestro documento con los detalles).
El código en ese documento contará los espacios como caracteres, por lo que debería funcionar más como lo que tienes en mente.
Y por si te sirve de ayuda, aquí tienes cómo añadir código personalizado como éste a tu sitio.
Espero que te sirva de ayuda 🙂 .
Tengo el mismo problema que RE CARLSON
-
¿Pero qué pasa si su sitio web tiene la letra "a"?
-
¿Tiene una solución para esto?
Gracias.
Hola Allan,
Tengo buenas noticias: tenemos una solución para esto 🙂 .
Para añadir una "a" sin convertirla en parte del área de entrada, puede escaparla utilizando `\`. Por ejemplo, si escribiera esto como máscara de entrada: `esto es una prueba aaa`, terminaría siendo: "esto es una prueba ___".
Así que asegúrate de poner esa doble barra invertida delante de cualquier A, a o 9 que quieras mantener tal cual (no convertir en _).
Espero que te sirva de ayuda 🙂 .
Hola,
Necesito mayúsculas alfanuméricas (0-9 o A-Z) para combinar con espacio entre caracteres. Aparentemente "&" no permite ningún espaciado
Hola Elyas,
No tenemos un carácter especial que permita espacios; en su lugar, puede añadir simplemente un espacio entre los caracteres & que desee, de modo que puede hacer que el campo de máscara de entrada se lea como "&&&& &&&&".
Espero que te sirva de ayuda 🙂 .
¿Cómo puedo hacer campo aceptar sólo a partir de sólo 6-9 rango de números. Estoy usando comprado WPForms Basic.
Ejemplo
7898981226
8985607458
9989878774
¡Hola Munaf!
Puede crear una máscara de entrada personalizada para el campo de texto de una sola línea, sin embargo, no hay ninguna opción incorporada para utilizar el rango de números allí.
Así que usted puede tener como este por ejemplo "\\799999" y sólo permitirá "7" en el principio y luego 5 más cualquier dígito, pero no tenemos reglas para elegir 7 O 8 O 9 allí en el principio, por desgracia.
Y en caso de que ayude, tenemos otro gran tutorial sobre cómo utilizar la máscara de entrada personalizada en WPForms aquí
Pido disculpas por cualquier confusión.
Que lo pases bien 🙂 .
Estou iniciando o uso do WPFroms ainda de forma gratuita para testes de compatibilidade com soluções que já tenho implantadas, contudo tentando personalizar uma mascara simples sugerida por vocês como “https://www.f\\acebook.com/*{1,22}” em um campo de “texto de linha unica” percebo que não são aceitos caracteres especiais simples como ? . ou / ; isso é uma limitação proposital impostas a usuários gratuitos ou poderiam me informar por qual simbolo deveria substituir o de * para permitir a entrada de caracteres especiais na mascara.
Hola Rodrigo,
Me disculpo pero estoy un poco confundido por su pregunta. Cuando tenga la oportunidad, puede por favor aclarar o si está utilizando nuestro plugin gratuito, WPForms Lite, por favor visite los foros de soporte donde ofrecemos soporte limitado de cortesía.
Gracias.
Hola ¿es posible añadir una coma después de cada 3 dígitos? por ejemplo 99,999,999
Hey Waqas- Si usted tiene el número de dígitos fijo, entonces es factible. Por ejemplo, esta máscara de entrada mostrará 9 dígitos y una coma después de cada 3 dígitos 999\,999\,999
Espero que te sirva de ayuda.
¿Cómo puedo permitir caracteres especiales en mi máscara de entrada?
Hey Afif - Tenemos algunos tutoriales avanzados de máscara de entrada en este artículo que explica cómo agregar algunos caracteres.
Para obtener más ayuda sobre esto, por favor envíenos una línea en el soporte para que podamos ayudar. Si tiene una licencia de WPForms, tiene acceso a nuestro soporte por correo electrónico, así que por favor envíe un ticket de soporte. De lo contrario, ofrecemos soporte gratuito limitado en el foro de soporte de WPForms Lite WordPress.org.
Gracias 🙂 .
No quiero caracteres ilegales en mi campo de texto de una sola línea
Hey Rahul - Yo sugeriría echar un vistazo a este tutorial sobre cómo restringir caracteres especiales en sus campos de formulario.
Espero que te sirva de ayuda.
¿Cómo puedo Permitir 15 letras o menos en mi máscara de entrada?
Hola Yusuf- Para crear las reglas de una máscara de entrada personalizada, tendrás que utilizar un conjunto específico de símbolos. (Por favor, recuerda añadir el símbolo apropiado 15 veces).
Espero que te sirva de ayuda 🙂 .
Hola, parece que mis máscaras de entrada ya no funcionan, los campos de texto sólo dejan escribir lo que sea aunque las máscaras estén activas. Cualquier ayuda por favor? thnk u.
Hola Antonio- ¡Lo sentimos! Estaremos encantados de ayudarte.
Si tiene una licencia de WPForms, tiene acceso a nuestro soporte por correo electrónico, así que envíe un ticket de soporte. De lo contrario, ofrecemos soporte gratuito limitado en el foro de soporte de WPForms Lite WordPress.org.
Gracias.
Hola,
Estoy creando un campo de nombre con una sola línea de texto y sólo los alfabetos y los espacios deben ser añadidos. Para ello, he añadido mástil de entrada como a{1,50}. Esto acepta alfabetos, pero los espacios no se puede añadir, por favor, dame una solución para esto.
¡Hola Amrita! Disculpa, pero las máscaras de entrada no serían adecuadas para este tipo de caso de uso, ya que su finalidad es proporcionar una estructura específica a la entrada, por ejemplo, un número de teléfono o un número de identificación. Los espacios no se pueden utilizar en una máscara de entrada.
Para hacer lo que usted está buscando requeriría codificación personalizada (por lo general jQuery o JavaScript), sin embargo me disculpo ya que no somos capaces de proporcionar apoyo a este grado de personalización. Este hilo puede ser capaz de darle algunas ideas sin embargo.
Lamento no poder ofrecerte una solución, pero si tienes más preguntas, ponte en contacto con nosotros si tienes una suscripción activa. Si no la tienes, no dudes en dejarnos alguna pregunta en nuestros foros de soporte.
Hola chicos
¿cómo puedo crear una máscara de este modo?
+55 (99) 9 9999-9999 o +55 (99) 9999-9999 en la misma entrada.
gracias,
Hola a todos. Parece que has publicado esta pregunta en varios artículos, así que la trataré aquí en un solo lugar.
Lo siento, pero no es posible especificar dónde se colocaría el número opcional, ya que la máscara de entrada funciona por la secuencia en que se introducen. Técnicamente, el número opcional podría seguir siendo opcional, pero significaría que los usuarios tendrían que "saltarse" ese carácter introduciendo un espacio en esa posición del carácter, y luego continuar rellenando el resto del campo.
Debería ser posible con un poco de codificación personalizada, sin embargo lo siento tales personalizaciones están fuera del alcance de nuestro apoyo. En caso de que desee buscar opciones de desarrollo personalizado, le recomendamos encarecidamente que utilice Codeable. Codeable selecciona a todos los desarrolladores por usted para asegurarse de que son altamente cualificados y comunicativos, y también le ayuda a guiar todo el proceso de conexión y comunicación con el desarrollador más adecuado.
Aquí está nuestro tutorial sobre el uso de Codeable, que proporciona más detalles sobre cómo funciona este proceso.
O si desea un equipo al que pueda seguir acudiendo (a largo plazo) para obtener ayuda de desarrollo personalizado, también podría considerar echar un vistazo a WPBuffs.
Espero que esto te ayude a aclararte 🙂 Si tienes más preguntas al respecto, ponte en contacto con nosotros si tienes una suscripción activa. Si no la tienes, no dudes en dejarnos alguna pregunta en nuestros foros de soporte.
El elemento número de teléfono no ofrece enmascaramiento de entrada, ¿es posible esa función?
Nos gusta poder utilizar el enmascaramiento de entrada en el elemento de número de teléfono porque ofrece el selector de código de país, mientras que una entrada de texto normal no lo hace (aunque sí ofrece enmascaramiento de entrada).
Gracias,
Mark
Hola, Mark,
No disponemos de una función incorporada para establecer la máscara personalizada para el campo Teléfono. Sin embargo, esto se puede lograr utilizando el campo de texto de una sola línea y estableciendo la máscara de entrada personalizada como se muestra aquí
Espero que te sirva de ayuda 🙂 .
¿Es posible exigir una entrada decimal en el campo numérico?
Entonces, ¿el usuario debe introducir siempre enteros + x decimales?
Por ejemplo:
0.015
0.792
0.28
1.256
Hola, creo que esto debería ser posible utilizando la siguiente Máscara de Entrada en un campo de texto de una sola línea: [99.999] y aquí está el screencast demostrando el mismo.
Espero que te sirva de ayuda.
alguien sabe como hacer la mascara de moneda en wpforms ejemplo: $1,252.33
Hola Cristian - puedes hacer uso de la siguiente Máscara de Entrada para lograrlo: $ [[9],999.99].
Espero que te sirva de ayuda.
Quiero crear una máscara de entrada para EMP2000, ¿cómo puedo hacerlo?
Hola Kashmira - puedes hacer uso de la siguiente Máscara de Entrada para conseguirlo:EMP2[9999].
Espero que te sirva de ayuda.
¿Cómo puedo crear una máscara de entrada para un importe opcional?
por ejemplo $1,000,000 o $250,000 añadiendo una coma en medio dependiendo de la cantidad?
Hola Mariana, desafortunadamente, no tenemos una opción incorporada para el formato opcional con máscara de entrada como la que has descrito. Sin embargo, estoy de acuerdo en que sería muy útil. He tomado nota de la solicitud de función y la tendremos en cuenta a la hora de planificar nuestra hoja de ruta para el futuro.
Gracias y que tenga un buen día.
¿Hay alguna forma de comprobar si el número de identificación del vehículo (VIN) es correcto?
Hola Litschi - Seguramente puede crear una máscara de entrada personalizada para validar el formato correcto del número de identificación del vehículo (VIN).
Gracias 🙂 .
Hola, ¿puedo utilizar una máscara de entrada para NO permitir espacios?
Por ejemplo, si un usuario escribe "AA 9999", ¿la máscara forzará "AA9999"?
¿O un espacio inicial como "AA9999[_]" aparecerá como "AA9999" sin el espacio?