Accueil > Inspiration Design > Inspiration Divers > 30 exemples de formulaires de soumission de commentaire

30 exemples de formulaires de soumission de commentaire

mardi 21 avril 2009, par Wonka

Cet article cherche en analysant 30 exemples de formulaire de soumission de commentaire les astuces qui permettront de créer le formulaire parfait. Celui qui fera exploser votre taux de contribution et vous permettra d’acroite la popularité de vos articles !

Les formulaires sont très important sur un site Internet, ils permettent en effet de récolter des informations directement saisies par l’internaute, ils sont donc le lien entre vous et vos lecteurs.

Dans la conception du formulaire on perd souvent cette notion d’importance en créant des formulaires à la va vite et en se disant qu’après tout, un formulaire ou un autre reviendra au même résultat, le visiteur le remplira puis le validera. L’action est effectivement la même, mais son utilisation peut radicalement changer.

Ainsi un formulaire bien pensé aura des retombées bien plus intéressantes et sera un véritable atout dans votre réussite.

Nous allons nous intéresser à un formulaire bien connu, qui est l’ajout de commentaires. Vous avez sûrement remarqué ou rencontré un jour ou l’autre ce type de commentaires, souvent situés en bas des articles il invite le lecteur à intervenir sur un sujet donné ou donner son opinion sur l’article et son auteur.

Ces commentaires sont une réelle plus value pour un site Internet et permet de notifier qu’un site est populaire ou non. Malgré l’importance de ces contenus j’ai fait le triste constat : nous autres, pauvres webmasters, ne passons pas du tout suffisamment de temps à personnaliser et à améliorer le visuel ergonomique des ces formulaires.

Pour preuve, voici une sélection de 30 formulaires pris sur des sites suffisamment variés pour avoir une bonne représentation de ce que l’ont peut trouver sur le net.

30 EXEMPLES DE FORMULAIRES

Pour chaque exemple je donnerai mon avis, les bons points, et les mauvais points, vous retrouverez également quelques annotations directement sur les Screens.

EXEMPLE 1 Sur le site Psdtuts.com :

JPEG - 38,3 ko

Bons points : Le formulaire est vraiment bien personnalisé, cela donne envie de laisser un commentaire ! Les libelles sont directement dans les champs, simplifiant la lecture du formulaire.

Mauvais points : Les champs du formulaire ne sont presque pas visibles, et le bouton de soumission est aligné à droite. Le bouton devrait normalement se trouver dans la continuité des champs !

EXEMPLE 2 Sur le site Freelanceswitch.com

JPEG - 44,1 ko

Bons points : On identifie rapidement la destination des données grâce à un gros titre. Les champs sont bien visibles et le bouton se trouve bien en dessous.

Mauvais points : Les libellés se trouvent à un endroit incongru (à droite des champs), et la taille des champs est à mon avis un peu exagérée ! Regardez la taille du Textarea, totalement surdimensionné pour le type de commentaires.

EXEMPLE 3 Sur le site Creattica.com

JPEG - 26,9 ko

Bons points : … lorsque l’on remarque le fait qu’il s’agit du même formulaire que sur Psdtuts com on ne peut trouver aucuns bons points.

Mauvais points : Répéter les mêmes erreurs sur plusieurs sites. Pire, sur cette version on ne voit quasiment plus où se trouve les champs du formulaire !

EXEMPLE 4 sur le site Appstorm.net

JPEG - 34,8 ko

Décidément sur le réseau Envato se sont des comiques

Bons points : Cette fois-ci on voit bien les champs du formulaire. Les libelles sont inscrits directement dans les champs.

Mauvais points : Et le bouton, où est-il ? Ah oui encore à droite … et puis champs blanc sur noir ça fait pas un peu « too much » ?

EXEMPLE 5 sur le site Tutorial9.net

JPEG - 54,3 ko

Bons points : Très beau formulaire, sympa les coings arrondis sur les champs du formulaire. Le titre avec l’icône donne un superbe effet ! Le bouton de soumission en dessous des champs (dommage qu’il soit un peu terne).

Mauvais points : J’aurais aimé les libellés directement dans les champs du formulaire. J’aurais également aimé un formulaire plus petit car la il prend trop de place en hauteur mais aussi en largeur. Et surtout regardez en haut à droite l’espace laissé vide …

EXEMPLE 6 sur le site Psdfan.com

JPEG - 70,1 ko

Bons points : le bouton de soumission qui se voit bien.

Mauvais points : Les champs peu visibles, les libellés mal placés, l’espace énorme vide, le style plutôt simplet pour un site de design, le libellé du bouton identique au titre du formulaire ? Aie !! il y a du travail pour rendre ce formulaire agréable … !

EXEMPLE 7 sur le site Noupe.com

JPEG - 28,3 ko

Bons points : Petite personnalisation sur les champs. Bouton de soumission que l’on remarque bien !

Mauvais points : Champs du formulaire qu’on ne voit presque pas. Les libellés sont également placés sur la droite (à coup sûr, c’est une mise en page par défaut Wordpress ou autre). Le champ texte lui n’a pas le droit à des libellés, on peut donc y écrire un peu tout et n’importe quoi. Et puis, encore une fois, l’espace vide à droite.

