Insertar con iframe

Inserta tu formulario de contacto directamente en cualquier página web con un iframe para una integración fluida.

Obtener el código del iframe

Ve a Gestión de formularios (/admin/form)
Haz clic en la pestaña Insertar
Busca la sección Inserción con iframe
Copia el código del iframe generado

Código básico del iframe

El código estándar del iframe:

<iframe 
  src="https://supportretriever.com/form/your-form-id" 
  width="100%" 
  height="600" 
  frameborder="0" 
  style="border: none;">
</iframe>

Atributos del iframe

Ancho y alto

width="100%" - El formulario ocupa todo el ancho del contenedor
height="600" - Altura por defecto (ajusta según necesites)

Estilos

frameborder="0" - Quita el borde por defecto
style="border: none;" - Evita que aparezca borde

Personalizar dimensiones

Ajusta el tamaño del iframe a tu diseño:

<!-- Barra lateral estrecha -->
<iframe 
  src="https://supportretriever.com/form/your-form-id" 
  width="400" 
  height="800" 
  frameborder="0" 
  style="border: none;">
</iframe>

<!-- Sección a ancho completo -->
<iframe 
  src="https://supportretriever.com/form/your-form-id" 
  width="100%" 
  height="700" 
  frameborder="0" 
  style="border: none;">
</iframe>

Ejemplos de implementación

En HTML

<section class="contact-section">
  <h2>Contactar</h2>
  <iframe 
    src="https://supportretriever.com/form/your-form-id" 
    width="100%" 
    height="600" 
    frameborder="0" 
    style="border: none;">
  </iframe>
</section>

En React/Next.js

<iframe
  src="https://supportretriever.com/form/your-form-id"
  width="100%"
  height="600"
  frameBorder="0"
  style={{ border: 'none' }}
  title="Contact Formulario"
/>

En WordPress

Añade un bloque HTML personalizado
Pega el código del iframe
Publica la página

En Webflow

Añade un elemento Insertar
Pega el código del iframe
Ajusta las dimensiones en el diseñador

Diseño responsivo

Para inserciones adaptadas a móvil, usa técnicas responsivas:

<div style="position: relative; padding-bottom: 100%; height: 0; overflow: hidden;">
  <iframe 
    src="https://supportretriever.com/form/your-form-id" 
    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"
    frameborder="0">
  </iframe>
</div>

O con CSS:

.contact-form-container {
  position: relative;
  padding-bottom: 100%;
  height: 0;
  overflow: hidden;
}

.contact-form-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

Estilizar el contenedor

Envuelve el iframe en un contenedor con estilo:

<div class="form-wrapper" style="max-width: 800px; margin: 0 auto; padding: 20px;">
  <iframe 
    src="https://supportretriever.com/form/your-form-id" 
    width="100%" 
    height="600" 
    frameborder="0" 
    style="border: none; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1);">
  </iframe>
</div>

Ventajas de insertar con iframe

Integración fluida: El formulario forma parte de tu página
Sin redirecciones: Los usuarios se quedan en tu sitio
Actualizaciones fáciles: Los cambios del formulario se reflejan automáticamente
Estilos aislados: Los estilos del formulario no chocan con tu sitio

Consideraciones

Altura: Asegura que la altura del iframe sea suficiente para el formulario
Móvil: Prueba en dispositivos móviles para una correcta visualización
Carga: El contenido del iframe se carga por separado de tu página
Seguridad: El sandbox del iframe se gestiona automáticamente

Probar la inserción

Pega el código del iframe en tu página
Previsualiza en escritorio y móvil
Prueba el envío del formulario
Verifica que recibes el envío
Comprueba que el estilo del formulario encaja con tu marca