Intégrer Google Forms, Calendly et Typeform à votre site web
Intégrer Google Forms, Calendly et Typeform
Intégrer Google Forms, Calendly et Typeform à un site web | We.Inc
Où trouver le code d'intégration dans Google Forms, Calendly et Typeform, comment adapter chacun aux téléphones, et un outil qui nettoie le code pour vous.
Chaque service vous donne un extrait de code à coller dans votre page. Google Forms vous fournit une iframe via son option Intégrer HTML ; Calendly donne un div et un script via Ajouter au site web ; Typeform donne un div avec data-tf-widget et son script d'intégration. Définissez une hauteur raisonnable, un titre et une largeur de 100% pour qu'il s'adapte aux téléphones.
Où se trouve chaque code d'intégration (en octobre 2026)
Service
Où cliquer
Ce que vous collez
Google Forms
Menu Plus (trois points) > Intégrer HTML > Copier
Une iframe
Calendly
Page de planification > trois points > Ajouter au site web
Un div et une balise script
Typeform
Les options d'intégration dans les paramètres de partage de votre formulaire
Un div avec data-tf-widget et une balise script
Copier le code est la partie facile. Les problèmes arrivent ensuite : un formulaire coupé sur téléphone, une double barre de défilement, une iframe sans titre pour les lecteurs d'écran, ou un widget de réservation qui ralentit la page. Ce guide indique où se trouve chaque code et comment le faire bien fonctionner.
Choisissez le service dans l'outil ci-dessous.
Collez ce que le service vous a donné : le code iframe de Google, votre lien Calendly ou votre lien Typeform.
Définissez la hauteur et un titre court qui décrit le formulaire, et activez le chargement différé si le formulaire se trouve sous la ligne de flottaison.
Copiez le code nettoyé dans un bloc HTML ou d'intégration de votre site et testez-le sur un téléphone.
Donnez un titre à chaque iframe, par exemple Formulaire de contact ou Réserver un appel. Les utilisateurs de lecteurs d'écran l'entendent avant de décider d'y entrer.
Ajoutez loading="lazy" aux iframes placées plus bas dans la page, pour que le formulaire ne se charge pas avant qu'un visiteur fasse défiler jusqu'à lui.
Définissez la largeur à 100% et limitez-la avec max-width plutôt qu'avec une largeur fixe en pixels, sinon le formulaire débordera sur les petits écrans.
Testez un vrai envoi après l'intégration. Un formulaire qui semble correct peut quand même envoyer vers le mauvais compte ou vers une version brouillon.
Questions fréquentes
Pourquoi mon Google Form intégré a-t-il deux barres de défilement ?
L'iframe est moins haute que le formulaire, donc le formulaire défile à l'intérieur pendant que la page défile aussi. Augmentez l'attribut height jusqu'à ce que tout le formulaire tienne, et revérifiez après avoir ajouté des questions, car le cadre ne s'agrandit pas tout seul.
Puis-je styliser un Google Form intégré avec mon propre CSS ?
Non. Le formulaire est une page servie par Google à l'intérieur d'un cadre, et votre feuille de style ne peut pas l'atteindre. Vous pouvez changer son thème dans Google Forms, ou créer votre propre formulaire qui envoie les réponses ailleurs.
Comment éviter que le widget intégré de Calendly soit coupé ?
Le code de Calendly impose une largeur minimale de 320px et une hauteur fixe. Augmentez la hauteur si votre événement pose des questions supplémentaires, ou utilisez les options texte popup ou widget popup pour que l'agenda s'ouvre par-dessus la page.
Quelle intégration Typeform choisir ?
Typeform propose les intégrations inline, pleine page, popup, slider, popover et onglet latéral. Utilisez inline quand le formulaire est l'objet principal de la page, et un popup ou un slider quand il s'agit d'une action secondaire à côté d'autres contenus.
Ces intégrations fonctionnent-elles sur un site créé avec We.Inc ?
Oui. Ajoutez le code dans un bloc HTML ou d'intégration, ou demandez à l'éditeur de placer le formulaire dans une section. Le code est du HTML ordinaire, il se comporte donc comme sur n'importe quel autre site.
Google Forms
Ouvrez le formulaire, choisissez le menu Plus en haut à droite, sélectionnez Intégrer HTML et cliquez sur Copier. La page d'aide de Google décrit ces étapes. Vous obtenez une seule iframe qui pointe vers votre formulaire.
L'iframe copiée a des dimensions fixes en pixels. Remplacez la largeur par 100% avec un max-width pour qu'elle rétrécisse sur téléphone, gardez une hauteur suffisante pour la version la plus longue du formulaire, et ajoutez un titre.
Calendly
Sur votre page de planification, ouvrez le menu à trois points à côté de l'événement et choisissez Ajouter au site web. Calendly propose alors trois styles : intégration inline, widget popup (un bouton flottant) et texte popup (un lien). Vous pouvez aussi masquer votre photo ou les détails de l'événement avant de copier.
Le code inline est un div avec la classe calendly-inline-widget, votre lien dans data-url, et un script depuis assets.calendly.com. Chargez ce script une seule fois par page, même si vous affichez plusieurs widgets.
Typeform
La bibliothèque d'intégration de Typeform lit tout élément portant data-tf-widget et le transforme en formulaire, le code se résume donc à un div et un script. L'identifiant du formulaire est la dernière partie de l'adresse de votre typeform, après /to/.
Pour un bouton qui ouvre le formulaire dans un popup, la bibliothèque expose window.tf.createPopup, qui renvoie des fonctions open, close et toggle que vous pouvez relier à votre propre bouton.
Vitesse et confidentialité
Chaque intégration charge le code d'un autre site et peut déposer les cookies de ce site, mentionnez donc ces services dans votre politique de confidentialité. Si un formulaire se trouve loin en bas de la page, le chargement différé ou un bouton qui l'ouvre garde le premier affichage rapide.
Les trois comparés
Styles d'intégration proposés par chaque service (d'après leur documentation d'aide, octobre 2026)
Service
Styles d'intégration
Redimensionnement automatique ?
Google Forms
Iframe inline
Non, vous définissez la hauteur
Calendly
Inline, widget popup, texte popup
La hauteur inline est fixe, sauf si vous utilisez l'intégration JavaScript avancée avec redimensionnement
Remplacez les adresses d'exemple par les vôtres. Chacun est dimensionné pour s'adapter aux téléphones.
Google Form, pleine largeur avec un titre
Gardez le src fourni par Google ; seuls le dimensionnement, le titre et le chargement différé changent.
Agenda Calendly inline
La structure de l'intégration inline de Calendly : un div avec votre lien et un script.
Typeform inline
Remplacez abc123 par l'identifiant de votre formulaire. Le script met lui-même le widget en forme.
Choisissez Google Forms, Calendly ou Typeform, collez le code ou le lien fourni par le service, et obtenez un code avec un titre, une largeur adaptée aux téléphones et la hauteur que vous avez définie. L'outil ne fait que réécrire du texte ; il ne charge pas le formulaire.
Collez le code iframe de Intégrer HTML
Collez votre lien de planification
Collez votre lien Typeform ou l'identifiant du formulaire
Collez le code iframe de Google Forms (il pointe vers docs.google.com/forms).
Collez votre lien de planification Calendly, par exemple https://calendly.com/your-name/30min.
Collez votre lien Typeform, par exemple https://form.typeform.com/to/abc123, ou simplement l'identifiant du formulaire.