Comment optimiser les formulaires popup et flyout pour les mobiles ?

Vous apprendrez

Apprenez à concevoir vos formulaires d'inscription mobiles en tenant compte des meilleures pratiques de Klaviyo, afin de vous assurer que vos formulaires popup et flyout sont optimisés pour les visiteurs mobiles. 

Les acheteurs en ligne utilisent de plus en plus leurs appareils mobiles pour découvrir de nouveaux magasins, parcourir des produits et effectuer des achats. Il est donc plus important que jamais de veiller à ce que votre site Web soit aussi attrayant sur les appareils mobiles que sur les ordinateurs de bureau, 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 mobiles uniquement qui ne s'affichent que 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 des images, afin d'améliorer son apparence pour les acheteurs sur les appareils mobiles ; cependant, ce guide couvrira d'autres meilleures pratiques à garder à l'esprit. Utilisez le sélecteur de vue dans le coin supérieur droit du générateur de formulaires pour passer de l'affichage sur ordinateur à l'affichage sur mobile au fur et à mesure que vous construisez votre formulaire. L'icône pour ordinateur de bureau montre à quoi ressemble le formulaire pour les acheteurs sur ordinateur de bureau, tandis que l'icône pour téléphone portable montre ce que voient les acheteurs sur téléphone portable.

Ce guide présente les meilleures pratiques pour créer des formulaires popup et flyout qui s'affichent sur les appareils mobiles. Il est utile de savoir si votre formulaire s'affiche sur tous les appareils ou uniquement sur les appareils mobiles. Pour un aperçu plus approfondi des formulaires d'inscription sur les appareils mobiles, consultez la rubrique "Principes de base : conception de formulaires mobiles".

Meilleures pratiques en matière de formulaires généraux

La plupart des meilleures pratiques pour les formulaires de bureau s'appliquent également aux appareils mobiles : 

• Soyez concis : envisagez un formulaire en plusieurs étapes si vous avez beaucoup de champs.
  • Si votre formulaire recueille le consentement par SMS, recueillez l'e-mail à la première étape, puis le SMS à la deuxième étape avec Smart Opt-in afin que les visiteurs utilisant des appareils mobiles puissent s'inscrire de la manière la plus simple.
• Veillez à ce qu'il soit facile à fermer, afin que les visiteurs ne soient pas frustrés et ne quittent pas votre site. 
  • L'utilisation d'un formulaire d'accroche permet aux acheteurs de fermer et de rouvrir le formulaire à leur guise.
• Si votre formulaire est configuré pour s'afficher sur tous les appareils (c'est-à-dire que les acheteurs sur ordinateur de bureau et sur mobile le verront tous) et qu'il comporte une image latérale, laissez cette dernière s'afficher uniquement sur mobile. 
  
• Utilisez des libellés concis pour chacun de vos champs de saisie (par exemple, adresse électronique, numéro de téléphone, etc.) qui tiennent sur une seule ligne afin que les acheteurs puissent facilement voir les informations que vous leur demandez.

SEO et formulaires mobiles 

Il est important de tenir compte des meilleures pratiques en matière de référencement mobile, en particulier lorsque vous créez des formulaires sur votre page d'accueil ou d'autres pages de renvoi. Les formulaires qui apparaissent sur les pages d'atterrissage des recherches organiques courantes ne doivent pas masquer le contenu de votre site ni perturber l'expérience du visiteur ; dans le cas contraire, la page pourrait être pénalisée par les algorithmes de recherche. En savoir plus sur les interstitiels intrusifs et le référencement.

Pour éviter cela :

• Dans l'onglet Ciblage et comportements, réglez le délai de votre formulaire sur Basé sur les règles, puis définissez un délai plus long (par exemple, lorsqu'un visiteur quitte la page).
• Ajoutez une accroche qui s'affiche avant l'affichage du formulaire.

Optimiser les popups

