14 min de lecture
Le webdesign n’est pas seulement une question de design, et vous le savez pertinemment bien. Pour augmenter vos chances de trouver des clients, ou encore de les fidéliser, il faut que vous puissiez concevoir un site web fonctionnel. Par fonctionnel, je parle d’un élément en particulier : le formulaire webflow. Il faut que tous les formulaires présents sur les sites que vous créez marchent efficacement. Comment s'en assurer ? Ce guide sur les formulaires Webflow et tout ce qu’il faut savoir à leur propos vous aidera sûrement !
À votre avis, les formulaires sont-ils obligatoires ou non pour un site web ?
Quelle question ! Évidemment que ça l’est !
Non, ils peuvent très bien être remplacés par d’autres fonctionnalités.
Autres ? N’hésitez pas à partager votre avis en commentaires.
Rien de plus facile, quand vous avez ouvert la page sur laquelle vous voulez insérer un formulaire, rendez-vous dans le panneau d’ajout d’éléments, puis dans éléments. Enfin, vous verrez « formulaire » (form). J’espère que vous n’avez pas oublié : sur Webflow, le système de glisser-déposer prône. Pour insérer ce formulaire, vous devrez donc cliquer dessus, ne pas lâcher, mais tout de suite le glisser et déposer sur la page. La contrainte de Webflow qu’il faut le glisser au bon endroit, mais si vous gérez Webflow, vous savez de quoi je parle.
Je suis sûr que le formulaire Webflow créé, à son état brut, ne conviendra pas à votre goût. Il vous faut quelque chose de plus personnalisé. Vous serez donc amené à modifier ces 3 paramètres (nous allons voir chacun d’entre eux au cours de ce guide) :
Par défaut, un formulaire ne contient que les éléments essentiels (nom, message, bouton). Voici toutefois quelques autres éléments qui peuvent être ajoutés :
Tous ces éléments ne figureront pas forcément sur un site. En fonction de la demande de vos clients, vous pourriez ne pas avoir besoin de tout cela ; peut-être vous contenterez-vous de ceux présents par défaut. En tant que webdesigner qui travaille pour différents types d’entreprises, je pense toutefois qu’il est important d’avoir toutes ces notions en poche !
Dans le cas où vous avez besoin d’insérer un ou plusieurs de ces champs dans un formulaire, il suffit de se rendre dans Form wrapper, ensuite dans Form element (élément de formulaire), et glisser-déposer l’élément concerné.
Notez bien que ces éléments ne peuvent être ajoutés que dans le bloc réservé au formulaire Webflow.
Nous n’avons fait que citer et expliquer les différents éléments proposés par Webflow. Qu’en est-il de leur modification ? Chacun d’entre eux peut effectivement être modifié. Pour ce faire, vous n’avez qu’à double-cliquer sur l’élément en question. Une autre manière de le faire est de sélectionner cet élément, et ensuite, appuyer sur la toucher entrer du clavier.
Pour chaque élément, voici les personnalisations possibles :
Comment savoir que les données sont correctement envoyées ou non ?
Du côté du prospect, une notification sous forme de message apparaît. Elle indique si les informations sont bien transmises ou non au propriétaire du site ou à son gérant. Vous pouvez donc personnaliser ces messages, en passant dans form wrapper, element setting (raccourci : D, sur le clavier), et enfin, show state options. 3 states sont montrés :
Si possible, je vous conseille d’inclure une adresse email pour joindre le responsable, dans le message d’erreur. Cela, pour éviter que les prospects abandonnent de contacter le propriétaire du site sous prétexte qu’il y a eu erreur. Ce serait dommage !
De votre côté (ou celui de votre client), une notification vous parvient lorsque le message a bien été envoyé. Pour préciser à qui cette notification sera destinée, il suffit de le spécifier dans les paramètres (project settings à onglet formulaire (form tab)). Prenons précisément votre cas (vous, qui avez créé le site). Vous aussi, vous aurez droit à des notifications sur ce formulaire sur votre tableau de bord Webflow. Rien de plus simple. Encore mieux, les fichiers que vous aurez récoltés peuvent être exportés en fichier CSV .
C’est vrai qu’il n’y a rien de mieux qu’une bonne quantité d’informations à propos des prospects pour mieux les cerner. Seulement, je ne vous conseille pas d’essayer de les récolter par formulaire. Rien qu’en apercevant la quantité de champs à remplir, c’est décourageant ! Parfois, on a besoin de rien de plus que de l’adresse email et du prénom.
D’ailleurs, des études montrent qu’en réduisant le nombre de champs à remplir dans un formulaire (au nombre de 4 maximum), le taux de conversion des sites augmente de 120 %.
Avez-vous déjà pensé à la raison pour laquelle vous vouliez mettre un formulaire sur votre site ? Est-ce pour inciter les lecteurs à vous écrire, pour convertir vos prospects en clients ou autres ? Ce que j’ai envie de vous dire est que chaque formulaire a un objectif bien précis. Vous devez donc faire en sorte d’expliquer cet objectif le plus clairement possible.
C’est pourquoi les courtes phrases sont privilégiées. Je parle ici des phrases de description de formulaire ou d’incitation à remplir le formulaire. Ensuite, ne l’encombrez pas de choses futiles, de choses dont vous n’aurez sûrement pas besoin. Si vous demandez à vos clients de remplir un formulaire d’inscription à une newsletter, à quoi bon leur demander leur numéro de téléphone ?
Vient enfin le bouton de soumission. Lui aussi a son rôle à jouer. Et surtout, il doit être explicite. Le fait que vous créiez un site professionnel ne signifie pas que vous devez forcément écrire sur un ton très formel. Une simple phrase peut faire l’affaire (du moment qu’elle soit assez explicite). Par exemple : je m’inscris, recevoir mon code, acheter, etc.
Vous devez expliquer qu’en remplissant un formulaire, les internautes sont sûrs de recevoir quelque chose en retour. Pour un formulaire de contact par exemple, ils comprendront que le webmaster ou votre client répondra à son mail, c’est-à-dire qu’ils recevront une information sur un sujet précis. Qu’en est-il des autres types de formulaires ?
Pour une inscription à une newsletter, les potentiels clients souhaiteraient certainement savoir la fréquence d’envoi (hebdomadaire ou mensuel), les contenus des mails qu’ils recevront (aide, blog ou promotion), le nombre d’abonnés déjà existants, etc. Si possible, un exemple de newsletter déjà écrit par le passé serait un plus !
Par ailleurs, si vous comptez garder toutes les informations récoltées confidentielles, tant mieux ! C’est même le geste le plus judicieux à faire. Mais comment les futurs prospects pourront-ils savoir que leurs données sont bien protégées ? Il faut également le mentionner. Un moyen de gagner leur confiance.
Ce conseil est quelque peu relatif au précédent, mais nous nous focalisons surtout dans la protection de la vie privée et de données personnelles. Si vous avez besoin de demander des informations sensibles (email, téléphone, salaire…), mieux vaut le faire avec beaucoup de tact. Pourquoi ne pas leur expliquer clairement ce que vous allez en faire ? Vous passerez peut-être un coup de fil, vous leur enverrez un email, vous en avez besoin dans le cadre d’une étude… ?
Vous connaissez bien le site, c’est normal parce que vous êtes celui qui l’a conçu. Mais ce n’est pas le cas pour tous les autres utilisateurs du site. Pour une raison ou pour une autre (faute d’inattention entre autres), certains d’entre eux pourront manquer le formulaire. D’où l’intérêt de ne pas se limiter à un seul ! Sur différents endroits (stratégiques) du site, il faut en mettre.
Si on prend l’exemple du site Yoast.com, si je ne me suis pas trompé dans mon compte, il a 3 formulaires. Peut-être est-ce l’une des raisons pour lesquelles ils ont réussi à avoir plus de 96000 abonnés (eh oui, c’est inscrit sur leur site ; je n’ai rien inventé).
Je ne sais pas vous, mais je n’ai jamais aimé le fait de devoir rebondir d’une colonne à une autre lorsque je devais remplir un formulaire. Ça ne fait que compliquer les choses, une grosse perte de temps à mon avis. À moins que vous n’y soyez contraint (parce que votre client veut récolter beaucoup d’informations et qu’une colonne s’avère insuffisante), je vous conseille de le faire simple. En effet, un formulaire à simples colonnes peut être qualifié de « simple ». Exactement comme les internautes les aiment !
Et si votre client voulait réellement avoir beaucoup d’informations ? Au lieu de diviser la colonne en 2 ou 3, je vous propose une meilleure solution. Divisez le processus d’envoi de formulaire en plusieurs étapes. C’est ce que font d’ailleurs les sites de commerce électronique qui ont besoin de plusieurs informations sur leurs clients.
Une fois que les potentiels clients ont entré certains de leurs coordonnées dans la première partie, il y a de fortes chances qu’ils poursuivent l’étape jusqu’à la fin, et ainsi, fournir les données supplémentaires. Encore ici, il y a une certaine stratégie à appliquer : commencez par demander les informations les plus importantes.
Tant que les textes sont tapuscrits, aucune chance qu’ils soient illisibles. C’est ce que vous vous dites ? Pourtant, c’est faux ! Si vous mettez tous les textes en majuscules, non seulement le formulaire n’est pas joli à voir, mais le texte ne donne pas envie de lire. Il n’est pas interdit d’utiliser les majuscules, notamment pour des mots ou des phrases courtes. On peut même les utiliser pour mettre en valeur certaines choses. Je pense tout simplement qu’il ne faut pas en faire trop.
Avez-vous déjà entré un mot de passe désiré dans un champ pour en fin de compte vous faire dire que ce n'était pas suffisant? Avez-vous essayé plus d'une fois? Ne faites pas cela aux personnes essayant d'utiliser vos formulaires d'inscription.
Ne complexifiez pas trop non plus les exigences du mot de passe, car les utilisateurs aiment utiliser les mêmes mots de passe pour leurs inscriptions en ligne, et les obliger à saisir un mot de passe trop compliqué va faire en sorte qu’ils l’oublient à leur prochaine visite et il risque de commander chez vous qu’une seule fois au lieu de plusieurs fois.
En ayant fini un brouillon du formulaire, mettez-vous à la place des internautes une seconde. Est-ce qu’il est facile à remplir ? Pouvez-vous le rendre encore plus facile, par exemple en affichant les étiquettes au-dessus de chaque champ ? Nous faisons généralement l’erreur de ne pas mettre d’étiquettes parce que nous pensons que cela nuit au design du site. Mais est-ce réellement le cas ?
En fait, des études ont été menées à ce propos. L’on a constaté qu’en mettant des étiquettes au-dessus des champs, le temps de remplissage d’un champ se fait plus rapide. Les internautes n’ont besoin de faire que très peu de mouvement des yeux. Voilà pourquoi.
Et donc, à côté des champs, ce n’est pas conseillé ? Pour tout dire, il n’y a pas de règles précises à ce propos. Mais si vous décidez de mettre ces étiquettes sur le côté, de préférence, alignez-les de manière à faciliter la lecture.
Votre objectif reste inchangé jusqu’ici : faciliter le remplissage de formulaire pour que les internautes se mettent dessus. Pour le faciliter encore plus, évitez donc d’utiliser des éléments inutiles. Vous souvenez-vous de 3 éléments dont je vous ai parlé au début de cet article ? Les cases (checkbox), les boutons radios et la liste de sélection (select) ? Vous êtes-vous déjà demandé dans quel cas les utiliser, puisqu’ils se ressemblent quand même un peu.
À titre de rappel, les boutons radio sont placés quand on veut que les visiteurs ne choisissent qu’une seule réponse. Les cases quant à elles permettent une réponse multiple, parmi une liste déjà donnée. Enfin, la sélection ne doit être sollicitée que lorsqu’il y a plus de 7 choix de réponses possibles parmi lesquels l’internaute devra choisir. Bref, n’abuse pas avec ces 3 éléments.
Quand vous pouvez le permettre, utilisez des images cliquables. Ainsi la complétion du formulaire sera-t-elle plus agréable, plus intuitive et facile ! Nous sommes quand même des webdesigners !
Bref, la conception d’un formulaire sur Webflow n’a rien de bien difficile. Le concept de glisser-déposer facilite toujours les choses ! Il suffit effectivement de glisser et déposer le bloc de formulaire, pour ensuite en faire de même pour les éléments et champs de formulaire. Cependant, convaincre les internautes à les remplir, c’est une autre histoire. En appliquant bien les 12 conseils que je viens de vous filer dans ce guide, soyez sûr que vous pouvez facilement arriver à votre objectif (et vos clients aussi) !
Dans la joie et la bonne humeur
Que vous soyez débutant ou expérimenté, la Happy.webacademy vous donne l’énergie, les stratégies et les outils pour avoir plus de liberté et générer des résultats qui propulseront votre chiffre d’affaires dans les étoiles.
