Les formulaires de site web constituent un élément essentiel de tout site web, page de destination ou boutique en ligne. Que l’objectif du formulaire soit de contacter le propriétaire du site web, de remplir un questionnaire, de se connecter à un compte, d’acheter un article, de créer un nouveau compte, de réserver une prestation ou de s’inscrire à un essai gratuit — chaque détail minutieux de la conception et de la mise en page du formulaire web est crucial.

Il est possible que vous vous soyez posé ces questions par le passé : Quelle disposition de conception fonctionnera le mieux pour mon formulaire ? Qu’est-ce qui engagera le plus les utilisateurs ? Comment puis-je mettre en œuvre mes motifs de conception et mon identité de marque ? Devrais-je placer le formulaire dans une fenêtre contextuelle du site web, ou un formulaire en pied de page serait-il plus efficace ?

Entre la longue liste de types de formulaires de site web et leurs cas d’utilisation, identifier les éléments à prendre en compte dans la conception de votre formulaire peut être intimidant, c’est le moins que l’on puisse dire. Soyez assuré que la création d’un formulaire de site web performant deviendra bientôt une expérience de création web sans stress, stimulante et gratifiante.

Pour renforcer notre stratégie et nos flux de travail en matière de conception web, nous avons compilé une liste de 15 exemples qui vous montreront de quoi sont faits les meilleurs formulaires.

Maîtrisez la conception de formulaires de site web avec notre guide des formulaires web

Table des Matières

15 exemples inoubliables de conception de formulaires

Nous sommes sur le point d’entreprendre un voyage riche en découvertes à travers des formulaires de site web de toutes formes, couleurs, dispositions et tailles. Préparez-vous à être émerveillé par cette liste de 15 formulaires de site web dont la conception et la structure révolutionneront vos compétences en création web.

Formulaires de contact

Lorsque vous êtes déterminé à voir chaque utilisateur cliquer sur « Envoyer » avant de quitter votre site, votre formulaire de contact peut faire la différence pour atteindre cet objectif. Les décisions fondamentales telles que l’ajout ou non d’animations ou d’indicateurs de progression, la taille ou le gras de vos en-têtes, la largeur de vos champs de formulaire — tous ces facteurs contribuent au taux de complétion de chaque formulaire et influencent l’expérience utilisateur de votre site web.

#1 Brandingo

Interactive Website Form Example

Brandingo est une agence de design et une école arménienne que nous avons sélectionnée en janvier 2021 pour notre showcase des 10 meilleurs sites Elementor du mois. Le site web de Brandingo a été conçu pour « mettre en valeur le talent et les connaissances de l’agence en matière de design, d’illustration, d’UI/UX et de branding auprès des clients potentiels et des étudiants. »

Ce qui nous a toujours frappé dans le site de Brandingo, c’est son utilisation de nombreux effets de mouvement et d’interactivité qui s’harmonisent parfaitement. Ils ont manifestement maîtrisé l’art de trouver un équilibre entre des fonctionnalités interactives engageantes qui ne surchargent pas excessivement la perception visuelle humaine.

Nos éléments préférés :

  • Les multiples utilisations d’animations Lottie apparaissant au fur et à mesure du défilement de la page.
  • Le chemin de texte qui encercle l’arrière-plan circulaire du formulaire une fois que l’on atteint la fin.

#2 Le Space Cube

Contact Form Example Elementor

Le Space Cube est un produit d’organisation pour bureau conçu par Carol Havener de Sydney, en Australie. Conçu pour les propriétaires et les bureaux, le produit répond au besoin d’organisation des espaces limités (tels qu’un bureau, une salle d’étude, un salon familial, etc.)

Carol a construit son site web de produit avec Elementor, en utilisant le constructeur WooCommerce pour répondre aux besoins de son site de commerce électronique. Compte tenu de son large public cible, le site du produit utilise judicieusement un schéma de couleurs noir et blanc. Les motifs s’accordent avec le design moderne, épuré et minimaliste du produit, et la page de contact ainsi que son formulaire atteignent le même objectif.

Nos éléments préférés :

  • L’élégante association de polices combine un style calligraphique manuscrit avec la police sans-serif « Bodoni ».

La sophistiquée image d’arrière-plan placée derrière le fond blanc carré et solide du formulaire. Cela donne vraiment vie au cas d’utilisation du produit, rappelant subtilement à l’utilisateur la sensation agréable de s’asseoir à un bureau propre, non encombré et propice à la tranquillité.

#3 Metropolis Moving

Elementor Progress Indicator Form Example

Metropolis Moving est une entreprise de déménagement de New York basée à Brooklyn, NY. Leur palette de couleurs et leur design utilisent des teintes emblématiques de NYC comme le jaune taxi, le bleu marine et le gris pour visualiser l’essence de leur service sur mesure de déménagement dans la trépidante « Big Apple ». Le formulaire de contact du site est un bref formulaire en plusieurs étapes que le client potentiel doit remplir pour recevoir un devis.

