Comment optimiser les formulaires pop-up et volants pour mobile

Objectif de cet article

Découvrez comment concevoir vos formulaires d’inscription mobiles en suivant les meilleures pratiques de Klaviyo afin de vous assurer que vos formulaires pop-up et volants sont optimisés pour les visiteurs sur mobile.

Les acheteurs en ligne utilisent de plus en plus leurs appareils mobiles pour découvrir de nouvelles boutiques, parcourir des produits et effectuer des achats. Il est donc plus important que jamais de vous assurer que votre site web est aussi beau sur mobile que sur ordinateur, y compris vos formulaires d’inscription.

Avant de commencer

Dans Klaviyo, vous pouvez créer des formulaires qui s’affichent sur tous les appareils (c’est-à-dire qu’ils sont visibles sur les ordinateurs de bureau et les appareils mobiles), ou vous pouvez créer des formulaires réservés aux appareils mobiles qui s’affichent uniquement sur les appareils mobiles.

Si votre formulaire est configuré pour s’afficher sur tous les appareils, Klaviyo optimise automatiquement certains éléments, tels que la taille des polices et les images, afin d’améliorer son apparence pour les acheteurs sur les appareils mobiles. Ce guide abordera d’autres bonnes pratiques à garder à l’esprit. Utilisez le sélecteur de mode d’affichage situé dans le coin supérieur droit de l’éditeur de formulaires pour basculer entre les modes d’affichage sur ordinateur et sur appareil mobile pendant que vous créez votre formulaire. L’icône Bureau affiche à quoi ressemble le formulaire pour les acheteurs sur ordinateur, tandis que l’icône Mobile affiche ce que voient les acheteurs sur mobile.

Ce guide présentera les bonnes pratiques pour créer des formulaires pop-up et volants qui s’affichent sur les appareils mobiles. Elles sont utiles, que votre formulaire s’affiche sur tous les appareils ou uniquement sur mobile. Pour une présentation plus approfondie des formulaires d’inscription sur les appareils mobiles, consultez les bases : conception de formulaires mobiles.

Bonnes pratiques générales relatives aux formulaires

Bon nombre des bonnes pratiques pour les formulaires sur ordinateur s’appliquent aussi aux appareils mobiles :

• Allez à l’essentiel : envisagez un formulaire en plusieurs étapes si vous avez beaucoup de champs.
  • Si votre formulaire recueille le consentement pour les e-mails et les SMS, recueillez l’e-mail lors de la première étape, puis les SMS lors de la deuxième étape. Utilisez Smart Opt-in pour une expérience d’opt-in mobile plus simple. Smart Opt-in nécessite que les SMS soient activés dans votre compte, ainsi qu’un forfait SMS payant ; consultez le guide associé pour connaître les conditions requises pour la configuration.
• Assurez-vous qu’il est facile à fermer, afin que les visiteurs ne se frustrent pas et ne quittent pas votre site.
  • L’utilisation d’un teaser de formulaire permet aux acheteurs de rouvrir un formulaire qu’ils ont fermé. Définissez le teaser sur Afficher après la fermeture du formulaire ou Afficher avant l’affichage du formulaire et après la fermeture du formulaire.
• Si votre formulaire est configuré pour s’afficher sur tous les appareils (ce qui signifie que les visiteurs sur ordinateur et sur mobile le verront tous) et inclut une image latérale, conservez l’image définie sur Desktop dans Edit styles > Side image. Cela masque l’image latérale sur les appareils mobiles, laissant plus de place pour le contenu de votre formulaire.
  

• Utilisez des libellés concis pour chacun de vos champs de saisie (p. ex., adresse e-mail, numéro de téléphone, etc.) qui tiennent sur une seule ligne, afin que les acheteurs puissent facilement voir quelles informations vous leur demandez.

SEO et formulaires mobiles

Il est important de prendre en compte les bonnes pratiques de SEO mobile, en particulier lors de la création de formulaires sur votre page d’accueil ou d’autres landing pages. Les formulaires qui apparaissent sur des landing pages courantes issues de la recherche organique ne doivent pas masquer le contenu de votre site ni perturber l’expérience d’un visiteur ; sinon, la page peut être pénalisée par les algorithmes de recherche. En savoir plus sur les interstitiels intrusifs et le SEO.

Pour éviter cela :

• Ouvrez Ciblage et comportement > Affichage. Sous Timing, définissez Show form sur Based on rules, activez After time delay, puis saisissez le délai en secondes. Si vous activez d’autres règles de timing, activez Only display if all selected conditions are met afin qu’une autre règle de timing n’affiche pas le formulaire avant l’expiration du délai.
• Ajoutez un teaser et définissez son option d’affichage sur Afficher avant l’affichage du formulaire et après la fermeture du formulaire.

Optimisation des popups

Un formulaire pop-up s’affiche au milieu de l’écran d’un acheteur, couvrant souvent une grande partie de la page et entravant sa capacité à interagir avec les autres éléments de la page tant que le formulaire est ouvert. Cela rend les pop-ups plus perturbants, mais aussi plus performants en termes de conversion.

