Contourner le problème du « One Form » dans Unbounce

Contourner le problème du « One Form » dans Unbounce

Contourner le problème du "One Form" dans Unbounce

Qu’est-ce qu’un « Unbounce » ?

Unbounce est un outil de création de pages d’atterrissage bien connu et bien considéré, conçu pour permettre aux novices en HTML de créer des pages d’atterrissage impressionnantes et percutantes, tout en offrant aux codeurs plus expérimentés la possibilité de s’amuser un peu plus.

Dans ce billet, je vais énumérer quelques solutions à ce que j’appelle le problème de la « forme unique » de Unbounce, leurs forces et leurs faiblesses, et que je préfère personnellement.

Qu’est-ce que le problème « one form » ?

Comme dans tout système qui tente de prendre des processus complexes et de les rendre simples à mettre en œuvre, il faut sacrifier une certaine dose de nuance et de flexibilité.

L’une des limites est que chaque page de destination sur Unbounce ne peut avoir qu’un seul formulaire intégré (il y a quelques articles de la communauté qui traitent du sujet, par exemple : 1, 2, 3). Bien qu’il y ait un risque certain de lassitude si vous bombardez vos visiteurs de formulaires, il est raisonnable de vouloir fournir un accès facile à votre formulaire à plus d’un endroit.

Par exemple, vous pourriez commencer par un appel à l’action fort et le formulaire en haut de la page, puis poursuivre plus bas sur la page lorsque les utilisateurs ont eu le temps d’absorber plus d’informations sur votre offre. Un exemple simple de cela est la page d’accueil Teambit ci-dessous, qui a été présentée dans les 16 meilleurs exemples de design de page d’accueil que vous devez voir en 2017.

Le haut de cette page Teambit présente un simple formulaire de collecte d’e-mails

Le formulaire est répété en bas de page lorsque les visiteurs ont eu l’occasion d’en savoir plus.

Solutions possibles au problème du formulaire unique

Maintenant que nous avons établi le problème, passons en revue quelques solutions, voulez-vous ?

Heureusement, il existe quelques moyens de résoudre ce problème, soit en utilisant les outils de déblocage intégrés, soit en ajoutant du code par le biais d’entrées HTML, CSS et JavaScript ouvertes.

Il est bon de garder à l’esprit qu’une solution consiste à ne pas avoir le formulaire du tout sur votre page, et à avoir vos boutons d’appel à l’action qui renvoient à d’autres pages avec des formulaires. C’est l’approche qu’utilise Unbounce dans l’exemple ci-dessous. Bien que cette approche soit parfaitement valable, je ne l’appellerais pas tant une solution à ce problème qu’un format complètement différent, c’est pourquoi je ne l’ai pas incluse dans la liste ci-dessous.

Ici, Unbounce utilise deux CTA (les boutons oranges), mais ne compte pas sur la présence du formulaire sur la page.

1. Bouton d’ancrage défilant

C’est potentiellement la solution la plus simple, car elle est prise en charge nativement par Unbounce :

Créez un bouton plus bas sur la page où vous souhaitez recevoir votre deuxième formulaire.
Modifiez ce bouton, dans la section « Cliquez sur l’action » du panneau de configuration du bouton de droite, où vous placerez normalement l’URL vers laquelle vous êtes lié
Ajoutez le code d’identification unique de la case qui contient votre formulaire (vous pouvez le trouver en modifiant la case et en faisant défiler le panneau de droite vers le bas jusqu’à « Métadonnées des éléments »)

Bouton d’enregistrement

Section « Cliquer sur l’action » du panneau de configuration du bouton droit

Section « Métadonnées des éléments » en bas du panneau de droite sur la définition des éléments

Avantages

Rapide et facile à mettre en œuvre, peu de manipulations directes en JavaScript ou HTML sont nécessaires.

Inconvénients

Il existe des moyens beaucoup plus simples d’y parvenir du point de vue de l’utilisateur. Même avec un défilement fluide (voir les « points bonus » ci-dessous), l’expérience peut être un peu déroutante pour les utilisateurs, en particulier s’ils veulent revenir en arrière pour vérifier des informations ailleurs sur une page.