Un formulaire contextuel apparaît au milieu de l'écran de l'acheteur, couvrant souvent une grande partie de la page et l'empêchant d'interagir avec d'autres éléments de la page pendant que le formulaire est ouvert. Les fenêtres pop-up sont donc plus dérangeantes, mais elles permettent également d'obtenir un taux de conversion plus élevé. 

Optimiser le fonctionnement des fenêtres pop-up 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.
   • Naviguez jusqu'à Ciblage et comportements.
   • Faites défiler vers le bas jusqu'à Appareils.
   • Sous Cliquez sur le formulaire extérieur pour le fermer, désactivez le commutateur mobile.
     
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 pour vous assurer qu'il est facile à trouver et à cliquer.
     Par exemple, l'icône de fermeture du formulaire de gauche peut être difficile à cliquer sur un appareil mobile. En revanche, l'icône de fermeture du formulaire de droite est plus grande et plus facile à trouver. 
     
3. Séparez visuellement votre popup du reste de votre site, en utilisant une couleur de recouvrement, une ombre portée, ou les deux.
   • Naviguez jusqu'à l'onglet Styles.
   • Dans la section Arrière-plan du formulaire, définissez la couleur de recouvrement pour utiliser un recouvrement semi-opaque afin d'attirer l'attention sur votre formulaire et d'atténuer le contenu de votre site lorsque le formulaire est ouvert.
   • Configurez une ombre portée pour créer un ombrage subtil autour de votre formulaire afin de le séparer du contenu environnant.
4. Ajustez les marges de votre formulaire pour qu'il ressemble davantage à un formulaire popup sur les appareils mobiles et qu'il ne soit pas bord à bord.
   
   1. Dans l'onglet Styles, faites défiler les Styles de formulaire.
   2. Augmentez la marge gauche/droite en fonction de l'aperçu.

Optimisation des fenêtres d'information 

Lorsqu'un formulaire déroulant apparaît, les visiteurs mobiles peuvent toujours interagir avec votre site derrière le formulaire, à moins que la superposition mobile ne soit activée. Ils peuvent choisir de fermer le formulaire, de le remplir ou de le laisser ouvert pendant qu'ils poursuivent leur navigation. En général, les fenêtres éclairantes sont moins intrusives que les fenêtres pop-up. 

Pour optimiser votre formulaire flyout pour un appareil mobile :

1. Paramétrez votre formulaire pour qu'il apparaisse en haut ou en bas de l'écran.
   • Naviguez jusqu'à la section Styles.
   • Sélectionnez Mobile Flyout Position, puis choisissez Dock to Bottom (ancrage en bas) ou Dock to Top (ancrage en haut).
     Lorsque ce paramètre est sélectionné, votre formulaire sort du haut ou du bas de l'écran et couvre une partie de l'écran d'un bord à l'autre.
     
2. Séparez visuellement votre formulaire flyout du reste de votre site à l'aide d'une superposition mobile, d'une ombre portée ou des deux.
   • Naviguez jusqu'à l'onglet Styles.
   • Faites défiler jusqu'aux paramètres de l'arrière-plan du formulaire.
   • Activez la superposition mobile pour que les acheteurs mobiles ne puissent pas cliquer sur d'autres éléments de votre site tant qu'ils n'ont pas rempli ou fermé le formulaire. Notez que la superposition mobile n'apparaîtra pas lorsque le formulaire volant est affiché sur un ordinateur de bureau.
   • Activez l'ombre portée pour créer un ombrage subtil autour de votre formulaire afin de le séparer du contenu environnant. Notez que les paramètres de l'ombre portée affectent à la fois les versions mobile et de bureau de votre formulaire.
     

Prochaines étapes

Une fois que vous avez optimisé vos formulaires pour les appareils mobiles, essayez de faire des tests A/B pour mieux comprendre les préférences des visiteurs de votre site. 

Ressources complémentaires 

• Les formulaires d'inscription
• Comprendre les paramètres de renvoi des formulaires 
• Notions de base : conception de formulaires mobiles
• Comment utiliser des formulaires popup pour recueillir le consentement des utilisateurs de SMS ?