Une fois votre formulaire créé et personnalisé, l’intégrer à votre site web est simple et rapide.
Voici comment procéder :
Étape 1 : accédez aux options d’intégration
Il existe deux façons d’ouvrir les options d’intégration de votre formulaire :
Option 1. Depuis le tableau de bord :
Dans votre tableau de bord Formaloo, repérez le formulaire que vous souhaitez intégrer.
Cliquez sur le bouton Embed à côté de ce formulaire. Le panneau Embed s’ouvre : vous y trouverez le lien public du formulaire et différentes options d’intégration.
Option 2. Depuis l’éditeur de formulaire :
Ouvrez votre formulaire dans l’éditeur de formulaire.
En haut de l’éditeur, cliquez sur le bouton Share, puis sélectionnez la section Embed. Le même panneau d’intégration s’affiche, avec le lien de votre formulaire et les options d’intégration.
Vous pouvez alors choisir comment intégrer le formulaire à votre site et accéder au code correspondant à la méthode d’intégration de votre choix.
Étape 2 : choisissez votre méthode d’intégration
Dans le panneau d’intégration, choisissez la méthode la mieux adaptée à votre site web :
1. Lien intégré (URL publique)
Utilisez cette méthode si vous voulez que le formulaire s’ouvre sur sa propre page (par exemple depuis un bouton « Réserver une démo »).
Copiez le lien public
Collez-le sous forme de lien hypertexte sur votre site web
2. Intégration iframe
Utilisez cette méthode si vous voulez que le formulaire s’affiche directement dans une section précise de votre page.
Sélectionnez Iframe dans le menu déroulant
Définissez la hauteur en pixels, de manière généreuse : toute hauteur inférieure à celle de votre formulaire fera apparaître une barre de défilement dans l’intégration
Ajustez les options ci-dessous
Cliquez sur Get the code et collez le code dans le HTML de votre site web ou dans un bloc d’intégration
Options de l’intégration iframe
Option | Fonction |
Embed width (largeur) | Définit la part du conteneur hôte occupée par le formulaire. S’applique uniquement lorsque fill container width est désactivé. |
Height (hauteur) | Définit une hauteur fixe en pixels. |
Hide form title | Masque le titre du formulaire et sa description ; utile lorsque votre page comporte déjà un titre au-dessus du formulaire. |
Hide cover and logo | Masque l’image de couverture et le logo de votre espace de travail, pour que l’intégration n’affiche que les champs. |
Fill container width | Étire le formulaire pour qu’il remplisse son conteneur hôte. |
Transparent background | Le formulaire reprend la couleur d’arrière-plan de votre page au lieu d’utiliser la sienne. |
Skip welcome page | Démarre le formulaire directement à la première question au lieu de l’écran d’accueil. Utile lorsque votre page présente déjà le formulaire. (pour les formulaires affichant une question à la fois) |
3. Intégration par script
Utilisez cette méthode si vous voulez une intégration légère qui se met à jour automatiquement lorsque vous modifiez le formulaire.
Sélectionnez Script dans le menu déroulant
Activez dynamic height pour que l’intégration s’agrandisse avec votre formulaire
Ajustez les autres options ci-dessous
Cliquez sur Get the code et collez le code dans le HTML de votre site web ou dans un bloc d’intégration
Options de l’intégration par script
Option | Fonction |
Embed width (largeur) | Définit la part du conteneur hôte occupée par le formulaire. S’applique uniquement lorsque fill container width est désactivé. |
Height (hauteur) | Définit une hauteur fixe en pixels. N’apparaît que lorsque dynamic height est désactivé. |
Dynamic height | L’intégration s’agrandit avec le contenu du formulaire : les formulaires longs ne sont jamais coupés et vous n’avez pas à deviner une hauteur en pixels. |
Hide form title | Masque le titre du formulaire et sa description. |
Hide cover and logo | Masque l’image de couverture et le logo de votre espace de travail. |
Fill container width | Étire le formulaire pour qu’il remplisse son conteneur hôte. Activé par défaut. |
Transparent background | Le formulaire reprend la couleur d’arrière-plan de votre page au lieu d’utiliser la sienne. |
Skip welcome page | Démarre le formulaire directement à la première question au lieu de l’écran d’accueil. Utile lorsque votre page présente déjà le formulaire. (pour les formulaires affichant une question à la fois) |
💡 Avec les mises en page gauche et droite, cette option masque le logo mais conserve l’image. Supprimer l’image transformerait la mise en page en disposition haut ou centre, alors que le formulaire intégré doit correspondre à l’apparence réelle de votre formulaire. Pour masquer aussi l’image, supprimez l’image de couverture du formulaire ou passez à une mise en page haut ou centre.
4. Intégration en chatbot
Utilisez cette méthode si vous voulez un widget flottant de type chat (idéal pour capter des leads et répondre à des questions rapides).
Cliquez sur l’onglet Chatbot
Cliquez sur Get code
Collez le code dans votre site web (de nombreux sites le placent dans un pied de page global pour qu’il se charge sur toutes les pages)
Étape 3 : copiez et collez le code dans votre site web
Sélectionnez la méthode de votre choix, copiez le code et collez-le dans le HTML de votre site web, à l’endroit où vous souhaitez que le formulaire apparaisse.
💡 Astuce : après avoir intégré votre formulaire, nous vous conseillons de le tester sur votre site web réel pour vérifier qu’il s’affiche correctement et que ses dimensions conviennent à votre mise en page.
Ouvrez votre page dans un navigateur (sur ordinateur et sur mobile, le cas échéant) et vérifiez que le formulaire est entièrement visible et bien présenté. S’il est coupé ou affiche des barres de défilement, revenez ajuster les valeurs de largeur ou de hauteur dans votre code d’intégration.