Nos éléments préférés :

  • L’itinéraire cartographié et les points de localisation délimités capturent l’expérience imprévisible (trajet) du déménagement d’une adresse à une autre.
  • Les champs du formulaire sont conçus selon toutes les règles de l’art des formulaires web :

Formulaires de questionnaire

Poser à votre audience des questions sur leurs intérêts, préférences, objectifs, etc. est un excellent moyen d’établir un dialogue. Mais quelles sont les meilleures façons de présenter vos questions ? Devriez-vous créer une atmosphère informelle ? Quel format fonctionnera le mieux pour votre audience ? Toutes ces considérations sont d’égale importance, pourtant les options pour aborder chacune d’entre elles sont incroyablement variées.

#4 Spotify Pets

Spotify Questionnaire Form

Spotify Pets est une fonctionnalité de playlist au sein du service de musique numérique, de podcasts et de vidéos Spotify. Cet ajout singulièrement original à Spotify utilise l’algorithme de la plateforme pour créer des playlists que le propriétaire et son animal de compagnie peuvent écouter ensemble — basées sur les habitudes d’écoute de l’utilisateur et les caractéristiques de l’animal.

Nos éléments préférés :

  • L’animation de la barre de glissement ajustable que l’utilisateur manipule pour décrire les caractéristiques de son animal — c’est une méthode de saisie engageante qui élimine également l’activité de frappe.
  • L’indicateur de progression se fond dans l’arrière-plan illustré et dynamique.
  • Le formulaire de questionnaire multi-écrans présente une question par écran, chacune étant parfaitement adaptée aux appareils mobiles.

#5 RedBull

Red Bull Questionnaire Form

Red Bull est une boisson énergisante disponible internationalement dont le slogan est « Red Bull donne des ailes ». Sur la page produit de leur site web, Red Bull engage le visiteur dans une narration de marque, avec un quiz interactif sur la durabilité et la sécurité environnementale — deux des valeurs piliers de la marque.

Nos éléments préférés :

  • Le compte à rebours pour chaque question crée du suspense et un sentiment d’urgence pour répondre.
  • Les grands boutons de sélection rendent les choix de réponses très accessibles et faciles à cliquer.
  • La vidéo d’arrière-plan animée du quiz sur la page d’accueil.

Formulaires de connexion

Les formulaires de connexion constituent une composante extrêmement significative de l’interface de votre produit ou service. Les utilisateurs seront susceptibles de voir ce formulaire à maintes reprises, et la familiarité ainsi que la simplicité sont essentielles. Votre formulaire se doit d’être accueillant, intuitif et direct — tout en suscitant autant d’enthousiasme que possible chez l’utilisateur. Bien souvent, les détails et illustrations les plus infimes peuvent avoir un impact considérable.

#6 gidimo

Login Form Example Elementor

gidimo est une entreprise EdTech nigériane dont la plateforme d’apprentissage en ligne s’adresse aux apprenants de tous horizons et de toutes les étapes de la vie. La technologie de la plateforme utilise des techniques de ludification et des parcours utilisateurs personnalisés qui « rendent l’apprentissage de n’importe quoi amusant et facile en déplacement ».

La page de connexion du site web de gidimo, conçu avec Elementor (lauréat de notre présentation de mars 2021), arbore une mise en page épurée avec une galerie déroulante à côté du formulaire de connexion. Cela confère à la page une dimension supplémentaire d’engagement et d’attrait : les utilisateurs peuvent naviguer à travers des illustrations alternées qui renforcent l’atmosphère positive de la plateforme.

Nos éléments préférés :

  • La couleur de fond du diaporama alterne entre le vert et le blanc à mesure que l’utilisateur navigue.
  • Chaque rangée du formulaire présente la même largeur, permettant une disposition uniforme et organisée qui engendre clarté et cohérence.

#7 Snappet

Log In Form Illustration Example

Snappet est une plateforme éducative en ligne pour tablettes utilisée par les enseignants de mathématiques souhaitant personnaliser les parcours d’apprentissage individuels des élèves tout en surveillant simultanément leurs performances. L’outil d’apprentissage est destiné aux élèves du primaire, ce qui est aisément compréhensible grâce au schéma chromatique convivial et coloré du site ainsi qu’à ses illustrations vectorielles.

Nos éléments préférés

  • Le cas d’utilisation illustré sur la page de connexion des élèves transmet un message émotionnel : rappelant aux étudiants l’encouragement (bien que virtuel) du « tope là » et la positivité qu’ils ressentiront en utilisant la plateforme.
  • Le schéma typographique à police unique utilise des variations d’une seule police (différentes couleurs et tailles). Évitant la monotonie, l’utilisation de deux couleurs et tailles différentes indique la hiérarchie d’information entre les éléments textuels.

