Plus de 40 superbes exemples de conception de formulaires Web_HTML/Xhtml_Production de pages Web-tutoriel HTML-php.cn

Ci-dessous, nous présentons plus de 40 superbes exemples de formulaires Web ainsi que des solutions modernes et une pensée créative liées à la conception de formulaires Web. Certains d'entre eux sont néanmoins en flash, mais dans la plupart des cas, vous pouvez facilement utiliser du CSS et du (x)html simples. pour créer le même design.

Les formulaires Web sont le principal moyen permettant aux visiteurs de communiquer avec le propriétaire du site Web. Les commentaires sont toujours importants, c'est pourquoi nous veillons à ce que les formulaires Web soient faciles à comprendre et intuitifs à utiliser, mais même dans la conception formelle, ils jouent un rôle efficace dans la créativité.

Les formulaires Web ne doivent pas nécessairement être ennuyeux, en utilisant CSS ou Flash, vous pouvez vous assurer qu'ils sont attrayants et efficaces. Notez que vous devez proposer quelque chose d'unique et d'intéressant : former des symboles, des icônes, des couleurs, des positions ou des tailles qui sont souvent utilisés pour obtenir des solutions de conception intéressantes. Nous avons cherché quelques exemples et les avons trouvés. Des formulaires web créatifs, originaux et insolites.

Ci-dessous, je présente plus de 40 superbes exemples de formulaires Web ainsi que des solutions modernes et une pensée créative liées à la conception de formulaires Web. Certains d'entre eux sont néanmoins en flash, dans la plupart des cas, vous pouvez facilement créer le même design. en utilisant du CSS simple et (x)html.

1. Solution propre, simple et belle

Étant donné que les formulaires Web peuvent être la partie la plus importante d'un site Web. L'une des parties les plus importantes pour vous en tant que Le concepteur doit s'assurer que vos visiteurs peuvent facilement comprendre les informations dont ils ont besoin pour remplir les champs du formulaire. Les formulaires complexes et longs augmentent la charge cognitive de l'utilisateur : ils sont simplement plus difficiles à traiter. Dans le contexte, choisir une solution simple et propre semble être une bonne approche. Cependant, si le formulaire doit être conçu avec une attention particulière aux détails et avoir une belle apparence, il est logique d'utiliser des icônes attrayantes. La boîte de communication

softmail vient du Brésil. Dans la conception du formulaire, elle affiche une très bonne icône de courrier intégrée au formulaire. Le bouton de soumission est propre et fonctionnel. Il s'agit d'une conception créative.

swfir utilise également une enveloppe comme indice.

L'écriture manuscrite est utilisée sur le site Web de Katrin Wegmann. Le design accrocheur, accrocheur et ludique transmet parfaitement sa fonctionnalité à l'utilisateur.

Le design de TheWatchMakerProject est impressionnant. Ce formulaire est placé à droite des derniers commentaires.

Frexy.comUtilisé une solution bonne et propre

Flingmedia utilise un formulaire de contact modifié qui, en fonction de l'intention du visiteur (commentaires généraux, demandes de nouveaux projets), l'utilisateur peut sélectionner celui qui l'intéresse via son formulaire Web.

Envero.org - Le formulaire Web est grand et remplit toute la largeur de la mise en page. Par conséquent, une taille de police et une taille de zone de saisie correspondantes sont choisies.

2. Solutions créatives

Bien que les formulaires Web soient considérés comme suffisants pour maintenir les utilisateurs et les propriétaires de sites Web connectés, certains concepteurs prennent souvent le risque d'une conception créative afin d'éviter que les visiteurs ne trouvent la mise en page ennuyeuse. Bien que des formulaires Web standard aient été utilisés. depuis plusieurs années. De nombreux indices différents sont utilisés, quelques exemples intéressants sont résumés ci-dessous.

CRreated 201.com Découvrez ce formulaire de contact avec un effet de perspective bien différent. Cet effet a été créé à l'aide du flash.

Eh bien, celui-ci est définitivement différent. Si vous souhaitez contacter Edward Pistachio, vous devez d’abord résoudre une énigme. Cette approche ne convient pas aux blogs ou aux sites Web d’entreprises. Cependant, cela correspond parfaitement à ce site Web conceptuel. Les visiteurs sont surpris.

Recrutements en Chimie J'ai utilisé un dossier, quelques notes et du papier

Alexandru Cohaniuc présente un énorme formulaire Web utilisant un morceau de papyrus et un tampon. Le formulaire de contact de

