Tipos de Campos de Formulario

Laburen ofrece una amplia variedad de tipos de campos para crear formularios personalizados que se adapten a tus necesidades. Esta guía detalla todos los tipos de campos disponibles, sus opciones de configuración y ejemplos de uso.

Campos de Texto

Texto Simple

El campo de texto simple permite a los usuarios ingresar texto en una sola línea. Opciones de configuración:

Etiqueta: Texto que aparece encima del campo
Placeholder: Texto de ejemplo que aparece dentro del campo
Valor predeterminado: Texto que aparece pre-rellenado
Requerido: Si el campo debe ser completado obligatoriamente
Validación: Reglas como longitud mínima/máxima
Ayuda: Texto explicativo que aparece debajo del campo

Ejemplo de uso:

{
  "type": "text",
  "id": "nombre",
  "label": "Nombre",
  "placeholder": "Ej. Juan Pérez",
  "defaultValue": "",
  "required": true,
  "validation": {
    "minLength": 2,
    "maxLength": 50
  },
  "helpText": "Ingresa tu nombre completo"
}

Área de Texto

Permite a los usuarios ingresar texto en múltiples líneas, ideal para comentarios o descripciones. Opciones de configuración:

Todas las opciones del campo de texto simple
Filas: Número de filas visibles
Redimensionable: Si el usuario puede cambiar el tamaño del área

Ejemplo de uso:

{
  "type": "textarea",
  "id": "comentarios",
  "label": "Comentarios",
  "placeholder": "Escribe tus comentarios aquí...",
  "rows": 4,
  "resizable": true,
  "required": false
}

Campos de Contacto

Email

Campo especializado para direcciones de correo electrónico con validación automática. Opciones de configuración:

Opciones estándar de texto
Validación de formato: Verifica automáticamente que sea un email válido

Ejemplo de uso:

{
  "type": "email",
  "id": "email",
  "label": "Correo Electrónico",
  "placeholder": "tu@ejemplo.com",
  "required": true
}

Teléfono

Campo para números telefónicos con formato y validación internacional. Opciones de configuración:

Opciones estándar de texto
Selector de país: Permite seleccionar el código de país
Formato: Aplica formato automático según el país seleccionado

Ejemplo de uso:

{
  "type": "phone",
  "id": "telefono",
  "label": "Número de Teléfono",
  "defaultCountry": "ES",
  "required": true
}

Campos de Selección

Permite al usuario seleccionar una opción de una lista desplegable. Opciones de configuración:

Etiqueta: Texto descriptivo del campo
Opciones: Lista de valores y etiquetas para mostrar
Valor predeterminado: Opción preseleccionada
Placeholder: Texto que se muestra cuando no hay selección
Requerido: Si es obligatorio seleccionar una opción

Ejemplo de uso:

{
  "type": "select",
  "id": "pais",
  "label": "País",
  "placeholder": "Selecciona tu país",
  "options": [
    { "value": "es", "label": "España" },
    { "value": "mx", "label": "México" },
    { "value": "ar", "label": "Argentina" },
    { "value": "co", "label": "Colombia" }
  ],
  "defaultValue": "es",
  "required": true
}

Botones de Radio

Muestra opciones como botones de radio para selección única. Opciones de configuración:

Similar al campo de selección
Disposición: Vertical u horizontal

Ejemplo de uso:

{
  "type": "radio",
  "id": "genero",
  "label": "Género",
  "options": [
    { "value": "masculino", "label": "Masculino" },
    { "value": "femenino", "label": "Femenino" },
    { "value": "otro", "label": "Otro" },
    { "value": "prefiero_no_decir", "label": "Prefiero no decir" }
  ],
  "layout": "horizontal",
  "required": true
}

Casillas de Verificación

Permite seleccionar múltiples opciones mediante casillas de verificación. Opciones de configuración:

Similar a los botones de radio
Permite selección múltiple

Ejemplo de uso:

{
  "type": "checkbox",
  "id": "intereses",
  "label": "Intereses",
  "options": [
    { "value": "tecnologia", "label": "Tecnología" },
    { "value": "marketing", "label": "Marketing" },
    { "value": "ventas", "label": "Ventas" },
    { "value": "finanzas", "label": "Finanzas" }
  ],
  "layout": "vertical",
  "required": false
}

Interruptor (Toggle)

Campo para opciones booleanas (sí/no) en formato de interruptor. Opciones de configuración:

Etiqueta: Texto descriptivo
Valor predeterminado: Activado o desactivado

Ejemplo de uso:

{
  "type": "toggle",
  "id": "suscripcion",
  "label": "Suscribirme al boletín",
  "defaultValue": true
}

Campos Numéricos y de Fecha

Número

Campo especializado para valores numéricos. Opciones de configuración:

Mínimo/Máximo: Rango de valores permitidos
Paso: Incremento para los botones de aumento/disminución
Prefijo/Sufijo: Símbolos como € o %

Ejemplo de uso:

{
  "type": "number",
  "id": "edad",
  "label": "Edad",
  "min": 18,
  "max": 120,
  "step": 1,
  "required": true
}

Fecha

Permite seleccionar una fecha mediante un calendario. Opciones de configuración:

Formato: Cómo se muestra la fecha (DD/MM/YYYY, etc.)
Fecha mínima/máxima: Rango de fechas permitidas
Fecha predeterminada: Fecha preseleccionada

Ejemplo de uso:

{
  "type": "date",
  "id": "fecha_nacimiento",
  "label": "Fecha de Nacimiento",
  "format": "DD/MM/YYYY",
  "minDate": "1900-01-01",
  "maxDate": "2005-12-31",
  "required": true
}

Hora

Permite seleccionar una hora específica. Opciones de configuración:

Formato: 12h o 24h
Intervalo: Incrementos de minutos (5, 10, 15, etc.)

Ejemplo de uso:

{
  "type": "time",
  "id": "hora_cita",
  "label": "Hora de la Cita",
  "format": "24h",
  "interval": 15,
  "required": true
}

Campos Especiales

Carga de Archivos

Permite a los usuarios subir archivos. Opciones de configuración:

Tipos de archivo: Extensiones permitidas
Tamaño máximo: Límite en MB
Múltiples archivos: Si se permite subir varios archivos

Ejemplo de uso:

{
  "type": "file",
  "id": "curriculum",
  "label": "Curriculum Vitae",
  "acceptedTypes": [".pdf", ".doc", ".docx"],
  "maxSize": 5,
  "multiple": false,
  "required": true
}

Valoración (Rating)

Campo para calificaciones mediante estrellas u otros símbolos. Opciones de configuración:

Escala: Número máximo de estrellas (1-10)
Símbolo: Estrellas, corazones, etc.

Ejemplo de uso:

{
  "type": "rating",
  "id": "satisfaccion",
  "label": "Nivel de Satisfacción",
  "scale": 5,
  "symbol": "star",
  "required": true
}

Firma

Permite a los usuarios dibujar su firma. Opciones de configuración:

Ancho/Alto: Dimensiones del área de firma
Color: Color del trazo

Ejemplo de uso:

{
  "type": "signature",
  "id": "firma",
  "label": "Firma",
  "width": 400,
  "height": 200,
  "strokeColor": "#000000",
  "required": true
}

Elementos de Estructura

Título

Añade un título o encabezado para organizar secciones del formulario. Opciones de configuración:

Texto: Contenido del título
Nivel: H1, H2, H3, etc.

Ejemplo de uso:

{
  "type": "heading",
  "text": "Información Personal",
  "level": 2
}

Texto Informativo

Añade bloques de texto explicativo entre campos. Opciones de configuración:

Contenido: Texto a mostrar (admite Markdown)

Ejemplo de uso:

{
  "type": "text_block",
  "content": "Por favor, completa todos los campos obligatorios marcados con *. Tu información será tratada de acuerdo con nuestra [política de privacidad](/privacidad)."
}

