Compartir y publicar
Incrustación y ventanas emergentes
Pon tu formulario dentro de cualquier página web como incrustación en línea o como ventana emergente. Lo configuras en el panel Compartir y pegas un fragmento de código en tu sitio.
Ambos fragmentos se generan a partir del enlace de compartir que hayas seleccionado, así que heredan la caducidad, el límite de respuestas, el dominio personalizado y las analíticas de ese enlace. Crea el enlace primero — consulta enlaces para compartir. Los valores predeterminados de parámetros de consulta son la única excepción: no se añaden a los fragmentos de incrustación ni de ventana emergente.
Incrustación en línea
Una incrustación en línea coloca tu formulario directamente dentro de una página mediante un iframe. Abre el panel Compartir, haz clic en la tarjeta Incrustar y copia el fragmento de código generado en el HTML de tu sitio.
Diseño
| Ajuste | Qué hace |
|---|---|
| Altura (px) | Altura del iframe en píxeles. El valor predeterminado es 600. |
| Ajuste automático de altura | Ajusta la altura del iframe al contenido del formulario, de modo que los encuestados nunca vean una barra de desplazamiento dentro de la incrustación. Desactivado por defecto. Activarlo añade un pequeño script al fragmento. |
| Carga diferida | Retrasa la carga hasta que el iframe sea visible, añadiendo loading="lazy". Desactivado por defecto. Acelera la carga inicial de la página cuando el formulario está más abajo. |
Visualización
| Ajuste | Qué hace |
|---|---|
| Ocultar imagen de portada | Elimina la imagen de portada del formulario dentro de la incrustación. Útil cuando tu página anfitriona ya tiene su propio encabezado. |
| Ocultar logotipo | Elimina el logotipo del formulario dentro de la incrustación. |
| Esquema de color | Dejar que el usuario especifique (el valor predeterminado, sigue la preferencia del sistema del visitante), Modo oscuro o Modo claro. Consulta Esquema de color más abajo. |
Haz clic en Ver código para ver el HTML generado. Usa Copiar código de incrustación para copiarlo y luego pégalo en tu sitio. Restablecer valores predeterminados restaura todos los ajustes.
Qué contiene el fragmento
Con el ajuste automático desactivado, el fragmento es un único iframe que apunta a tu enlace de compartir con ?embed=1
añadido. Las opciones de visualización añaden sus propios parámetros: hideCover=1, hideLogo=1, y
theme=dark o theme=light.
<iframe src="https://form.formbase.so/Abc12XYz?embed=1" width="100%" height="600" style="border: none;"></iframe>Con el ajuste automático activado, el iframe se envuelve en un div seguido de un script. El formulario incrustado envía un
mensaje formbase:resize en cada cambio de altura; el script comprueba el origen del mensaje y el frame que lo envía, y luego
ajusta la altura del iframe. No se toca nada más en tu página, y no se carga ningún script externo.
Ventana emergente
Una ventana emergente muestra tu formulario como una superposición sobre tu página. Abre el panel Compartir, haz clic en la tarjeta Ventana emergente, configura las opciones y pega el fragmento de código generado en tu sitio.
Activador
Elige cómo se abre la ventana emergente:
| Activador | Cómo funciona |
|---|---|
| Cuando se llama a una función | El valor predeterminado. El fragmento define una función global con un nombre derivado del código o el slug personalizado de tu enlace de compartir — por ejemplo window.openFormbasePopup_Abc12XYz. Llámala desde un botón, un enlace o cualquier controlador de eventos de tu sitio. |
| Automáticamente al cargar la página | La ventana emergente se abre en cuanto la página termina de cargar. Aparecen dos ajustes adicionales: Retraso (segundos) y Mostrar una vez por sesión, que guarda una marca en el sessionStorage del visitante para que la ventana emergente no vuelva a abrirse en cada página. |
Diseño
| Ajuste | Qué hace |
|---|---|
| Posición | Dónde aparece la ventana emergente: Centro, Inferior derecha (el valor predeterminado), Inferior izquierda, Superior derecha o Superior izquierda. Centro ocupa el 80 % de la altura de la ventana; las cuatro posiciones de esquina miden 600 px de alto. |
| Ancho (px) | Ancho de la ventana emergente en píxeles, con un máximo del 90 % del ancho de la ventana. El valor predeterminado es 500. |
Visualización
| Ajuste | Qué hace |
|---|---|
| Ocultar imagen de portada | Elimina la imagen de portada del formulario dentro de la ventana emergente. |
| Ocultar logotipo | Elimina el logotipo del formulario dentro de la ventana emergente. |
| Esquema de color | Las mismas tres opciones que la incrustación. Consulta Esquema de color más abajo. |
Estilo de la ventana emergente
| Ajuste | Qué hace |
|---|---|
| Opacidad del fondo (%) | Oscuridad del fondo detrás de la ventana emergente, de 0 a 100. El valor predeterminado es 50. |
| Radio de borde (px) | Redondez de las esquinas de la ventana emergente. El valor predeterminado es 12. |
Comportamiento
| Ajuste | Qué hace |
|---|---|
| Cerrar con la tecla Escape | Activado por defecto. Presionar Escape cierra la ventana emergente. |
| Cerrar al hacer clic en el fondo | Activado por defecto. Hacer clic fuera de la ventana emergente la cierra. |
| Cerrar automáticamente tras el envío | Desactivado por defecto. La ventana emergente se cierra tres segundos después de que el encuestado envía el formulario. El retraso es fijo. |
Haz clic en Ver código para ver el fragmento generado. Usa Copiar código de ventana emergente para copiarlo y luego pégalo en tu sitio. Restablecer valores predeterminados restaura todos los ajustes.
Qué contiene el fragmento
El fragmento de la ventana emergente es un único bloque <script> autocontenido. Construye la superposición, el botón de
cierre y el iframe en JavaScript puro cuando se abre la ventana emergente — nada más se añade a tu página antes de eso, no se inyecta
ninguna hoja de estilos y no se carga ningún script externo. El comentario debajo del script indica el nombre de la función que debes
llamar:
<!-- Call window.openFormbasePopup_Abc12XYz() to open the form popup -->Un guion en un slug personalizado se convierte en un guion bajo en el nombre de la función, porque un guion no es válido en un identificador de JavaScript. Copia el nombre desde el comentario en lugar de deducirlo tú mismo.
Esquema de color
Las incrustaciones y las ventanas emergentes comparten las mismas tres opciones, y ambas anulan el tema propio del formulario dentro del marco:
Dejar que el usuario especifique — el valor predeterminado. El formulario sigue la preferencia de modo oscuro o claro del sistema operativo o navegador del visitante.
Modo oscuro — fuerza el modo oscuro independientemente de la preferencia del visitante.
Modo claro — fuerza el modo claro independientemente de la preferencia del visitante.
Haz coincidir el tema de tu sitio
Si tu sitio web es siempre oscuro, configura la incrustación o la ventana emergente en Modo oscuro para que el formulario se integre. Si tu sitio respeta la preferencia del visitante, elige Dejar que el usuario especifique. Para personalizar el tema del propio formulario, consulta apariencia y personalización.