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 ?
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 ou code de réduction).
💡 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.
Fréquence
Définissez la fréquence à laquelle le formulaire réapparaît pour le même visiteur :
Une fois par session : Se ferme après dismissal ; réapparaît lors de la prochaine visite.
Une fois tous les X jours : Se cache pendant 7/14/30 jours après consultation.
Rediriger après soumission
Utilisez Rediriger après soumission pour envoyer automatiquement les visiteurs vers une URL sélectionnée après qu'ils aient soumis le formulaire.
En savoir plus : Paramètres de comportement des formulaires d'inscription.
Étape 4. Personnaliser les paramètres du thème
Faites correspondre le flyout à votre marque :
Disposition du formulaire : Type d'affichage de confirmation = 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 (facultatif)
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 + icône Onglet d'accroche.
Idéal pour : Flyouts d'intention de sortie ou 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 mis en ligne immédiatement sur votre site web.
Avant d'activer, vérifiez :
L'aperçu mobile a l'air bon (testez sur téléphone ou utilisez la vue mobile du constructeur de formulaires).
Les règles de ciblage sont correctes (vous ne voulez pas de flyouts 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 la performance
Après activation, surveillez les résultats dans Rapports Formulaires Ouvrez le rapport dédié de votre flyout.
Indicateurs clés :
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 flyout vs. pop-up pour votre audience.
FAQ
Quelle est la différence entre un flyout 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 + icône 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 flyout 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 faire défiler et naviguer pendant que le flyout reste visible sur le côté.
Puis-je collecter à la fois l'email et le 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 vs. droite) ?
Oui. Aller à Paramètres du thème → Mise en page du formulaire → Position et sélectionnez Gauche ou Droite. Cela détermine quel bord de l'écran le flyout glisse.
Puis-je rediriger les visiteurs vers une page de remerciement après l'inscription ?
Oui. Configurez vos paramètres de redirection sousParamètres de comportement Rediriger après soumission.
Puis-je programmer mon flyout pour qu'il ne s'affiche que pendant des dates spécifiques (par exemple, le Black Friday) ?
Oui. Aller à Comportement → Planifier et définir 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].