Guía · 6 min de lectura
Cómo incrustar un formulario en tu sitio web
Hay varias formas de poner un formulario en tu sitio web, desde un fragmento de código de una línea hasta una integración de API totalmente personalizada. Esta guía recorre las incrustaciones en línea, las ventanas modales emergentes, el componente web y el SDK de JS, y la API REST pública, para que elijas el enfoque que encaje con tu proyecto.
Incrustación en línea
Una incrustación en línea coloca el formulario directamente en el flujo de tu página, de modo que queda entre el resto de tu contenido como cualquier otra sección. Pegas un pequeño fragmento de código donde quieras que aparezca el formulario y este se renderiza en su sitio, sin redirección ni página de destino aparte.
La versión más sencilla es un componente web: añade la etiqueta <yeetform-embed> con el slug de tu formulario y el formulario se carga en línea. Si lo prefieres, el mismo efecto está disponible con una única llamada del SDK de JS que renderiza en el elemento de destino que elijas.
Ventana emergente o modal
A veces no quieres que el formulario esté en la página hasta que alguien lo pida. Una ventana emergente o modal mantiene limpio tu diseño y abre el formulario en una superposición cuando un visitante hace clic en un botón, ideal para botones de contacto, widgets de comentarios o una llamada a la acción en la esquina de la pantalla.
Con el SDK de JS conectas un botón a YeetForm.open(slug) y el formulario aparece en un modal centrado sobre tu página. El visitante lo rellena sin salir nunca de ella y la superposición se cierra al enviar, de modo que el formulario nunca compite por espacio con tu contenido principal.
Componente web y SDK de JS
Para la mayoría de los sitios, el componente web y el SDK de JS lo cubren todo. La etiqueta <yeetform-embed> es la opción sin compilación: funciona en HTML puro, en un bloque de CMS o dentro de cualquier framework que admita elementos personalizados. El SDK de JS ofrece control programático cuando lo necesitas.
El SDK (public/sdk.js) expone un pequeño conjunto de métodos:
- YeetForm.render(slug, target, options): incrusta el formulario en línea en un elemento que elijas.
- YeetForm.open(slug, options): abre el formulario en un modal emergente.
- YeetForm.load(slug, lang): obtiene el esquema del formulario sin interfaz, por ejemplo para contar o inspeccionar campos.
- YeetForm.submit(slug, answers): envía una respuesta de forma programática desde tu propio código.
API para integraciones personalizadas
Cuando necesitas control total, un front-end a medida, una app móvil o un flujo del lado del servidor, usa la API REST pública. Tiene CORS habilitado, así que puedes llamarla directamente desde el código del navegador, y no exige autenticación para los formularios públicos, de modo que no hace falta ninguna clave de API para cargar un esquema o enviar una respuesta.
Una integración típica obtiene el esquema del formulario con una petición GET, renderiza los campos como quieras en tu propia interfaz y luego envía de vuelta con POST las respuestas recogidas. Como el esquema es solo JSON, puedes crear diseños completamente personalizados mientras YeetForm sigue encargándose del almacenamiento, las notificaciones y el análisis entre bastidores.