Créer et afficher des formulaires contextuels

Published: 16 juillet 2026 · Last updated: 21 juillet 2026 · By Marcus Biel

Une fenêtre contextuelle s’affiche au-dessus du contenu de votre site web. Elle place l’offre d’inscription directement dans le champ de vision du visiteur tout en laissant la page sous-jacente en place.

Les fenêtres contextuelles sont utiles pour les offres d’abonnement à une newsletter, les remises, les inscriptions à des événements, les aimants à prospects et autres appels à l’action ciblés. Comme elles interrompent l’expérience habituelle de la page, le moment et la fréquence d’affichage sont aussi importants que le design.

Ce guide explique les paramètres spécifiques aux fenêtres contextuelles. Les mises en page, blocs de contenu, champs des abonnés, tags, typographie, calques et parcours d’inscription sont présentés dans le guide principal du générateur de formulaires d’inscription.

Créer une fenêtre contextuelle

Ouvrez « Signup Forms », cliquez sur « Create Form » et sélectionnez « Popup ». Saisissez un nom interne explicite, puis accédez au générateur.

Vous pouvez également modifier une fenêtre contextuelle existante en cliquant sur son nom dans l’aperçu des formulaires d’inscription.

Utilisez un nom qui décrit clairement l’offre ou l’emplacement, comme « Popup de remise sur la page d’accueil », « Popup d’inscription au webinaire » ou « Popup de téléchargement du guide ». Le nom interne n’est pas automatiquement affiché aux visiteurs.

Choisir un modèle de fenêtre contextuelle

Les fenêtres contextuelles proposent un formulaire vierge, un formulaire standard et quatre modèles conçus :

• Remise épurée
• Guide chaleureux
• Webinaire sombre
• Communauté douce

Choisissez un modèle dont la taille et la structure de contenu correspondent à l’offre. Tous les textes, champs, couleurs, images, espacements et éléments de mise en page peuvent être modifiés par la suite.

Concevoir la fenêtre contextuelle

Utilisez le générateur visuel pour organiser la fenêtre contextuelle. Vous pouvez combiner le formulaire d’inscription avec du texte, des images, une vidéo, des listes, des boutons, des liens sociaux, un compteur d’abonnés, des espaces et des séparateurs.

Veillez à ce que le message principal soit suffisamment court pour être compris immédiatement. Un titre clair, une brève explication et un bouton d’envoi précis sont généralement plus efficaces que plusieurs messages concurrents.

Sélectionnez le bloc du formulaire d’inscription pour configurer les champs, les informations obligatoires, les tags masqués, l’indicateur de progression, le compteur d’abonnés, les champs de saisie et le bouton d’envoi. Ouvrez « Page settings » pour modifier l’arrière-plan général de la fenêtre contextuelle et les paramètres d’apparence par défaut.

La fenêtre contextuelle s’affiche par-dessus le site web avec un contrôle de fermeture. Laissez suffisamment d’espace visuel autour des textes et champs importants afin que le formulaire reste facile à utiliser sur un petit écran.

Configurer le comportement de la fenêtre contextuelle

Sélectionnez le bloc du formulaire d’inscription et ouvrez « Widget Settings ». Cette section contrôle le moment où la fenêtre contextuelle s’affiche et la fréquence à laquelle un visiteur peut la voir.

Délai d’affichage

« Display Delay » définit le nombre de secondes pendant lesquelles Maildroppa attend avant d’afficher la fenêtre contextuelle sur une page web intégrée.

Saisissez 0 pour l’afficher sans délai supplémentaire. Utilisez une valeur plus élevée lorsque les visiteurs doivent avoir le temps de lire la page avant l’apparition de l’offre. Le générateur accepte un délai allant jusqu’à 86 400 secondes.

Choisissez le délai en fonction de la page. Un délai court peut convenir à une page de campagne ciblée, tandis qu’un délai plus long peut être moins intrusif dans un article.

