Le webdesign n’est pas seulement une question de design, et tu le sais pertinemment bien. Pour augmenter tes chances de trouver des clients, ou encore de les fidéliser, il faut que tu puisses 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 tu crées marchent efficacement. Comment s'en assurer ? Ce guide sur les formulaires Webflow et tout ce qu’il faut savoir à leur propos t’aidera sûrement !

🌈Sondage

À ton 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ésite pas à partager ton avis en commentaires.

Sommaire

Comment ajouter un formulaire Webflow ?

Quels éléments paramétrer dans le formulaire ?

Modification du formulaire

Zoom sur les éléments de formulaire

Configuration des messages de réussite et d’erreur

Conseils dans la création de formulaires

1. Ne pas déborder de champ
2. Ne pas compliquer le contenu
3. Ne pas laisser les potentiels clients dans l’ignorance
4. Ne rien cacher aux visiteurs du site
5. Ne pas se limiter à un seul formulaire
6. Ne pas utiliser plusieurs colonnes
7. Ne pas compliquer le processus
8. Ne pas rendre illisibles les textes
9. Montrer ce qu’ils doivent faire
10. Afficher les libellés des questions au-dessus des champs de remplissage
11. Ne pas abuser de certains éléments
12. Ne pas se contenter d’un formulaire sans vie

Conclusion

Vidéo

Comment ajouter un formulaire Webflow ?

Rien de plus facile, quand tu as ouvert la page sur laquelle tu veux insérer un formulaire, rends-toi dans le panneau d’ajout d’éléments, puis dans éléments. Enfin, tu verras « formulaire » (form). J’espère que tu n’as pas oublié : sur Webflow, le système de glisser-déposer prône. Pour insérer ce formulaire, tu devras 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 tu gères Webflow, tu sais de quoi je parle.

Quels éléments paramétrer dans le formulaire ?

Je suis sûr que le formulaire Webflow créé, à son état brut, ne conviendra pas à ton goût. Il te faut quelque chose de plus personnalisé. Tu seras donc amené à modifier ces 3 paramètres (nous allons voir chacun d’entre eux au cours de ce guide) :

• Modification du formulaire lui-même (les champs à ajouter ou à supprimer, à personnaliser ou non)
• Le message de confirmation
• Le message d’erreur du formulaire

Modification du formulaire

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 :

• Input (champ de saisie) : Est celui qui collecte les données que les internautes ont entré. Seulement, il n’est présenté qu’en une seule ligne.
• Text area (champ de texte) : Ressemble comme 2 gouttes d’eau au fonctionnement de input. La seule différence réside dans le fait qu’on peut y écrire un long texte (plusieurs lignes). En général, on l’utilise pour recevoir les messages en provenance des internautes.
• File upload (fichier à joindre) : Comme son nom l’indique, il est mis en place pour recevoir des pièces jointes.
• Checkbox : Est un sélecteur d’options. Les visiteurs ont le choix entre ne sélectionner qu’une seule option ou plusieurs options.
• Radio button : Cet élément est similaire au Checkbox, mais les visiteurs ne pourront sélectionner qu’une seule option.
• Select : Il agit comme une liste déroulante. Ton client te dit alors quelles informations souhaiterait-il ajouter dans cette liste pour qu’ensuite, ses prospects puissent faire leur choix.
• ReCAPTCHA : Tu as certainement dû déjà faire face au reCAPTCHA lors de ta navigation sur divers sites. Il s’agit d’un service de Google qui sert à prévenir contre les spams. Je ne connais personne qui soit ravi de recevoir des mails pour leur notifier des spams en provenance des formulaires qu’ils ont installés sur leur site !
• Enfin, le bouton de soumission : Il est OBLIGATOIRE. Le seul élément à absolument faire figurer dans le formulaire, car il est celui qui déclenchera l’action.

Tous ces éléments ne figureront pas forcément sur un site. En fonction de la demande de tes clients, tu pourrais ne pas avoir besoin de tout cela ; peut-être te contenteras-tu 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ù tu as 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é.

Note bien que ces éléments ne peuvent être ajoutés que dans le bloc réservé au formulaire Webflow.

Zoom sur les éléments de 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, tu n’as 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 :