Points bonus

Le simple fait d’ajouter cela en l’état signifie que l’expérience des utilisateurs sera plutôt déstabilisante. Lorsqu’ils cliqueront sur le bouton, la page reviendra à votre formulaire comme si elle était chargée d’une nouvelle page. Pour aider les visiteurs à comprendre ce qui se passe, ajoutez un défilement fluide en JavaScript. Pour plus d’informations, cliquez ici.

Double bonus

Les ancres de liens fonctionnent en alignant le haut de votre écran avec le haut de la chose que vous avez ancrée. Cela peut donner l’impression que vous êtes un peu en dessous, parce que la forme est presque en train de tomber de l’écran. Vous pouvez résoudre ce problème en plaçant une petite boîte d’un pixel de large un peu au-dessus du formulaire, sans remplissage ni bordure, en la positionnant comme vous le souhaitez, et en la reliant à l’ID de cette boîte à la place, ce qui vous permet de respirer un peu au-dessus de votre formulaire.

Sans et avec la boîte d’un pixel de large pour la marge de manœuvre

2. iFrames

Unbounce permet des blocs gratuits, que vous pouvez utiliser pour intégrer un formulaire d’un autre service ou même une autre page Unbounce qui ne consiste qu’en un formulaire. Vous devrez faire glisser le bloc « Custom HTML » de la barre de gauche à l’endroit où vous souhaitez que le formulaire se trouve et le coller dans votre code iFrame.

Le bloc « HTML personnalisé » dans la barre de gauche

Boîte HTML vierge qui s’ouvre

L’aspect des blocs HTML dans l’éditeur

Avantages

Cela permettra à plusieurs formulaires, à chaque formulaire d’être positionné différemment sur la page, de fonctionner d’une manière différente et aux entrées de chaque formulaire d’être marquées différemment (ce qui donnera un aperçu de l’efficacité de la page).

Cette solution vous permettra également de tirer le meilleur parti des fonctionnalités d’autres services, tels que Wufoo (Unbounce a documenté le processus pour cela ici).

Inconvénients

Ayant choisi Unbounce comme guichet unique pour la création de pages de renvoi, s’en séparer pour utiliser des formulaires externes pourrait être considéré comme un pas en arrière par rapport à l’objectif initial. Cela introduit également des complications dans la construction, car vous ne pouvez pas voir comment le formulaire se présentera sur la page en mode édition. Votre flux de travail pour les modifications pourrait donc ressembler à cela :

Changement de formulaire externe
Revoir la page et voir les questions de style
Changer la mise en page dans l’éditeur Unbounce
Examinez la page et constatez que le formulaire externe n’est pas aussi lisible
Changer de forme externe
Etc.
Points bonus

Unbounce ne peut pas suivre les conversions via une iFrame, donc même si vous utilisez une autre page de Unbounce comme formulaire, vous allez sortir du suivi natif de Unbounce. Ils ont un script que vous pouvez utiliser pour lancer un suivi externe des occurrences afin de suivre le succès de la page de manière plus centralisée et vous permettre de savoir si les pages individuelles fonctionnent bien.

Double bonus

Même si vous utilisez une page de déblocage identique pour passer deux fois par la même fonctionnalité de formulaire, balisez différemment les remplissages de formulaire pour vous donner une idée de la probabilité que les utilisateurs convertissent en haut de la page avant d’être distraits, ou en bas lorsqu’ils ont eu le temps d’absorber les avantages de votre offre.

3. Formulaire autocollant (toujours là)

Une option qui permet de tout garder sur la même page est un formulaire autocollant. Vous pouvez utiliser le style CSS pour le fixer sur un écran plutôt que sur une page, puis lorsque votre visiteur fera défiler la page, le formulaire ou le CTA voyagera avec lui – toujours à portée de main.

Ce simple code CSS fixera un formulaire sur le côté droit d’une page pour les largeurs d’écran supérieures à 800px (c’est là que Unbounce passe du design Desktop au design Mobile, ce qui signifie que le positionnement doit être différent).

