10 extraits de code pour créer de beaux formulaires

Chaque site Web a généralement besoin d'un type de formulaire, qu'il s'agisse d'une page de paiement ou d'une simple page de contact.

Il est crucial de s'assurer que vos formulaires fonctionnent, donc la convivialité est n°1. Mais l'esthétique est également importante car les conceptions dignes de confiance sont toujours plus engageantes.

Si vous êtes à court d'idées de design, cette collection pourrait vous aider. C'est une collection de 10 modèles de formulaires avec un code source gratuit. Vous trouverez de nombreux schémas de couleurs, styles de champs de saisie, styles typographiques et bien plus encore.

De plus, ils sont tous hébergés gratuitement afin que vous puissiez copier et jouer avec le code à votre guise.

1. Conception matérielle

Tout le monde connaît le langage de conception matérielle de Google au cours de son ascension ces dernières années. Les concepts de conception matérielle visaient les applications Android, mais se sont rapidement répandus sur le Web.

Si vous aimez le style minimaliste de l'interface utilisateur matérielle de Google, consultez cette forme matérielle créée par Jon Uhlmann.

Il fonctionne sur Sass et Pug pour le prétraitement CSS/HTML. C'est aussi une forme assez légère et les éléments de conception matérielle devraient être identiques dans tous les navigateurs.

Vraiment une source d'inspiration pour tous les concepteurs de matériaux.

2. Sous la mer

Faites un voyage dans l'océan dans ce formulaire de contact très unique construit avec un style aquatique.

L'arrière-plan de la page entière utilise un motif répétitif pour créer les vagues de l'eau de l'océan. Mais les petits poissons animés sont une toute autre histoire animée à partir d'une image d'arrière-plan.

De plus, chaque fois que vous sélectionnez un champ de saisie, une pieuvre amicale apparaît pour vous saluer. Comment pittoresque!

3. Formulaire Bootstrap 3

Les styles Bootstrap par défaut sont assez ennuyeux et ils ont vraiment été utilisés à mort à ce stade. Chaque fois que je vois un site Bootstrap avec les mêmes styles génériques, je ne peux qu'imaginer que le concepteur était trop paresseux pour personnaliser ou trop concentré sur l'expérience pour s'en soucier.

Ce formulaire BS3 fait les choses correctement en s'appuyant sur le framework Bootstrap. Il utilise quelques restylings sur les champs de saisie et le bouton d'envoi pour créer un formulaire Bootstrap adorable dont vous ne sauriez jamais qu'il était Bootstrap.

Si vous utilisez une mise en page BS3, envisagez certainement de retravailler vos formulaires comme celui-ci. Vous pouvez également essayer d'utiliser un framework tiers construit sur Bootstrap pour une conception plus personnalisée.

4. Contact élégant

Avec les icônes Font Awesome et un style réactif de base, ce formulaire de contact est vraiment unique en son genre.

Je recommande toujours d'ajouter des icônes dans les formulaires, en particulier pour les grandes conceptions. Avec plus de champs, vous avez plus d'hésitation et les utilisateurs veulent simplement parcourir les formulaires sans accroc.

Ces icônes simples ajoutent un repère à chaque champ afin qu'il soit facile de dire en un coup d'œil quel type d'informations est requis.

Et si vous cherchez quelque chose d'un peu unique, essayez d'ajouter une iconfont différente dans le mélange.

5. Petite connexion

Parfois, les petites choses sont vraiment les meilleures choses. Et cette interface utilisateur de formulaire le prouve en créant un formulaire de connexion super minifié qui déchire.

La typographie est énorme avec la conception de formulaires et je préfère souvent les polices de caractères plus petites dans les champs de connexion. Cela dépend vraiment du site Web et de la façon dont le texte plus petit se fond dans la mise en page.

Mais ce formulaire comporte également un petit graphique d'étape de progression suspendu sur le côté expliquant le processus de formulaire. Certes, avec seulement deux champs, cela semble un peu idiot, mais pour les formulaires d'inscription plus volumineux, cette barre de progression s'avérera inestimable pour l'expérience utilisateur.

6. Combo connexion et inscription

Si vous voulez réduire les temps de connexion, vous pouvez essayer de combiner le formulaire de connexion et le formulaire d'inscription sur une seule page. C'est beaucoup plus facile que vous ne le pensez et vous pouvez voir une jolie démo dans ce pe.

Chaque fois que vous cliquez sur les liens de connexion/inscription sur le côté, vous trouverez une belle animation personnalisée faisant tourner les formulaires en vue. Tout est alimenté par jQuery, mais les animations peuvent également fonctionner via CSS.

Mais je remarque un bogue dans cette mise en page où la partie inférieure du formulaire "caché" est toujours visible après la commutation. Vous pouvez résoudre ce problème avec la propriété de visibilité CSS ou en déplaçant la position un peu plus hors des limites.

7. Contact au tableau

Voici un véritable style de formulaire unique qui saute définitivement de la page. Ce formulaire de contact pour tableau noir utilise un dégradé d'arrière-plan pour créer l'effet de la lumière qui rebondit sur le tableau noir.

De plus, la bordure en bois aide à vendre cette chose comme la vraie affaire.

Le créateur Greg Sweet utilise même une police Web personnalisée qui ressemble à une écriture humaine typique. C'est parfait pour ajouter cette touche finale au formulaire afin que vous ayez vraiment l'impression d'être de retour à l'école.

8. Paiement par carte de crédit

J'ai vu beaucoup de formulaires de paiement, mais ce design de Fabio Ottaviani est peut-être le meilleur sur lequel je suis tombé.

Il utilise JavaScript pour gérer la validation des champs de saisie, mais la carte de crédit est entièrement en CSS. Il s'anime en fonction des chiffres que vous tapez dans le formulaire et il tourne même vers l'arrière lorsque vous tapez le numéro CVV de la carte de crédit.

9. Inscription personnalisée

Pour un formulaire d'inscription CSS pur, cet extrait prend vraiment le biscuit. Il semble assez simple de se reposer dans un seul récipient avec une petite ombre portée.

Mais les champs de saisie sont fortement personnalisés, y compris l'espace requis pour ajouter ces icônes à chacun.

Chaque fois que vous mettez en surbrillance un champ, la bordure devient vert mousse. Vous remarquerez que l'icône change également de couleur ! Même les menus de sélection pour les cartes de crédit ont leurs propres styles personnalisés.

Il s'agit d'un effet assez complexe à réaliser uniquement en CSS, mais le développeur Jose Carneiro l'a réalisé.

10. Étiquettes flottantes

Les étiquettes flottantes personnalisées font partie de mes tendances préférées en matière de conception de formulaires. Ils contribuent toujours à améliorer la convivialité et ils donnent une explication claire du champ même une fois que vous l'avez rempli.

Jetez un coup d'œil à ce formulaire d'étiquette flottante fonctionnant sur CSS3 et Compass.

Le créateur Anton Simanov utilise jQuery pour les étiquettes, mais tout est codé sur mesure sans aucun plugin. Sans oublier que sa solution fonctionne pour tous les styles de saisie typiques, y compris les zones de texte et les menus de sélection.

Quel que soit le style de formulaire que vous recherchez, j'espère certainement que cette galerie pourra vous donner des idées et des extraits pour aller de l'avant.

Plus vous étudiez les modèles de conception, plus vous aurez d'idées pour construire vos propres projets. Et CodePen est un excellent site pour rassembler ces idées.