---
title: "Cómo embeber formularios en cualquier sitio web"
slug: embed-forms-any-website
description: "Aprende cómo embeber formularios en cualquier sitio web usando iframe, script tag o popup. Guía paso a paso para WordPress, Shopify, Wix y sitios HTML personalizados."
publishedAt: "2026-01-15"
author: "Instaform Team"
tags: ["embeber", "formularios", "guía práctica"]
locale: es
---

Construiste un formulario. Se ve genial en el editor. Ahora necesitas ponerlo en tu sitio web donde los visitantes reales puedan llenarlo. Esta guía cubre las tres formas de embeber Instaform en cualquier sitio web, con instrucciones específicas para plataformas populares.

## Las tres opciones de embebido

Instaform ofrece tres métodos de embebido. Cada uno tiene diferentes fortalezas según tu caso de uso.

### Opción 1: Embebido con Iframe

Un iframe embebe tu formulario dentro de un marco rectangular en tu página. El formulario carga en su propio contenedor, aislado de los estilos de tu página.

**Ideal para:**
- Páginas donde quieres que el formulario aparezca como una sección dedicada
- Situaciones donde necesitas que el formulario esté visualmente separado del contenido circundante
- Plataformas que soportan HTML pero restringen JavaScript

**Cómo usarlo:**
1. Abre tu formulario en Instaform y ve a la configuración de Compartir o Embeber
2. Copia el código de embebido iframe
3. Pégalo en el HTML de tu sitio web donde quieras que aparezca el formulario

El código iframe se ve algo así:

```html
<iframe src="https://app.instaform.co/forms/tu-form-id"
  width="100%" height="600" frameborder="0">
</iframe>
```

**Consejo:** Establece `width="100%"` para que el formulario llene su contenedor en todos los tamaños de pantalla. Para la altura, empieza con 600px y ajusta según la longitud de tu formulario. Si tu formulario tiene muchos campos, aumenta la altura para evitar scroll interno.

### Opción 2: Embebido con Script Tag

Un script tag embebe tu formulario directamente en el DOM de la página. El formulario se renderiza inline, como si fuera una parte nativa de tu página.

**Ideal para:**
- La integración visual más limpia con tu sitio web
- Mejor rendimiento que iframes (sin sobrecarga de documento adicional)
- Páginas donde quieres que el formulario coincida con el layout circundante perfectamente

**Cómo usarlo:**
1. Abre tu formulario en Instaform y ve a la configuración de Embeber
2. Copia el código de embebido de script tag
3. Pégalo en el HTML de tu página donde quieras que aparezca el formulario

El embebido con script típicamente incluye un div contenedor y un script tag:

```html
<div id="instaform-container"></div>
<script src="https://app.instaform.co/embed/tu-form-id.js"></script>
```

**Consejo:** Los embebidos con script generalmente cargan más rápido y se ven más nativos que los iframes. Si tu plataforma soporta JavaScript, esta suele ser la mejor opción.

### Opción 3: Embebido Popup

Un formulario popup aparece como un overlay cuando se activa por un clic de botón, un temporizador o un evento de scroll. El formulario flota sobre el contenido de tu página con un fondo oscurecido.

**Ideal para:**
- Formularios de captura de leads que no deben interrumpir el layout de la página
- Botones de llamada a la acción que abren un formulario al hacer clic
- Páginas donde el espacio es limitado y no puedes dedicar una sección completa al formulario

**Cómo usarlo:**
1. Abre tu formulario en Instaform y ve a la configuración de Embeber
2. Elige la opción popup y copia el código
3. Agrega el script a tu página y conéctalo a un botón o activador

Los embebidos popup crean una experiencia enfocada. Cuando aparece el overlay, el fondo se oscurece y la atención del visitante se dirige completamente al formulario. Esto puede mejorar las [tasas de conversión](/blog/boost-form-conversion-rate) porque elimina distracciones.

## Instrucciones específicas por plataforma

### WordPress

**Usando el editor de bloques (Gutenberg):**
1. Agrega un bloque "HTML Personalizado" donde quieras el formulario
2. Pega tu código de embebido iframe o script
3. Previsualiza la página para verificar que el formulario aparece correctamente

**Usando un page builder (Elementor, Beaver Builder, etc.):**
1. Agrega un widget de HTML o Código a tu layout
2. Pega el código de embebido en el widget
3. Guarda y previsualiza

**Usando el editor clásico:**
1. Cambia a la pestaña "Texto" (no "Visual")
2. Pega el código de embebido en la posición deseada
3. Vuelve a "Visual" para verificar la ubicación

**Consejo para WordPress:** Si usas un plugin de caché (WP Super Cache, W3 Total Cache, etc.), limpia tu caché después de agregar el código de embebido. Las páginas en caché pueden no mostrar el formulario hasta que el caché se refresque.

### Shopify

1. Ve a tu admin de Shopify y navega a Tienda Online > Páginas (o edita una página de producto)
2. En el editor de texto enriquecido, haz clic en el icono de código para cambiar a vista HTML
3. Pega tu código de embebido
4. Guarda la página

