¿Qué es Constructor de formularios?

Form Builder te permite crear formularios personalizados con un editor visual. Añade campos de texto, menús desplegables, casillas de verificación y más, y luego exporta el formulario como HTML o un esquema JSON.

Elige entre catorce tipos de campo: texto, correo, teléfono, URL, número, fecha, subida de archivos, escala de valoración, lista desplegable, casilla, opción única, área de texto, bloques de descripción para textos introductorios y saltos de página que dividen un formulario largo en pasos. Cada campo de entrada tiene una etiqueta, texto de ayuda opcional, marcador de posición, indicador de obligatorio y lista de opciones para desplegables y opciones únicas. Empieza desde una plantilla lista (contacto, opiniones, encuesta, registro, pedido, reserva), reordena los campos con las flechas arriba/abajo, previsualiza el formulario en vivo con una barra de progreso entre páginas y luego exporta una página HTML con estilo lista para pegar en cualquier sitio o un esquema JSON para la validación del backend.

Cómo usar

1. Paso 1: pulsa «Añadir campo» para insertar un campo nuevo y elegir su tipo (texto, correo, teléfono, URL, número, fecha, archivo, escala de valoración, desplegable, casilla, opción única o área de texto), añade un salto de página para dividir un formulario largo en pasos, o carga una plantilla lista para empezar rápido.
2. Paso 2 — Haz clic en cualquier campo para configurar su etiqueta, placeholder y si es obligatorio.
3. Paso 3 — Previsualiza el formulario en tiempo real y expórtalo como código HTML o esquema JSON para integrarlo en tu proyecto.

Cuándo usar

• Crear un formulario rápido de registro o RSVP para incrustar en un sitio estático.
• Prototipar un formulario antes de pasarle el esquema a un desarrollador para que lo implemente.
• Enseñar las bases de los formularios HTML sin que los alumnos tengan que escribir cada input.

Resultado

Una profesora crea un formulario de inscripción escolar con campos para Nombre del Alumno (texto obligatorio), Nivel (desplegable: 9-12), Email (validación de email) y un área de Comentarios — luego exporta el HTML para incrustarlo en la web del colegio.

Preguntas frecuentes

¿A dónde van los datos cuando alguien envía el formulario?

A ningún sitio por defecto. El HTML exportado no tiene URL de acción, así que el envío no va a ninguna parte y los datos nunca salen del dispositivo. Para recibir respuestas, apunta el action del formulario a tu propio endpoint, Formspree, Google Forms o una función serverless.

¿Puedo volver a importar un formulario existente al editor?

Por ahora no. La exportación es unidireccional: del editor a HTML o JSON. Si después quieres modificar el formulario, guarda el esquema JSON y reconstrúyelo a mano, o mantén la sesión abierta hasta acabar de iterar.

¿Por qué no aparecen las opciones del desplegable?

Los desplegables y radios necesitan al menos una entrada en la lista de opciones. Haz clic en el campo, busca la sección de opciones y escribe cada elección separada por comas o saltos de línea. Si la lista está vacía, el select aparece vacío.

¿El HTML exportado incluye estilos?

Sí: ahora cada exportación HTML incluye una pequeña hoja de estilos integrada, así que el formulario se ve limpio y legible nada más abrir el archivo: espaciado ordenado, bordes en los campos, anillo de foco y un botón de envío con estilo. El CSS es mínimo y autónomo, así que puedes dejarlo tal cual o borrar el bloque de estilos y poner tus propias clases de Tailwind, Bootstrap o el framework que uses.

¿Cuál es la diferencia entre la exportación HTML y JSON?

El HTML está listo para pegarse y renderizarse. El JSON es un esquema estructurado con tipos de campo, etiquetas y reglas de validación, ideal para renderizar con React, Vue o librerías como react-hook-form o Formik.

Herramientas relacionadas