📝 Tutorial Completo

Domina ChorimaForms paso a paso

1. Introducción

Bienvenido al tutorial completo de ChorimaForms, la herramienta visual que te permite crear formularios HTML profesionales de manera intuitiva, sin necesidad de escribir código manualmente. Con esta aplicación podrás diseñar, personalizar y exportar formularios completamente funcionales en cuestión de minutos.

💡 Ventajas Principales
  • 100% Visual: Arrastra y suelta elementos sin tocar código
  • Personalización Total: Control completo sobre estilos y propiedades
  • Exportación Limpia: Genera HTML optimizado listo para usar
  • Layouts Avanzados: Soporte para Grid y Flexbox
  • Agrupación inteligente: Fieldsets, contenedores anidados y grupos de radio/checkbox
  • Gestión de Opciones: Añade, edita y elimina opciones dinámicamente en grupos
  • Vista de Código Ampliada: Área de código optimizada que usa todo el espacio disponible
🎓 Acceso al Tutorial
Desde el diseñador, puedes acceder a este tutorial en cualquier momento haciendo clic en el botón "Tutorial" (icono de graduación) ubicado en la barra de herramientas superior. El tutorial se abrirá en una nueva pestaña para que puedas consultarlo mientras trabajas.

2. Conociendo la Interfaz

Interfaz completa de ChorimaForms con el nuevo diseño actualizado

La interfaz de ChorimaForms está dividida en tres paneles principales que trabajan en conjunto para ofrecerte una experiencia de diseño fluida y eficiente:

🎨 Panel Izquierdo: Paleta de Componentes

Aquí encontrarás todos los elementos disponibles para construir tu formulario, organizados en tres categorías:

📌 Estructurales

Contenedor: Agrupa elementos con layouts flexibles (flex/grid)

Fieldset: Agrupa campos relacionados con un borde y leyenda

✏️ Campos de Entrada

Texto, Email, Password, Tel, Number, URL, Search, Date, Textarea, File, Range, Color

📋 Selección

Select (listas desplegables), Checkbox (casillas), Radio (opción única)

🔘 Acciones

Button (botón personalizable para acciones del formulario)

🖼️ Panel Central: Canvas (Lienzo)

Es el área de trabajo donde construyes visualmente tu formulario. Aquí verás en tiempo real cómo se ve tu formulario mientras lo diseñas. Simplemente arrastra elementos desde la paleta hacia esta área.

📌 Nota Importante
Cuando arrastres un elemento al canvas, se añadirá automáticamente a la estructura HTML. Todos los cambios que realices se reflejan instantáneamente.

⚙️ Panel Derecho: Inspector

El inspector es tu centro de control para personalizar cada elemento. Se divide en tres pestañas principales:

Pestaña Función Opciones Disponibles
Propiedades Configuración HTML del elemento Label, Placeholder, ID, Name, Required, Autofocus, Tabindex, etc.
Estilos Apariencia visual CSS Colores, tipografía, espaciado, bordes, fondos, etc.
Código Visualización del HTML generado Vista previa del código con sintaxis resaltada. El área se expande automáticamente para ocupar todo el espacio disponible.
💡 Pestaña de Código Mejorada
La pestaña "Código" ahora utiliza todo el espacio vertical disponible en el panel inspector, facilitando la visualización de código largo sin necesidad de scroll excesivo. Ideal para revisar el HTML generado antes de exportar.

🔧 Barra de Herramientas Superior

  • 🗑️ Limpiar Canvas: Elimina todos los elementos del formulario para empezar desde cero
  • ⚙️ Configurar Formulario: Accede a las opciones globales del formulario (action, method, etc.)
  • 💾 Exportar HTML: Genera el código HTML completo listo para usar

3. Creando Tu Primer Formulario

Vamos a crear un formulario de contacto simple paso a paso. Este ejercicio te familiarizará con el flujo básico de trabajo.