Fréquence d’affichage

« Display Frequency » contrôle la période après laquelle la fenêtre contextuelle peut de nouveau être affichée au même visiteur. Les options disponibles sont les suivantes :

• Toujours
• Une fois par heure
• Une fois par jour
• Une fois par semaine
• Une fois par mois

Utilisez « Always » avec précaution. Une fenêtre contextuelle qui interrompt plusieurs fois le même visiteur peut devenir frustrante. Une fréquence quotidienne ou hebdomadaire constitue souvent un meilleur point de départ pour une offre destinée à un site généraliste.

La fréquence est enregistrée dans le navigateur du visiteur. Un test effectué dans un autre navigateur, une fenêtre de navigation privée ou après l’effacement du stockage du navigateur peut donc produire un résultat différent.

Utiliser l’intention de sortie

Activez « Exit Intent Popup » lorsque la fenêtre contextuelle doit s’ouvrir après que le visiteur a déplacé le pointeur hors de la zone de la page, ce qui indique qu’il est peut-être sur le point de partir.

Lorsque l’intention de sortie est activée, la fenêtre contextuelle attend ce comportement au lieu de suivre le délai d’affichage normal. La fréquence d’affichage sélectionnée empêche toujours qu’elle soit affichée de nouveau trop rapidement.

L’intention de sortie repose sur le déplacement du pointeur et concerne donc principalement les navigateurs sur ordinateur et ordinateur portable. Les appareils tactiles ne fournissent pas le même signal de sortie. Assurez-vous toujours que les visiteurs sur mobile puissent découvrir votre offre d’inscription directement sur la page ou via un autre formulaire approprié.

Ouvrir manuellement une fenêtre contextuelle depuis un élément de page

Une fenêtre contextuelle peut s’ouvrir lorsqu’un visiteur clique sur un bouton, une image ou un lien précis de votre site web. Il s’agit du déclencheur de clic manuel. Il est différent de « Exit Intent Popup », qui réagit lorsque le visiteur déplace le pointeur hors de la page.

Configurez et installez le déclencheur de clic manuel comme suit :

1. Ouvrez la fenêtre contextuelle dans le Signup Form Builder.
2. Cliquez sur le bloc du formulaire d’inscription dans la zone de travail et ouvrez « Settings » à droite.
3. Développez « Widget Settings » et activez « Open popup when a customer clicks a page element ».
4. Cliquez sur « Save changes ».
5. Revenez à l’aperçu des formulaires d’inscription et activez la fenêtre contextuelle si elle est inactive.
6. Cliquez sur « Show Code Snippet » dans la ligne de cette fenêtre contextuelle.

La boîte de dialogue contient les deux valeurs requises sur votre site web :

1. Copiez l’intégralité du code depuis l’onglet « JavaScript » et ajoutez-le à la page du site web sur laquelle la fenêtre contextuelle doit être disponible.
2. Sous le code, copiez l’ID affiché sous « Add this ID to element from which you want to manually trigger Popup ».
3. Ajoutez cette valeur exacte à l’attribut id du bouton, de l’image ou du lien qui doit ouvrir la fenêtre contextuelle.

L’ID suit ce format :

maildroppa-popup-btn-[form-id]

Par exemple :

<button id="maildroppa-popup-btn-[form-id]">Get the guide</button>

Le JavaScript charge la fenêtre contextuelle. L’ID relie la fenêtre contextuelle à l’élément de page sélectionné. Les deux doivent être présents sur la même page publiée. Lorsqu’un visiteur clique sur l’élément portant cet ID exact, le script Maildroppa ouvre la fenêtre contextuelle.

Si le bouton de votre site possède déjà un ID provenant d’un autre système de fenêtres contextuelles, remplacez-le par l’ID de déclenchement Maildroppa lorsque Maildroppa doit gérer le clic. Ne placez pas la fenêtre contextuelle Maildroppa à l’intérieur d’une seconde fenêtre contextuelle fournie par votre générateur de site web.

