--- title: "Opciones de Incrustación de Formularios: iframe, Script y Popup" slug: form-embed-options description: "Incrusta formularios de Instaform usando iframe, script en línea o modal popup. Configura posición, texto de botón, colores y elige el método correcto para tu sitio web." publishedAt: "2025-10-28" author: "Instaform Team" tags: ["incrustación", "formularios", "sitio-web", "integración"] locale: es --- Construir un gran formulario es la mitad del trabajo. La otra mitad es ponerlo donde la gente realmente lo complete. Un formulario que está en tu panel de Instaform no recopila envíos — necesita vivir en tu sitio web, tu landing page, tu app o donde sea que tu audiencia pase tiempo. Instaform ofrece tres métodos de incrustación, cada uno diseñado para un contexto diferente: iframe para incrustación estándar, etiqueta script para incrustación en línea, y popup para superposiciones modales. Aquí te explicamos cómo funciona cada uno, cuándo usarlo y cómo configurarlo. ## Incrustación por iframe La incrustación por iframe es el método más directo. Copias un fragmento de HTML, lo pegas en el código de tu sitio web, y el formulario aparece en un marco autocontenido. ### Cómo Funciona Un iframe crea una ventana dentro de tu página que carga el formulario desde los servidores de Instaform. El formulario se renderiza dentro de esta ventana con sus propios estilos, scripts y comportamiento, completamente aislado del código de tu página. El CSS de tu sitio web no afecta al formulario, y el CSS del formulario no afecta tu sitio web. El código de incrustación se ve como una etiqueta HTML iframe estándar con la URL única de tu formulario como fuente. Lo pegas en cualquier página HTML, bloque de contenido CMS o constructor de sitios web que acepte HTML personalizado. ### Cuándo Usar iframe **Plataformas CMS.** WordPress, Squarespace, Wix, Webflow y la mayoría de los constructores de sitios web aceptan incrustaciones de iframe. Si estás usando un CMS, iframe es generalmente el camino de menor resistencia. **Cuando importa el aislamiento de estilos.** Porque los iframes están aislados en un sandbox, el CSS de tu sitio web no puede romper accidentalmente el layout del formulario, y el formulario no puede interferir con tu página. Este aislamiento es valioso cuando tu sitio web tiene CSS complejo o agresivo que podría entrar en conflicto con contenido incrustado. **Cuando quieres cero JavaScript.** Los iframes son HTML puro. No se ejecuta JavaScript en tu página. Si tienes políticas de seguridad de contenido estrictas o quieres minimizar los scripts, las incrustaciones de iframe son la opción más limpia. ### Configuración Lo principal a configurar son las dimensiones del iframe. Establece el ancho para que coincida con tu área de contenido — típicamente 100% para llenar el espacio disponible. Establece la altura para acomodar la longitud del formulario. Si la altura es muy corta, el formulario tendrá su propia barra de desplazamiento dentro del iframe. Si es muy alta, tendrás espacio vacío debajo del formulario. Para sitios web responsivos, establece el ancho al 100% y usa una altura razonable. La mayoría de los formularios funcionan bien a 600-800px de altura, pero formularios con muchos campos o [lógica condicional](/blog/conditional-logic-guide) que revela secciones adicionales podrían necesitar más. ### Limitaciones Los iframes tienen una altura fija, así que si la longitud de tu formulario cambia dinámicamente — debido a la lógica condicional que muestra/oculta campos — el iframe podría mostrar barras de desplazamiento o tener espacio en blanco extra. La incrustación por etiqueta script maneja esto mejor. Los iframes también pueden verse ligeramente diferentes entre navegadores y dispositivos. El borde, el estilo de la barra de desplazamiento y el renderizado pueden variar. Establecer `border: none` en el iframe y probar entre navegadores captura la mayoría de las inconsistencias visuales. ## Incrustación por Etiqueta Script (En Línea) La incrustación por etiqueta script inyecta el formulario directamente en el DOM de tu página. En lugar de cargarse en un marco aislado, el formulario se convierte en parte de tu página — ubicándose junto a tus encabezados, párrafos e imágenes como si lo hubieras construido ahí. ### Cómo Funciona Pegas un pequeño fragmento de JavaScript en tu página. Cuando la página carga, el script crea los elementos del formulario directamente en el HTML de tu página en la ubicación donde colocaste el fragmento. Los estilos del formulario están delimitados para evitar conflictos con tu página, pero el formulario es genuinamente parte de la estructura del documento de tu página. ### Cuándo Usar Etiqueta Script **Cuando necesitas altura dinámica.** Porque el formulario es parte del DOM de tu página, su altura se ajusta naturalmente a medida que el contenido cambia. Si la lógica condicional revela cinco campos nuevos, la página crece. Si una sección se colapsa, la página se reduce. Sin barras de desplazamiento, sin espacio en blanco, sin cálculos de altura. **Cuando quieres integración visual fluida.** Un formulario en línea se siente más nativo que un iframe. No hay un límite de marco sutil, no hay potencial de barras de desplazamiento dobles, no hay brecha visual entre el formulario y el contenido circundante. El formulario fluye con la página. **Cuando necesitas interacción con la página.** Porque el formulario está en el DOM de la página, puede interactuar con el JavaScript de la página si es necesario. Los parámetros de URL pueden pre-llenar campos del formulario. Las analíticas a nivel de página pueden rastrear interacciones del formulario. Scripts personalizados pueden responder a eventos del formulario. ### Configuración Coloca el fragmento de script donde quieres que aparezca el formulario. En una página de WordPress, usa un bloque de HTML personalizado. En un constructor de landing pages, usa una sección HTML. En HTML sin procesar, pégalo dentro de un div contenedor. El formulario automáticamente toma el ancho de su contenedor padre, así que controla el ancho controlando el contenedor. Un formulario dentro de un div centrado con `max-width: 600px` será de 600px de ancho. Un formulario dentro de una sección de ancho completo se estirará de borde a borde. ### Consideraciones Las incrustaciones por script ejecutan JavaScript en tu página, lo que significa que están sujetas a las políticas de seguridad de contenido de tu página. Si tu sitio web bloquea scripts en línea o fuentes de scripts externos, necesitarás poner en lista blanca el dominio de Instaform. Las incrustaciones por script también pueden, en casos raros, tener conflictos de estilo con resets CSS o frameworks muy agresivos en tu página. Si tu sitio usa un framework CSS que establece estilos globales en todos los inputs, botones o formularios, esos estilos podrían filtrarse al formulario incrustado. Probar en tu página real (no solo en una página de prueba en blanco) captura estos problemas. ## Incrustación Popup (Modal) La incrustación popup muestra tu formulario como una superposición modal activada por un clic de botón. El formulario no es visible en la página inicialmente — aparece un botón flotante, y al hacer clic se abre el formulario en un modal centrado o posicionado en una esquina. ### Cómo Funciona Pegas un fragmento que crea un botón activador en tu página. El botón flota en una posición fija — típicamente en una esquina del viewport. Cuando un visitante hace clic en el botón, el formulario se desliza o aparece con fade como una superposición modal, oscureciendo el fondo. El visitante completa el formulario, lo envía, y el modal se cierra, regresándolo a la página. ### Cuándo Usar Popup **Cuando el formulario no es el contenido principal de la página.** Si la página es un artículo de blog, una página de producto o una landing page donde el contenido principal no es el formulario, un popup mantiene el formulario disponible sin dominar el layout. Los visitantes que quieren el formulario pueden accederlo. Los que no, pueden ignorarlo. **Para feedback y soporte.** Un botón persistente de "Feedback" o "Ayuda" en la esquina de cada página permite a los visitantes acceder a un formulario de feedback o ticket de soporte desde cualquier parte de tu sitio. Siempre está disponible sin estar siempre visible. **Para captura de leads en páginas de contenido.** Un artículo de blog sobre tu industria podría convertir visitantes en leads, pero incrustar un formulario completo en medio del artículo interrumpe la experiencia de lectura. Un popup activado por un botón de esquina ofrece conversión sin interrupción. **Para formularios de múltiples páginas en sitios de una sola página.** Si tu sitio web es de una sola página (común para portafolios, eventos y pequeños negocios), un formulario popup evita el desplazamiento incómodo a una sección de contacto. El botón siempre es visible, sin importar dónde esté el visitante en la página. ### Opciones de Posición El botón del popup puede posicionarse en cuatro ubicaciones: **Inferior-derecha** es la posición más común y esperada. Es donde típicamente se ubican los widgets de chat en vivo, así que los visitantes están condicionados a buscar ahí opciones de ayuda y contacto. Esta es la opción predeterminada y recomendada para la mayoría de los casos de uso. **Inferior-izquierda** es la alternativa cuando la inferior-derecha está ocupada — quizás ya tienes un widget de chat en vivo ahí. Inferior-izquierda es visible y accesible sin entrar en conflicto con otros elementos flotantes. **Superior-derecha** es poco común pero útil para anuncios o encuestas donde quieres mayor visibilidad. Un botón posicionado arriba es más probable que se note inmediatamente, lo que puede ser bueno para encuestas de tiempo limitado o solicitudes de feedback urgentes. **Superior-izquierda** es la posición menos común. Puede funcionar para idiomas de lectura izquierda a derecha donde el ojo naturalmente comienza arriba a la izquierda, pero la mayoría de los usuarios no están condicionados a encontrar elementos interactivos ahí. ### Personalizando el Botón El botón activador del popup es personalizable de dos maneras. **Texto del botón** controla lo que dice el botón. "Contáctanos" para formularios de leads. "Feedback" para formularios de encuesta. "Obtener Ayuda" para formularios de soporte. "Regístrate Ahora" para registros de eventos. Mantenlo corto — dos a tres palabras máximo. El botón necesita ser legible en tamaños pequeños en dispositivos móviles. **Color del botón** controla el color de fondo del botón. Hazlo coincidir con el color primario de tu marca para consistencia, o usa un color contrastante para que destaque contra el diseño de tu página. Un botón brillante en una página apagada atrae la atención. Un botón apagado en una página brillante se mezcla hasta que el visitante está listo para buscarlo. El modal en sí hereda el [tema personalizado](/blog/custom-themes-branding) de tu formulario, así que los colores, fuentes y estilo que configuraste para el formulario aplican cuando se abre. El botón los trae; el tema los recibe. ## Eligiendo el Método Correcto El árbol de decisión es directo. **¿El formulario es el propósito principal de la página?** Usa incrustación por etiqueta script (en línea). El formulario está al centro, con tamaño dinámico e integrado visualmente. **¿El formulario es un elemento entre muchos en la página?** Usa incrustación por iframe. Es simple de implementar, aislado de los estilos de la página y funciona en todas las plataformas. **¿El formulario debería estar disponible pero no inmediatamente visible?** Usa incrustación popup. El botón activador proporciona acceso sin consumir espacio del layout. ### Combinando Métodos No estás limitado a un método. Un sitio web podría usar incrustación por etiqueta script para la página de Contacto (donde el formulario es el propósito de la página), incrustación por iframe para un widget en la barra lateral del blog (donde el formulario es complementario), e incrustación popup en páginas de productos (donde el formulario debería estar disponible pero no dominante). Cada página tiene diferentes prioridades, y cada método de incrustación sirve diferentes prioridades. Haz coincidir el método con el contexto. ## Consideraciones Técnicas ### Rendimiento Las incrustaciones por iframe son las más ligeras en tu página — cargan el formulario en un contexto separado que no compite con el renderizado de tu página. Las incrustaciones por script agregan ejecución de JavaScript a la carga de tu página, aunque el impacto es mínimo. Las incrustaciones popup cargan el formulario al activarse en lugar de al cargar la página, lo que significa que tienen cero impacto en el rendimiento hasta que se hace clic en el botón. ### Responsividad Móvil Los tres métodos de incrustación son responsivos. Los iframes escalan con el ancho de su contenedor. Las incrustaciones por script se adaptan a su elemento padre. Los popups se muestran como modales de pantalla completa en dispositivos móviles, proporcionando una experiencia de formulario enfocada y sin distracciones en pantallas pequeñas. ### SEO Las incrustaciones por etiqueta script (en línea) colocan el contenido del formulario en el DOM de tu página, lo que significa que los motores de búsqueda pueden ver los campos del formulario — potencialmente beneficioso para páginas donde el formulario es la llamada a la acción principal. Los iframes y popups mantienen el contenido del formulario fuera del DOM de la página, lo cual es neutral para SEO. ### Múltiples Formularios Puedes incrustar múltiples formularios en la misma página usando cualquier combinación de métodos. Dos formularios en línea en diferentes secciones. Un iframe en la barra lateral y un popup en la esquina. Un formulario de leads en línea en la sección hero y un formulario de feedback en popup en el footer. Cada formulario opera independientemente. ## Primeros Pasos Construir tu formulario en el [constructor drag-and-drop](/blog/drag-and-drop-form-builder), aplicar tu [tema de marca](/blog/custom-themes-branding), e incrustarlo en tu sitio es un flujo de trabajo que toma minutos de principio a fin. Las opciones de incrustación están disponibles en el panel de configuración del formulario una vez que tu formulario está listo para publicar. Elige el método que coincida con tu página. Pega el código. Tu formulario está activo.