Como engadir campos numéricos aos formularios de WordPress

Cantidade, idade, orzamento, valoración, prezo: moitas preguntas do formulario precisan números, non texto. Un campo numérico axeitado garante que os usuarios introduzan datos numéricos válidos, evita que se introduzan «dous» cando se precisa «2» e pode formatar os valores como moeda, porcentaxes ou decimais automaticamente. Tanto se precisa un selector de cantidade sinxelo como unha entrada de prezo formatada, os campos numéricos xestionan todo de forma limpa.

Nesta guía, aprenderás a engadir e configurar campos numéricos nos teus formularios de WordPress para unha recollida de datos numéricos precisa.

Por que usar campos numéricos?

Problemas de campos de texto

• «Dous» fronte a «2» fronte a «dous (2)»
• «500 $» fronte a «500 » fronte a «500.00 $»
• Letras mesturadas con números
• Formato inconsistente
• Validación manual necesaria

Vantaxes do campo numérico

• Só se acepta entrada numérica
• Validación automática de formatos
• Aplicación do rango mínimo/máximo
• Control do tamaño do paso (incrementos)
• Teclado numérico no móbil
• Formato de moeda/porcentaxe
• Opción de control deslizante para a selección visual

Casos de uso común

Cantidade/Número

• Número de asistentes
• Cantidade do produto
• Número de elementos
• Número de hóspedes

Idade/Anos

• Idade en anos
• Anos de experiencia
• Duración

Diñeiro/Orzamento

• Importe do orzamento
• Presupostos
• Expectativas salariais
• Importes das doazóns

Clasificacións/Puntuacións

• Clasificación 1-10
• Porcentaxe de satisfacción
• Puntuación sobre 100

Medidas

• Altura/peso
• Distancia
• dimensións

Engadir un campo numérico

Paso 1: Engadir campo numérico

1. Abre o teu formulario en A.F.B.
2. Atopar o Número campo na barra lateral
3. Arrástrao ao lenzo do formulario
4. Fai clic para configurar a configuración

Paso 2: Definir a etiqueta e o marcador de posición

• Discográfica: "Cantidade", "Idade", "Orzamento"
• Marcador de posición: Valor de exemplo ou "Introducir un número"
• Texto de axuda: Orientación adicional se é necesario

Paso 3: Configurar o rango

• Mínimo: Valor máis baixo permitido
• Máximo: Valor máximo permitido

Paso 4: Definir o tamaño do paso

• Paso: Incremento da cantidade (1, 5, 10, 0.01)

Paso 5: Escolla o formato

• Simple: Números estándar
• moeda: Con símbolo de moeda
• porcentaxe: Co símbolo %
• Decimal: Decimais específicos

Exemplos de configuración

Cantidade simple

Discográfica: "Número de asistentes"

Mínimo: 1

Máx .: 100

Paso: 1

Predeterminado: 1

formato: chaira

necesario: si

Campo de idade

Discográfica: "A túa idade"

Mínimo: 18 (ou 0 para todas as idades)

Máx .: 120

Paso: 1

formato: chaira

Texto de axuda: "Debe ter 18 anos ou máis"

Importe do orzamento

Discográfica: "O teu orzamento"

Mínimo: 0

Máx .: 1000000

Paso: 100

formato: Moeda ($)

Marcador de posición: "5000"

Texto de axuda: "Orzamento aproximado en USD"

Escala de valoración (1-10)

Discográfica: "Valora a túa experiencia (1-10)"

Mínimo: 1

Máx .: 10

Paso: 1

formato: chaira

Texto de axuda: "1 = Deficiente, 10 = Excelente"

Campo de porcentaxe

Discográfica: "Finalización do proxecto"

Mínimo: 0

Máx .: 100

Paso: 5

formato: Porcentaxe

Texto de axuda: "Porcentaxe de finalización estimada"

Cotización de prezos

Discográfica: "Prezo solicitado"

Mínimo: 0

Máx .: 99999

Paso: 0.01

formato: Moeda ($)

Decimais: 2

Anos de experiencia

Discográfica: "Anos de experiencia"

Mínimo: 0

Máx .: 50

Paso: 1

formato: chaira

Predeterminado: 0