N’utilisez chaque ID HTML qu’une seule fois par page. Si plusieurs éléments doivent ouvrir la même fenêtre contextuelle, demandez à la personne chargée de l’implémentation du site de relier ces éléments sans dupliquer le même ID.

Relier le parcours d’inscription

Vérifiez le parcours d’inscription attribué dans l’en-tête du générateur. Il contrôle la réponse immédiate après l’envoi, l’e-mail de double confirmation et le résultat après confirmation.

Vous pouvez sélectionner un parcours existant, le modifier ou créer un parcours distinct pour cette fenêtre contextuelle. Un parcours dédié est utile lorsque l’offre nécessite son propre message de confirmation ou la remise d’un aimant à prospects.

Prévisualiser et enregistrer

Cliquez sur « Preview » pour vérifier le design et le comportement de la fenêtre contextuelle sans modifier la version utilisée sur votre site web. Examinez la mise en page, le contrôle de fermeture, l’ordre des champs, l’espace réservé à la validation et la réponse après l’envoi.

Cliquez sur « Save changes » lorsque la fenêtre contextuelle est prête. Revenez ensuite à l’aperçu des formulaires d’inscription.

Activer et intégrer automatiquement la fenêtre contextuelle

Activez la fenêtre contextuelle depuis son menu d’actions à trois points si elle n’est pas déjà active. Cliquez ensuite sur « Show Code Snippet » et copiez l’intégralité du code depuis l’onglet « JavaScript ».

Ajoutez le script à chaque page du site web sur laquelle la fenêtre contextuelle doit être disponible. Le code contient l’ID de formulaire unique de la fenêtre contextuelle et charge sa configuration enregistrée actuelle.

L’onglet « HTML » fournit le balisage généré pour les implémentations personnalisées. Si vous l’utilisez, testez soigneusement tous les comportements et toutes les étapes d’envoi, car le code et les styles de votre site web peuvent modifier le résultat.

Cette section s’applique lorsque la fenêtre contextuelle doit s’ouvrir automatiquement en fonction de son délai d’affichage ou de son comportement d’intention de sortie. Pour un bouton, une image ou un lien qui ouvre la fenêtre contextuelle au clic, consultez

Pour obtenir des instructions générales d’intégration, consultez Créer et intégrer un formulaire intégré.

Tester la fenêtre contextuelle sur votre site web

Testez la fenêtre contextuelle sur la page réelle du site web après avoir ajouté le code :

1. Vérifiez le délai configuré.
2. Testez le bouton de fermeture et le clic en dehors du formulaire.
3. Si l’option est activée, déplacez le pointeur hors de la page pour tester l’intention de sortie.
4. Si l’option est activée, cliquez sur l’élément de page configuré pour tester le déclencheur manuel.
5. Vérifiez la mise en page sur un écran étroit.
6. Envoyez le formulaire et terminez le processus de double confirmation.
7. Vérifiez l’abonné et les tags masqués dans Maildroppa.

Le paramètre de fréquence peut empêcher la fenêtre contextuelle de réapparaître lors de tests répétés. Utilisez une fenêtre de navigation privée ou effacez le stockage du navigateur concerné lorsque vous avez besoin d’une nouvelle visite de test.

Mettre à jour ou désactiver la fenêtre contextuelle

Pour mettre à jour la fenêtre contextuelle, ouvrez-la dans Maildroppa, modifiez son design ou son comportement, prévisualisez-la, puis cliquez sur « Save changes ». L’extrait JavaScript continue d’utiliser le même ID de formulaire.

Pour arrêter temporairement de l’afficher, choisissez « Deactivate » dans le menu d’actions. La désactivation conserve la fenêtre contextuelle et les données de ses rapports précédents. Supprimez également le script ou l’élément déclencheur du site web s’ils ne sont plus nécessaires.