Un formulaire coulissant (flyout) glisse sans effort depuis le bord de l'écran au lieu d'apparaître au centre comme un pop-up traditionnel. Il offre une grande visibilité sans bloquer le contenu, parfait pour les campagnes optimisées pour mobile.
Ce guide montre comment créer, personnaliser et optimiser un formulaire coulissant (flyout) pour votre boutique.
Avant de commencer
Les formulaires déroulants utilisent le même comportement et les mêmes paramètres de thème que les formulaires pop-up. Pour des détails complets sur les éléments, les mises en page, le comportement et la personnalisation du thème, consultez le Guide du Formulaire d'inscription Pop-up.
Le snippet JavaScript d'Omnisend doit être installé sur votre site web. Pour Shopify, BigCommerce ou WooCommerce, cela est ajouté automatiquement lorsque vous connectez votre boutique. Pour les plateformes personnalisées, installez le snippet manuellement.
Pourquoi utiliser un Formulaire coulissant (flyout) ?
Les flyouts offrent trois avantages clés par rapport aux popups centraux :
Entrée non intrusive : Glisse depuis le bord de l'écran au lieu de bloquer le contenu abruptement. Les visiteurs peuvent naviguer pendant que le formulaire reste visible.
Optimisé pour mobile : S'adapte parfaitement aux bords de l'écran sans marges horizontales ni recadrage maladroit.
Visibilité persistante : Reste visible lors du défilement ; l'arrière-plan reste entièrement interactif et cliquable.
🔁 Meilleur pour : Magasins mobiles d'abord, offres d'intention de sortie et campagnes de création de listes subtiles.
Comment créer un Formulaire coulissant (flyout)
Étape 1. Créer un nouveau Formulaire coulissant (flyout)
Allez à Formulaires → Créer un formulaire → Type → Flyout → Choisissez un modèle.
💡 Vous pouvez également changer le style d'un formulaire existant (par exemple, Pop-up en formulaire coulissant) dans les paramètres de thème → Mise en page du formulaire.
Étape 2. Personnalisez votre formulaire
Utilisez le constructeur de formulaires par glisser-déposer pour ajuster :
Articles : Ajouter ou supprimer des champs (email, téléphone, nom), des boutons, des images, des blocs de texte ou des cases à cocher de consentement légal.
Agencements : Choisissez un processus en une étape ou en plusieurs étapes (collectez d'abord l'email, puis le téléphone à l'étape 2). En savoir plus sur les formulaires multi-étapes
Copie : Rédigez des titres orientés vers l'action (par exemple, "Obtenez 15 % de réduction sur votre première commande" au lieu de "Abonnez-vous à notre newsletter").
Message de confirmation : Personnalisez ce que les visiteurs voient après avoir soumis (texte de remerciement, code de réduction ou bouton de redirection).
💡 Astuce : Gardez les champs au minimum – les formulaires uniquement par email convertissent 20 à 30 % de mieux que les versions à plusieurs champs.
Étape 3. Définir les paramètres de comportement
Contrôlez quand, où et à qui votre flyout apparaît :
Déclencheurs d'affichage
Choisissez un ou plusieurs :
Temps sur la page : Afficher après 6 à 10 secondes (recommandé pour les visiteurs de première fois).
Profondeur de défilement : Déclencheur à 50 % de défilement (bon pour les articles de blog).
Intention de sortie : Afficher lorsque les visiteurs s'apprêtent à fermer l'onglet (bureau et mobile).
Déclencheur personnalisé : Utilisez des événements JavaScript pour des scénarios avancés. Voir le guide des déclencheurs personnalisés
Note : Tous les déclencheurs utilisent la logique "OU" – si vous définissez "10 secondes OU 50 % de défilement," le formulaire apparaît lorsque l'une des conditions est remplie.
Ciblage
Décidez qui voit le formulaire :
Tous les visiteurs : Afficher à tout le monde.
Ne pas afficher aux contacts existants : Cibler uniquement les nouveaux visiteurs (recommandé pour éviter d'ennuyer les abonnés).
Ciblage par page : Afficher sur des URL spécifiques (par exemple,
/collections/sale) ou exclure des pages (par exemple,/paiement).Ciblage par localisation : Afficher aux visiteurs dans des pays ou régions spécifiques.
💬 En savoir plus : Paramètres de comportement des formulaires d'inscription.
Fréquence
Définissez à quelle fréquence le formulaire réapparaît pour le même visiteur :
Une fois par session : Se ferme après avoir été rejeté ; réapparaît lors de la prochaine visite.
Une fois tous les X jours : Se cache pendant 7/14/30 jours après consultation.
Étape 4. Personnaliser les paramètres de thème
Faites correspondre le flyout à votre marque :
Mise en page du formulaire : Confirmez le type d'affichage = Flyout. Ajustez la largeur (mobile vs. bureau).
Position : Choisissez le bord gauche ou droit (les flyouts glissent depuis les côtés, pas du centre).
Couleurs : Définissez les couleurs de fond, de bouton et de texte pour correspondre au thème de votre boutique.
Polices : Utilisez vos polices de marque ou les valeurs par défaut d'Omnisend.
Bouton de fermeture : Afficher/masquer le bouton X ; ajuster la couleur et le style.
💬 En savoir plus : Paramètres de thème des formulaires d'inscription.
Étape 5. Ajouter un Onglet d'accroche (Optionnel)
Un onglet d'accroche est un petit bouton qui reste visible après la fermeture du flyout. Lorsqu'il est cliqué, il rouvre le formulaire complet.
Pour ajouter : Faites défiler jusqu'au menu du bas dans le constructeur de formulaires → Ajouter une option → Onglet d'accroche.
💡 Meilleur pour : Les flyouts d'intention de sortie ou les offres de réduction – donne aux visiteurs une seconde chance de s'inscrire sans réactiver le plein glissement.
Étape 6. Activez votre formulaire
Cliquez sur Activer le formulaire dans le menu en haut à gauche. Votre flyout sera immédiatement actif sur votre site web.
Avant d'activer, vérifiez :
L'aperçu mobile a l'air bon (testez sur un téléphone ou utilisez la vue mobile du constructeur de formulaires).
Les règles de ciblage sont correctes (vous ne voulez pas de fenêtres contextuelles sur les pages de paiement).
La case à cocher de consentement légal est activée si nécessaire (conformité RGPD). Voir le guide RGPD.
Suivre les performances
Après activation, surveillez les résultats dans Rapports → Formulaires → Ouvrez le rapport dédié de votre volet.
Principales métriques :
Vues : Combien de visiteurs ont vu le flyout.
Soumissions : Combien ont soumis le formulaire.
Taux d'inscription : Combien se sont inscrits en tant que nouveaux abonnés.
💡 Conseil : Exécutez un Test A/B pour comparer les taux de conversion des flyouts et des pop-ups pour votre Audience.
FAQ
Quelle est la différence entre un déroulant et un pop-up ?
Les flyouts glissent depuis le bord de l'écran ; les popups apparaissent au centre avec un arrière-plan assombri. Les deux utilisent le même ciblage, les déclencheurs d'affichage et les options de personnalisation. Les flyouts sont moins perturbants, surtout sur mobile.
Puis-je ajouter un onglet d'accroche à un flyout ?
Oui. Ajoutez un onglet d'accroche dans le constructeur de formulaires (menu du bas → Ajouter une option → Onglet d'accroche). Après la fermeture du flyout, le bouton d'onglet d'accroche reste visible. Cliquer dessus rouvre le formulaire complet.
Devrais-je utiliser un déroulant ou un pop-up pour les visiteurs mobiles ?
Les flyouts sont meilleurs pour mobile car ils ne bloquent pas tout l'écran. Les visiteurs peuvent défiler et naviguer pendant que le flyout reste visible sur le côté.
Puis-je collecter à la fois des emails et des SMS dans un seul flyout ?
Oui. Add both Email Input and Phone Number fields. For higher completion rates, use a pour collecter l'email à l'étape 1, le téléphone à l'étape 2.
Le flyout fonctionne-t-il avec l'intention de sortie sur mobile ?
Oui. L'intention de sortie sur mobile est basée sur un défilement rapide vers le haut (détecté lorsque les visiteurs glissent pour fermer l'onglet).
Puis-je changer de quel côté le flyout apparaît (gauche ou droite) ?
Oui. Aller à Paramètres du thème → Mise en page du formulaire → Position et sélectionnez Gauche ou Droite. Cela détermine de quel bord de l'écran le flyout glisse.
Puis-je rediriger les visiteurs vers une page de remerciement après l'inscription ?
Formulaires flyout ne prennent pas en charge la redirection automatique. Au lieu de cela, ajoutez un bouton vers votre Message de confirmation (après soumission) qui renvoie à votre page de remerciement. Alternativement, utilisez un Formulaire de Landing Page pour la fonctionnalité de redirection automatique.
Puis-je programmer mon flyout pour qu'il s'affiche uniquement pendant des dates spécifiques (par exemple, le Black Friday) ?
Oui. Aller à Comportement → Calendrier et définissez les dates de début/fin. Votre flyout n'apparaîtra que pendant cette période. Parfait pour les campagnes saisonnières, les ventes flash ou les offres à durée limitée.
Besoin d'aide pour quelque chose ? Notre équipe de support est prête à vous aider via le chat dans l'application ou à [email protected].