Para la página de inicio o secciones personalizadas, edita los archivos de plantilla Liquid de tu tema. Agrega el código de embebido dentro de la plantilla de sección apropiada.

**Consejo para Shopify:** Si embebes en una página de producto, coloca el formulario debajo de la descripción del producto. Un caso de uso común es un formulario de "Solicitar cotización personalizada" en productos con precios variables.

### Wix

1. En el Editor de Wix, agrega un elemento "Código Embebido" (se encuentra en "Agregar" > "Código Embebido" > "Embeber HTML")
2. Pega tu código de embebido iframe en el elemento
3. Redimensiona el elemento para que se ajuste a tu formulario

**Consejo para Wix:** Wix funciona mejor con embebidos iframe. Los embebidos de script tag pueden estar restringidos dependiendo de tu plan de Wix.

### Squarespace

1. Agrega un "Bloque de Código" a tu página
2. Pega tu código de embebido en el bloque
3. Desactiva "Mostrar Fuente" si se te pide
4. Guarda y previsualiza

**Consejo para Squarespace:** Usa embebidos iframe en Squarespace. Los bloques de código soportan HTML e iframes bien, pero algunos embebidos de JavaScript pueden comportarse de manera inconsistente dependiendo de tu plantilla.

### Sitios HTML estáticos

Si gestionas tus propios archivos HTML, embeber es directo:

1. Abre el archivo HTML donde quieras el formulario
2. Pega el código de embebido en la ubicación deseada dentro del `<body>`
3. Guarda y despliega

Para generadores de sitios estáticos (Hugo, Jekyll, Gatsby, Astro), agrega el código de embebido a tu plantilla de página o archivo de contenido. La mayoría de generadores estáticos soportan HTML crudo en archivos de contenido.

### Aplicaciones React / Next.js / SPA

Para aplicaciones de página única, el método iframe es el más simple:

```jsx
function ContactForm() {
  return (
    <iframe
      src="https://app.instaform.co/forms/tu-form-id"
      width="100%"
      height="600"
      frameBorder="0"
      title="Formulario de Contacto"
    />
  );
}
```

Para embebidos de script tag en React, necesitarás cargar el script dinámicamente usando un hook `useEffect`.

## Estilizando tu formulario embebido

Independientemente del método de embebido que elijas, la apariencia de tu formulario se controla desde la configuración de tema en Instaform. Antes de embeber, personaliza:

- **Colores:** Haz coincidir los colores de botones y acentos de tu formulario con la paleta de marca de tu sitio web
- **Fuentes:** Elige una fuente que complemente la tipografía de tu sitio
- **Fondo:** Ponlo transparente si quieres que el formulario se mezcle con tu página, o elige un color que cree una sección distinta

Con embebidos de script tag, el formulario hereda algo del contexto de la página, facilitando lograr una apariencia fluida. Los embebidos iframe son más aislados, así que la configuración del tema se convierte en tu herramienta principal de estilizado.

## Consideraciones responsive

Los tres métodos de embebido producen formularios responsive por defecto. Sin embargo, hay algunas cosas que vigilar:

**Altura del iframe:** En móvil, tu formulario podría necesitar más espacio vertical porque los campos se apilan en una sola columna. Considera establecer una altura de iframe más alta o usar un embebido de script que se ajuste automáticamente.

**Ancho del contenedor:** Asegúrate de que el contenedor donde colocas el código de embebido no esté restringido a un ancho estrecho. Un formulario apretado en una barra lateral de 300px no será cómodo de llenar.

**Prueba en dispositivos reales.** Después de embeber, carga la página en tu teléfono y tablet. Verifica que los campos sean tocables, el texto sea legible y el botón de envío sea alcanzable sin scroll incómodo.

## Eligiendo el método correcto

Aquí tienes una guía rápida de decisión:

| Caso de uso | Método recomendado |
|---|---|
| Máxima compatibilidad (funciona en todas partes) | Iframe |
| Mejor integración visual | Script tag |
| Captura de leads sin cambios de layout | Popup |
| La plataforma restringe JavaScript | Iframe |
| El rendimiento es crítico | Script tag |
| Formulario activado por acción del usuario | Popup |

Si no estás seguro, empieza con el embebido iframe. Funciona en prácticamente todas las plataformas, no requiere JavaScript y proporciona aislamiento confiable de los estilos existentes de tu página.

## Después de embeber

Una vez que tu formulario está en vivo en tu sitio web, configura [notificaciones por email](/blog/email-notifications-form-submissions) para que te avisen cuando lleguen envíos. Luego monitorea el rendimiento de tu formulario a través del panel de analíticas de Instaform.

Vigila tu tasa de conversión — el porcentaje de visitantes de la página que envían el formulario. Si es más baja de lo esperado, revisa tu [diseño de formulario](/blog/form-design-mistakes) y considera los [consejos de optimización de conversión](/blog/boost-form-conversion-rate) para mejorarla.

Tu formulario solo es valioso cuando las personas pueden encontrarlo y llenarlo. Embeberlo en tu sitio web lo pone frente a tu audiencia donde ya están.