Formulaires de pages de destination de produits

Les pages de destination des produits sont d’une importance capitale dans la conception de formulaires de site web, car une grande partie des comportements d’achat des visiteurs résulte directement de la conception de la page produit. Étant donné toutes les informations que les consommateurs souhaitent connaître sur chaque produit individuel, la décision de ce qu’il faut inclure et comment l’inclure sur chaque page produit doit être traitée avec soin.

#8 Bram

Product Landing Page Example Elementor

Lauréat de notre présentation de sites WooCommerce, Bram est un fabricant de portefeuilles en cuir artisanal basé à Barcelone. La disposition de la conception de la page produit (essentiellement un formulaire de soumission) nous a particulièrement inspirés.

Nos éléments préférés :

  • La grande variété de choix de couleurs est présentée sur une seule ligne pour une visualisation simultanée, sans besoin de cliquer sur un menu déroulant pour voir chaque option de couleur.
  • Le bouton « Ajouter au panier » est facile à trouver, placé en haut du contenu plutôt qu’en dernier élément de la page (après les détails du produit et les onglets repliables).
  • L’abondant espace blanc sur la page rend les détails du produit clairs et lisibles, et les détails du cuir du produit sont facilement visibles.

#9 ABATTOIR VÉGÉTAL

Product Landing Page Form Elementor

ABATTOIR VÉGÉTAL est un bistrot végétalien et une épicerie situés à Paris, France. Le site de commerce électronique (construit avec Elementor et WooCommerce, et lauréat de la présentation d’août 2020) propose à la fois les menus à emporter du bistrot et de l’épicerie, où l’utilisateur peut choisir les ingrédients et les plats à commander en ligne.

Nos éléments préférés :

  • L’utilisation des champs personnalisés WordPress ; La page produit et son formulaire de commande contiennent toutes les informations de base du repas dans un format efficace et engageant.
  • Les formats engageants utilisés dans le panier WooCommerce de la page : l’indicateur d’articles, ainsi que le bouton « Ajouter au panier », se voient attribuer une couleur de fond vive, ajoutant du plaisir et de la fantaisie au flux utilisateur de paiement et à l’expérience globale d’achat en ligne.
  • Les polices de couleurs vives et les photographies détaillées communiquent clairement les informations verbales et visuelles — une manière excitante de commencer une expérience d’achat culinaire.

Formulaires d'inscription

Un processus d’inscription réussi comble les souhaits de tout créateur web concevant un formulaire de site web. Alors, est-il véritablement envisageable de transformer ce rêve en réalité ? Tout est concevable, néanmoins les démarches que vous entreprenez pour satisfaire vos visiteurs peuvent avoir des implications considérables. Chaque détail, de la visibilité des boutons au contraste entre les éléments, indiquera les résultats de la soumission du formulaire.

#10 Duolingo

Duolingo Sign Up Form

Duolingo est un site web et une application mobile d’apprentissage des langues. En tant que marque, la mission de l’entreprise est de « rendre l’éducation gratuite, ludique et accessible à tous ». L’écran présenté ci-dessus apparaît dans le processus d’intégration de la plateforme, où l’utilisateur définit son objectif d’apprentissage linguistique et choisit un parcours d’apprentissage.

Nos éléments préférés :

#11 Stripe

Stripe Sign Up Form Example

Stripe est un logiciel de traitement des paiements utilisé par les sites web de commerce électronique et les applications mobiles. L’utilisation de Stripe permet aux entreprises d’accepter des paiements, d’envoyer des versements et de gérer leur activité en ligne. L’inscription au compte est simple et aisée, facilitée par un formulaire d’inscription simple mais attrayant.

Nos éléments préférés :

  • L’ombre portée autour de l’arrière-plan du formulaire de soumission distingue le formulaire d’inscription des points énumérés sur le côté gauche de la page.
  • Les points organisés et concis énonçant trois avantages clés du produit, renforçant la valeur ajoutée de la création d’un compte Stripe.

Formulaires de réservation

Les formulaires de réservation en ligne efficaces prospèrent dans des atmosphères positives et encourageantes. Lorsque vos visiteurs en arrivent au point d’examiner comment réserver votre service, vous devez faire tout votre possible pour maintenir leur attention, leur intérêt et leur enthousiasme quant à ce qu’ils vont bientôt expérimenter.

#12 Be A Roshan

Booking Form Example

Be A Roshan est un centre de thérapie énergétique et de méditation situé sur l’île Maurice. Le site Elementor de Be A Roshan propose des réservations en ligne pour les rendez-vous et les événements destinés aux clients. Les motifs de conception (comme l’arrière-plan de la page d’accueil représentant une journée ensoleillée) choisis pour le site reflètent l’atmosphère des expériences apaisantes de Reiki et de méditation.

