Campo telefónico
Recopile números de teléfono con precisión y precisión. Desde formatos internacionales hasta formato automático con validación en tiempo real, patrones personalizados y teclados optimizados para dispositivos móviles, el campo Teléfono garantiza una recopilación precisa de números de teléfono con una entrada intuitiva y un formato profesional.
Colección de teléfonos inteligentes con formato automático
Perfecto para:
Funciones potentes para cada caso de uso
🌍 Múltiples formatos de teléfono
Cuatro opciones de formato:
Formato internacional: Formato flexible que se adapta a los estándares telefónicos de cualquier país. Acepta varios patrones internacionales, como +1 (123) 456-7890 o +44 1234 567890.
- Formato de EE. UU.: (123) 456-7890: formato estándar de América del Norte con paréntesis y guiones automáticos.
- Formato del Reino Unido: 01234 567890: formato británico con espacio después del código de área.
- Formato personalizado: defina su propio patrón utilizando 9 para los dígitos y símbolos para los separadores (por ejemplo, +99 999-999-9999).
Por qué es importante el formato:
- Garantiza la coherencia entre los envíos
- Mejora la calidad y la legibilidad de los datos.
- Coincide con las expectativas de los usuarios por región
- Simplifica la validación del número de teléfono
Marcadores de posición inteligentes:
El texto de marcador de posición específico de formato aparece automáticamente para guiar a los usuarios sobre el formato esperado.
⌨️ Formatear mientras escribe
Formato automático en vivo
Activa "Formatear mientras escribes" y observa cómo los números de teléfono se formatean automáticamente al introducir los dígitos. Los paréntesis, espacios y guiones aparecen en tiempo real.
Cómo funciona:
- Tipos de usuario: 1234567890
- Exposiciones de campo: (123) 456-7890 (para formato de EE. UU.)
- El envío recibe un número con el formato correcto
Beneficios:
- Retroalimentación visual instantánea
- Los usuarios ven el formato correcto inmediatamente
- Reduce los errores de entrada
- Experiencia de usuario profesional
- No es necesario formatear después del envío
Ejemplos de formato:
- EE. UU.: (123) 456-7890 formatos a medida que escribe
- Reino Unido: 01234 567890 formatos con espacio
- Personalizado: sigue tu patrón definido
Entrada optimizada para dispositivos móviles
- Teclado numérico en el móvil
- Los campos de teléfono activan automáticamente el teclado numérico en dispositivos móviles. Los usuarios obtienen un teclado optimizado para teléfonos en lugar del formato QWERTY completo.
- Por qué esto importa:
- Entrada de número de teléfono más rápida en el móvil
- Reduce los errores tipográficos
- Mejor experiencia de usuario móvil
- Coincide con las aplicaciones nativas del teléfono
- Teclas numéricas más grandes para mayor precisión táctil
Compatibilidad entre dispositivos:
Funciona perfectamente en iOS, Android y todos los navegadores móviles con soporte para teclado numérico nativo.
Patrones de formato personalizados
Define tu propio formato
¿Necesitas un formato que no está incluido? Crea patrones personalizados con notación simple:
Sintaxis del patrón:
- Utilice `9` para cualquier dígito
- Utilice símbolos como separadores (paréntesis, guiones, espacios, puntos)
- Ejemplo: `(999) 999-9999` se convierte en `(123) 456-7890`
Patrones personalizados comunes:
- Australia: `99 9999 9999` → `02 1234 5678`
- Alemania: `+49 999 999 9999` → `+49 123 456 7890`
- Japón: `999-9999-9999` → `123-4567-8901`
- Cualquier país: define tu formato exacto
Vista Previa En Vivo:
Vea cómo se verá su formato personalizado con números de teléfono de ejemplo antes de que los usuarios lo vean.
📏 Validación de longitud
Control de longitud mínima y máxima
Establezca el número mínimo y máximo de dígitos permitidos. Asegúrese de que los números de teléfono cumplan con sus requisitos con la validación integrada del navegador.
Conteo inteligente de dígitos:
La validación de longitud solo cuenta dígitos e ignora caracteres de formato como paréntesis, espacios y guiones.
Ejemplos:
- Móvil de EE. UU.: Mínimo 10, máximo 10 (exactamente 10 dígitos)
- Internacional: Mínimo 7, máximo 15 (cubre la mayoría de los países)
- Números locales: Mínimo 7, Máximo 7 (local de 7 dígitos)
- Flexible: Mínimo 10, Máximo 15 (varios formatos)
Validación en tiempo real:
Aparece una respuesta visual si el número de teléfono es demasiado corto o demasiado largo, lo que evita envíos no válidos.
✅ Números de teléfono predeterminados
Completar previamente los campos del teléfono
Establezca un número de teléfono predeterminado que aparezca al cargar el formulario. Útil para líneas de soporte, números de la sede central o contactos comunes.
Casos de uso:
- Complete previamente la línea directa de soporte para solicitudes de devolución de llamada
- Mostrar el número de sede como ejemplo
- Establecer el código de área predeterminado para formularios específicos de la región
- Completar previamente el teléfono del usuario conocido desde la base de datos
Valores predeterminados editables:
Los usuarios pueden editar o reemplazar fácilmente el valor predeterminado: es un punto de partida, no está bloqueado.
🙈 Modo de campo oculto
Almacenamiento invisible del teléfono
Crea campos telefónicos ocultos que no sean visibles para los usuarios, pero que envíen datos con el formulario. Ideal para seguimiento, números de sistema o valores de backend.
Casos de uso:
- Números de devolución de llamada del sistema de la tienda
- Identificadores de línea de soporte de pista
- Incluir extensiones de departamento
- Metadatos de contacto ocultos
Cómo funciona:
Establezca el “Valor oculto” y se incluirá automáticamente en cada envío de formulario sin aparecer en la interfaz de usuario de su formulario.
🔀 Lógica condicional
Visibilidad dinámica del campo telefónico
Muestra u oculta los campos de teléfono según otros valores del formulario. Crea formularios inteligentes que se adapten a las selecciones del usuario.
Reglas de lógica avanzada:
- Lógica AND: Se deben cumplir todas las condiciones
- Lógica OR: cualquier condición puede desencadenar la acción
- 8 operadores: igual a, no igual a, mayor que, menor que, contiene, está vacío y más
Casos de uso:
- Mostrar “Número de móvil” solo cuando la preferencia de contacto sea “Teléfono”
- Mostrar “Teléfono alternativo” cuando el tipo de usuario sea “Empresa”
- Ocultar “Extensión de oficina” cuando no se selecciona la ubicación de la oficina
- Revelar “Contacto de emergencia” cuando el tipo de participante sea “Menor”
🎯 Experiencia de usuario mejorada
Funciones inteligentes integradas:
- Tipo de entrada de teléfono: activa el teclado numérico en dispositivos móviles
- Compatibilidad con autocompletado: los navegadores pueden sugerir números de teléfono guardados
- Formato en tiempo real: vea cómo aparece el formato a medida que escribe (opcional)
- Validación de formato: garantiza que los números coincidan con el patrón esperado
- Validación requerida: hacer que la entrada del teléfono sea obligatoria con mensajes de error claros
- Ejemplos de marcadores de posición: muestra sugerencias de formato antes de que los usuarios escriban
- Soporte de texto de ayuda: agregue descripciones para aclarar el tipo de teléfono necesario
- Clases CSS personalizadas: aplique un estilo personalizado que coincida con su marca
- Compatibilidad con accesibilidad: etiquetas ARIA y lector de pantalla compatibles
Configuración sencilla en 3 pasos
Prepare su Phone Field en minutos
Agregar el campo Teléfono
Arrastre y suelte el campo Teléfono desde la sección Campos básicos a su formulario.
Elija el formato
Selecciona el formato del teléfono (Internacional, EE. UU., Reino Unido o Personalizado). Para personalizarlo, define tu patrón usando 9 dígitos.
Configurar opciones
Habilite “Formatear mientras escribe” para formatear en vivo, establecer la validación de longitud mínima/máxima y, opcionalmente, agregar un número de teléfono predeterminado.
🎉 ¡Listo! Tu campo de teléfono está listo con formato y validación inteligentes.
Aplicaciones en el mundo real
Formularios de Contacto
* Número de contacto principal
* Números de teléfono alternativos
* Números de oficina y móviles
* Campos de contacto de emergencia
Sistemas de reserva
* Números de confirmación de citas
* Datos de contacto para reservas
* Números de solicitud de devolución de llamada
* Números de notificación por SMS
Comercio electrónico
* Números de contacto para pedidos
* Números de teléfono de entrega
* Devoluciones de llamadas de servicio al cliente
* Notificaciones de estado del pedido
Aplicaciones empresariales
* Números de teléfono para captura de clientes potenciales
* Contactos de consultas de ventas
* Solicitudes de asociación
* Datos de contacto del proveedor
Atención sanitaria y servicios
* Números de contacto de pacientes
* Datos de contacto de emergencia
* Recordatorios de citas
* Solicitudes de devolución de llamada de servicio
Educación y registro
* Información de contacto del estudiante
* Números de padres/tutores
* Contactos de emergencia
* Devoluciones de llamadas de consulta del curso
Opciones de campo completas
Configuración básica
- Etiqueta de campo: el título que se muestra sobre el campo de teléfono
- Descripción/Texto de ayuda: orientación adicional para los usuarios
- Campo obligatorio: hacer que la entrada del teléfono sea obligatoria
- Texto de marcador de posición: texto de sugerencia personalizado (generado automáticamente a partir del formato si está vacío)
Formato de teléfono
- ¿Cómo deben lucir los números de teléfono?
- Formato internacional (varía según el país)
- Formato de EE. UU.: (123) 456-7890
- Formato del Reino Unido: 01234 567890
- Formato personalizado (defina el suyo propio)
Patrón de formato personalizado
- Su formato personalizado: defina un patrón usando 9 como dígitos (se muestra cuando se selecciona Personalizado)
- Ejemplo: `(999) 999-9999` crea `(123) 456-7890`
- Utilice símbolos como separadores: paréntesis, guiones, espacios, puntos.
Opciones de formato
Formatear mientras escribe: agregue automáticamente paréntesis, espacios y guiones mientras escribe
Valores predeterminados
Valor predeterminado: número de teléfono precargado cuando se carga el formulario
Validación de longitud
- Longitud mínima: número mínimo de dígitos requeridos (0-20)
- Longitud máxima: número máximo de dígitos permitidos (0-20)
Vista previa del formato
Formato de ejemplo: vista previa en vivo que muestra cómo aparecerán los números de teléfono con el formato seleccionado
La lógica condicional
- Habilitar lógica condicional: mostrar u ocultar según condiciones
- Tipo de lógica
- Se deben cumplir todas las condiciones (Y)
- Cualquier condición se puede cumplir (O)
- Reglas de condición
- Mostrar/Ocultar – Acción a tomar
- Campo – ¿Qué campo comprobar?
- Operador – Igual, No igual, Contiene, Mayor que, Menor que, Está vacío, No está vacío
- Valor – Valor de comparación
- Condiciones múltiples: agregue reglas ilimitadas
Opciones Avanzadas
- Modo de campo oculto: hace que el campo sea invisible pero incluye valor en los envíos
- Clases CSS personalizadas: aplicar estilos personalizados
- Atributos de accesibilidad: etiquetas y descripciones ARIA
- Autocompletar: habilitar sugerencias de números de teléfono del navegador
¿Por qué elegir nuestro campo telefónico?
✅ Formatos flexibles – Patrones internacionales, de EE. UU., del Reino Unido o personalizados
✅ Formato automático – Formato en vivo a medida que los usuarios escriben
✅ Móvil optimizado – Teclado numérico en dispositivos móviles
✅ Validación inteligente – Longitud mínima/máxima con conteo de dígitos
✅ Patrones personalizados – Definir cualquier formato para cualquier país
✅ Fácil de usar – Ejemplos de formato y marcadores de posición útiles
✅ Limpiar datos – Formato consistente en todos los envíos
✅ Profesional – La apariencia pulida cumple con las expectativas
✅ Totalmente integrado – Funciona a la perfección con todas las funciones del formulario
Preguntas frecuentes
P: ¿Cuál es la diferencia entre los formatos de teléfono?
El servicio internacional acepta varios formatos con códigos de país. En EE. UU., los números se formatean como (123) 456-7890. En el Reino Unido, como 01234 567890. La opción personalizada te permite crear tu propio patrón usando el 9 como dígito.
P: ¿Cómo funciona “Formatear mientras escribe”?
A medida que los usuarios escriben dígitos, el campo inserta automáticamente símbolos de formato. Escribir 1234567890 se convierte instantáneamente en (123) 456-7890.
P: ¿Puedo recopilar números de teléfono internacionales?
Sí. Elija Formato internacional para permitir números con códigos de país como +1, +44, +91 y más.
P: ¿Qué hace el patrón de formato personalizado?
Define la estructura exacta del número de teléfono. Use 9 para los dígitos obligatorios y añada símbolos como espacios o guiones.
P: ¿Cómo funciona la validación de longitud?
Las longitudes mínima y máxima solo cuentan los dígitos, no el formato. Si se configura Mínimo 10 y Máximo 10, los usuarios deben ingresar exactamente 10 dígitos.
P: ¿Por qué utilizar el campo de teléfono en lugar de una entrada de texto?
Activa teclados numéricos móviles, admite formato automático, valida la estructura y permite el autocompletado del navegador para los números almacenados.
P: ¿Pueden los usuarios editar números de teléfono con formato automático?
Sí. Los usuarios pueden agregar o eliminar dígitos libremente y el formato se ajusta automáticamente.
P: ¿Qué sucede si el formato está deshabilitado?
Los usuarios escriben dígitos simples sin formato automático, pero los marcadores de posición y la validación de longitud aún guían la entrada correcta.
P: ¿Puedo validar patrones de teléfono específicos?
Sí. Combine formatos personalizados con límites de dígitos mínimos y máximos para que coincidan con cualquier estándar regional.
P: ¿Esto funciona con enlaces de WhatsApp o SMS?
Sí. Los números enviados se pueden usar para generar enlaces cliqueables de WhatsApp o SMS en las notificaciones.
P: ¿Puedo mostrar diferentes formatos de teléfono para diferentes países?
Sí. Utilice lógica condicional para mostrar formatos basados en el país seleccionado.
P: ¿Qué pasa si el formato de mi país no aparece en la lista?
Crea el tuyo con Formato Personalizado. Usa 9 como marcador de posición y previsualiza el aspecto final en tiempo real.
