Cómo establecer una máscara de contenido en un campo de formulario basándose en la entrada de otro campo

18 de junio de 2025

Si esperas un formato específico para las presentaciones de tu formulario y ya has agregado advertencias y descripciones, pero aún así encuentras que algunas personas envían el formato incorrecto, podrías usar la función Mascara de entrada como solución. Puedes aplicar la Máscara de Entrada con los elementos Texto Corto y Teléfono.

Cuando habilitas la Máscara de Entrada, puedes restringir a los usuarios para que coincidan con el formato que especifiques.

Cómo habilitar la Máscara de Entrada

Asumiendo que ya has agregado el elemento Texto Corto o Teléfono, puedes habilitar la Máscara de Entrada siguiendo estos sencillos pasos:

  1. En el Form Builder, haz clic en el elemento Texto Corto o Teléfono.
  2. Abre las Propiedades del campo dado haciendo clic en el icono de engranaje/rueda dentada.
  3. En la pestaña de Opciones, activa la Mascara de entrada.
Cómo establecer una máscara de contenido en un campo de formulario basándose en la entrada de otro campo Imagen-1

Con la Máscara de entrada, puedes usar los siguientes símbolos para dar formato a los valores:

  • # — Utiliza el signo de número para enmascarar las entradas numéricas.
  • @ — Utiliza el signo de arroba para enmascarar las entradas de letras.
  • * — Utiliza el asterisco para enmascarar tanto entradas numéricas como de letras.

Añade cualquier carácter como un valor fijo o separador entre estos signos de máscara.

Configurar una Máscara de Entrada Condicional

Limitar el formato de entrada a través de la barra de herramientas es fácil de entender, pero ¿qué sucede si el formato cambia en el formulario debido a la preferencia del usuario en uno de los otros campos? En este caso, las condiciones siempre son útiles. Supongamos que estamos en los EE.UU. y queremos incluir números de teléfono internacionales pero también queremos mantener los números domésticos e internacionales.

Hay dos formas diferentes de lograrlo:

1. Crear Múltiples Campos con Condiciones de Mostrar/Ocultar

Para lograrlo, necesitarás crear dos o más campos para el mismo tipo de información, uno siempre lleno y otros campos vacíos.

En nuestro demo este método se ha aplicado al campo Dirección para mostrar la diferencia que esta configuración hace. Aquí está la configuración:

  1. Añade un elemento de Opción Única como selector de dirección y 3 elementos de Dirección en tu formulario para cada tipo de dirección.
añadiendo-campos-de-dirección-jotform
  1. Ve a la página de Configuración.
  2. Selecciona la pestaña de Condiciones.
  3. Haz clic en el Mostrar / Ocultar Campo opción.
añadiendo-campos-de-dirección-jotform
  1. Después de eso, crea una condición para mostrar el campo dependiendo del tipo de dirección seleccionado:
configurando-condición

Finalmente, debes configurar una Condición de Mostrar / Ocultar para cada campo de Dirección.

lista-total-de-condiciones-jotform

2. Crear una Máscara Condicional en un Campo Único

De esta manera, un campo nos muestra el valor todo el tiempo, pero el formato puede cambiarse de forma condicional.

En nuestro demo, este método se ha aplicado al campo de Teléfono para mostrar la diferencia que esta configuración hace. Si el negocio es mayormente local, tiene sentido que la máscara de entrada se configure para números telefónicos locales: 123-1234. Sin embargo, si alguien no es local, pero sigue siendo nacional, el formato sería: (123) 123-1234. Y los números internacionales comienzan con un más y su propio código: +123-123-123-1234.

Todos los demás caracteres que añadimos están ahí para ayudarnos con el formato, lo que significa que siempre permanecerán ahí. Así que para la máscara de número local de EE.UU., ingresaríamos ###-####, lo que significa que después del tercer número se agrega automáticamente un guion y se pueden aceptar 4 números más.

Otros formatos:

Números de teléfono nacionales en EE.UU.: (###) ###-####
Números de teléfono internacionales: +###-###-###-####

Para crear lo mismo:

  1. Ve a la página de Configuración en la parte superior.
  2. Selecciona la pestaña de Condiciones.
  3. Selecciona Habilitar / Requerir Campo.
habilitar-requerir-condición-jotform
  1. Configura la condición según tus requisitos. Basado en nuestro demo, la condición para números locales se vería como en la captura de pantalla a continuación:
máscara-condicional-jotform
  1. Recrea los pasos para agregar las mismas condiciones para cada máscara en tu formulario.

Hay muchos tipos diferentes de información que se pueden usar con el enmascaramiento de contenido en tu formulario, siendo la dirección y el número de teléfono solo un ejemplo.

Puedes ver cómo se ve todo en este formulario. Si lo deseas, también puedes clonar el formulario en tu cuenta y revisarlo todo.

Por supuesto, si tienes alguna pregunta o necesitas asistencia, estaremos encantados de ayudarte. Todo lo que necesitas hacer es informar creando un nuevo hilo o publicando un comentario aquí.

Contactar Soporte

Our customer support team is available 24/7 and our average response time is between one to two hours.

Enviar Comentario:

Jotform Avatar
Este sitio está protegido por reCAPTCHA y lo rigen la Política de privacidad de Google y los Términos de servicio.

Podo Comment Sea el primero en comentar.