EXEMPLE 8 sur le site Advancedphotoshop.fr

JPEG - 38 ko

Bons points : Formulaire clair et précis tout dans la continuité de haut en bas. Le captacha anti spam clair et bien lisible.

Mauvais points : Le style un peu trop classique. L’espace vide à droite. J’aurais aimé les libellés directement dans les champs de formulaires.

EXEMPLE 9 sur le site Smashingmagazine.com

JPEG - 53,5 ko

Bons points : J’ai un peu de mal à en trouver là !

Mauvais points : Le titre un peu voyant. Les styles du formulaire inexistants… à si ! seulement sur la partie basse. Des informations trèèès utiles « allowed tags » et très bien présentées. Des champs peu visibles. Un bouton qui ne ressemble pas à un bouton. Bref y’a tout à refaire … !

EXEMPLE 10 sur le site Naldzgraphics.net

JPEG - 49 ko

Bons points : Les champs arrondis avec le libellé dedans, simplement parfait ! Le titre simple et visible, le bouton personnalisé et bien visible.

Mauvais points : L’espace vide à droite. Le bouton aligné à droite ! Le bloc notify en bas … est-il perdu ?

EXEMPLE 11 sur le site Abduzeedo.com

JPEG - 33 ko

Bons points : Dans l’ensemble le formulaire est bien réalisé. Lisible, facile d’accès, et intuitif. La fonction preview est appréciable et le design global bien que sobre est efficace.

Mauvais points : Le blanc sur noir que je trouve « too much ».

Remarque : Sur le Screen vous pouvez voir un espace vide à droite. Il correspond en fait à la Sidebar du site. Ce n’est donc en soit pas un espace vide (enfin il est vide mais justifiable ;)

EXEMPLE 12 sur le site Webdesignerwall.com

JPEG - 32 ko

Bons points : Personnalisation sympa, formulaire assez lisible.

Mauvais points : Placement des champs assez hasardeux. Styles divers (fait à la main, texte web). Le bouton de soumission aligné à droite, et pas vraiment joli.

EXEMPLE 13 sur Webappers.com

JPEG - 40,8 ko

Bons points : Ce formulaire serait une bonne base pour créer le formulaire parfait ! Le fond d’une autre couleur pour différencier et mettre en avant le formulaire. Les champs visibles et personnalisés. Le bouton bien placé est lui aussi personnalisé. Aucun espace vide. Bref un régal.

Mauvais points : Bien que les libellés soit mal placés ! Et que le notify soit encore perdu.

On y était presque ;)

EXEMPLE 14 sur le site Wefunction.com

JPEG - 47,9 ko

Bons points : Le formulaire se lit bien du haut en bas sans faute d’alignement.

Mauvais points : Aucun titre ne vient annoncer le formulaire. Les champs du formulaire un peu trop long à mon goût. Le bouton de fin qui n’est pas assez visible.

EXEMPLE 15 sur le site Outlawdesignblog.com

JPEG - 30,4 ko

Bons points : Formulaire bien agencé, personnalisation sympa, bouton bien visible, libellé directement dans les champs !

Mauvais points : Le notify est un peu perdu, et pas aligné.

Sinon je trouve ce formulaire plutôt sympa ! Une bonne gestion de l’espace, personnalisation efficace. A prendre en exemple !

EXEMPLE 16 sur le site Ndesign-studio

JPEG - 30,2 ko

Bons points : Formulaire du même type qu’au dessus. Sans le notify ! Et avec en prime un système de pagination.

Mauvais points : …

De mieux en mieux, voici encore un autre exemple parfait pour s’en inspirer.

EXEMPLE 17 sur le site Fuelyourcreativity.com

JPEG - 30 ko

Bons points : Le bouton submit très visible (un peu trop d’ailleurs).

Mauvais points : L’alignement des libellés, la personnalisation qui laisse un peu perplexe. Et puis le textarea vrrrraimmmment immense permettant d’écrire : cool, great, et autre super, incredible. Pas sûr qu’on est besoin de tout cet espace. Le notify perdu en bas, et juste en dessous un checkbox suivi d’un espace vide, qu’est-ce donc ?

EXEMPLE 18 sur le site Webdesignerdepot.com

JPEG - 41,9 ko

Bons points : La lecture du formulaire se fait simplement et efficacement.

Mauvais points : Pour un site de design ce formulaire est moyennement original. Espace vide à droite, et encore une fois on dispose d’une immense textarea pour accueillir notre petit commentaire. De quoi être frustré !

EXEMPLE 19 sur le site Hongkiat.com

JPEG - 41,7 ko

Bons points : Presque parfait, bonne gestion de l’espace. Le formulaire est bien mis en valeur, les champs sont bien visibles, la lecture est simple (de haut en bas) le bouton est suffisamment mis en valeur.

Mauvais points : Peut être des ajustements mais aucun mauvais point.

