Creas formularios en una herramienta de formularios especializada. Ahora necesitas ponerlos en tu web. No puedes copiar y pegar el código si tu web usa otra plataforma. Lo insertas. Un formulario insertado aparece en tu sitio pero vive en otro lugar.
Este artículo explica cómo insertar formularios, cómo funcionan los iframes, la seguridad entre dominios y los problemas habituales de los formularios insertados.
¿Qué es un formulario insertado?
Un formulario insertado es un formulario que vive en un servidor pero aparece en otra web. El formulario está alojado en wemasy.es pero se muestra en tu sitio con un iframe como <iframe src="https://wemasy.com/form/abc123"></iframe>.
El iframe crea una ventana a otra página. Esa página contiene el formulario. Para el usuario, parece que el formulario está en tu sitio. Técnicamente, es una página aparte dentro de un contenedor.
Cómo funcionan los iframes
Un iframe es un marco en línea. Carga una página completamente separada dentro de tu página. Esa página separada tiene su propio HTML, CSS y JavaScript. Está aislada en un entorno protegido (sandbox), lo que significa que no puede acceder a tu página ni al revés.
Los iframes ofrecen aislamiento de seguridad: la herramienta de formularios no puede acceder a los datos de tu página, tu página no puede acceder a los datos del formulario y, si el formulario falla, no hace caer tu página. Sin embargo, los iframes tienen desventajas, como una comunicación directa limitada entre la página y el formulario, un posible impacto en el SEO (Google puede no indexar el contenido del formulario), tiempos de carga más lentos y la falta de soporte de cookies entre dominios.
Cómo insertar un formulario con un iframe
La mayoría de los creadores de formularios ofrece un código de inserción como <iframe src="https://wemasy.com/form/abc123" width="100%" height="600"></iframe>. Copia y pega este código en el HTML de tu web para mostrar el formulario dentro del contenedor. Un problema habitual es que una altura fija causa problemas de desplazamiento. Si el formulario es más largo que la altura que fijaste, el formulario se desplaza dentro del iframe (mala experiencia). Tendrías que saber la altura exacta del formulario, pero los formularios crecen y se encogen según la lógica condicional, así que la altura no es fija. La solución es usar iframes que cambian de tamaño solos, con postMessage para comunicar el iframe y la página principal. Cuando el formulario cambia de tamaño, avisa a la página principal para que cambie el tamaño del iframe. El JavaScript de la página principal escucha los mensajes del iframe con window.addEventListener('message', (e) => { if (e.origin !== 'https://wemasy.com') return; if (e.data.type === 'resize') { iframe.height = e.data.height; } });. El formulario dentro del iframe envía un mensaje con su altura con parent.postMessage({ type: 'resize', height: form.scrollHeight }, '*');, así el iframe se amplía automáticamente para ajustarse al contenido del formulario.
Seguridad entre dominios
Los iframes están aislados por seguridad. El formulario no puede acceder a los datos de tu página. Tu página no puede acceder a los datos del formulario. Esto es bueno.
Ten cuidado con el atributo sandbox en <iframe src="https://wemasy.com/form/abc123" sandbox="allow-same-origin allow-scripts allow-forms"></iframe>. El atributo sandbox restringe lo que puede hacer el iframe. Allow-same-origin permite al iframe acceder a las cookies y al almacenamiento de sesión, allow-scripts permite que se ejecute JavaScript y allow-forms permite que el formulario se envíe. Activa solo los permisos de sandbox que de verdad necesites, ya que el valor por defecto (todos los permisos denegados) es el más seguro pero rompe la mayoría de los formularios.
Envío de formularios insertados
Cuando el usuario envía un formulario dentro de un iframe, el envío ocurre dentro del iframe y el formulario manda los datos al servidor del creador de formularios (no al tuyo). Tu servidor nunca ve los datos del formulario, ya que la herramienta los guarda y tú los recuperas después con una API o un aviso por email. Si necesitas más control, tienes que interceptar el envío. Esto requiere que la herramienta de formularios mande un postMessage a la página principal con window.parent.postMessage({ type: 'submit', data: formData }, origin);, y entonces la página principal puede hacer algo con los datos (enviarlos a tu servidor, mostrar una página de agradecimiento personalizada, etc.).
Qué tener en cuenta en el móvil con formularios insertados
En el móvil, los iframes pueden dar problemas. El formulario es más pequeño y más difícil de usar. El iframe puede no cambiar de tamaño bien si no admite el cambio automático.
Un enfoque mejor en el móvil es enlazar a un formulario de página completa en lugar de insertar un iframe. Detecta el tamaño de la pantalla y muestra un botón de enlace en el móvil, pero inserta el formulario en el ordenador con if (window.innerWidth < 768) { document.getElementById('form-container').innerHTML = '<a href="...">Open form</a>'; } else { // embed the iframe }.
Impacto en el rendimiento de los formularios insertados
Los iframes añaden carga extra. Cada iframe es una petición HTTP aparte. Carga su propio HTML, CSS y JavaScript. Esto ralentiza tu página.
Carga el iframe de forma diferida, sin cargarlo hasta que el usuario se desplace cerca, con <iframe data-src="https://..." style="display: none"></iframe> y window.addEventListener('scroll', () => { if (iframe in viewport && !iframe.src) { iframe.src = iframe.dataset.src; } });. El iframe solo se carga cuando el usuario está a punto de verlo.
Cuándo usar formularios insertados y cuándo otras opciones
Usa formularios insertados cuando no puedes personalizar tu web (por ejemplo, en un creador de webs cerrado y alojado) o quieres mantener la herramienta de formularios separada de tu sitio.
Usa formularios nativos cuando controlas tu web y quieres rendimiento. Un formulario construido sobre tu propia tecnología carga más rápido y se integra mejor.
Usa formularios alojados (independientes) cuando quieras simplicidad. Un formulario en el dominio del creador es lo más fácil de configurar, pero parece menos profesional.
Cómo gestiona WEMASY los formularios insertados
Los formularios de WEMASY se pueden insertar en sitios externos con iframes que cambian de tamaño automáticamente. Los formularios están optimizados para todos los tamaños de dispositivo. Puedes recibir los envíos en tu panel de WEMASY, por email o con webhooks.
Mira las opciones de inserción en tu plan de WEMASY.