Chaque élément d’identification ci-dessous correspond à une case différente que je voulais déplacer ensemble. Vous devrez changer le « lp-pom-box-xxx » ci-dessous pour faire correspondre les ID de ce que vous voulez déplacer vers le bas de la page avec l’utilisateur (vous pouvez trouver ces ID dans la section « Métadonnées des éléments » comme décrit dans la solution du bouton d’ancrage de défilement ci-dessus).

Avantages

Cela vous permet de garder un suivi dans Unbounce. Cela vous évite de faire des allers et retours pour construire le formulaire ailleurs et ensuite essayer de faire en sorte que ce formulaire, dans un iFrame, agisse sur votre page comme vous le souhaitez.

Inconvénients

Le problème est que les utilisateurs peuvent rapidement devenir aveugles à un CTA qui voyage avec eux, l’ajout d’une sorte d’effet de recherche d’attention régulière risque de les ennuyer. La solution consiste ici à masquer votre appel à l’action ou votre formulaire pendant certaines parties de la page, pour le faire réapparaître à d’autres moments plus appropriés (comme dans la section suivante).

Il peut être difficile de voir exactement où le formulaire apparaîtra parce que vos modifications CSS ne prendront pas effet dans l’aperçu de l’éditeur, mais vous pourrez en voir l’impact lorsque vous enregistrerez et prévisualiserez la page.

4. Formulaire collant (apparition et disparition)

Le moyen le plus simple pour y parvenir est d’utiliser l’indice z. En bref, l’index z est un moyen de communiquer des couches par le biais du HTML, une image avec un index z de 2 sera interprétée comme plus proche de l’utilisateur qu’une boîte avec un index z de 1, de sorte que lors de la visualisation de la page, on aura l’impression que l’image est devant la boîte.

Pour cette méthode, vous aurez besoin d’une sorte de boîte opaque dans chaque section de votre page. La boîte peut être remplie avec une couleur, une image, un dégradé – peu importe tant qu’elle n’est pas transparente. Après avoir mis les cases en place, notez leur indice z, que vous trouverez dans la section « Méta données » de la barre de paramètres droite, à l’endroit même où l’ID de l’élément est affiché.

Cette boîte a un indice z de 31, donc elle couvrira quelque chose avec un indice de 30

Ensuite, utilisez le CSS pour sélectionner les éléments que vous déplacez vers le bas de la page et réglez leur indice z sur un nombre inférieur. Dans les lignes ci-dessous, j’ai sélectionné deux éléments et j’ai réglé leur indice z à 30, ce qui signifie qu’ils seront cachés derrière la boîte ci-dessus, dont l’indice z est de 31. Ici encore, vous voudrez remplacer les ID qui commencent par #lp-pom-box-xxxx par les mêmes ID que ceux que vous avez utilisés dans la solution du formulaire autocollant (toujours là) ci-dessus.

Lorsque vous choisissez l’endroit où vous souhaitez que votre formulaire soit à nouveau visible, il vous suffit de supprimer les éléments qui pourraient masquer le formulaire dans cette section. Il défilera dans la vue.

Avantages

Cela vous permettra de proposer un formulaire complet à remplir par les utilisateurs, à différents endroits de la page, sans avoir à vous soucier qu’il devienne un fond d’écran ou que vous puissiez marier des conversions externes. En utilisant uniquement le CSS, vous n’aurez pas non plus à vous soucier des utilisateurs dont le JavaScript est désactivé (alors que les points bonus ci-dessous dépendent du JavaScript, celui-ci se repliera gracieusement si le JavaScript est désactivé).

Inconvénients

Contrairement à la méthode iFrame, cela ne vous permettra pas d’utiliser plus d’un format de formulaire. Elle nécessite également une connaissance un peu plus approfondie du CSS (et les points bonus nécessiteront au moins un peu d’essais et d’erreurs avec JavaScript).

Points bonus

Utilisez JavaScript pour appliquer et supprimer des classes CSS en fonction de votre position de défilement sur la page. Par exemple, vous pouvez créer des classes CSS comme celles-ci qui font apparaître et disparaître des éléments.

CSS :