Nos éléments préférés :

  • L’interface visuelle du calendrier montrant les traitements Reiki disponibles tout au long du mois.
  • Les éléments de texte informatifs au-dessus du calendrier renseignent l’utilisateur sur des détails importants qui influenceront sa décision quant à la manière de remplir le formulaire.
  • Le formulaire d’inscription à l’événement est conçu pour recueillir rapidement les données et créer une expérience fluide pour les inscrits sans les confondre ni les distraire

#13 Presidio

Booking Form Example Elementor

Presidio Speech and Learning est un cabinet de thérapie pour enfants à San Francisco qui s’adresse aux enfants ayant besoin de support en matière d’élocution, de langage, de lecture et d’écriture. Le site Presidio construit avec Elementor a été présenté dans notre vitrine de novembre 2020, salué pour ses motifs de conception aux couleurs pastel aquarelle, adaptés aux enfants. Ces détails s’adaptent au public cible du centre : les parents cherchant à consulter et à recevoir des conseils attentifs et sensibles sur les besoins individuels de leur enfant.

Nos éléments préférés :

  • La palette de couleurs bleue et verte utilisée dans le formulaire de réservation prolonge l’ambiance stimulante du site web tout au long du processus de réservation de rendez-vous.
  • La couleur de fond des champs du formulaire permet une mise en page attrayante et invitante pour un processus de soumission agréable.

Formulaires d'essai gratuit

Les essais gratuits sont toujours appréciés par les clients et prospects potentiels. Par-dessus tout, souligner les avantages et la valeur ajoutée de l’essai de votre service ou produit aide les visiteurs à prendre leur décision finale. Plus vous leur donnez d’incitations à aller de l’avant, plus il est probable qu’ils le fassent.

#14 Hone

Free Trial Form Elementor

Autre lauréat de la vitrine de novembre 2020, Hone est une plateforme d’apprentissage en ligne qui propose des cours en direct sur des sujets tels que le leadership d’équipe, la gestion et les compétences en communication interpersonnelle. La plateforme facilite une approche responsabilisante et proactive du leadership d’équipe et de la communication interne. Ces idéaux sont efficacement transmis à travers le schéma de couleurs rose et violet dynamisant et optimiste du site web, ainsi que par le ton et la voix du contenu écrit de leur site.

Nos éléments préférés :

  • L’effet de soulignement rose crée un indice visuel pour mettre en évidence les mots percutants du formulaire — soulignant au potentiel utilisateur que l’essai de 30 jours de Hone est entièrement gratuit.
  • Les points énumérés placés à côté du formulaire identifient la valeur ajoutée et les principaux avantages du produit.
  • Les icônes utilisées pour chaque point énuméré ressemblent à l’expérience utilisateur et à l’interface du produit.

Formulaires d'abonnement

Une fois que vous avez convaincu votre utilisateur que votre contenu mérite un abonnement, il compte sur vous pour lui fournir un contenu qu’il aura envie de continuer à lire. Être transparent sur ce que vous prévoyez de lui envoyer peut toujours s’avérer bénéfique afin qu’il sache à quoi s’attendre et attende cela avec impatience.

#15 Codepuffin

Elementor Subscription Form Example

Codepuffin est le site web professionnel et le portfolio d’Amy Nortje, une développeuse web basée en Nouvelle-Zélande. Amy a construit son site web avec Elementor, où elle énumère ses services et met en avant son portfolio et son blog personnel. Les articles du blog d’Amy se concentrent sur ses « leçons apprises » de différents projets et relations clients, et servent de ressource personnelle et informelle d’insights et de support pour ses lecteurs.

Nos éléments préférés :

  • Le contenu et le langage du formulaire d’abonnement s’alignent sur le message du blog lui-même : des anecdotes humoristiques entremêlées d’insights professionnels précieux.
  • L’en-tête du formulaire, « Vous voulez quelque chose de cool ? » va droit au but. Cette question encadre le bénéfice de l’utilisateur à s’abonner à la newsletter sur un ton conversationnel, créant un rapport avec le visiteur qui suscite l’intérêt pour les insights et les expériences variées d’Amy.

Élaborez un chef-d'œuvre

Il n’y a aucun doute à ce sujet : rien n’est plus gratifiant qu’un tableau de bord affichant des résultats de soumission de formulaire réussis. Maintenant que nous avons appris des meilleurs, il est certain que le meilleur reste à venir. Vous êtes destiné à créer de nombreux formulaires de site web tout au long de votre carrière de création web, et maintenant que vous avez vu 15 œuvres d’art de formulaires de site web, il est temps de commencer à imaginer, concevoir et construire le formulaire web de vos rêves.

Originally posted 2021-05-03 04:00:00.