Mi formulario no se muestra correctamente

El formulario se carga, pero parece «estropeado»: recortado, con un ancho incorrecto, sin posibilidad de desplazarse en dispositivos móviles o con campos invisibles. Estas son las causas más comunes.

1. El iFrame es demasiado estrecho o demasiado bajo

Al incrustarlo como iFrame, tu sitio web suele establecer un ancho y una altura fijos; si estos no se ajustan al formulario, este se desplaza a columnas o queda cortado.

Solución:

Establece el ancho del iFrame en 100%
Deja que la altura del iFrame se ajuste automáticamente: propform incluye un pequeño fragmento de código JS que ajusta la altura de forma dinámica. Encontrarás el fragmento de código en Configuración del formulario → Código iFrame para incrustar y debes incorporarlo una sola vez a tu página.
Si no utilizas el código dinámico, establece la altura del iFrame en un valor generoso (por ejemplo, 1200px) y comprueba si el formulario cabe.

2. El elemento padre de la página iFrame tiene muy poco ancho

Algunos creadores de sitios web representan el área en la que insertas el iFrame en una columna de ancho fijo (p. ej., 600 px). En el smartphone, esto queda muy estrecho.

Solución: En tu creador de sitios web, establece el ancho de la columna o del contenedor en 100% o, como mínimo, en 100vw, si está disponible. En los creadores de páginas de WordPress (Elementor, Divi), esto suele denominarse «Full Width» o «Stretch».

3. Conflicto de CSS con tu sitio web

Muy poco frecuente: un CSS establecido globalmente en tu sitio web (por ejemplo, * { box-sizing: content-box } o similar) anula el estilo del formulario.

Solución: Si tienes CSS personalizado en tu página, aísla el contenedor iFrame o comprueba si hay conflictos de estilos en la consola de DevTools del navegador.

4. La vista móvil está recortada

El formulario funciona perfectamente en el ordenador, pero en el smartphone falta algo en el margen derecho.

Solución:

En el <head> de tu sitio web debe aparecer la metaetiqueta viewport: <meta name="viewport" content="width=device-width, initial-scale=1.0">
Ancho del iFrame en 100% (no en px)
El contenedor principal no debe tener un ancho mínimo.

5. Caché del navegador

Si acabas de realizar ajustes en el formulario y sigue apareciendo la versión antigua: vacía la caché del navegador o prueba con una pestaña de incógnito.

6. El logotipo o el botón han desaparecido

Si no se muestra el logotipo o falta un botón:

¿Se ha subido el logotipo en la configuración del formulario?
¿Está el botón configurado como «no visible» en una regla de condición? Compruébalo en la configuración de los campos, en «Condiciones».

Si nada funciona

Escríbenos a hello@propform.io con la siguiente información:

URL del formulario (si está incrustado: también la URL de tu sitio web)
Navegador + dispositivo (ordenador de sobremesa/tableta/teléfono inteligente)
Captura de pantalla del error
¿Qué esperabas?

propform.ioHilfe