30 exemples de formulaires de soumission de commentaire

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 :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Partager cet article avec vos amis

Ajouter un nouveau commentaire

Article publié par Julien DEBOVE

Voir le profil Google+ de

Images Réalisées à partir de ce tutoriel Photoshop

publiée par Inconnu

Vous avez terminé ce tuto ? Partager votre création graphique.

Il y a 27 commentaires publiés sur cet article
  • Wonka

    Pour répondre à la personne qui m’a laissé cette image ci-dessus :

    Et bien non il ne faut pas être parfait pour donner son avis sur quelque chose et heureusement, sinon les critiques auraient du mouron à se faire !

    De plus cet article sert à partager les connaissances, notamment sur la création de formulaire.

    En analysant les fautes commises sur beaucoup de sites, cela permet de les mettre en évidence pour éviter de les reproduire.

    Et pour bien montrer que je ne fais pas Monsieur je sais tout, j’ai fait la même analyse critique sur le site 30 ! Mais là, je doute que tu es lu l’article jusqu’au 30 ... dommage.

    Et pour terminer, j’ai moi même utilisé cet article pour améliorer ce formulaire d’ajout de commentaires, et comme tu l’auras remarqué, il reste encore pas mal de bugs.

    Le problème d’alignement devrait se régler facilement, le vide à droite n’y est pas car cet espace correspond à la sidebar, donc rien à voir avec un vide ;) Quant au pseudo, oui si tu écrits rien alors il reste les données par défaut !

    Voila ma petite explication ;)

    Répondre
  • le rouge

    Ah la la, ces gens qui ont toujours des choses à redire...

    De 1, j’ai pas l’impression que Wonka a déclaré que son formulaire était terminé, d’ailleurs le tuto pour le reproduire (je suppose que c’est bien cela) n’est pas encore publié...

    De 2, un petit écart de 1 pixel, c’est absurde de le relever, de toute façon c’est quasi impossible d’être parfait sur chaque navigateur...

    De 3 pour le pseudo, c’est très juste ma foi de laisser un terme basique genre « anonyme » ou « votre pseudonyme »...

    Par contre, une vérification d’envoi de formulaire devrait être ajouté, car il est possible de poster sans rien écrire (même si une fois de plus je suppute que ce n’est pas terminé)

    Merci Wonka et à bientôt !

    Répondre
    • Wonka

      Oui j’ai encore pas mal de chose à faire sur ce formulaire, mais promis quand je l’aurais terminé il sera magnifique :D

      Répondre
  • Asti

    Salut Wonka merci beaucoup pour cet article. Étant en train de me créer un blog/portfolio avec wordpress, cet article me donne pleins d’idées.. Sinon j’avais une petite question, pourquoi ne pas intégrer gravatar aux commentaires de wks ?? Enfin je ne sais pas si c’est possible de l’intégrer sous SPIP.

    Asti ;)

    Répondre
    • Wonka

      Je pense que se doit être possible, cependant spip dispose déjà de ses comptes utilisateurs qui peuvent uploader lors propre avatar.

      Cependant les gravatars sont effectivement une bonne idée. J’y penserais quand je referais le style des commentaires, qui avouons le sont quand même pas très bien mis en page pour le moment ;)

      Répondre
  • Sorrow

    Wonka, il est possible dans le formulaire d’empecher l’envoie si tout les champs ne sont pas remplis. Peux être devrait tu te pencher sur le php :). En petit aperçu sur mon site internet : http://www.wankil.fr/contact.html

    Il existe meme une fonction en php qui permet de voir si le nom de domaine de l’addresse e-mail existe, ce qui limite les risques de ce retrouver avec des addresse e-mail bidon =).

    Répondre
    • Wonka

      Oui en javascript aussi :) mais je n’ai pas encore décidé quel champs était obligatoire et quel champ non. Mais de toute manière le formulaire n’est pas encore totalement terminé ;) il reste donc la vérification et le changement de style lorsqu’on édite un champ du formulaire !

      Répondre
    • le rouge

      Comment s’appelle cette fonction s’il te plaît ? Je la connais pas...

      Répondre
  • Bastien

    C’est dingue de croire qu’il y a encore des gens qui ont 20 minutes de leur temps à perdre en sabotant le travail des autres... Jalousie ?

    En tout cas, j’ai peine pour lui...

    Répondre
    • Wonka

      Oui je pense la même chose, je me demande franchement à quoi sa sert ! enfin ...

      Répondre
  • Sorrow

    Moi aussi j’ai peine pour lui :/

    Répondre
  • toinousp

    ... Les gens son fou !!!! Faut vraiment être gamin pour faire ça...

    Bonne chance wonka... (supprime ces petits commentaires qui ne servent à rien) :)

    Autrement les tags que l’on pouvait utiliser dans l’ancienne version du formulaire, il fonctionnent encore ??

    Répondre
  • Zecko

    Mettre quelque chose de pas finaliser en ligne ? Drôle d’idée...

    Répondre
    • Wonka

      Oui c’est un vrai problème :) mais j’ai toujours fait ça !

      Répondre
  • boon

    je pensais que les fan de design était des gens un peu censés ... Quand on voit le niveau de certain sa fait super peur O_o

    Sinon wonka, merci pour ce décryptage de formulaire de commentaires j’adore ... cependant je suis pas fan de celui que tu présente dans ton deuxième tuto. Je préfère largement celui où j’écris actuellement.

    Super cool de ne pas faire toujours des tutos photoshop, mais aussi de nous décrypter le webdesign (comme l’article sur les templates wordpress que j’adore).

    Continue ainsi et j’espère que tu ne sera jamais démotivé par ces gens dégouté de ne pas avoir autant de succés que toi =) (comme par exemple /> et Votre pseudonyme).

    Sinon côté php, je te conseille de vérifier que tout les champs sont remplis ( au moins pseudo ) par autre chose que par « Votre pseudonyme » pour éviter le spam ;-) —>

    Un petit [ if post pseudo = Votre pseudonyme On envoie pas le commentaire ] [ else On envoie ]

    Petit script de 10 lignes qui te permettra de rester tranquille ;-)

    Longue vie à wks.fr

    Répondre
    • Wonka

      Merci beaucoup pour ce message ;)

      Répondre
      • Boon

        Merci à toi wonka ... Tu a su faire découvrir chez moi une passion, le design ;-)

        Wks for Ever :p

        Voir en ligne : Google :D

        Répondre
  • HercuT

    L’idée d’analyser les formulaire est bonne. Mais il faut revoir certainne chose.

    Personnellement je prefaire amplement le formulaire de PStut.

    Aussi la critique sur le fait d’avoir le bouton a droite, est mauvaise. Car dans la logique on lit de gauche a droite, ensuite quand on ratisse une page on par du coin haut gauche pour arriver au coin droit, on suit la diagonal, donc la logique est bien de mettre le bouton a droite.

    Après chacun ses gouts et couleurs. Mais deuxième exemple, tous les forums on les boutons d’édition et réponse a droite ...

    Aussi je sais pas comment est calibré ton écran mais souvent tu demande ou sont les champs alors qu’ils sont tres voyant.

    Aussi tu parle de vide, enfin il faudrait voir le context car vu comme ca ... Le vide peut dépendre beaucoup du context.

    Donc pour ma part, je trouve que l’analyse des formulaires est pas terrible ou pris a la légère, mais le concept est bien.

    Bravo, merci et bonne continuation.

    A oui je vois pas trop l’intérêt de remettre le titre de l’article

    Répondre
    • Wonka

      Merci pour ce commentaire.

      La lisibilité d’une page n’a rien à voir avec la lisibilité d’un formulaire.

      Un formulaire si lit de haut en bas, naturellement on lit donc la partie gauche du formulaire et très rarement la partie droite.

      Si la création de formulaire t’intéresse je t’invite à suivre les travaux de Luke Wrobleski ancien gourou ergonome de chez yahoo, il étudie le comportement des utilisateurs sur de telle formulaire.

      Voici un article en français qui traite de son livre.

      http://bbxdesign.com/2009/04/21/comment-realiser-un-bon-formulaire-html/

      Beaucoup des astuces données ci dessus (dans l’article) proviennent d’une conférence animé par Luke que j’ai assisté il y a moins d’un mois.

      Les analyses sont donc correct, notamment avec les vides souvent critiqués. Car il ne sont jamais dus au hasard, tout juste du à une mauvaise gestion de l’espace. Exclus évidemment les vides laissé par une sidebar blanche, c’est le cas sur wks.fr et sur abduzeedo par exemple.

      En espérant t’avoir apporté d’avantage d’information ;)

      Répondre
      • HercuT

        Merci de ta réponse, je prends note, mais je garde quand meme mon avis sur le block a droite ^^.

        Mais les gout et couleurs ne se discute pas hein .

        A bientot !

        Voir en ligne : Hprode

        Répondre
  • HercuT

    A oui j’estime pas avoir reponse a tout est etre mieux, mais ton avis est trop subjectif.

    Aussi pas tres pratique la preview, enfin oui est non, car si j’avais pas fait attention je ne l’aurait pas vu.

    Répondre
  • lannoy

    Salut wonka, si ça te dit je peut t’aider pour le php, a finir ton formulaire et d’autre petit truc si tu le souhaite. Tu a mon adresse e-mail et façon je suis inscrit a ton site ;)

    Répondre
  • steve

    Merci c’est toujours mieux d’avoir un formulaire nickel

    Répondre
  • billythekick

    Bonjour, formidable et instructif, mais j’ai cherché de fond en comble, impossible de trouver le vectoriel du formulaire de commentaires proprement dit, (là ou j’écris en ce moment) mais surtout pour avoir les 2 toutes petites lignes du bas à droite en diagonale qui servent à agrandir le bloc de rédaction...c’est un détail qui a son importance, et je veux exactement les mêmes que celles courrament utilisées. Avez-vous une idée ? Ou cela se trouve ailleurs que dans illustrator ? (Dreamweaver..indesign ?...etc) (Je suis sous mac) Si vous avez des pistes, n’hésitez pas ! Merci.

    Répondre
  • Ragorn

    Simpa comme article ! Merci beacoup !

    Répondre
  • scb

    Bonsoir, très bon article informatif, et instructif... je vous suis depuis longtemps deja et j’adore vos tutos... Cependant, une petite question sur ce sujet ci précisemment, Les screenshots 27 et 28 sont les mêmes alors que les sites sont différents, normal ou pas ?

    Ps : Commentaire écris ( écriT pour l’ortho :)

    Répondre
  • Chris36

    Bonjour, excellentes analyses, cependant, les exemples 27 et 28 sont, si je ne m’abuse, les memes pour des sites differents, est ce normal ?

    Répondre
Ajouter un nouveau commentaire

Warning: Wrong parameter count for join() in /home/www/6aa640a53cf66f9374508657e4e1b72e/web/plugins/spipBB/inc/statvisites.php on line 60

Warning: Wrong parameter count for join() in /home/www/6aa640a53cf66f9374508657e4e1b72e/web/plugins/spipBB/inc/statvisites.php on line 72

Fatal error: Call to undefined function: spip_unlink() in /home/www/6aa640a53cf66f9374508657e4e1b72e/web/plugins/spipBB/inc/statvisites.php on line 96