Donnez plus de style à votre formulaire de commentaire dans WordPress

L'une des choses les plus excitantes qui puisse arriver lorsque vous avez un blog et que vous y écrivez régulièrement est de recevoir des commentaires de lecteurs. Mais pour cela, le contenu que vous écrivez doit être intéressant et le formulaire pour soumettre des commentaires doit être suffisamment visible et attrayant pour que le visiteur le remplisse et le soumette.

Dans ce post qui fait partie de la série du test du mois nous allons essayer de mettre en avant le formulaire de commentaire de notre blog en lui donnant un petit redesign pour voir s'il fonctionne mieux que la version actuelle.

Comme toujours, nous testerons les changements en utilisant la technique de test A/B. C'est le meilleur moyen de voir avec des données réelles des visiteurs de votre site Web si les modifications que vous apportez fonctionnent ou non.

Améliorer le design du formulaire de commentaire WordPress

Notre formulaire de commentaire est assez simple. Par défaut, WordPress ajoute un champ pour saisir le site Web du visiteur qui commente, mais nous pensons que ce champ n'ajoute aucune valeur. Au contraire, la seule chose qui attire, ce sont les spams des bots qui veulent à tout prix obtenir un lien. Pour cette raison, nous l'avons supprimé de notre formulaire d'origine.

Dans la comparaison suivante, vous pouvez voir la version originale de notre formulaire de commentaire de blog et la variante avec les modifications que nous avons apportées. Pensez à faire glisser la poignée qui apparaît au centre d'un côté à l'autre pour voir les deux versions :

Nous avons essentiellement apporté trois modifications au formulaire de commentaire :

1. Nous avons ajouté quelques emojis au titre pour mettre en évidence la zone de commentaires et encourager les visiteurs à écrire. Il semble maintenant que nous leur faisons signe et les encourageons à écrire avec l'emoji de la salutation et de l'écriture manuscrite. Les gens aiment les émojis. Nous verrons si cela aide à avoir plus de commentaires.
2. Le texte légal dans lequel nous expliquons où les commentaires sont stockés lors du remplissage des informations utilise une police plus petite . Il doit être là pour des raisons juridiques, mais nous ne voulons pas lui donner autant de pertinence.
3. Nous transformons le bouton de soumission du formulaire en une couleur orange qui se démarque. Comme nous l'avons vu précédemment, les couleurs sont importantes.

Maintenant que le nouveau design est prêt, il ne nous reste plus qu'à le tester.

Création d'un test A/B de styles CSS

Pour tester ce changement de design dans le formulaire de commentaire de notre blog dans WordPress, le plus simple est d'utiliser un test A/B des règles CSS. La version A de notre site Web est celle avec le formulaire d'origine, tandis que la version B contiendra les règles CSS supplémentaires pour réaliser les trois changements dans la conception du formulaire que nous avons anticipés auparavant.

Avec Nelio A/B Testing, nous créons un nouveau test A/B de CSS. L'image suivante montre l'écran d'édition d'un tel test :

Nous nommons le test ("Formulaire de commentaires en surbrillance", dans notre cas) et la variante ("Formulaire de commentaires repensé"). Nous pouvons également ajouter une description au test dans le champ correspondant sur la barre latérale droite. Dans la capture d'écran précédente, vous pouvez voir la description que nous avons ajoutée, qui sert de référence à tout utilisateur qui verra le test à l'avenir.

Nous avons également réduit la portée du test aux URL contenant https://neliosoftware.com/blog/ , de sorte que le test ne s'applique qu'aux articles de notre blog.

En tant qu'action de conversion, nous avons établi le clic sur le bouton Soumettre du formulaire. Chaque fois qu'un visiteur clique sur ce bouton, nous comptabilisons une conversion dans le test pour la variante que le visiteur visualise.

Avant de terminer, nous devons aller éditer la variante B du test. Nous passons la souris sur cette variante et l'option de la modifier apparaîtra. Une fois que nous avons cliqué dessus, un éditeur CSS avec un aperçu s'ouvre, comme vous pouvez le voir dans la capture d'écran suivante :

Comme vous pouvez le voir, dans la barre latérale gauche, nous avons l'éditeur CSS dans lequel vous pouvez écrire les règles spécifiques qui apportent les modifications de conception que nous avons vues précédemment. De plus, sur le côté droit, vous pouvez parcourir votre site Web pour prévisualiser le résultat de ces modifications. Avec seulement besoin de six règles CSS simples pour reconcevoir notre formulaire de commentaires.

Lorsque nous avons terminé, nous sauvegardons et revenons à l'éditeur de test A/B pour le démarrer. Maintenant, nous attendons seulement que les visiteurs visitent nos postes. Chaque visiteur verra soit la version originale du formulaire, soit la version remaniée. Cela est fait par Nelio A/B Testing tout seul, sans que vous ayez à faire quoi que ce soit.

Analyser les résultats des tests A/B

Nous avons eu le test en cours pendant environ six semaines, analysant près de 20 000 visiteurs sur notre blog (un bel échantillon de la population). Vous pouvez voir les résultats complets du test A/B dans la capture d'écran suivante :

Le nombre total de conversions que le test a reçues n'est pas spectaculaire. Pendant ce temps, notre blog a reçu 27 commentaires (c'est pourquoi il y a 27 conversions dans les résultats des tests).

Mais ce qu'il faut noter, c'est que la variante avec la refonte du formulaire de commentaire a réussi à doubler le nombre de conversions de la version originale. C'est donc l'option gagnante du test A/B, avec une valeur de confiance statistique élevée.

Comme vous le voyez, de petits changements dans les conceptions, qui peuvent être réalisés avec peu de règles CSS, peuvent avoir un impact direct sur les résultats de votre site Web. Nous avons appliqué cette variante sur notre site Web en ajoutant les règles CSS supplémentaires dans notre thème.

Un design plus élaboré encourage l'interaction

Le design est essentiel pour modifier le comportement des visiteurs de notre site Web. Obtenir une conception qui fonctionne mieux que la conception actuelle ne nécessite pas nécessairement beaucoup de ressources. Ici, nous avons vu qu'avec quelques règles CSS simples, nous pouvons apporter des modifications qui nous donnent des résultats rapidement.

L'application de changements dans la conception de notre site Web est quelque chose que nous devons faire avec soin. C'est pourquoi nous avons utilisé un test A/B. Grâce à cette technique, nous pouvons vérifier avec des données réelles de nos visiteurs si les changements fonctionnent ou non. Sinon, nous ne saurons pas si nous avons choisi une bonne voie d'amélioration ou si nous reculons.

Image sélectionnée par Jason Leung sur Unsplash.