Vous construisez vos formulaires dans un outil spécialisé. Maintenant, vous devez placer ce formulaire sur votre site. Vous ne pouvez pas copier-coller le code si votre site utilise une autre plateforme. Vous l'intégrez. Un formulaire intégré s'affiche sur votre site, mais vit ailleurs.
Cet article explique comment intégrer des formulaires, comment fonctionnent les iframes, la sécurité entre domaines et les problèmes courants des formulaires intégrés.
Qu'est-ce qu'un formulaire intégré ?
Un formulaire intégré est un formulaire qui vit sur un serveur mais s'affiche sur un autre site web. Le formulaire est hébergé sur wemasy.fr mais s'affiche sur votre site grâce à une iframe, par exemple <iframe src="https://wemasy.com/form/abc123"></iframe>.
L'iframe crée une fenêtre vers une autre page. Cette page contient le formulaire. Pour l'utilisateur, le formulaire semble être sur votre site. Techniquement, c'est une page séparée dans un conteneur.
Comment fonctionnent les iframes
Une iframe est un cadre intégré. Elle charge une page totalement séparée à l'intérieur de votre page. Cette page séparée a son propre HTML, son propre CSS et son propre JavaScript. Elle est isolée (sandbox) : elle ne peut pas accéder à votre page, et inversement.
Les iframes offrent une isolation de sécurité : l'outil de formulaires ne peut pas accéder aux données de votre page, votre page ne peut pas accéder aux données du formulaire, et si le formulaire plante, votre page ne plante pas. Mais les iframes ont des inconvénients : communication directe limitée entre la page et le formulaire, impact possible sur le SEO (Google peut ne pas indexer le contenu du formulaire), chargement plus lent et absence de prise en charge des cookies entre domaines.
Intégrer un formulaire avec une iframe
La plupart des créateurs de formulaires fournissent un code d'intégration comme <iframe src="https://wemasy.com/form/abc123" width="100%" height="600"></iframe>. Copiez-collez ce code dans le HTML de votre site pour afficher le formulaire dans le conteneur. Un problème courant : une hauteur fixe cause des problèmes de défilement. Si le formulaire est plus long que la hauteur définie, il défile à l'intérieur de l'iframe (mauvaise expérience). Il faudrait connaître la hauteur exacte du formulaire, mais les formulaires grandissent et rétrécissent selon la logique conditionnelle, donc la hauteur n'est pas fixe. La solution : utiliser des iframes à redimensionnement automatique avec postMessage pour faire communiquer l'iframe et la page parente. Quand le formulaire change de taille, il demande à la page parente de redimensionner l'iframe. Le JavaScript de la page parente écoute les messages de l'iframe avec window.addEventListener('message', (e) => { if (e.origin !== 'https://wemasy.com') return; if (e.data.type === 'resize') { iframe.height = e.data.height; } });. Le formulaire dans l'iframe envoie un message avec sa hauteur via parent.postMessage({ type: 'resize', height: form.scrollHeight }, '*');, et l'iframe s'agrandit automatiquement pour s'adapter au contenu du formulaire.
Sécurité entre domaines
Les iframes sont isolées pour des raisons de sécurité. Le formulaire ne peut pas accéder aux données de votre page. Votre page ne peut pas accéder à celles du formulaire. C'est une bonne chose.
Faites attention à l'attribut sandbox sur <iframe src="https://wemasy.com/form/abc123" sandbox="allow-same-origin allow-scripts allow-forms"></iframe>. L'attribut sandbox limite ce que l'iframe peut faire. Allow-same-origin permet à l'iframe d'accéder aux cookies et au stockage de session, allow-scripts permet l'exécution de JavaScript, et allow-forms permet l'envoi du formulaire. N'activez que les autorisations dont vous avez vraiment besoin : le réglage par défaut (toutes les autorisations refusées) est le plus sûr mais casse la plupart des formulaires.
Envoi d'un formulaire intégré
Quand l'utilisateur envoie un formulaire dans une iframe, l'envoi se fait dans l'iframe et le formulaire transmet les données au serveur du créateur de formulaires (pas au vôtre). Votre serveur ne voit jamais les données : l'outil de formulaires les stocke et vous les récupérez plus tard via une API ou une notification par e-mail. Si vous voulez plus de contrôle, il faut intercepter l'envoi. Cela suppose que l'outil de formulaires envoie un postMessage à la page parente avec window.parent.postMessage({ type: 'submit', data: formData }, origin);, et la page parente peut alors faire quelque chose des données (les envoyer à votre serveur, afficher une page de remerciement personnalisée, etc.).
Particularités du mobile pour les formulaires intégrés
Sur mobile, les iframes peuvent poser problème. Le formulaire est plus petit et plus difficile à utiliser. L'iframe peut ne pas se redimensionner correctement si elle ne gère pas le redimensionnement automatique.
Une meilleure approche sur mobile : renvoyer vers un formulaire en pleine page plutôt que d'intégrer une iframe. Détectez la taille de l'écran et affichez un bouton de lien sur mobile, mais intégrez le formulaire sur ordinateur avec if (window.innerWidth < 768) { document.getElementById('form-container').innerHTML = '<a href="...">Ouvrir le formulaire</a>'; } else { // intégrer l'iframe }.
Impact des formulaires intégrés sur les performances
Les iframes ajoutent de la charge. Chaque iframe est une requête HTTP séparée. Elle charge son propre HTML, CSS et JavaScript. Cela ralentit votre page.
Chargez l'iframe en différé, en ne la chargeant que lorsque l'utilisateur s'en approche en défilant, avec <iframe data-src="https://..." style="display: none"></iframe> et window.addEventListener('scroll', () => { if (iframe in viewport && !iframe.src) { iframe.src = iframe.dataset.src; } });. L'iframe ne se charge que quand l'utilisateur va la voir.
Formulaires intégrés ou alternatives : que choisir
Utilisez des formulaires intégrés quand vous ne pouvez pas personnaliser votre site (par exemple sur un créateur de site fermé et hébergé) ou quand vous voulez garder l'outil de formulaires séparé de votre site.
Utilisez des formulaires natifs quand vous contrôlez votre site et voulez de bonnes performances. Un formulaire construit sur votre propre pile technique se charge plus vite et s'intègre mieux.
Utilisez des formulaires hébergés (autonomes) quand vous voulez de la simplicité. Un formulaire sur le domaine du créateur est le plus facile à mettre en place, mais fait moins professionnel.
Comment WEMASY gère les formulaires intégrés
Les formulaires WEMASY peuvent être intégrés sur des sites externes avec des iframes à redimensionnement automatique. Les formulaires sont optimisés pour toutes les tailles d'appareils. Vous pouvez recevoir les réponses dans votre tableau de bord WEMASY, par e-mail ou via des webhooks.
Découvrez les options d'intégration dans votre offre WEMASY.