Créer et positionner des formulaires coulissants

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

Un formulaire coulissant est un formulaire d’inscription compact qui apparaît sur un bord ou à une position sélectionnée de la fenêtre du navigateur.

Il attire davantage l’attention qu’un formulaire placé dans la page tout en couvrant une moins grande partie du site web qu’une fenêtre contextuelle centrée. Les formulaires coulissants conviennent bien aux rappels d’inscription à une newsletter, aux réductions, aux mises à jour de produits et aux offres courtes qui doivent rester visibles pendant que le visiteur lit la page.

Ce guide explique les paramètres propres aux formulaires coulissants. Les fonctions communes de mise en page, de contenu, de champs, de balises, de typographie, de calques et de flux d’inscription sont présentées dans le guide principal du générateur de formulaires d’inscription.

Créer un formulaire coulissant

Ouvrez « Signup Forms », cliquez sur « Create Form » et sélectionnez « Slide-in ». Saisissez un nom interne explicite, puis continuez vers le générateur.

Vous pouvez également modifier un formulaire coulissant existant en cliquant sur son nom dans la vue d’ensemble des formulaires d’inscription.

Utilisez un nom tel que « Newsletter du blog – formulaire coulissant », « Rappel d’un nouveau produit » ou « Coupon d’été – formulaire coulissant ». Le nom interne vous aide à gérer le formulaire et n’est pas automatiquement affiché aux visiteurs.

Choisir un modèle de formulaire coulissant

Les formulaires coulissants proposent un formulaire vierge, un formulaire standard et quatre modèles conçus :

• Rappel épuré
• Offre sombre
• Coupon chaleureux
• Note minimaliste

Les modèles sont conçus pour des messages compacts, mais chaque élément reste modifiable. Vous pouvez changer le contenu, les champs, les couleurs, la typographie, la bordure, l’espacement et le bouton d’envoi après avoir choisi un modèle de départ.

Concevoir le formulaire coulissant

Utilisez le générateur visuel pour organiser le formulaire coulissant. Il peut contenir le formulaire d’inscription ainsi que du texte, une image, une vidéo, une liste, un bouton, des liens sociaux, un compteur d’abonnés, un espace ou un séparateur.

L’espace est plus limité que sur une page d’atterrissage ou un formulaire intégré large. Gardez l’offre ciblée et évitez d’ajouter du contenu qui oblige les visiteurs à chercher les champs ou le bouton d’envoi.

Sélectionnez le bloc du formulaire d’inscription pour configurer les champs, les informations obligatoires, les balises masquées, 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 du formulaire coulissant et les paramètres par défaut de son apparence générale.

Une mise en page à une seule colonne est généralement la plus claire. Si vous utilisez plusieurs colonnes, vérifiez attentivement leur empilement sur les écrans étroits.

Choisir la position à l’écran

Sélectionnez le bloc du formulaire d’inscription et ouvrez « Widget Settings ». Le sélecteur de position propose une grille de trois cases sur trois :

• En haut à gauche, en haut au centre ou en haut à droite
• Au centre à gauche, au centre ou au centre à droite
• En bas à gauche, en bas au centre ou en bas à droite

Choisissez une position qui ne masque pas les commandes importantes du site web. Vérifiez les avis relatifs aux cookies, les widgets de chat, la navigation, les boutons du panier et les autres éléments fixes avant de prendre votre décision.

Sur les écrans mobiles étroits, Maildroppa simplifie le positionnement afin que le formulaire coulissant s’adapte à la largeur disponible. Les positions en haut restent en haut ; les autres positions sont présentées depuis le bord inférieur. Testez toujours le résultat sur un petit écran au lieu de vous fier uniquement à la position sur ordinateur.

Définir le délai d’affichage

« Display Delay » définit le nombre de secondes que Maildroppa attend avant d’afficher le formulaire coulissant sur une page de site web intégrée.

Utilisez 0 lorsque le formulaire coulissant doit être disponible immédiatement. Saisissez un délai plus long lorsque les visiteurs doivent d’abord avoir le temps d’interagir avec la page. Le générateur accepte un délai maximal de 86 400 secondes.