Paso 1: Añadir Campos al Canvas

  1. Localiza el elemento "Texto" en la paleta (panel izquierdo)
  2. Haz clic y mantén presionado sobre él
  3. Arrastra el elemento hacia el canvas (panel central)
  4. Suelta el botón del ratón cuando estés sobre el área del canvas
  5. El campo de texto aparecerá inmediatamente en el formulario
Campos básicos añadidos al canvas
💡 Consejo Profesional
Repite este proceso para añadir más campos: Email y Password. Observa cómo cada elemento se apila verticalmente en el formulario.

Paso 2: Personalizar Propiedades

  1. Haz clic sobre el campo de texto que acabas de añadir al canvas
  2. El campo se resaltará con un borde azul indicando que está seleccionado
  3. En el panel derecho, verás la pestaña "Propiedades" activa
  4. Cambia el Label a "Nombre Completo"
  5. Cambia el Placeholder a "Ingresa tu nombre"
  6. Cambia el ID a "nombre" (importante para JavaScript)
  7. Cambia el Name a "nombre" (importante para el envío del formulario)
  8. Marca la casilla Required para hacer el campo obligatorio
📌 Diferencia entre ID y Name
  • ID: Identificador único para JavaScript y CSS (debe ser único en toda la página)
  • Name: Nombre del campo para el envío de datos al servidor (puede repetirse para checkboxes/radios del mismo grupo)

Paso 3: Completar el Formulario

Repite el proceso para los demás campos:

Campo Label Placeholder ID/Name Required
Email Correo Electrónico tu@email.com email Sí
Password Contraseña •••••••• password Sí
Button Enviar Formulario - submit-btn -

4. Personalización Avanzada de Estilos

El Diseñador de Formularios de Blackchorima te permite personalizar cada aspecto visual de tus elementos con CSS en tiempo real, sin necesidad de escribir código.

🎯 Sistema de Targeting (Objetivos)

Cada elemento de formulario está compuesto por varias partes HTML. El sistema de targeting te permite aplicar estilos específicos a cada parte:

Target (Objetivo) Elemento HTML Qué Estiliza
Label <label> La etiqueta de texto que describe el campo
Input <input> / <textarea> / <select> El campo de entrada en sí
Wrapper <div class="form-element"> El contenedor general que envuelve label e input
Contenedor <fieldset> / <div> Elementos estructurales (solo para Contenedor y Fieldset)

✨ Estilizando el Label

  1. Selecciona un elemento en el canvas (por ejemplo, el campo "Nombre Completo")
  2. Haz clic en la pestaña "Estilos" en el panel inspector
  3. Haz clic en el botón "Label" para seleccionar el objetivo
  4. Ajusta las siguientes propiedades:
    • Font Size: 20px (tamaño de fuente grande)
    • Font Weight: 700 (negrita)
    • Color: #dc2626 (rojo vibrante)
    • Text Transform: uppercase (texto en mayúsculas)
  5. Observa cómo los cambios se aplican instantáneamente en el canvas
Label estilizado con colores y tipografía personalizada

🎨 Estilizando el Input

  1. Con el mismo elemento seleccionado, haz clic en el botón "Input"
  2. Personaliza el aspecto del campo de entrada:
