Campo numérico
Recopile números con precisión y estilo. Desde entradas numéricas sencillas hasta controles deslizantes interactivos con formato de moneda, el campo Número ofrece validación, formato y una experiencia de usuario atractiva.
Recopilación de números inteligentes con validación integrada
Perfecto para:
Funciones potentes para cada caso de uso
🎯 Control de validación preciso
Límites mínimos y máximos
Establezca los valores mínimo y máximo permitidos. Evite entradas inválidas antes del envío con la validación integrada del navegador.
Control del tamaño del paso
Defina valores de incremento: números enteros (1), medios pasos (0.5) o decimales precisos (0.01) para la moneda.
Ejemplos:
- Campo de edad: Mínimo 18, Máximo 100, Paso 1
- Campo de precio: Mín. 0, Máx. 10000, Paso 0.01
- Calificación: Mín. 1, Máx. 5, Paso 0.5
💰 Formato de números inteligentes
Múltiples opciones de formato:
- Número simple: entrada numérica simple (123)
- Moneda – Dinero con símbolos ($123.00, €123.00, £123.00)
- Porcentaje – Añadir automáticamente el símbolo % (85%)
- Decimal – Decimales fijos (123.45)
Símbolos monetarios personalizados
Admite cualquier moneda: $, €, £, ¥, ₹ y más: perfecto para formularios internacionales.
Precisión decimal
Controle los decimales de 0 a 4 dígitos para realizar cálculos exactos.
Modo deslizante interactivo
Selección visual de números
Transforma las entradas numéricas en atractivos controles deslizantes. Los usuarios deslizan para seleccionar valores: perfectos para calificaciones, rangos y preferencias.
Apariencia personalizable
- Elija el color del control deslizante para que coincida con su marca
- Mostrar/ocultar la visualización del valor actual
- Animaciones y transiciones suaves
Ideal para:
- Calificaciones de satisfacción (1-10)
- Rangos de presupuesto ($0-$5000)
- Selectores de edad
- Niveles de prioridad
- Cualquier selección de rango
🔀 Lógica condicional
Visibilidad de campo inteligente
Muestra u oculta este campo numérico según los valores de otros campos. Crea formularios dinámicos que se adapten a la entrada 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 invitados” solo cuando la casilla “¿Traer invitados?” esté marcada
- Mostrar “Rango de presupuesto” cuando el tipo de servicio sea “Premium”
- Ocultar el "Código de descuento" cuando el total del pedido sea inferior a $50
- Revelar opciones con restricciones de edad cuando la edad es mayor a 1
🎨 Personalización completa
- Clases CSS personalizadas
- Modo de campo oculto
- Entradas optimizadas para dispositivos móviles
- Soporte de accesibilidad
- Integración con todas las funciones del formulario
- Tamaño del paso, valor inicial
- Valor mínimo/máximo permitido
- Campo oculto, valor oculto
⚙️ Configuración inteligente
Valores predeterminados
Rellene previamente los campos con números iniciales para guiar a los usuarios o acelerar la finalización.
Texto del marcador
Muestra sugerencias útiles como "Ingresa cantidad" o "Tu edad" antes de que los usuarios escriban.
Texto de ayuda
Agregue descripciones para aclarar qué números ingresar.
Configuración sencilla en 3 pasos
Prepare su campo desplegable en minutos
Agregar el campo de número
Arrastre y suelte el campo Número desde la sección Campos básicos en su formulario.
Establecer reglas de validación
Configure los valores mínimos y máximos, el tamaño del paso y el valor inicial para controlar qué números pueden ingresar los usuarios.
Elija formato y estilo
Seleccione formato simple, monetario, porcentual o decimal. Opcionalmente, active el modo deslizante para selección visual.
🎉 ¡Listo! Tu campo numérico está listo con validación y formato inteligentes.
Aplicaciones en el mundo real
Comercio electrónico y pedidos
- Selectores de cantidad de productos
- Filtros de rango de precios
- Entradas de porcentaje de descuento
- Recuentos y totales de artículos
Encuestas y calificaciones
- Puntuaciones de satisfacción (1-10)
- Clasificaciones de estrellas
- Clasificaciones de prioridad
- Escalas de verosimilitud
Fitness y salud
- Seguimiento de peso
- Medidas de altura
- Repeticiones de ejercicios
- Calculadoras de IMC
Reservas y reservas
- Número de invitados/asistentes
- Cantidad de habitaciones
- Duración en horas/días
- Cuantos Invitados
Formularios de Solicitud
- Verificación de edad
- Años de experiencia
- Expectativas salariales
- Rangos de presupuesto
Financiación de las empresas
- Entradas de ingresos
- Montos de inversión
- Porcentajes de ROI
- Tasas de comisión
Opciones de campo completas
Configuración básica
- Etiqueta de campo – El título que se muestra encima del campo numérico
- Descripción/Texto de ayuda – Orientación adicional para los usuarios
- Campo Obligatorio – Hacer obligatoria la entrada de números
- Texto del marcador – Texto de sugerencia antes de que los usuarios ingresen un número
Configuración de validación
- Valor mínimo permitido (mín.) – Número más pequeño aceptable
- Valor máximo permitido (máximo) – Número máximo aceptable
- Numero de pie – Valor de incremento (1, 0.5, 0.01, etc.)
- Valor inicial – Número predeterminado precargado
Número formato
- Formato de presentación
- Número simple
- Moneda (con símbolo)
- Porcentaje (%)
- Decimal (lugares fijos)
El símbolo de moneda – $, €, £, ¥, ₹ (cuando el formato es Moneda)
Lugares decimales – 0, 1, 2, 3 o 4 dígitos (cuando el formato es decimal)
Opciones del control deslizante
- Mostrar como control deslizante – Habilitar el modo de control deslizante interactivo
- Color del control deslizante – Selector de color personalizado para la marca
- Mostrar número junto al control deslizante – Mostrar el valor actual
La lógica condicional
- Habilitar lógica condicional – Mostrar/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 – Medidas a tomar
- Campo – ¿Qué campo comprobar?
- Operador – Es igual a, No es igual a, Contiene, Mayor que, Menor que, Está vacío, No está vacío
- Valor – Valor de comparación
- Varias condiciones – Añadir reglas ilimitadas
Opciones Avanzadas
- Modo de campo oculto – Úselo como campo oculto con valor preestablecido
- Clases CSS personalizadas – Aplicar estilo personalizado
- Atributos de accesibilidad – Etiquetas y descripciones ARIA
¿Por qué elegir nuestro campo numérico?
✅ Preciso – La validación mínima/máxima exacta evita entradas no válidas
✅ Flexible – Múltiples formatos para cualquier caso de uso
✅ Visual – El modo deslizante crea interacciones atractivas
✅ Inteligente – La lógica condicional crea formas dinámicas
✅ Fácil de usar – Mensajes de validación claros que guían a los usuarios
✅ Profesional – Formato de moneda y porcentaje integrado
✅ Móvil optimizado – Teclados numéricos perfectos en dispositivos móviles
✅ Totalmente integrado – Funciona a la perfección con todas las funciones del formulario
Preguntas frecuentes
P: ¿Cuál es la diferencia entre Min/Max y validación?
R: La configuración de valores mínimos y máximos proporciona validación instantánea a nivel de navegador. Los usuarios no pueden enviar números inválidos, lo que garantiza que los formularios estén libres de errores y sean intuitivos.
P: ¿Puedo utilizar números decimales?
R: ¡Sí! Configure el valor de paso para controlar los decimales. Use 0.01 para moneda (precios), 0.1 para un decimal o cualquier paso personalizado.
P: ¿Cómo funciona el control deslizante en el móvil?
R: Los controles deslizantes están optimizados para el tacto y funcionan sin problemas en dispositivos móviles.
P: ¿Puedo recopilar números negativos?
R: ¡Por supuesto! Establezca un valor mínimo negativo (p. ej., Mín.: -100, Máx.: 100) para permitir números negativos.
P: ¿Qué símbolos de moneda son compatibles?
R: ¡Cualquier símbolo! Introduce $, €, £, ¥, ₹ o cualquier símbolo personalizado de hasta 3 caracteres.
P: ¿Puedo utilizar lógica condicional basada en comparaciones de números?
R: ¡Sí! Utilice operadores como "Mayor que", "Menor que" e "Igual" para crear lógica basada en valores numéricos.
P: ¿Cómo creo un campo de porcentaje?
A: Seleccione "Porcentaje (%)" como formato de visualización. El símbolo % aparece automáticamente y los usuarios introducen valores entre 0 y 100.
P: ¿Puedo cambiar el color del control deslizante?
R: ¡Sí! Cuando el modo deslizante está activado, puedes elegir cualquier color con el selector de color.
P: ¿Qué sucede si los usuarios ingresan números fuera del rango?
A: La validación del navegador detiene el envío y muestra un mensaje de error como "El valor debe estar entre 1 y 100".
P: ¿Puedo utilizar el campo numérico para realizar cálculos?
R: ¡Sí! Los valores de los campos numéricos funcionan en comparaciones condicionales y en cálculos durante el procesamiento de formularios.
P: ¿Qué tan precisos pueden ser los números decimales?
R: Puede establecer decimales de 0 a 4 dígitos, y los valores de paso pueden ser tan precisos como sea necesario (por ejemplo, 0.001).