Porcentaxe de desconto

Discográfica: "Desconto solicitado"

Mínimo: 0

Máx .: 50

Paso: 5

formato: Porcentaxe

Texto de axuda: "Desconto máximo do 50 % dispoñible"

Valores mínimos e máximos

Por que establecer límites

• Evitar valores irreais
• Coincidencia nas restricións empresariais
• Validar a entrada automaticamente
• Guía das expectativas do usuario

Rangos comúns

Sen Máximo

Deixa o campo máximo en branco para campos abertos como "Cantos empregados?", onde os valores grandes son válidos.

Tamaño do paso

Que tamaño de paso ten

• Controla a cantidade de incremento/diminución
• Define valores válidos entre o mínimo e o máximo
• Afecta o comportamento das frechas arriba/abaixo

Tamaños de paso comúns

Validación de pasos

Se paso = 5 e min = 0, só 0, 5, 10, 15… son válidos. Introducir 7 produciría un erro na validación.

Formatos numéricos

Números simples

Valor: 42

Use a: Conteos, idades, cantidades, números simples

Formato de moeda

Valor: $ 1,500.00

Use a: Orzamentos, prezos, pagamentos, doazóns

Opcións: Símbolo de moeda ($, €, £, etc.)

Formato de porcentaxe

Valor: 75%

Use a: Finalización, satisfacción, probabilidade, descontos

Formato decimal

Valor: 3.14159 (cifras decimais específicas)

Use a: Medicións precisas, valores científicos

Modo deslizante

Que fai o modo deslizante

Converte a entrada de números nun control deslizante visual:

Clasificación: [========|--------] 65

Cando usar o control deslizante

• Selección visual preferida
• Valores aproximados correctos
• O rango está delimitado (mínimo e máximo definidos)
• Valoracións e porcentaxes
• O usuario non ten en mente o número exacto

Cando NON usar o control deslizante

• Valores exactos requiridos
• Ampla gama (1-1000000)
• O usuario coñece un número específico
• A precisión importa (moeda)

Configuración do control deslizante

• Activar o control deslizante: Activar
• Mostrar valor: Mostrar o número actual
• Cor do control deslizante: Combina coa túa marca
• Mín/Máx: Definir o rango
• Paso: Incrementos do control deslizante

Exemplos de controles deslizantes

Satisfacción (0-100%):

Satisfacción: [=======|-----] 70%

Valoración (1-10):

Clasificación: [======|--------] 6

Orzamento (0-10,000 $):

Orzamento: [====|----------] 3,500 $

Consideracións sobre móbiles

Teclado numérico

• Os campos numéricos activan o teclado numérico
• Máis doado que o teclado completo para números
• Reduce os erros de entrada

Botóns de incremento

• Algúns navegadores mostran botóns +/-
• Táctil en móbiles
• Útil para intervalos pequenos

Control deslizante en móbil

• Arrastre táctil
• Funciona ben para as clasificacións
• Ten en conta o tamaño do polgar para maior precisión

validación

Validación integrada

• Só numérico: Rexeita cartas
• Gama: Debe estar dentro do mínimo/máximo
• Paso: Debe coincidir cos incrementos de paso
• necesario: Non pode estar baleiro se é necesario

Mensaxes de erro

• "Introduza un número"
• "O valor debe ser polo menos [mín]"
• "O valor non pode superar o [máx]"
• "Introduza un valor en incrementos de [paso]"
• "Este campo é obrigatorio"

Validación personalizada

Máis alá da validación básica:

• Debe ser par/impar
• Debe coincidir co patrón específico
• Depende doutro valor de campo

Valores predeterminados

Cando definir o predeterminado

• Coñécese o valor máis común
• O punto de partida axuda ao usuario
• A cantidade predefinida é 1
• O control deslizante precisa a posición inicial

Cando NON se debe establecer o valor predeterminado

• O usuario debe escoller activamente
• Sen un valor común obvio
• A parcialización distorsionaría os datos

Valores predeterminados comúns

• Cantidade: 1
• Clasificación: Ningunha (forzar a elección) ou media
• Porcentaxe: 0 ou 50
• Orzamento: Ningún (o usuario debe introducilo)

Análises profundas de casos de uso

