--- title: "Constructor de Formularios Drag-and-Drop: Sin Código" slug: drag-and-drop-form-builder description: "Construye formularios visualmente con el constructor drag-and-drop de Instaform. 26 tipos de campo, deshacer/rehacer, selección múltiple, layouts de fila y vista previa en vivo. Sin necesidad de programar." publishedAt: "2025-08-05" author: "Instaform Team" tags: ["constructor-de-formularios", "drag-and-drop", "sin-código", "guía"] locale: es --- Construir un formulario debería sentirse como organizar una página, no como escribir código. Deberías poder ver lo que estás construyendo mientras lo construyes, mover cosas hasta que el layout se sienta bien y saber exactamente lo que tus encuestados experimentarán antes de que una sola persona lo complete. El constructor de formularios drag-and-drop de Instaform hace esto realidad. Veintiséis tipos de campo en seis categorías. Colocación visual con vista previa instantánea. Deshacer y rehacer para experimentación sin miedo. Selección múltiple para operaciones en lote. Layouts de fila para diseños de múltiples columnas. Todo lo que necesitas para construir formularios profesionales sin tocar una línea de código. ## Los 26 Tipos de Campo Instaform organiza los tipos de campo en seis categorías, facilitando encontrar el campo correcto para cualquier pregunta. ### Campos Básicos Los fundamentales. Estos cubren los datos más comunes que recopilarás. **Texto Corto** para nombres, títulos, respuestas de una línea. **Texto Largo** para descripciones, comentarios, respuestas detalladas. **Email** para direcciones de email con validación de formato integrada. **Teléfono** para números de teléfono con asistencia de formato. **Número** para entrada numérica con validación opcional de mín/máx. **URL** para direcciones web con validación de formato. Los campos básicos cubren el ochenta por ciento de lo que la mayoría de los formularios necesitan. Un formulario de contacto son tres campos básicos — Nombre (Texto Corto), Email y Mensaje (Texto Largo). Un formulario de registro agrega Teléfono y quizás URL para un sitio web o perfil de LinkedIn. ### Campos de Elección Para preguntas con opciones definidas. **Desplegable** presenta opciones en un menú de selección compacto. Mejor para listas largas (países, estados, categorías) donde mostrar todas las opciones a la vez abrumaría el formulario. **Botones de Radio** muestran todas las opciones visualmente, permitiendo a los encuestados escanear y elegir. Mejor para listas cortas (2-5 opciones) donde quieres que todas las opciones sean visibles a la vez. **Casillas de Verificación** permiten selecciones múltiples de una lista. Preguntas de "Selecciona todas las que apliquen" — intereses, servicios necesarios, funciones usadas. **Sí/No** es un campo de elección binaria — más simple que los botones de radio cuando la pregunta es verdaderamente binaria. "¿Eres cliente existente?" Sí o No. Limpio e inequívoco. Los campos de elección se combinan naturalmente con [lógica condicional](/blog/conditional-logic-guide). Una selección de desplegable puede activar diferentes conjuntos de campos para diferentes tipos de encuestados, creando formularios dinámicos que se adaptan en tiempo real. ### Campos de Fecha y Hora Para recopilar fechas, horas y datos temporales. **Selector de Fecha** presenta un calendario para seleccionar una fecha. Fecha de entrega preferida, fecha del evento, fecha de nacimiento, plazo del proyecto. **Selector de Hora** recopila una hora específica. Hora de llamada preferida, hora de cita, hora de inicio del evento. **Fecha-Hora** combina ambos en un solo campo para agendamiento preciso. Los campos de Fecha y Hora son esenciales para formularios de registro, formularios de reserva y cualquier flujo de trabajo que involucre agendamiento. Producen datos estructurados que pueden ser procesados programáticamente — a diferencia de los enfoques de "escribe la fecha en el campo de texto" que producen formatos inconsistentes. ### Campos Especiales Campos construidos para tipos de datos específicos. **Carga de Archivos** permite a los encuestados adjuntar documentos, imágenes u otros archivos. Currículums, capturas de pantalla, archivos de diseño, documentos de soporte. Consulta la [guía de carga de archivos](/blog/file-upload-fields-guide) para opciones detalladas de configuración. **Firma** captura una firma dibujada o escrita directamente en el formulario. Contratos, acuerdos, formularios de consentimiento, documentos de autorización. La firma se guarda como imagen y se adjunta al envío. **Calificación** proporciona una escala de calificación basada en estrellas o puntos. Reseñas de productos, calificaciones de servicio, evaluaciones de calidad. Número configurable de estrellas y precisión opcional de media estrella. **Campos de satisfacción** — Escala de Emojis, Slider, NPS (0-10) y Pulgar Arriba/Abajo — están especializados para medir sentimiento. Consulta la [guía completa de campos de satisfacción](/blog/satisfaction-fields-nps-ratings) para saber cuándo usar cada tipo. ### Campos de Layout Para estructurar y organizar el formulario visualmente. **Salto de Sección** crea una división visual entre grupos de campos. Una línea horizontal con un encabezado opcional. Usa secciones para dividir formularios largos en grupos lógicos — Información Personal, Detalles Profesionales, Preferencias. **Salto de Página** divide el formulario en múltiples páginas. En lugar de un formulario largo con desplazamiento, los encuestados navegan por páginas con botones Siguiente y Atrás. Los saltos de página son esenciales para formularios largos (más de 10-15 campos) para prevenir la fatiga de desplazamiento. **Layout de Fila** coloca múltiples campos lado a lado en una sola fila. Dos campos cortos (Nombre y Apellido) en una fila ahorra espacio vertical y se ve natural. Tres campos (Ciudad, Estado, Código Postal) en una fila imita el layout que la gente espera de formularios de dirección. Los layouts de fila hacen los formularios más compactos y visualmente organizados. ### Campos Ocultos Campos que existen en la estructura de datos del formulario pero no son visibles para los encuestados. **Campo Oculto** almacena un valor sin mostrar un campo. Usa campos ocultos para capturar metadata — la URL de referencia, un ID de campaña, una etiqueta de fuente, un número de versión. El encuestado nunca ve el campo, pero el valor se incluye en cada envío. Los campos ocultos son especialmente útiles con la [acción Establecer Valor de la lógica condicional](/blog/conditional-logic-guide). Basándote en las respuestas del encuestado, puedes establecer automáticamente valores de campos ocultos para etiquetar, categorizar o enrutar envíos sin ninguna interacción visible. ## Drag-and-Drop en Acción ### Agregando Campos La paleta de campos se ubica en la barra lateral. Haz clic o arrastra un tipo de campo para agregarlo a tu formulario. Los campos nuevos aparecen al final por defecto, pero puedes soltarlos en cualquier lugar — entre campos existentes, arriba o dentro de un layout de fila. Cada campo aparece en el lienzo con una representación visual cercana a lo que verán los encuestados. Un campo de texto se ve como un campo de texto. Un desplegable se ve como un desplegable. Un campo de calificación muestra estrellas. El lienzo es una vista previa en vivo, no un diagrama abstracto. ### Reordenando Campos Agarra cualquier campo y arrástralo a una nueva posición. El lienzo muestra un indicador de colocación — una línea coloreada — donde el campo aterrizará. Suelta, y el campo se mueve. El formulario se actualiza instantáneamente. El reordenamiento es fluido y visual. No seleccionas un campo y haces clic en "Mover Arriba" o "Mover Abajo". Lo agarras y lo pones donde quieras. Esta inmediatez hace que la edición de formularios se sienta como organizar objetos físicos en lugar de configurar software. ### Configurando Campos Haz clic en un campo del lienzo para abrir su panel de configuración. Cada tipo de campo tiene configuraciones específicas a su propósito: - **Etiqueta y descripción** — lo que el encuestado ve. - **Marcador de posición** — texto gris dentro del campo que desaparece al hacer foco. - **Obligatorio/opcional** — si el campo debe llenarse. - **Validación** — reglas de formato, valores mín/máx, límites de caracteres. - **Texto de ayuda** — contexto adicional mostrado cerca del campo. Los cambios de configuración aparecen en el lienzo en tiempo real. Escribe una nueva etiqueta, y el lienzo se actualiza. Activa "Obligatorio", y el asterisco aparece. Este ciclo de retroalimentación inmediata significa que siempre estás viendo el estado actual de tu formulario. ### Duplicando Campos Selecciona un campo y duplícalo para crear una copia idéntica. La copia aparece directamente debajo del original con todas las configuraciones preservadas. Esto es más rápido que agregar un campo nuevo y reconfigurarlo desde cero. La duplicación es particularmente útil para estructuras repetitivas. ¿Construyendo un formulario con cinco preguntas de calificación similares? Configura la primera completamente — etiqueta, escala, texto de ayuda, lógica condicional — luego duplícala cuatro veces y cambia solo la etiqueta de cada copia. ## Deshacer y Rehacer Los errores pasan. Borras el campo equivocado. Mueves un campo a la posición incorrecta. Cambias una configuración e inmediatamente te arrepientes. Deshacer (Ctrl+Z / Cmd+Z) revierte la última acción. Rehacer (Ctrl+Shift+Z / Cmd+Shift+Z) la re-aplica. Instaform almacena hasta cincuenta entradas de deshacer, dándote un buffer de historial profundo para tu sesión de edición. Esta profundidad importa porque la construcción de formularios es iterativa — podrías probar tres arreglos de campos diferentes antes de decidirte por el correcto, y necesitas la capacidad de retroceder a través de todos ellos. El sistema de deshacer/rehacer cubre cada acción del constructor: agregar campos, eliminar campos, mover campos, cambiar configuraciones, duplicar campos y modificar lógica condicional. Nada de lo que haces en el constructor es permanente hasta que eliges guardar. ## Selección Múltiple Cuando necesitas operar en múltiples campos a la vez, la selección múltiple ahorra tiempo. Mantén Shift o Ctrl/Cmd y haz clic en múltiples campos para seleccionarlos como grupo. Los campos seleccionados se resaltan visualmente en el lienzo. Con múltiples campos seleccionados, puedes: - **Eliminar** todos a la vez. Remover una sección de cinco campos toma una acción en lugar de cinco. - **Mover** como grupo. Reordena una sección completa arrastrando el grupo a una nueva posición. - **Duplicar** juntos. Crea una copia de una sección de múltiples campos al instante. La selección múltiple es una función avanzada para formularios complejos. Un formulario de treinta campos con cinco secciones es mucho más fácil de reestructurar cuando puedes seleccionar, mover y duplicar secciones completas en lugar de campos individuales. ## Layouts de Fila para Formularios Multi-Columna Por defecto, cada campo ocupa una fila completa. Para formularios donde eso crea longitud vertical innecesaria, los layouts de fila te permiten colocar campos lado a lado. Patrones comunes de layout de fila: **Info personal de dos columnas.** Nombre y Apellido en una fila. Email y Teléfono en otra. Cuatro campos en dos filas en lugar de cuatro filas. **Dirección de tres columnas.** Ciudad, Estado y Código Postal en una fila. Esto coincide con el modelo mental que la gente tiene para direcciones y ahorra dos filas de espacio vertical. **Columnas mixtas.** Un área de texto de "Descripción" de ancho completo debajo de una fila de dos columnas con desplegables de "Categoría" y "Prioridad". Mezcla y combina configuraciones de columnas para crear el layout exacto que necesitas. Los layouts de fila son particularmente efectivos en escritorio, donde el espacio horizontal es abundante. En móvil, Instaform automáticamente apila los campos de fila verticalmente, asegurando que el formulario permanezca usable en pantallas pequeñas sin ninguna configuración adicional. ## Modo de Vista Previa Antes de compartir tu formulario, previsualízalo exactamente como lo verán los encuestados. El modo de vista previa elimina la interfaz del constructor — la barra lateral, los paneles de configuración, los manejadores de campo — y muestra el formulario en su apariencia de producción. Previsualiza tu formulario tanto en viewports de escritorio como de móvil. Un formulario que se ve genial en escritorio podría tener problemas de layout en móvil, especialmente si estás usando layouts de fila, etiquetas largas o contenido ancho. La vista previa captura estos problemas antes de que los encuestados los encuentren. Usa el modo de vista previa para probar la [lógica condicional](/blog/conditional-logic-guide) ingresando valores y observando cómo los campos aparecen, desaparecen, se vuelven obligatorios o se auto-llenan. Recorre cada rama de tu formulario para verificar que la lógica funciona como se esperaba. ## Del Constructor al Formulario Activo Una vez que tu formulario está construido, el camino al despliegue es corto. Aplica tu [tema de marca](/blog/custom-themes-branding) para consistencia visual. Elige tu [método de incrustación](/blog/form-embed-options) — iframe, script o popup — basándote en dónde vivirá el formulario. Comparte el enlace o pega el código de incrustación. El constructor drag-and-drop maneja la creación. El sistema de temas maneja el branding. Las opciones de incrustación manejan la distribución. Juntos, te llevan de la idea al formulario activo sin escribir una sola línea de código.