Partage & Publication
Intégration & Popups
Intégrez votre formulaire dans n’importe quelle page web sous forme d’intégration inline ou de popup en superposition. Vous le configurez dans le panneau Partager et collez un seul extrait dans votre site.
Les deux extraits sont construits à partir du lien de partage que vous avez sélectionné : ils héritent donc de l’expiration, de la limite de réponses, du domaine personnalisé et des statistiques de ce lien. Créez d’abord le lien — voir liens de partage. Les valeurs par défaut des paramètres de requête font exception : elles ne sont pas ajoutées aux extraits d’intégration ou de popup.
Intégration inline
Une intégration inline place votre formulaire directement dans une page via un iframe. Ouvrez le panneau Partager, cliquez sur la carte Intégrer, et copiez l’extrait généré dans le HTML de votre site.
Mise en page
| Paramètre | Ce qu'il fait |
|---|---|
| Hauteur (px) | Hauteur de l’iframe en pixels. Valeur par défaut : 600. |
| Ajustement automatique de la hauteur | Ajuste la hauteur de l’iframe au contenu du formulaire, pour que les répondants ne voient jamais de barre de défilement dans l’intégration. Désactivé par défaut. L’activer ajoute un petit script à l’extrait. |
| Chargement différé | Diffère le chargement jusqu’à ce que l’iframe soit visible, en ajoutant loading="lazy". Désactivé par défaut. Accélère le chargement initial de la page lorsque le formulaire se trouve plus bas. |
Affichage
| Paramètre | Ce qu'il fait |
|---|---|
| Masquer l’image de couverture | Supprime l’image de couverture du formulaire dans l’intégration. Utile lorsque votre page hôte a déjà son propre en-tête. |
| Masquer le logo | Supprime le logo du formulaire dans l’intégration. |
| Thème de couleurs | Laisser l’utilisateur choisir (par défaut, suit la préférence système du visiteur), Mode sombre ou Mode clair. Voir Thème de couleurs ci-dessous. |
Cliquez sur Afficher le code pour voir le HTML généré. Utilisez Copier le code d’intégration pour le copier, puis collez-le dans votre site. Rétablir les valeurs par défaut restaure tous les réglages.
Ce que contient l’extrait
Avec l’ajustement automatique désactivé, l’extrait est un simple iframe qui pointe vers votre lien de partage avec ?embed=1
ajouté. Les options d’affichage ajoutent leurs propres paramètres : hideCover=1, hideLogo=1, et
theme=dark ou theme=light.
<iframe src="https://form.formbase.so/Abc12XYz?embed=1" width="100%" height="600" style="border: none;"></iframe>Avec l’ajustement automatique activé, l’iframe est enveloppé dans un div suivi d’un script. Le formulaire intégré envoie un
message formbase:resize à chaque changement de hauteur ; le script vérifie l’origine du message et la frame émettrice, puis
ajuste la hauteur de l’iframe. Rien d’autre sur votre page n’est touché, et aucun script externe n’est chargé.
Popup
Un popup affiche votre formulaire en superposition sur votre page. Ouvrez le panneau Partager, cliquez sur la carte Popup, configurez vos options et collez l’extrait de code généré dans votre site.
Déclencheur
Choisissez comment le popup s’ouvre :
| Déclencheur | Comment il fonctionne |
|---|---|
| Lorsqu’une fonction est appelée | Par défaut. L’extrait définit une fonction globale nommée d’après le code de votre lien de partage ou votre slug personnalisé — par exemple window.openFormbasePopup_Abc12XYz. Appelez-la depuis un bouton, un lien, ou n’importe quel gestionnaire d’événement de votre site. |
| Automatiquement au chargement de la page | Le popup s’ouvre une fois le chargement de la page terminé. Deux réglages supplémentaires apparaissent : Délai (secondes) et Afficher une seule fois par session, qui enregistre un indicateur dans le sessionStorage du visiteur pour que le popup ne se rouvre pas à chaque page. |
Mise en page
| Paramètre | Ce qu'il fait |
|---|---|
| Position | Où le popup apparaît à l’écran : Centre, En bas à droite (par défaut), En bas à gauche, En haut à droite ou En haut à gauche. Au centre, le popup fait 80 % de la hauteur de la fenêtre ; dans les quatre coins, il fait 600 px de haut. |
| Largeur (px) | Largeur du popup en pixels, plafonnée à 90 % de la largeur de la fenêtre. Valeur par défaut : 500. |
Affichage
| Paramètre | Ce qu'il fait |
|---|---|
| Masquer l’image de couverture | Supprime l’image de couverture du formulaire dans le popup. |
| Masquer le logo | Supprime le logo du formulaire dans le popup. |
| Thème de couleurs | Les trois mêmes options que pour l’intégration. Voir Thème de couleurs ci-dessous. |
Style du popup
| Paramètre | Ce qu'il fait |
|---|---|
| Opacité de la superposition (%) | Obscurité du fond derrière le popup, de 0 à 100. Valeur par défaut : 50. |
| Rayon des bordures (px) | Arrondi des coins du popup. Valeur par défaut : 12. |
Comportement
| Paramètre | Ce qu'il fait |
|---|---|
| Fermer avec la touche Échap | Activé par défaut. Appuyer sur Échap ferme le popup. |
| Fermer en cliquant sur la superposition | Activé par défaut. Cliquer sur le fond en dehors du popup le ferme. |
| Fermeture automatique après l’envoi | Désactivé par défaut. Le popup se ferme trois secondes après l’envoi du répondant. Le délai est fixe. |
Cliquez sur Afficher le code pour voir l’extrait généré. Utilisez Copier le code de la fenêtre contextuelle pour le copier, puis collez-le dans votre site. Rétablir les valeurs par défaut restaure tous les réglages.
Ce que contient l’extrait
L’extrait du popup est un unique bloc <script> autonome. Il construit la superposition, le bouton de fermeture et
l’iframe en JavaScript pur au moment où le popup s’ouvre — rien n’est ajouté à votre page avant cela, aucune feuille de style n’est
injectée, et aucun script externe n’est chargé. Le commentaire sous le script vous indique le nom de la fonction à appeler :
<!-- Call window.openFormbasePopup_Abc12XYz() to open the form popup -->Un tiret dans un slug personnalisé devient un underscore dans le nom de la fonction, car un tiret n’est pas valide dans un identifiant JavaScript. Copiez le nom depuis le commentaire plutôt que de le déduire vous-même.
Thème de couleurs
Les intégrations et les popups partagent les mêmes trois options, et toutes deux remplacent le thème propre du formulaire à l’intérieur du cadre :
Laisser l’utilisateur choisir — par défaut. Le formulaire suit la préférence sombre/clair du système d’exploitation ou du navigateur du visiteur.
Mode sombre — force le mode sombre quelle que soit la préférence du visiteur.
Mode clair — force le mode clair quelle que soit la préférence du visiteur.
Correspondre au thème de votre site
Si votre site est toujours sombre, réglez l’intégration ou le popup sur Mode sombre pour que le formulaire s’intègre harmonieusement. Si votre site respecte la préférence du visiteur, choisissez Laisser l’utilisateur choisir. Pour thématiser le formulaire lui-même, voir apparence et thèmes.