Les formulaires d'inscription sont de différentes formes et tailles. Certains sont un seul champ, d'autres sont un processus en plusieurs étapes qui s'étendent sur plusieurs écrans.
Aujourd'hui, nous examinerons 20 formulaires attrayants et fonctionnels pour voir si nous pouvons trouver des idées utiles que vous pourrez appliquer la prochaine fois que vous construirez un formulaire d'inscription.
300 pixels
Plusieurs des exemples que nous allons examiner aujourd'hui proviennent de formulaires d'inscription en version bêta comme celui-ci. Généralement, ces pages fournissent uniquement un graphique de présentation et peu, voire aucune, d’informations sur le site.
J'aime beaucoup le graphique du bouton 3D et son animation lorsque vous cliquez dessus. Celui-ci est fait avec des images et du Javascript, mais le style me rappelle BonBon Buttons, une expérience CSS3 téléchargeable gratuitement.
Un autre avantage de cette page est qu’elle utilise beaucoup les images-objets. Découvrez la source pour voir l'image originale.
Vol d'essai
Le style lisse et simple sur celui-ci est tout simplement magnifique. J'aime le remplissage supplémentaire de chaque ligne et la mesure dans laquelle le champ de formulaire sélectionné se distingue des autres.
C'est en fait un aspect important de la convivialité. Les formulaires peuvent être pénibles pour les utilisateurs, et l’ajout de petites touches, telles que la mise en évidence évidente d’un champ actuel, peut vraiment les aider à suivre le processus.
Honorable
J'aime la façon dont cette espèce flotte dans l'océan. Il y a aussi beaucoup de style très agréable et subtil ici. Vérifiez l'ombre intérieure des champs et la façon dont les bordures des champs sont plus sombres en haut à gauche qu'elles ne le sont en bas à droite. Il existe également de très bonnes fonctionnalités de retour d'informations intégrées dans ce formulaire, dont nous discuterons l'importance dans un exemple ultérieur.
CertTime
Les fenêtres modales sont toujours cool. Ils superposent le contenu actuel au lieu de vous diriger vers une page différente. D'une certaine manière, c'est moins dérangeant que d'être emmené dans un endroit neuf, ce qui ressemble à une interruption.
En atténuant les graphismes de la page d'accueil et en affichant un formulaire d'enregistrement de panneau de signalisation modal, vous obtenez le sentiment que le processus sera rapide et sans douleur et que vous pourrez revenir à la navigation en un rien de temps.
Les listes d'idées
Celui-ci est beaucoup plus long que les formulaires précédents et a plusieurs champs à remplir. Cependant, le contenu est séparé en trois parties gérables, ce qui l’aide à ne pas se sentir comme une seule forme.
De plus, j'aime beaucoup le fait que le dessin semble être une forme imprimée, vous pouvez facilement vous voir écrire dans les réponses!
Poulie
Je n'ai pas grand chose à dire à propos de celui-ci, à part le fait que j'aime l'aspect de la page. La petite boîte insérée dans l’adresse enregistrée est une délicate attention. Ce champ vérifie également automatiquement votre choix de nom d'utilisateur pour voir s'il est déjà pris.
ACosmin.com
L'utilisation de motifs et de textures sur ce site est fantastique. Compter les rectangles sur le formulaire de courriel est amusant, il y a le champ lui-même et une bordure sur le champ, qui est entourée d'un motif de points, qui est entouré d'un remplissage blanc, puis il y a un autre bord gris plus foncé et enfin une grande boîte tout tenir.
En le décrivant, vous penseriez que le résultat serait chargé et moche mais il est venu notre magnifique.
Santé Bloom
Ici, j’ai aimé les messages amicaux sur le texte du formulaire: «Restons en contact». Trop souvent, nous visons directement quelque chose de simple et d’ennuyeux quand quelques minutes de réflexion peuvent nous mener à une alternative beaucoup plus intéressante.
Avanti
La forme Avanti concerne tout ce gros bouton. La taille agrandie et le choix de couleurs audacieuses attirent votre attention directement sur celui-ci où vous voyez une déclaration simple et agréable qui n'appelle pas vraiment à l'action, mais indique plutôt ce que le bouton donnera du point de vue de l'utilisateur, "Inscrivez-moi". Cela ne laisse aucun doute sur ce qui se passe lorsque vous appuyez sur le bouton.
Logique Audio
Audio Logic a choisi de faire en sorte que les personnages illustrés loufoques lèvent leur formulaire d'inscription. Cela apporte beaucoup de caractère à la page et vous fait sourire quand vous la voyez; une technique à explorer avec vos propres illustrations de personnage!
Culture culinaire
J'aime le renforcement visuel que ce site a utilisé pour les champs de formulaire. Ce type d'icônes simples peut être trouvé dans l'un des cent jeux d'icônes gratuits en ligne et ajoute beaucoup au formulaire, vous pouvez presque le remplir sans même lire le texte!
Nous voyons ce type d’utilisation d’icônes assez souvent dans la navigation et il est plutôt rafraîchissant de voir quelqu'un le transférer dans un formulaire.
Gowalla
La forme Gowalla a un message intéressant à enseigner: simple, c'est bon. Voici un site avec un design exceptionnel, prêt à l'emploi, qui fait la publicité d'une application qui est identique, mais qui n'a pas choisi de faire des choses fantaisistes ou déroutantes sur son formulaire d'inscription.
Au lieu de cela, c'est juste une simple boîte blanche avec de beaux grands champs. Remarquez comment ils ont collé les deux premiers champs sur la même ligne, tout en maintenant l'alignement justifié serré. C’est une technique peu encombrante qui ne casse pas votre mise en page.
Buffle
Parfois, une forme énorme peut être incroyablement décourageante. Vous voyez tous ces champs à remplir et votre premier instinct consiste simplement à fermer la fenêtre du navigateur et à les faire disparaître.
Comme le montre le site ci-dessous, il est parfois utile de diviser ces champs en plusieurs étapes. Vous ne voyez qu'un petit morceau à la fois pour ne pas vous décourager et pour surveiller vos progrès via la chapelure située en haut.
Kontain
Voici ce que je déteste: remplir vingt formulaires et cliquer sur Soumettre pour découvrir que j'ai commis une erreur quelque part. Ensuite, je dois rechercher dans la page de minuscules astérisques indiquant les endroits où je me suis trompé. Ce n'est pas juste moi non plus, tout le monde dans le monde déteste ça! Que vous ayez trois champs ou cinquante, vous améliorerez infiniment l'expérience utilisateur en fournissant des commentaires intelligents et en direct, champ par champ.
Nous voyons cela en action sur le formulaire Kontain ci-dessous.J'ai entré un mot de passe qui ne comptait que trois lettres et un énorme signe est apparu pour me dire que j'avais fait quelque chose de mal. La même chose se produit si vous entrez un email non valide. La clé ici n'est pas simplement de fournir des commentaires, mais bien des commentaires clairement visibles et facilement compréhensibles que l'utilisateur peut corriger avant de cliquer sur le bouton d'envoi.
Zzz
Gowalla a un site amusant et un formulaire d'inscription ennuyeux, qui a ses mérites. Cependant, il n'existe pas de règle incassable selon laquelle vous ne pouvez pas vous amuser un peu avec vos formulaires.
Consultez le formulaire ci-dessous, non seulement les graphismes sont dingues, mais les champs de formulaire eux-mêmes sont légèrement pivotés pour augmenter l'aspect décalé. Cela ne serait certainement pas approprié dans de nombreuses situations professionnelles, mais sur un site rempli de moutons volants annonçant une boisson qui vous rend somnolent, cela fonctionne parfaitement.
Vimeo
Les gens de Vimeo ont décidé de consacrer une grande page à un petit formulaire. Ils l'ont collé en haut à droite et ont rempli le reste de la page d'une île illustrée et de quelques nuages flottants animés.
Comme dans l'exemple précédent, cela ne convient certainement pas à toutes les situations, mais cela fonctionne bien ici et constitue une implémentation assez amusante d'une forme par ailleurs ennuyeuse.
Tour de thé
Celui-ci représente un peu intéressant de penser hors de la boîte. Le? Inscrivez-moi? bouton à droite a été étiré verticalement pour correspondre à la hauteur des deux champs.
Nous ne sommes pas habitués à appuyer sur des boutons carrés sur le Web, vous devez donc faire attention à mettre en œuvre quelque chose comme cela, mais j'aime ce qu'ils ont fait ici.
13 créatifs
Lorsque vous avez un site très stylé qui suit un thème visuel clair, le fait d'insérer une forme avec un style par défaut peut nuire à l'intégrité de votre thème entier.
Au lieu de cela, vous devez trouver un équilibre entre faire ressortir votre zone de formulaire et l’adapter au thème général du site. Je pense que la forme créative ci-dessous est un exemple parfait de cette technique en action.
Obama
La forme d'Obama utilise la même technique que l'exemple Avanti ci-dessus. Remarquez à quel point ce bouton rouge ressort sur la page très très bleue. Cette fois, le texte du bouton est un appel clair à l'action, "En savoir plus". Que vous aimiez ou détestiez sa politique, il est clair qu'Obama possède jusqu'à présent la meilleure marque visuelle de tout président américain, une tendance qui, je suppose, a établi une norme qui continuera pour les futurs titulaires du poste.
Obtenez Brewin '
Ce dernier exemple présente des avantages et des inconvénients. Dans l'ensemble, la page est super attrayante. Cependant, on a l'impression qu'il y a beaucoup de contenu pour un alignement au centre, ce qui est assez faible pour autre chose que quelques lignes.
La leçon à tirer est que parfois les projets les plus simples sont les plus difficiles à concevoir. Quand il y a une tonne de contenu, vous avez beaucoup à travailler et vous pouvez construire des alignements forts et clairs. Cependant, avec un peu de contenu qui ne remplit pas la page, vous devez souvent lutter pendant un certain temps avant d'arriver à la solution idéale.
Montrez-nous les vôtres!
Chacun des vingt exemples de formulaire d'inscription ci-dessus peut vous apprendre quelque chose sur la façon de construire efficacement le vôtre. Laissez un commentaire ci-dessous avec un lien vers certains formulaires que vous avez créés. Quelles techniques avez-vous utilisées pour renforcer la forme visuellement et fonctionnellement?