Vous pourriez alors utiliser ce JavaScript pour appliquer la classe .hide lorsque l’utilisateur fait défiler certains points, et la supprimer lorsqu’il arrive aux points où vous voulez qu’il voit le formulaire. Cela peut être utilisé pour un contrôle plus fin de l’endroit où le formulaire apparaît, sans avoir à le cacher. Comme précédemment, vous devrez mettre à jour les chaînes #lp-pom-box-xxx pour qu’elles correspondent aux identifiants de votre compte.

JavaScript :

Double bonus

Vous pourriez envisager d'utiliser JavaScript pour masquer ou afficher de manière sélective les champs de formulaire à différents endroits. Cela vous permettrait d'afficher un formulaire plus long au début, par exemple, et un formulaire plus court lors de sa deuxième apparition, bien qu'il s'agisse en fait du même formulaire à chaque fois.

Pour cela, il vous suffit d'ajouter à votre fonction JavaScript .scroll ci-dessus :

if ($(document).height() - ($(window).height() + $(window).scrollTop()) < 75){ // Cette partie cache la partie "nom complet" du formulaire, déplace le bouton d'envoi vers le haut et réduit la taille de la case lorsque l'on fait défiler la page vers le bas à moins de 75 pixels du bas de la page $('#container_full_name').addClass('hide') ; $('#lp-pom-box-54').stop().animate({hauteur : "200px"},200) ; $('.lp-pom-button-60-unmoved').animate({top : '-=75'}, 200) ; $('#lp-pom-button-60').removeClass('lp-pom-button-60-unmoved') ; $('#lp-pom-button-60').addClass('lp-pom-button-60-moved');} else{ // Cette partie ajoute la partie "nom complet" dans le formulaire, déplace le bouton d'envoi vers le bas et augmente la taille de la case si on remonte. $('#container_full_name').removeClass('hide') ; $('#lp-pom-box-54').stop().animate({hauteur : "300px"},200) ; $('.lp-pom-button-60-moved').animate({top : '+=75'}, 200) ; $('#lp-pom-button-60').removeClass('lp-pom-button-60-moved') ; $('#lp-pom-button-60').addClass('lp-pom-button-60-unmoved') ; Lorsque vous faites défiler la page à moins de 75px du bas de la page, notre JavaScript masque le champ "Nom complet", réduit la taille de la boîte et déplace le bouton vers le haut. Tout cela peut se produire lorsque le formulaire est caché de la vue ; je viens de le faire en vue de faire une démonstration.

Conclusion

Dans le tableau ci-dessous, j'ai dressé une liste rapide des différentes solutions et de leurs forces et faiblesses.

Solution

Points forts

Faiblesses

Bouton d'ancrage défilant

Mise en œuvre facile, peu de codage nécessaire

Expérience d'utilisateur

iFrame

De multiples formes différentes

Nécessite de construire le formulaire ailleurs et introduit une certaine complexité stylistique et analytique dans le flux de travail

Formulaire autocollant (toujours présent)

Maintien et suivi de la conception au sein d'un seul projet Unbounce

La fatigue du CTA, qui consomme beaucoup d'espace

Forme collante (apparition et disparition)

Les avantages d'une forme collante, tout en évitant la fatigue du CTA et le grand encombrement

Connaissance du CSS requise, ne peut utiliser qu'un seul formulaire

Personnellement, mon préféré a été l'option "Sticky Form" (apparition et disparition), pour réduire la nécessité d'intégrer des outils externes, mais si je devais utiliser plusieurs formulaires différents, je pourrais certainement imaginer utiliser un iFrame.

Quel est votre préféré ? Ai-je manqué des solutions intéressantes ? N'hésitez pas à m'envoyer un ping dans les commentaires.

À propos de R0bin_L0rd - Robin est analyste SEO au bureau de Distilled London. Il a travaillé dans des endroits allant du Sussex à Bangalore, en Inde, et s'est chaque fois retrouvé à graviter vers le référencement. Pendant son temps libre, Robin apprend autant que possible (Python est son dernier fix) et voyage chaque fois qu'il le peut, souvent grâce à la générosité apparemment sans limite d'inconnus.

22
31