Inserta Google Forms, Calendly y Typeform en tu web
Insertar Google Forms, Calendly y Typeform
Inserta Google Forms, Calendly y Typeform en una web | We.Inc
Dónde encontrar el código para insertar Google Forms, Calendly y Typeform, cómo adaptar cada uno a los móviles y un generador que limpia el fragmento por ti.
Cada servicio te da un fragmento de código para pegar en tu página. Google Forms te entrega un iframe desde su opción Insertar HTML; Calendly te da un div y un script desde Add to website; Typeform te da un div con data-tf-widget y su script de inserción. Define una altura razonable, un título y un ancho del 100% para que se adapte a los móviles.
Dónde está cada código de inserción (a octubre de 2026)
Servicio
Dónde hacer clic
Qué pegas
Google Forms
Menú Más (tres puntos) > Insertar HTML > Copiar
Un iframe
Calendly
Página de reservas > tres puntos > Add to website
Un div y una etiqueta script
Typeform
Las opciones de inserción en los ajustes para compartir tu formulario
Un div con data-tf-widget y una etiqueta script
Copiar el código es la parte fácil. Los problemas aparecen después: un formulario que se corta en el móvil, una doble barra de desplazamiento, un iframe sin título para los lectores de pantalla o un widget de reservas que ralentiza la página. Esta guía explica dónde está cada código y cómo hacer que se comporte bien.
Elige el servicio en el generador de abajo.
Pega lo que te dio el servicio: el código iframe de Google, tu enlace de Calendly o el enlace de tu typeform.
Define la altura y un título corto que describa el formulario, y activa la carga diferida si el formulario está más abajo de la primera pantalla.
Copia el fragmento limpio en un bloque HTML o de inserción de tu sitio y pruébalo en un móvil.
Pon un título a cada iframe, como Formulario de contacto o Reservar una llamada. Quienes usan lector de pantalla lo oyen antes de decidir si entrar.
Añade loading="lazy" a los iframes que están más abajo en la página, para que el formulario no se cargue hasta que el visitante se acerque al desplazarse.
Define el ancho al 100% y limítalo con max-width en lugar de un ancho fijo en píxeles, o el formulario se desbordará en pantallas pequeñas.
Haz un envío real después de insertarlo. Un formulario que se ve bien puede enviar los datos a la cuenta equivocada o a una versión en borrador.
Preguntas frecuentes
¿Por qué mi Google Form insertado tiene dos barras de desplazamiento?
El iframe es más bajo que el formulario, así que el formulario se desplaza dentro de él mientras la página también se desplaza. Aumenta el atributo height hasta que quepa todo el formulario y vuelve a comprobarlo al añadir preguntas, porque el marco no crece solo.
¿Puedo dar estilo a un Google Form insertado con mi propio CSS?
No. El formulario es una página que sirve Google dentro de un marco, y tu hoja de estilos no puede llegar a su interior. Puedes cambiar su tema dentro de Google Forms o crear tu propio formulario que envíe los datos a otro sitio.
¿Cómo evito que el widget en línea de Calendly se corte?
El propio código de Calendly fija un ancho mínimo de 320px y una altura fija. Aumenta la altura si tu evento hace preguntas adicionales, o usa las opciones de texto emergente o widget emergente para que el calendario se abra sobre la página.
¿Qué inserción de Typeform debo usar?
Typeform ofrece inserciones en línea, de página completa, emergente, deslizante, popover y pestaña lateral. Usa la de en línea cuando el formulario sea el objetivo de la página, y una emergente o deslizante cuando sea una acción secundaria junto a otro contenido.
¿Funcionan estas inserciones en un sitio creado con We.Inc?
Sí. Añade el fragmento en un bloque HTML o de inserción, o pide al editor que coloque el formulario en una sección. El fragmento es HTML normal, así que se comporta igual que en cualquier otro sitio.
Google Forms
Abre el formulario, elige el menú Más arriba a la derecha, selecciona Insertar HTML y pulsa Copiar. La página de ayuda de Google enumera estos pasos. Lo que obtienes es un único iframe que apunta a tu formulario.
El iframe copiado tiene dimensiones fijas en píxeles. Cambia el ancho por 100% con un max-width para que se reduzca en móviles, mantén una altura suficiente para la versión más larga del formulario y añade un título.
Calendly
En tu página de reservas, abre el menú de tres puntos junto al evento y elige Add to website. Calendly ofrece entonces tres estilos: inserción en línea, widget emergente (un botón flotante) y texto emergente (un enlace). También puedes ocultar tu foto o los detalles del evento antes de copiar.
El código en línea es un div con la clase calendly-inline-widget, tu enlace en data-url y un script de assets.calendly.com. Carga ese script una sola vez por página aunque muestres varios widgets.
Typeform
La biblioteca de inserción de Typeform lee cualquier elemento con data-tf-widget y lo convierte en el formulario, así que el fragmento es un div más un script. El id del formulario es la última parte de la dirección de tu typeform, después de /to/.
Para un botón que abra el formulario en una ventana emergente, la biblioteca expone window.tf.createPopup, que devuelve las funciones open, close y toggle que puedes conectar a tu propio botón.
Velocidad y privacidad
Cada inserción carga código de otro sitio y puede crear cookies de ese sitio, así que menciona estos servicios en tu política de privacidad. Si un formulario está muy abajo en la página, la carga diferida o un botón que lo abra mantienen rápida la primera vista.
Los tres comparados
Estilos de inserción que ofrece cada servicio (según su documentación de ayuda, octubre de 2026)
Servicio
Estilos de inserción
¿Se redimensiona solo?
Google Forms
iframe en línea
No, tú defines la altura
Calendly
En línea, widget emergente, texto emergente
La altura en línea es fija salvo que uses la inserción avanzada con JavaScript y resize
Typeform
En línea, página completa, emergente, deslizante, popover, pestaña lateral
La de en línea ocupa la caja que le des
Fragmentos limpios para empezar
Sustituye las direcciones de ejemplo por las tuyas. Cada uno está dimensionado para adaptarse a los móviles.
Google Form, ancho completo y con título
Conserva el src que te da Google; solo cambian el tamaño, el título y la carga diferida.
Calendario en línea de Calendly
La estructura de la inserción en línea de Calendly: un div con tu enlace y un script.
Typeform en línea
Cambia abc123 por el id de tu formulario. El script da estilo al widget por sí mismo.
Elige Google Forms, Calendly o Typeform, pega el código o el enlace que te dio el servicio y obtén un fragmento con título, un ancho adaptado a móviles y la altura que definas. El generador solo reescribe texto; no carga el formulario.
Pega el código iframe de Insertar HTML
Pega tu enlace de reservas
Pega el enlace de tu typeform o el id del formulario
Pega el código iframe de Google Forms (apunta a docs.google.com/forms).
Pega tu enlace de reservas de Calendly, por ejemplo https://calendly.com/your-name/30min.
Pega el enlace de tu typeform, por ejemplo https://form.typeform.com/to/abc123, o solo el id del formulario.