Separador

Añade una línea divisoria entre secciones. Opciones de configuración:

Estilo: Sólido, punteado, etc.
Color: Color de la línea
Grosor: Espesor de la línea

Ejemplo de uso:

{
  "type": "divider",
  "style": "solid",
  "color": "#EEEEEE",
  "thickness": 2
}

Lógica Condicional

Puedes configurar la visibilidad de los campos basándote en las respuestas a otros campos. Esto te permite crear formularios dinámicos que se adaptan a las respuestas del usuario.

Ejemplo de Lógica Condicional

{
  "type": "text",
  "id": "otra_empresa",
  "label": "¿Cuál es el nombre de tu empresa?",
  "required": true,
  "conditional": {
    "field": "empresa",
    "operator": "equals",
    "value": "otra"
  }
}

En este ejemplo, el campo “otra_empresa” solo se mostrará si el usuario selecciona “Otra” en un campo de selección llamado “empresa”.

Operadores Disponibles

equals: El valor es exactamente igual
not_equals: El valor es diferente
contains: El valor contiene el texto especificado
not_contains: El valor no contiene el texto especificado
greater_than: El valor es mayor que el especificado
less_than: El valor es menor que el especificado
is_empty: El campo está vacío
is_not_empty: El campo no está vacío

Mejores Prácticas

Para crear formularios efectivos:

Mantén la simplicidad: Usa solo los campos necesarios
Agrupa campos relacionados: Organiza el formulario en secciones lógicas
Usa etiquetas claras: Las etiquetas deben describir exactamente qué información se solicita
Proporciona ayuda contextual: Usa textos de ayuda para campos complejos
Valida los datos: Configura reglas de validación apropiadas
Usa lógica condicional: Muestra solo los campos relevantes según las respuestas anteriores
Prueba en diferentes dispositivos: Asegúrate de que el formulario funcione bien en móviles y tablets

Para obtener ayuda adicional con la configuración de campos, contacta a nuestro equipo de soporte en support@laburen.com.

Vision General

Privacidad

Tipos de Campos de Formulario

Tipos de Campos de Formulario

Campos de Texto

Texto Simple

Área de Texto

Campos de Contacto

Email

Teléfono

Campos de Selección

Botones de Radio

Casillas de Verificación

Interruptor (Toggle)

Campos Numéricos y de Fecha

Número

Fecha

Hora

Campos Especiales

Carga de Archivos

Valoración (Rating)

Firma

Elementos de Estructura

Título

Texto Informativo

Separador

Lógica Condicional

Ejemplo de Lógica Condicional

Operadores Disponibles

Mejores Prácticas

Vision General

Privacidad

​Tipos de Campos de Formulario

​Campos de Texto

​Texto Simple

​Área de Texto

​Campos de Contacto

​Email

​Teléfono

​Campos de Selección

​Selección Única (Dropdown)

​Botones de Radio

​Casillas de Verificación

​Interruptor (Toggle)

​Campos Numéricos y de Fecha

​Número

​Fecha

​Hora

​Campos Especiales

​Carga de Archivos

​Valoración (Rating)

​Firma

​Elementos de Estructura

​Título

​Texto Informativo

​Separador

​Lógica Condicional

​Ejemplo de Lógica Condicional

​Operadores Disponibles

​Mejores Prácticas

Tipos de Campos de Formulario

Campos de Texto

Texto Simple

Área de Texto

Campos de Contacto

Email

Teléfono

Campos de Selección

Selección Única (Dropdown)

Botones de Radio

Casillas de Verificación

Interruptor (Toggle)

Campos Numéricos y de Fecha

Número

Fecha

Hora

Campos Especiales

Carga de Archivos

Valoración (Rating)

Firma

Elementos de Estructura

Título

Texto Informativo

Separador

Lógica Condicional

Ejemplo de Lógica Condicional

Operadores Disponibles

Mejores Prácticas