Comment intégrer un formulaire sur n'importe quel site

Une fois que vous avez fini de créer un formulaire en ligne, la question suivante est presque toujours la même : comment le mettre concrètement sur votre site ? La réponse dépend de ce que vous voulez que le formulaire fasse — s'intégrer dans une page existante, ou exister seul — et la mécanique est plus simple qu'on ne le pense.

Deux façons de présenter un formulaire à vos visiteurs

Chaque formulaire sur le web atteint ses visiteurs de l'une de ces deux manières, et il vaut mieux choisir délibérément plutôt que d'utiliser par défaut la première méthode essayée.

• Intégration en ligne (inline) — le formulaire s'affiche directement à l'intérieur d'une page que vous avez déjà, aux côtés de votre contenu, de votre navigation et de votre identité visuelle. C'est le bon choix pour une page de contact, un pied de page, une page tarifaire, ou partout où le formulaire vient soutenir une page qui a déjà un objectif propre.
• Lien hébergé partageable — le formulaire vit sur sa propre page, hébergée pour vous, sans rien d'autre autour. C'est le bon choix quand le formulaire *est* la destination : une campagne e-mail, un QR code sur un flyer, un lien dans une bio de réseau social, ou une enquête que vous envoyez directement à une liste de contacts.

La plupart des sites veulent une intégration en ligne pour tout ce qui est rattaché à une page existante — un modèle de formulaire de contact, par exemple, a sa place sur votre page Contact, pas isolé de son côté. Optez pour le lien hébergé lorsqu'il n'y a pas de page dans laquelle intégrer le formulaire, ou lorsque vous voulez spécifiquement une page sans distraction, avec uniquement le formulaire dessus.

Comment intégrer un formulaire : la marche à suivre générale

Quelle que soit la plateforme, intégrer un formulaire suit le même schéma en trois étapes. Les détails de la troisième étape varient selon le créateur de site, comme nous le verrons plus bas.

1. 1Publiez votre formulaire. Un formulaire à l'état de brouillon ne peut pas être intégré — publiez-le d'abord pour qu'il ait une version en ligne, fonctionnelle, vers laquelle pointer.
2. 2Ouvrez Partager et copiez le code d'intégration. Une fois publié, cherchez une option Partager ou Intégrer à côté de votre formulaire. Elle vous donnera un court extrait de code — généralement une iframe — ainsi qu'un simple lien hébergé.
3. 3Collez l'extrait dans votre page. Déposez le code d'intégration dans le HTML de la page où vous voulez que le formulaire apparaisse. Sur la plupart des créateurs de site modernes, cela signifie ajouter un bloc HTML ou d'intégration au bon endroit dans l'éditeur de page.

Intégrer sur les plateformes courantes

Le mécanisme sous-jacent — une iframe pointant vers votre formulaire publié — est identique partout. Ce qui change, c'est l'endroit où vous le collez.

• WordPress — ajoutez un bloc HTML personnalisé (éditeur de blocs) ou un widget HTML (thèmes classiques) à la page ou à l'article, puis collez le code d'intégration à l'intérieur.
• Webflow — ajoutez un élément Embed à la page, placez-le à l'endroit voulu, et collez le code dans le panneau de code de l'élément d'intégration.
• Squarespace — ajoutez un bloc de code à la section de la page, basculez-le en HTML, et collez-y le code d'intégration.
• Site en HTML pur — collez l'extrait directement dans le balisage de votre page, à l'endroit où le formulaire doit s'afficher.
• Notion, Linktree et outils de bio-liens similaires — ces outils ne prennent généralement pas en charge les intégrations HTML brutes, utilisez donc le lien hébergé plutôt que le code d'intégration en ligne.

Si votre plateforme ne prend pas du tout en charge le HTML personnalisé ou les blocs d'intégration, c'est le signe qu'il faut utiliser le lien partageable — soit comme simple hyperlien, soit comme bouton qui pointe vers lui.

Vérifiez que c'est bien responsive

Une intégration de formulaire doit s'adapter à la largeur du conteneur dans lequel elle se trouve, et s'empiler proprement sur un écran de téléphone plutôt que de forcer un défilement horizontal. C'est le comportement par défaut d'une intégration bien conçue — vous ne devriez pas avoir besoin d'ajuster manuellement la largeur ou la hauteur dans la plupart des cas. Si votre formulaire s'affiche un jour avec une largeur en pixels fixe qui déborde sur mobile, c'est la première chose à vérifier dans votre code d'intégration ou dans la colonne de page qui l'accueille.

Ne laissez pas l'intégration ralentir votre page

Une intégration en iframe ne charge que le formulaire lui-même, pas toute votre page, elle ne devrait donc pas affecter significativement le temps de chargement de votre site. Ce qui *nuit vraiment* à la vitesse de la page est évitable : empiler plusieurs intégrations lourdes sur une même page, placer le formulaire avant du contenu qui devrait se charger en premier, ou l'intégrer sur une page déjà surchargée de scripts. Gardez la page autour du formulaire légère, et l'intégration elle-même ne sera pas le goulot d'étranglement.

Testez toujours sur un vrai téléphone

Les fenêtres d'aperçu des créateurs de site ne reflètent pas toujours le comportement réel d'une intégration sur un appareil physique. Avant de considérer la tâche terminée, ouvrez la page en ligne sur votre propre téléphone et vérifiez que les champs sont bien cliquables, que le clavier ne recouvre pas le champ dans lequel vous tapez, et que tout le formulaire est accessible sans zoom au pincement. Le mobile est l'endroit où les formulaires intégrés se cassent le plus souvent, et c'est aussi là qu'une grande partie de votre trafic les rencontrera — voir réduire l'abandon de formulaire pour en savoir plus sur l'importance de ce point pour les taux de complétion.

Quand utiliser un lien hébergé à la place

Passez complètement à côté de l'intégration et partagez simplement le lien dans ces cas : vous envoyez le formulaire par e-mail ou message privé, vous le mettez derrière un QR code, vous le liez depuis une bio de réseau social, ou vous voulez une expérience plein écran, épurée, sans navigation du site pour capter l'attention. Un lien hébergé est aussi pratique comme solution de repli — si vous n'êtes pas sûr qu'une intégration s'affichera correctement sur une plateforme donnée, le lien fonctionne toujours.