Asistencia ao evento

Cantas persoas asistirán? [Campo numérico: mín. 1, máx. 500, paso 1, predeterminado 1]

Polo que: Aplicar un mínimo de 1, límite de aforo do local

Solicitude de emprego: Experiencia

Anos de experiencia relevante: [Campo numérico: mín. 0, máx. 50, paso 1]

Polo que: Permitir 0 para nivel básico, máximo razoable

Solicitude de orzamento: Orzamento

Cal é o teu orzamento para este proxecto? [Campo numérico: mín. 500, máx. 100000, paso 100, moeda $]

Polo que: Tamaño mínimo do proxecto, formatado como diñeiro

Comentarios: Valoración

Valora o noso servizo (1-5): [Campo numérico: mín. 1, máx. 5, paso 1, control deslizante]

Polo que: Control deslizante visual para unha valoración rápida

Formulario de pedido: Cantidade por artigo

Cantidade: [Campo numérico: mín. 1, máx. 99, paso 1, predeterminado 1]

Polo que: Polo menos 1, un máximo razoable por elemento

Solución de problemas

O usuario non pode introducir decimais

• Comprobar o tamaño do paso (step="1" bloquea decimais)
• Definir paso="0.01" ou paso="calquera" para decimais

Valor rexeitado a pesar de ser válido

• Comprobar os límites mínimos/máximos
• Comprobar a aliñación dos pasos
• Verificar a configuración do formato

O móbil mostra o teclado incorrecto

• Asegúrate de que o campo sexa de tipo "número"
• Algúns formatos poden afectar o teclado

O control deslizante non se mostra

• Verificar que o modo deslizante estea activado
• Comprobar que o mínimo e o máximo estean definidos
• Gardar e actualizar o formulario

Preguntas máis frecuentes

Debería usar o campo numérico ou o campo de texto para os números de teléfono?

Usa un campo Teléfono dedicado, non Número. Os números de teléfono teñen formato (guías, parénteses) que os campos numéricos non xestionan ben, e os ceros á esquerda importan nos números de teléfono.

Como permito números negativos?

Define o mínimo como un valor negativo (por exemplo, mín: -100) ou déixao baleiro para permitir calquera valor negativo.

Cal é a diferenza entre o campo numérico e o control deslizante de intervalo?

A miúdo son o mesmo campo co modo deslizante activado. O campo numérico mostra a entrada de texto por defecto; o modo deslizante mostra o deslizante visual.

Podo ter comas en números grandes (1,000,000)?

Depende da configuración do formato. O formato de moeda normalmente engade separadores de miles. Para a visualización, si. Para a entrada sen procesar, normalmente non.

Como podo recoller valores decimais como 3.5?

Define step como un decimal (0.1, 0.5, 0.01) ou step="any" para permitir calquera precisión decimal.

Resumo

Engadindo campos numéricos aos formularios de WordPress:

1. Engadir campo Número – Arrastrar para formar
2. Definir etiqueta clara – Que número se solicita
3. Configurar mínimo/máximo – Aplicar intervalos válidos
4. Definir o tamaño do paso – Incrementos de control
5. Escolle o formato – Simple, moeda, porcentaxe
6. Considerar o control deslizante – Para as cualificacións e a selección visual
7. Definir o predeterminado se corresponde – Valor inicial común
8. Engadir texto de axuda – Explicar os valores esperados

Conclusión

Os campos numéricos garanten datos numéricos limpos e validados. Define intervalos axeitados para evitar valores pouco realistas, usa tamaños de paso para controlar a precisión e escolle formatos que coincidan co teu tipo de datos: moeda para diñeiro, porcentaxe para taxas, simple para recontos. O modo deslizante engade atractivo visual ás cualificacións e aos valores delimitados. O resultado: datos numéricos consistentes e utilizables sen limpeza manual.

Creador automático de formularios Inclúe campos numéricos flexibles con rangos mínimos/máximos, tamaños de paso, varios formatos (simple, monetario, porcentaxe, decimal) e modo deslizante. Recolle datos numéricos de forma precisa e profesional.

Listo para engadir campos numéricos? Descargar o creador automático de formularios e crear formularios coa validación numérica de entrada axeitada.