Voici un nouvel exemple à imiter !

EXEMPLE 20 sur le site Techrunch.fr

JPEG - 47,6 ko

Bons points : Une très bonne optimisation de l’espace, l’espace de droite souvent vide se voit combler par d’autres informations en rapport avec la dynamique de l’article. Pas bête non ?

Mauvais points : J’aurais aimé une personnalisation du formulaire. Le bouton Aligner à droite.

EXEMPLE 21 sur le site Liomag.com

JPEG - 42,1 ko

Bons points : Formulaire lisible sans espace vide.

Mauvais points : Libellé des champs aligné à droite, champs du formulaire surdimensionné est pas très joli. Et puis à quoi cela sert de donner la possibilité à l’utilisateur d’effacer via un bouton tout ce qu’il vient de remplir ? A part pour frustrer l’internaute en l’incitant à faire une mauvaise manipulation, sinon je ne vois pas !

EXEMPLE 22 sur le site Wizishop.com

JPEG - 47,5 ko

Bons points : Très belle personnalisation du formulaire et du bouton de soumission. Bonne lecture du formulaire du haut vers le bas sur une seule verticale.

Mauvais points : Un espace vide sur la droite.

Dans l’ensemble ce formulaire est bien pensé, peut être dommage qu’il prenne tant de place en hauteur.

EXEMPLE 23 sur le site Blogauto.com

JPEG - 78 ko

Bons points : …

Mauvais points : Ce formulaire traine un peu en longueur, pour inciter le lecteur à laisser un mot je trouve que c’est bien contraignant …

EXEMPLE 24 sur le site Leblogauto.com

JPEG - 65,5 ko

Bons points : …

Mauvais points : Un formulaire sans titre, des champs invisibles, un filtre anti spam qui prend beaucoup de place, une zone de texte qui laisse un vide, et pour finir sur un bouton qui ne ressemble plus à un bouton … Il y a pas mal à refaire sur ce formulaire.

EXEMPLE 25 sur le site Resto-de-paris.com

JPEG - 57,4 ko

Bons points : le formulaire est bien construit et ce lis bien de haut en bas. Les champs sont bien visibles, le bouton de soumission aussi. J’aime également la personnalisation du champ commentaire avec le « Alors moi je veux dire ». Le bouton est également personnalisé avec un « yallou » que je ne connais pas, mais c’est original.

Mauvais points : Dommage pour le vide à droite.

Sinon le formulaire est bien fait, manque peut être un peu de personnalisation au niveau graphisme. Vous pouvez cependant le prendre en exemple.

EXEMPLE 26 sur le site Cours-de-maths-78.fr

JPEG - 44,9 ko

Bons points : La personnalisation est sympa, la lecture et l’utilisation sont agréables. Bien pensé le fait de changer le style lorsque l’on a sélectionné un champ du formulaire !

Mauvais points : Petit vide à droite.

Vous pouvez prendre en exemple le fait de changer de style lorsque l’on clique sur un champ du formulaire.

EXEMPLE 27 sur le site Youtube.com

JPEG - 73,1 ko

Bons points : Ce formulaire est intéressant car simplifié au maximum lorsque l’utilisateur est connecté à son compte. Ce principe ne peut pas s’appliquer à tous les sites cependant il est intéressant de noter la simplification portée à son paroxysme.

Mauvais points : …

EXEMPLE 28 sur le site 20minutes.fr

JPEG - 73.1 ko

Bons points : Formulaire bien pensé et bien positionné sur la page. Le bouton est bien visible. Ce site joue la carte de la prudence en appliquant un message de modération à la place du commentaire.

Mauvais points : …

EXEMPLE 29 sur le site 1001actus.com

JPEG - 38.9 ko

Bons points : J’aime la personnalisation discrète sur les champs du formulaire.

Mauvais points : J’aurais aimé que les libellés du formulaire se trouvent dans les champs, cela aurait rendu le formulaire presque parfait.

La lecture cependant se fait naturellement et l’utilisation est intuitive. Ce formulaire peut être également pris en exemple.

EXEMPLE 30 sur le site Wks.fr

JPEG - 72.9 ko

Bons points : Quelques fonctionnalités sympas.

Mauvais points : Très long, trop de champs à remplir, aucune personnalisation.

Et oui on termine sur le formulaire même de Wks.fr, la conclusion est dramatique et nous allons continuer cet article avec la conviction de la nécessité de changer.

CREATION DU FORMULAIRE PARFAIT

Pour éviter de surcharger la page je vais couper en deux cet article, merci donc de passer sur cette page pour continuer la lecture de cet article.

Cliquez ici pour passer à la suite de l’article : http://www.wks.fr/Tuto-photoshop-Creer-un-formulaire.html

Portfolio

Messages

Un message, un commentaire ?

Forum sur abonnement

Pour participer à ce forum, vous devez vous enregistrer au préalable. Merci d’indiquer ci-dessous l’identifiant personnel qui vous a été fourni. Si vous n’êtes pas enregistré, vous devez vous inscrire.

Connexions’inscriremot de passe oublié ?