Un délai court peut être efficace pour un simple rappel d’inscription à une newsletter. Pour un article plus long, une apparition plus tardive peut sembler plus naturelle et rendre l’offre plus pertinente pour les lecteurs déjà intéressés.

Définir la fréquence d’affichage

« Display Frequency » contrôle la période après laquelle le formulaire coulissant peut de nouveau être affiché au même visiteur. Vous pouvez choisir :

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

Utilisez une fréquence adaptée à l’offre. Une promotion temporaire peut nécessiter un intervalle plus court, tandis qu’un rappel général d’inscription à une newsletter n’a généralement pas besoin d’apparaître à chaque visite.

La fréquence est enregistrée dans le navigateur du visiteur. Un autre navigateur, une fenêtre de navigation privée ou un stockage de navigateur effacé est considéré comme un historique de visites différent.

Connecter le flux d’inscription

Vérifiez le flux d’inscription attribué dans l’en-tête du générateur. Il définit la réponse après l’envoi, l’e-mail de double confirmation et ce qui se passe après la confirmation.

Vous pouvez sélectionner un flux existant, modifier le flux actuel ou en créer un spécialement pour ce formulaire coulissant. Si le flux est partagé par plusieurs formulaires, ses modifications les affectent tous.

Prévisualiser et enregistrer

Cliquez sur « Preview » pour examiner le formulaire coulissant avant de l’ajouter à votre site web. Vérifiez la position sélectionnée, le comportement à l’ouverture, l’ordre des champs, le contrôle de fermeture et la réponse complète après l’inscription.

Cliquez sur « Save changes » lorsque le formulaire et les paramètres de Widget Settings sont prêts. Revenez ensuite à la vue d’ensemble des formulaires d’inscription.

Activer et intégrer le formulaire coulissant

Activez le formulaire coulissant depuis son menu d’actions à trois points s’il ne l’est pas déjà. Cliquez sur « Show Code Snippet » et copiez l’intégralité du code depuis l’onglet « JavaScript ».

Ajoutez ce script à chaque page du site web sur laquelle le formulaire coulissant doit être disponible. Contrairement à un formulaire intégré, la position exacte du script dans la page ne détermine pas la position visible du formulaire coulissant. C’est la position choisie dans Widget Settings qui contrôle son emplacement.

L’onglet « HTML » fournit le balisage généré pour les implémentations personnalisées. Testez attentivement l’interaction et le flux d’envoi complets si votre site web utilise cette option.

Pour obtenir des instructions générales sur le placement du code, consultez Construire et intégrer un formulaire intégré.

Tester le formulaire coulissant sur votre site web

Après avoir ajouté le code, testez la page réelle du site web :

1. Vérifiez que le formulaire coulissant apparaît après le délai sélectionné.
2. Confirmez sa position sur un écran large.
3. Vérifiez sa position et sa largeur adaptées sur un écran étroit.
4. Assurez-vous qu’il ne masque pas la navigation, les commandes relatives aux cookies, les boutons de chat ni d’autres actions importantes.
5. Testez l’ouverture et la fermeture du formulaire coulissant.
6. Envoyez le formulaire et terminez le processus de double confirmation.
7. Vérifiez l’abonné et les balises masquées dans Maildroppa.

Le paramètre de fréquence peut empêcher le formulaire de réapparaître lors de tests répétés. Utilisez une fenêtre de navigation privée ou effacez le stockage de navigateur concerné lorsque vous devez simuler un nouveau visiteur.

Mettre à jour ou désactiver le formulaire coulissant

Ouvrez le même formulaire coulissant dans Maildroppa, apportez les modifications, prévisualisez-les, puis cliquez sur « Save changes ». L’extrait JavaScript continue d’utiliser le même identifiant de formulaire et charge la configuration enregistrée.

Choisissez « Deactivate » dans la vue d’ensemble des formulaires d’inscription lorsque le formulaire coulissant doit être mis hors ligne sans être supprimé. Supprimez également son script du site web si vous ne prévoyez plus de l’y utiliser.