• Label : Il s’agit de la description de la fonction du champ concerné.
• Required option : Pour laisser le choix ou non, aux internautes, de remplir un champ (supposons que ton client veut avoir l’adresse email de ses prospects. Dans ce cas, il faut cocher le required option du champ email).
• Placeholder : Un texte s’affiche généralement dans les champs de formulaire. Par exemple, dans le champ d’email, on inscrit des termes comme exemple@tondomaine.com. Je dirais donc que les placeholder ont été mis dans le but de guider l’internaute sur ce qu’il doit écrire. Il peut être un simple mot ou une longue phrase.
• Text type : Il est celui qui définit le type de données qui peut être inséré dans un champ (email, mot de passe, numéro de téléphone…). Pour le champ de mot de passe par exemple, les textes entrés sont de suite cachés. Pour le champ de numéro de téléphone, il n’accepte que des données chiffrées. Bref, le champ concerné n’accepte qu’un contenu correspondant au type entré. Le cas échéant, il montre un message d’erreur au moment d’appuyer sur le bouton de soumission.
• Autofocus : En activant cette option sur un élément, la page web redirige automatiquement les internautes vers cet élément de formulaire, une fois qu’elle a fini de charger.
• Bouton de soumission : Pour celui-ci, les seuls paramètres à configurer sont les textes affichés en mode normal, et en mode attente d’envoi. Par défaut, ce sont respectivement submit et please wait.

Configuration des messages de réussite et d’erreur

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. Tu peux 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 :

• Normal : pour montrer l’état actuel du formulaire Webflow, exactement comme tu le vois en mode édition.
• Succès : pour faire savoir que le message est bien parti.
• Erreur : pour dire qu’un problème de soumission de formulaire a été rencontré.

Si possible, je te 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 ton côté (ou celui de ton 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 ton cas (toi, qui a créé le site). Toi aussi, tu auras droit à des notifications sur ce formulaire sur ton tableau de bord Webflow. Rien de plus simple. Encore mieux, les fichiers que tu auras récoltés peuvent être exportés en fichier CSV .

Conseils dans la création de formulaires

1. Ne pas déborder de champ

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 te 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 %.

2. Ne pas compliquer le contenu du formulaire Webflow

As-tu déjà pensé à la raison pour laquelle tu voulais mettre un formulaire sur ton site ? Est-ce pour inciter les lecteurs à t’écrire, pour convertir tes prospects en clients ou autres ? Ce que j’ai envie de te dire est que chaque formulaire a un objectif bien précis. Tu dois 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’encombre pas de choses futiles, de choses dont tu n’auras sûrement pas besoin. Si tu demandes à tes 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 tu crées un site professionnel ne signifie pas que tu dois forcément écrire dans 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.

3. Ne pas laisser les potentiels clients dans l’ignorance

Tu dois 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 ton 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 tu comptes 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.

4. Ne rien cacher aux visiteurs du site

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 tu as 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 tu vas en faire ? Tu passeras peut-être un coup de fil, tu leur enverras un email, tu en as besoin dans le cadre d’une étude… ?

5. Ne pas se limiter à un seul formulaire

Tu connais bien le site, c’est normal parce que tu es 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é).

6. Ne pas utiliser plusieurs colonnes

Je ne sais pas toi, 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 tu n’y sois contraint (parce que ton client veut récolter beaucoup d’informations et qu’une colonne s’avère insuffisante), je te conseille de le faire simple. En effet, un formulaire à simples colonnes peut être qualifié de « simple ». Exactement comme les internautes les aiment !

7. Ne pas compliquer le processus

Et si ton client voulait réellement avoir beaucoup d’informations ? Au lieu de diviser la colonne en 2 ou 3, je te propose une meilleure solution. Divise 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 : commence par demander les informations les plus importantes.

8. Ne pas rendre illisibles les textes

Tant que les textes sont tapuscrits, aucune chance qu’ils soient illisibles. C’est ce que tu te dis ? Pourtant, c’est faux ! Si tu mets 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.

9. Montrer ce qu’ils doivent faire

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.

10. Afficher les libellés des questions au-dessus des champs de remplissage

En ayant fini un brouillon du formulaire, mets-toi à la place des internautes une seconde. Est-ce qu’il est facile à remplir ? Peux-tu 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 tu décides de mettre ces étiquettes sur le côté, de préférence, aligne-les de manière à faciliter la lecture.

11. Ne pas abuser de certains éléments

Ton objectif reste inchangé jusqu’ici : faciliter le remplissage de formulaire pour que les internautes se mettent dessus. Pour le faciliter encore plus, évite donc d’utiliser des éléments inutiles. Te souviens-tu de 3 éléments dont je t’ai parlé au début de cet article ? Les cases (checkbox), les boutons radios et la liste de sélection (select) ? T’es-tu 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.

12 Ne pas se contenter d’un formulaire sans vie

Quand tu peux le permettre, utilise 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 !

Conclusion

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 te filer dans ce guide, soit sûr que tu peux facilement arriver à ton objectif (et tes clients aussi) !

Commentaires