Propiedad Valor Sugerido Efecto Visual
Background Color #f0f9ff Fondo azul muy claro
Border 2px solid #2563eb Borde azul de 2 píxeles
Border Radius 8px Esquinas redondeadas
Padding 12px Espacio interno en el campo
Font Size 16px Tamaño de texto dentro del input
⚠️ Importante sobre Bordes
Para configurar un borde completo, necesitas especificar:
  • Border Style: solid, dashed, dotted, etc.
  • Border Width: grosor en píxeles (ej: 2px)
  • Border Color: color del borde (ej: #2563eb)

📦 Estilizando el Wrapper

El wrapper es útil para controlar el espaciado entre elementos y el ancho general:

  1. Haz clic en el botón "Wrapper"
  2. Ajusta:
    • Margin: 20px (espacio exterior entre elementos)
    • Width: 100% (ocupa todo el ancho disponible)
    • Max Width: 500px (limita el ancho máximo)

5. Elementos Estructurales: Contenedores y Fieldsets

📦 Contenedores con Layouts

Los contenedores te permiten organizar múltiples campos en layouts avanzados como Grid o Flexbox.

  1. Arrastra un elemento "Contenedor" al canvas
  2. Verás un área con el texto "Suelta elementos aquí" en el interior
  3. Arrastra campos DENTRO del contenedor (no a los lados, sino sobre el área de drop zone)
  4. Añade 2 o más campos (por ejemplo: "Nombre" y "Apellido")
  5. Selecciona el contenedor haciendo clic en su borde superior
  6. En Propiedades, cambia:
    • Modo de Layout: "grid"
    • Columns: "1fr 1fr" (dos columnas iguales)
    • Gap: "10px" (espacio entre celdas)
  7. Los campos se organizarán automáticamente en dos columnas
📐 Sintaxis de Grid Columns
  • "1fr 1fr": Dos columnas iguales
  • "2fr 1fr": Primera columna el doble de ancha que la segunda
  • "200px 1fr": Primera columna fija de 200px, segunda flexible
  • "repeat(3, 1fr)": Tres columnas iguales

🗂️ Fieldsets para Agrupar Campos

Los fieldsets son ideales para agrupar visualmente campos relacionados con un borde y una leyenda descriptiva.

  1. Arrastra un "Fieldset" al canvas
  2. Selecciónalo y en Propiedades, cambia el Legend a "Datos Personales"
  3. Arrastra campos DENTRO del fieldset:
    • Campo "Texto" (configúralo como "Nombre")
    • Campo "Email" (configúralo como "Correo")
    • Campo "Tel" (configúralo como "Teléfono")
  4. Personaliza los estilos del fieldset:
    • Ve a Estilos → Label y cambia el color del legend a #dc2626
    • Ve a Estilos → Contenedor y cambia el fondo a #fef2f2
Ejemplo de formulario completo creado en ChorimaForms
💡 Cuándo Usar Cada Uno
  • Contenedor: Cuando necesitas layouts complejos (grid/flex) sin borde visible
  • Fieldset: Cuando quieres agrupar visualmente con un borde y título (legend)

6. Catálogo Completo de Campos

ChorimaForms soporta todos los tipos de campos HTML5 modernos. Aquí tienes una guía completa:

✏️ Campos de Texto

Campo Tipo HTML Uso Ideal Validación Automática
Texto <input type="text"> Nombres, direcciones, comentarios cortos Ninguna (acepta cualquier texto)
Email <input type="email"> Direcciones de correo electrónico Formato de email válido (usuario@dominio.com)
Password <input type="password"> Contraseñas y datos sensibles Ninguna (oculta el texto con puntos)
Tel <input type="tel"> Números de teléfono Ninguna (pero móviles muestran teclado numérico)
URL <input type="url"> Direcciones web Formato de URL válido (http://...)
Search <input type="search"> Campos de búsqueda Ninguna (añade icono de lupa en algunos navegadores)
Textarea <textarea> Textos largos, mensajes, descripciones Ninguna (área de texto multilínea)

🔢 Campos Numéricos y de Fecha

Campo Tipo HTML Uso Ideal Características
Number <input type="number"> Cantidades, edades, precios Controles de incremento/decremento. Atributos: min, max, step
Range <input type="range"> Selección de valores en un rango (volumen, calificación) Control deslizante visual. Atributos: min, max, step
Date <input type="date"> Selección de fechas Muestra un calendario nativo del navegador

🎨 Campos Especiales

Campo Tipo HTML Uso Ideal Características
File <input type="file"> Subida de archivos Botón "Elegir archivo". Atributo accept para filtrar tipos
Color <input type="color"> Selección de colores Muestra un selector de color nativo

☑️ Campos de Selección

Campo Elemento HTML Uso Ideal Comportamiento
Select <select><option> Listas desplegables (países, categorías) Muestra opciones en un menú desplegable
Checkbox <input type="checkbox"> Opciones múltiples (intereses, preferencias) Permite seleccionar múltiples valores
Radio <input type="radio"> Selección única de un grupo (sí/no, género) Solo un elemento del grupo puede estar seleccionado
📝 Configurando Select, Checkbox y Radio

Para estos elementos, usa la propiedad "Options" en el panel de Propiedades:

  • Select: "Opción 1,Opción 2,Opción 3" (separadas por comas)
  • Checkbox/Radio: Escribe las opciones separadas por comas para crear múltiples elementos

🔘 Botones

Campo Elemento HTML Uso Configuración
Button <button> Enviar formulario, resetear, acciones personalizadas Cambia el atributo "type" a: submit, reset, o button

6.5. Grupos de Radio y Checkbox

ChorimaForms incluye elementos especiales para crear grupos de opciones de forma rápida y eficiente. Estos nuevos elementos te permiten gestionar múltiples radio buttons o checkboxes que comparten un mismo nombre de grupo.

🔘 Grupo Radio

Ideal para cuando el usuario debe seleccionar UNA opción entre varias alternativas (ej: método de pago, género, plan de suscripción).

  1. Arrastra el elemento "Grupo Radio" desde la paleta al canvas
  2. Se creará un grupo con 3 opciones predeterminadas
  3. Haz clic sobre el grupo para seleccionarlo
  4. En el inspector verás:
    • Label del Grupo: Título principal que describe el grupo
    • Name (compartido): Todos los radio buttons del grupo comparten este name
    • Opciones: Lista editable de todas las opciones disponibles
  5. Para cada opción puedes editar:
    • Label: Texto visible para el usuario
    • Value: Valor que se enviará al servidor
    • Default: Marca una opción como seleccionada por defecto
  6. Usa el botón "+ Añadir Opción" para añadir más opciones
  7. Usa el botón "X" junto a cada opción para eliminarla
🔒 Selección Exclusiva
En un grupo de radio buttons, solo UNA opción puede estar seleccionada. Si marcas otra como default, la anterior se desmarcará automáticamente.

☑️ Grupo Checkbox

Perfecto para selección múltiple donde el usuario puede marcar varias opciones (ej: intereses, idiomas, servicios adicionales).

  1. Arrastra el elemento "Grupo Checks" al canvas
  2. Funciona igual que el Grupo Radio pero permite selección múltiple
  3. El atributo name incluye automáticamente "[]" (ej: hobbies[])
  4. Puedes marcar varias opciones como default simultáneamente
💡 ¿Por qué name[]?
La notación con corchetes name[] permite que lenguajes del lado del servidor como PHP reciban automáticamente los valores como un array:
// PHP Example $hobbies = $_POST['hobbies']; // Array: ['deportes', 'música', 'lectura']

⚡ Gestión Dinámica de Opciones

Todas las modificaciones que realices en el inspector se reflejan instantáneamente en el canvas y en el código exportado:

  • ✏️ Edición en Tiempo Real: Cambia labels y values, verás los cambios al instante
  • ➕ Añadir Opciones: Sin límite, añade tantas como necesites
  • 🗑️ Eliminar Opciones: Mínimo 1 opción obligatoria por grupo
  • 🔄 Reordenar: Simplemente elimina y recrea en el orden deseado
⚠️ Importante sobre el Name
  • Grupos de Radio: el name NO debe incluir [] (ej: metodo_pago)
  • Grupos de Checkbox: el name SÍ debe incluir [] (ej: intereses[])
  • Los grupos checkbox lo añaden automáticamente, pero puedes editarlo si es necesario

📤 HTML Exportado

Cuando exportes el formulario, cada grupo generará un código Bootstrap limpio y funcional:

<!-- Grupo Radio Example --> <div class="mb-3"> <label class="form-label">Método de Pago</label> <div class="form-check"> <input class="form-check-input" type="radio" name="pago" id="pago_0" value="tarjeta" checked> <label class="form-check-label" for="pago_0">Tarjeta de Crédito</label> </div> <div class="form-check"> <input class="form-check-input" type="radio" name="pago" id="pago_1" value="paypal"> <label class="form-check-label" for="pago_1">PayPal</label> </div> </div> <!-- Grupo Checkbox Example --> <div class="mb-3"> <label class="form-label">Intereses</label> <div class="form-check"> <input class="form-check-input" type="checkbox" name="intereses[]" id="int_0" value="deportes"> <label class="form-check-label" for="int_0">Deportes</label> </div> <div class="form-check"> <input class="form-check-input" type="checkbox" name="intereses[]" id="int_1" value="musica"> <label class="form-check-label" for="int_1">Música</label> </div> </div>

7. Propiedades HTML Avanzadas

Más allá de Label y Placeholder, existen muchas propiedades HTML que mejoran la funcionalidad y accesibilidad:

Propiedad Función Ejemplo de Uso
ID Identificador único del elemento id="email-principal" (para CSS y JavaScript)
Name Nombre del campo para envío de datos name="usuario_email" (nombre del parámetro en el servidor)
Placeholder Texto de sugerencia dentro del campo placeholder="Ej: usuario@ejemplo.com"
Value Valor inicial del campo value="Texto predefinido"
Required Campo obligatorio (no se puede enviar vacío) ✓ Activar para campos esenciales
Readonly Campo de solo lectura (no editable) Útil para mostrar información no modificable
Disabled Campo deshabilitado (no editable ni enviado) Para campos temporalmente inactivos
Autofocus El campo recibe foco automáticamente al cargar Útil para el primer campo del formulario
Tabindex Orden de navegación con la tecla Tab 1, 2, 3... (define el flujo de navegación)
Autocomplete Habilita/deshabilita autocompletado del navegador "on" o "off"
Pattern Expresión regular para validación personalizada pattern="[0-9]{9}" (9 dígitos)
Maxlength Número máximo de caracteres permitidos maxlength="100"
Minlength Número mínimo de caracteres requeridos minlength="8" (para contraseñas)
Min / Max Valores mínimo/máximo (number, range, date) min="0" max="100"
Step Incremento para number y range step="0.5" (permite decimales)

8. Exportar y Usar Tu Formulario

💾 Proceso de Exportación

  1. Una vez terminado tu formulario, haz clic en el botón "Exportar" en la barra superior
  2. Se abrirá un modal mostrando el código HTML completo
  3. El código incluye:
    • Estructura HTML con todos los elementos en orden
    • Todos los estilos inline aplicados
    • Atributos de validación (required, pattern, etc.)
  4. Haz clic en el botón "Copiar al Portapapeles"
  5. Pega el código en tu archivo HTML o aplicación web

📋 Usando el Código Exportado

El HTML generado es completamente funcional y puede usarse de varias formas:

🌐 Página Web Estática

Pega el código dentro del <body> de tu página HTML

⚛️ Frameworks Modernos

Integra en React, Vue, Angular adaptando la sintaxis

🔧 CMS y Editores

WordPress, Joomla, Wix (en modo HTML)

📧 Email Marketing

Mailchimp, SendGrid (formularios embebidos)

🔗 Configurando el Action del Formulario

Para que el formulario envíe datos a un servidor:

  1. Haz clic en "Configurar Formulario" en la barra superior
  2. Configura las opciones globales:
    • Action: URL de destino (ej: "https://miservidor.com/procesar.php")
    • Method: "GET" (datos en URL) o "POST" (datos en cuerpo HTTP)
    • Enctype: "multipart/form-data" si usas campos File
<form action="https://miservidor.com/procesar.php" method="POST" enctype="multipart/form-data"> <!-- Aquí va el contenido del formulario --> </form>

9. Consejos y Mejores Prácticas

✅ Accesibilidad

Formularios Accesibles para Todos
  • Siempre usa labels descriptivos para cada campo
  • Asegúrate de que el contraste de colores sea suficiente (texto vs fondo)
  • Usa tabindex para definir un orden lógico de navegación
  • Marca campos required para indicar obligatoriedad
  • Usa placeholders como sugerencias, no como reemplazo de labels

🎨 Diseño Visual

Formularios Atractivos y Usables
  • Mantén un espaciado consistente entre elementos (usa margin en Wrapper)
  • Usa colores coherentes que coincidan con tu marca
  • Aplica border-radius a inputs para un look moderno
  • Usa focus states (se aplican automáticamente en navegadores)
  • Agrupa visualmente campos relacionados con fieldsets

⚡ Rendimiento y SEO

Optimización
  • Los estilos inline generados son rápidos, pero considera extraerlos a CSS externo para formularios muy complejos
  • Usa autocomplete con valores estándar (name, email, tel) para ayudar al navegador
  • Minimiza el uso de JavaScript externo cuando sea posible (validación HTML5 es suficiente)

🔐 Seguridad

Validación del Lado del Servidor
La validación HTML5 (required, pattern, type) es útil para mejorar la experiencia del usuario, pero NUNCA confíes solo en ella para seguridad. Siempre valida y sanitiza los datos en el servidor.

💡 Flujo de Trabajo Recomendado

  1. Planifica: Dibuja un boceto de tu formulario en papel
  2. Estructura: Añade primero todos los campos al canvas
  3. Propiedades: Configura labels, names, IDs y validaciones
  4. Agrupación: Usa contenedores y fieldsets para organizar
  5. Estilos: Aplica los estilos visuales al final
  6. Prueba: Exporta y prueba en un navegador real
  7. Ajusta: Vuelve al Diseñador de Formularios de Blackchorima para hacer cambios

10. Ejemplos de Formularios Completos

📝 Formulario de Contacto Simple

Elementos necesarios:

  • Texto (Nombre)
  • Email (Correo)
  • Textarea (Mensaje)
  • Button (Enviar)

👤 Formulario de Registro Completo

Elementos necesarios:

  • Fieldset "Datos Personales":
    • Texto (Nombre)
    • Texto (Apellidos)
    • Email (Correo)
    • Tel (Teléfono)
  • Fieldset "Dirección":
    • Textarea (Dirección Completa)
    • Contenedor Grid 2 columnas:
      • Texto (Ciudad)
      • Number (Código Postal)
  • Fieldset "Seguridad":
    • Password (Contraseña)
    • Password (Confirmar Contraseña)
  • Checkbox (Acepto términos y condiciones)
  • Button (Registrarse)

🛒 Formulario de Pedido con Layouts

Estructura sugerida:

  • Fieldset "Producto":
    • Select (Categoría)
    • Contenedor Grid 3 columnas:
      • Number (Cantidad)
      • Select (Tamaño)
      • Color (Color Preferido)
  • Fieldset "Entrega":
    • Radio (Método de envío: Estándar/Express)
    • Date (Fecha deseada de entrega)
  • Textarea (Notas adicionales)
  • Button (Realizar Pedido)

11. Resolución de Problemas Comunes

Problema Solución
No puedo arrastrar elementos dentro de un contenedor/fieldset Asegúrate de soltar el elemento sobre el área de drop zone (zona central del contenedor), no en los bordes
Los estilos no se aplican inmediatamente Verifica que has seleccionado el target correcto (Label/Input/Wrapper) antes de aplicar estilos
El formulario exportado no envía datos Configura el atributo "action" del formulario con la URL de destino (botón Configurar Formulario)
Los campos required no validan Asegúrate de que el botón tiene type="submit" y que usas un <form> válido
El grid no muestra columnas correctas Revisa la sintaxis del campo "Columns" (ej: "1fr 1fr" para dos columnas iguales)
No veo el panel Inspector Haz clic sobre cualquier elemento en el canvas para seleccionarlo y activar el inspector

12. Recursos y Referencias

📚 Aprender Más Sobre Formularios HTML

¡Felicidades! Has completado el tutorial de ChorimaForms

Ahora estás listo para crear formularios profesionales de forma rápida y eficiente

🏠 Volver a la Aplicación

© Blackchorima 2026