Pour optimiser le fonctionnement des popups sur les appareils mobiles :

1. Désactivez la fermeture du formulaire lorsqu’un acheteur mobile clique en dehors de la zone du formulaire afin de réduire les fermetures accidentelles du formulaire.
   • Accédez à Ciblage et comportement > Affichage.
   • Faites défiler jusqu’à Cliquer en dehors du formulaire pour le fermer.
   • Désélectionnez Sur mobile pour empêcher que des tapotements en dehors de la fenêtre contextuelle la ferment.
     

2. Assurez-vous que l’icône de fermeture de votre formulaire (le bouton X) est suffisamment grande, même sur un petit écran comme celui d’un appareil mobile.
   • Cliquez sur l’icône de fermeture dans l’aperçu du formulaire pour ajuster sa taille.
   • Testez l’apparence du formulaire sur votre propre appareil mobile afin de vous assurer qu’il est facile à trouver et à cliquer.
     Par exemple, l’icône de fermeture dans le formulaire à gauche peut être difficile à cliquer sur un appareil mobile. Cependant, l’icône de fermeture dans le formulaire à droite est plus grande et facile à trouver.
     

3. Distinguez visuellement votre pop-up du reste de votre site à l’aide d’une couleur de superposition, d’une ombre portée ou des deux.
   • Sélectionnez Modifier les styles pour ouvrir le panneau Styles.
   • Dans la section Couleur de superposition, choisissez une couleur semi-opaque pour mettre votre formulaire en avant et assombrir le contenu de votre site pendant que le formulaire est ouvert.
   • Configurez une Ombre portée pour ajouter un ombrage subtil autour de votre formulaire afin de le distinguer du contenu environnant.
4. Ajustez les marges de votre formulaire pour qu’il ressemble davantage à un formulaire pop-up sur les appareils mobiles et ne s’étende pas d’un bord à l’autre.
   
   1. Sélectionnez Modifier les styles, puis faites défiler vers le bas jusqu’à Marge.
   2. Augmentez les marges horizontales en fonction de l’apparence du formulaire dans l’aperçu mobile.

Optimiser les flyouts

Lorsqu’un formulaire volant apparaît, les visiteurs sur mobile peuvent toujours interagir avec votre site derrière le formulaire, sauf si Superposition mobile est activée. Ils peuvent choisir de fermer le formulaire, de le remplir, ou de le laisser ouvert pendant qu’ils continuent à naviguer. En général, cela rend les flyouts moins intrusifs que les popups.

Pour optimiser votre formulaire volant pour un appareil mobile :

1. Configurez votre formulaire pour qu’il s’affiche en glissant depuis le haut ou le bas de l’écran.
   • Sélectionnez Modifier les styles pour ouvrir le panneau Styles.
   • Sélectionnez Position du volant sur mobile, puis choisissez Ancrer en bas ou Ancrer en haut.
     Sur les appareils mobiles en orientation portrait, votre formulaire s’affichera en volant depuis le haut ou le bas de l’écran et couvrira une partie de l’écran d’un bord à l’autre. En orientation paysage, il utilise la position du volant standard.
     

2. Séparez visuellement votre formulaire volant du reste de votre site à l’aide d’une superposition mobile, d’une ombre portée, ou des deux.
   • Sélectionnez Modifier les styles pour ouvrir le panneau Styles.
   • Faites défiler jusqu’aux paramètres Superposition mobile et Ombre portée.
   • Activez Superposition mobile pour bloquer toute interaction avec le reste de votre site pendant que le formulaire volant reste ouvert. La superposition n’apparaît pas lorsque le formulaire volant est affiché sur un ordinateur.
   • Activez Ombre portée pour ajouter un léger ombrage autour de votre formulaire afin de le distinguer du contenu environnant. Notez que les paramètres d’ ombre portée affectent à la fois les versions mobile et bureau de votre formulaire.
     

Prochaines étapes

Lorsque vous êtes prêt à publier vos modifications :

1. Cliquez sur Publier ou programmer dans l’éditeur de formulaires.
2. Résolvez toutes les alertes bloquantes. Si des options de planification s’affichent, sélectionnez Publier maintenant. Pour publier vos modifications, cliquez sur Publier maintenant.

Vérifiez le formulaire publié sur votre appareil mobile, en vous assurant que vous respectez ses conditions de ciblage et d’affichage.

Une fois vos formulaires optimisés pour les appareils mobiles, essayez l’A/B testing de vos designs de formulaire pour mieux comprendre les préférences des visiteurs de votre site.

Ressources supplémentaires

• Démarrer avec les formulaires d’inscription
• Comprendre les paramètres de rejet de formulaire
• Principes de base de la conception de formulaires pour mobile
• Comment recueillir le consentement pour l’envoi de SMS à l’aide d’un formulaire d’envoi rapide