Tony Yoo comporte des coordonnées sur le côté gauche.

Qwert City Les utilisateurs peuvent envoyer une carte postale au créateur.

wildvuur.com - Ce formulaire Web est entièrement intégré à la mise en page du site Web

BubblesSoca un Un grand, très grand formulaire Web avec un sommet.

3. Utilisez des illustrations pour égayer les formulaires

Lorsqu'un utilisateur clique sur un lien vers l'illustration d'une page Web, il n'est qu'à un pas de se connecter avec le propriétaire du site Web. Afin de garantir que les visiteurs peuvent réellement remplir le formulaire, certains concepteurs utilisent des textes et des illustrations attrayants pour que les utilisateurs se sentent plus à l'aise avec le formulaire.

Intuitive Designs tente d'impressionner les visiteurs avec un facteur occupé. Pourrait-il le gérer ?

X-Grafik.skUtilisez un timbre de Slovaquie.

Kqoule.comIl y a un gars adorable qui invite tout le monde à commenter.

Dressfordialogue.com utilise une petite illustration dans la partie supérieure droite du formulaire, mais même ainsi, cela fonctionne parfois assez bien.

4. Intégrez plus de fonctions

En recherchant des formulaires Web créatifs, nous avons remarqué que de nouvelles fonctions étaient utilisées, ce qui était rare dans le passé. Elles étaient utilisées pour fournir aux utilisateurs des formats de texte riches et des curseurs. pour l'édition de texte, différents niveaux de titre et d'images. Les curseurs sont utilisés pour définir les limites budgétaires d'un projet donné.

InfectedFx possède un formulaire Web plutôt complexe avec des invites, des options et des boutons. Le formulaire intègre également une zone de texte de l'éditeur WYSIWIG.

Sidebarcreative.com offre aux clients potentiels une barre coulissante pour limiter le budget du projet.

5. Utilisez des icônes pour transmettre les informations requises.

Du point de vue de la convivialité, rien n'est plus ennuyeux qu'un formulaire Web avec de longues étiquettes en texte brut et aucun indicateur visuel. De telles formes sont ennuyeuses. Ce n’est pas attrayant et ne met pas l’utilisateur à l’aise. Vous pouvez mieux concevoir le formulaire et, en fait, il n'y a pas beaucoup de champs obligatoires. Des icônes sont souvent utilisées pour indiquer aux utilisateurs quels champs sont obligatoires.

Thème WordPress DesignDisease Utilisez des symboles simples pour indiquer les champs obligatoires.

Bouctoubou.com a un logo très simple et basique, cependant, ils parviennent à rendre le formulaire plus intéressant.

6. L'utilisation de l'écriture manuscrite et du style grungy

J'ai écrit un jour sur l'utilisation de l'écriture manuscrite et du style grungy dans la conception Web moderne. De tels éléments de conception sont déjà utilisés dans les formulaires Web car ils sont uniques et véhiculent la personnalité du concepteur. La conception Web basée sur Flash, en particulier, préfère cette méthode.

Redblu met à disposition un journal. Pour obtenir le formulaire, vous devez faire glisser le journal en conséquence.

Fivecentstand propose une solution flash destinée à s'intégrer à l'ensemble du site. Cela peut être assez difficile pour les nouveaux utilisateurs.

Pointofe.com Utilisez un pense-bête comme formulaire Web. La taille de la police devrait probablement être augmentée.

Swiths.com utilise un design à l'ancienne. Un effet de survol est également fourni.

7. Solutions expérimentales

Vous trouverez ci-dessous quelques solutions inhabituellement utilisées qui peuvent constituer un point de départ pour vos conceptions. Ils ne sont pas tous beaux, mais ils contiennent quelques éléments qui pourraient améliorer encore davantage votre réflexion en matière de conception.

adorama.compropose une solution jolie et compacte : un boitier de communication dans la barre latérale

Différentes langues - différents styles, sur Booloob.comLe bouton Soumettre est placé sur le côté gauche du formulaire.

Paregonta.com :Trois dimensions et extrêmement simple. Forme colorée et particulièrement compacte.

Sunmatecushions.com a un style vraiment différent et il s'intègre en quelque sorte ici.

Eh bien, pourquoi pas ? Fond d'écran comme arrière-plan sur GeekAndHype.com

Revota.com C'est noir et ombragé, mais utilise un effet de survol de surbrillance lors de l'affichage de la zone actuelle.

catydesign est également très sombre. Ce qui est impressionnant dans ce formulaire, ce sont les informations suggérées placées à un endroit approprié.