Un formulario de contacto que solo existe en una página independiente es una oportunidad desaprovechada. Los formularios de contacto más efectivos aparecen donde los visitantes ya están — en páginas de productos, artículos de blog, landing pages, barras laterales y pies de página — sin requerir que los visitantes naveguen primero a una página de contacto separada.
Esta guía cubre los dos métodos principales de inserción (fragmento JavaScript e iFrame), cuándo usar cada uno y cómo implementarlos correctamente en las plataformas web más comunes.
Dos métodos de inserción: fragmento JS vs. iFrame
Fragmento JavaScript (recomendado para la mayoría de los casos)
Un embed de JavaScript es una sola etiqueta <script> que se pega en el HTML. El script se ejecuta en el navegador del visitante y renderiza el formulario de forma integrada, adaptándose al diseño de la página.
Ventajas:
- Puede adaptarse a las tipografías y el estilo general de la página anfitriona
- Puede enviarse sin recargar la página completa (mejor experiencia de usuario)
- Puede crecer o reducir su altura dinámicamente según el estado del formulario
- Puede comunicarse con la página principal (análisis, seguimiento de conversiones)
- Generalmente más rápido de cargar que un iFrame, ya que no crea un contexto de navegación separado
Limitaciones:
- Requiere que el sitio web anfitrión permita scripts externos (la mayoría lo hace)
- JavaScript debe estar habilitado en el navegador del visitante
- Requiere pruebas cuidadosas para asegurarse de que el formulario no entre en conflicto con los scripts existentes de la página
iFrame
Un iFrame embebe el formulario de contacto como una "ventana" separada dentro de la página. El formulario se ejecuta en un contexto completamente aislado.
Ventajas:
- Sin conflictos con el CSS o JavaScript del sitio anfitrión — está totalmente aislado
- Funciona en plataformas que restringen scripts externos (algunos entornos de CMS)
- No requiere JavaScript en la página anfitriona
Limitaciones:
- La altura debe ser fija o gestionada con JavaScript; los iFrames no se redimensionan automáticamente según el contenido
- El estilo está aislado — el formulario no hereda las tipografías ni los colores de la página principal a menos que estén configurados en la herramienta de formularios
- Algunos rastreos de análisis son más difíciles a través de los límites de iFrame
- Puede verse visualmente desconectado de la página circundante
Cuándo usar iFrame:
- La plataforma de alojamiento restringe JavaScript externo
- Se está insertando en una plataforma donde los conflictos de scripts son frecuentes y difíciles de depurar
- El formulario se va a insertar en un correo electrónico o en un entorno que no puede ejecutar JavaScript
Inserción en WordPress
Método 1: Bloque HTML con fragmento JS
En el editor de bloques de WordPress (Gutenberg):
- Haga clic en + para agregar un nuevo bloque
- Busque y seleccione HTML personalizado
- Pegue su código de embed JavaScript en el bloque
Esto funciona de forma confiable para la mayoría de los sitios WordPress. El script se ejecuta cuando la página carga y renderiza el formulario en lugar del bloque.
Importante: si su sitio WordPress usa un plugin de caché (WP Rocket, W3 Total Cache, etc.), agregue la página del formulario a la lista de exclusión de caché. Las páginas en caché pueden no ejecutar correctamente los scripts embebidos después de un envío de formulario.
Método 2: Bloque iFrame
En el editor de bloques:
- Agregue un bloque de HTML personalizado
- Pegue el código iFrame:
<iframe src="https://yourform.url" width="100%" height="600" frameborder="0"></iframe>
Ajuste el atributo height según la altura real de su formulario. Si el formulario tiene errores de validación que amplían la altura visible, el iFrame mostrará una barra de desplazamiento dentro de la ventana embebida — lo que se ve mal. Pruebe todos los estados del formulario (vacío, error, éxito) y establezca la altura al estado más alto.
Método 3: Área de widgets o pie de página
Para un formulario de contacto en el pie de página o la barra lateral, use un widget de Texto:
- Vaya a Apariencia → Widgets
- Agregue un widget de HTML personalizado a su barra lateral o pie de página
- Pegue el código de embed
Inserción en Webflow
El componente de embed nativo de Webflow admite JavaScript:
- En el diseñador de Webflow, arrastre un componente Embed a su página
- Haga clic en el componente y abra el editor de código embebido
- Pegue su fragmento JavaScript
- Haga clic en Guardar y cerrar
- Publique la página
Para embeds de iFrame, se aplica el mismo proceso — pegue la etiqueta iFrame en el componente Embed.
Nota de Webflow: el modo de vista previa de Webflow dentro del diseñador puede no ejecutar scripts externos. Publique en su dominio de staging o producción para probar el formulario.
Inserción en Squarespace, Wix y constructores similares
La mayoría de los constructores de sitios web tienen un bloque de "código personalizado" o "HTML embed":
- Squarespace: agregue un bloque de Código a cualquier página y pegue el fragmento de embed
- Wix: inserte un elemento HTML iframe (a través de Agregar → Embed → HTML iframe) y pegue su código iFrame o JS
- Showit: use un widget HTML en el lienzo de diseño
Nota sobre Wix: el contenedor de embed de Wix es técnicamente un iFrame incluso cuando se pega un fragmento JavaScript. Los scripts externos dentro de un embed HTML de Wix se ejecutan en un contexto de iframe aislado. Esto significa que el formulario funcionará, pero la integración de análisis entre páginas es limitada.
Inserción en un sitio web HTML personalizado
Para sitios HTML/CSS simples o sitios construidos con un generador estático (Hugo, Jekyll, Eleventy):
Fragmento JavaScript: pegue la etiqueta <script> justo antes de </body> en cualquier página donde desee que aparezca el formulario. Agregue un <div id="contact-form"></div> de marcador de posición donde debe renderizarse el formulario si el script necesita un elemento objetivo.
iFrame: pegue la etiqueta <iframe> directamente en el HTML de la página en la ubicación donde debe aparecer el formulario.
Consideraciones de rendimiento de carga
Un formulario de contacto embebido no debe ralentizar su página. Verifique:
Carga asíncrona: la etiqueta script debe incluir el atributo async para que no bloquee la renderización del contenido principal de la página.
<script src="https://cdn.example.com/form.js" data-key="your-key" async></script>
Carga diferida: para formularios por debajo del pliegue, algunos sistemas de embed admiten carga diferida — el script del formulario no se carga hasta que el visitante se desplaza cerca del formulario. Esto mejora el tiempo de carga inicial de la página.
Entrega desde CDN: el JavaScript del formulario debe servirse desde una red de distribución de contenido (CDN) con puntos de borde globales, para que el tiempo de carga sea rápido para los visitantes independientemente de su ubicación.
Seguimiento de conversiones tras la inserción
Si usa Google Analytics, Meta Pixel u otra herramienta de análisis, configure el seguimiento de envíos de formularios para que se active cuando el formulario embebido se envíe con éxito.
Para embeds de JavaScript, el proveedor del formulario debe admitir un callback o evento que se active al enviarse con éxito:
// Ejemplo — la sintaxis real varía según el proveedor
onContactFormSubmit(function() {
gtag('event', 'contact_form_submit', { event_category: 'engagement' });
});
Para embeds de iFrame, use window.postMessage para comunicar el evento de envío desde el iFrame a la página principal y luego active el evento de análisis en la página principal. Esto es técnicamente más complejo — verifique si su proveedor de formularios lo admite de forma nativa.
Prueba de su formulario embebido
Antes de publicar, pruebe:
- Envío vacío — confirme que la validación de campos obligatorios se active correctamente
- Correo electrónico inválido — confirme que el campo de correo muestre un error de validación
- Envío exitoso — confirme que aparece el estado de éxito y que el envío se recibe correctamente
- Móvil — abra la página en un teléfono real y pruebe los objetivos táctiles, el comportamiento del teclado y el desplazamiento del formulario
- Con caché habilitado — si su sitio usa caché, pruebe que el formulario funciona en una carga de página en caché
- Con una extensión de navegador — algunos bloqueadores de anuncios bloquean scripts externos; pruebe en un perfil de navegador limpio
Cómo proporciona Nura24 la inserción de formularios de contacto
El módulo de página de contacto de Nura24 genera tanto un fragmento de embed JavaScript como un código de embed iFrame desde el dashboard, listo para pegar en cualquier sitio web sin programación. El script del widget se carga de forma asíncrona y se sirve desde un CDN. La configuración visual — color, tipografía, radio de borde, modo oscuro/claro — se configura en el dashboard de Nura24 y se aplica automáticamente al formulario embebido, por lo que actualizar la imagen de marca en un lugar la actualiza en todos los sitios donde está embebido el formulario. Los envíos se enrutan al sistema de tickets de Nura24 y opcionalmente activan notificaciones por correo electrónico a los agentes y correos de respuesta automática al visitante.