Le? Contactez-nous? trop souvent, la forme est présentée comme une réflexion après coup plutôt que comme un élément qui donne le ton à la communication. Aujourd'hui, nous allons examiner plusieurs techniques simples que vous pouvez utiliser pour transformer vos formulaires de contact d'ennuyeux en brillant.
En cours de route, nous verrons plusieurs exemples d'excellents formulaires de contact ainsi que des ressources sur la manière de recréer l'effet sur votre propre site.
1: le concevoir
Vous penseriez que cela va sans dire, mais j'ai regardé des tonnes de? Contactez-nous? les pages et les formulaires à préparer pour cet article et 90% ou plus d’entre eux ont utilisé les formulaires d’interface utilisateur de navigateur par défaut (blanc, coins carrés, ennuyeux). Ce n'est pas nécessairement une mauvaise chose, mais si vous cherchez un moyen de pimenter votre page de contact, les champs de formulaire eux-mêmes sont un excellent point de départ. Essayez de changer la couleur des champs pour mieux correspondre à votre site, arrondissez les coins ou ajoutez des traits comme dans l'exemple ci-dessus. Un peu de style permet de donner à vos formulaires un aspect personnalisé.
Ressource utile:
Si vous avez besoin d’aide, consultez ce post de 40 tutoriels CSS sur les styles de formulaire Web pour les développeurs Web.
2: donne le focus
Visitez le site ci-dessus et commencez à remplir le formulaire de contact. Au fur et à mesure que vous le faites, le site s'assombrit de sorte que le formulaire de contact soit le seul sujet de votre attention. Il s’agit d’une belle façon de s’assurer que les utilisateurs ne commencent pas à vous contacter uniquement pour se laisser distraire par d’autres contenus. C'est aussi un excellent moyen de faire dire à vos visiteurs: "ooooh."
Ressource utile:
Arrêtez Build Internet pour apprendre à réduire le contenu avec jQuery.
3: Faites-en Dingo
Si vous souhaitez vraiment encourager les utilisateurs à vous contacter, rendez l'environnement du formulaire de contact convivial et invitant. Cela rend votre entreprise plus accessible et incitera inconsciemment vos visiteurs à une réponse amicale (assurez-vous d’en livrer une!). Les exemples ci-dessus utilisent des couleurs vives et des illustrations stupides pour accomplir cette tâche, mais n'hésitez pas à faire preuve de créativité en matière de typographie, d'icônes ou de toute autre chose à laquelle vous pouvez penser pour réduire la tension que quelqu'un pourrait ressentir en vous adressant une question ou un commentaire.
Ressource utile:
Voici quelques personnages loufoques et très bon marché de Graphic River.
4: Donnez-lui une carte
Si votre site est destiné à un? Brique et mortier? magasin ou tout type d’emplacement physique, l’intégration d’une carte dans votre page de contact est un impératif absolu pour que les clients potentiels puissent vous retrouver. Cela peut être aussi simple qu'une carte illustrée stylisée ou aussi complet qu'une carte interactive de Google. Les exemples ci-dessus adoptent une approche interactive (la meilleure solution, à mon avis), la deuxième intégrant même des indications de conduite personnalisées, bien en évidence en haut de la carte.
Ressource utile:
Si vous avez besoin d’aide, consultez ce générateur de cartes Google gratuit pour votre page d’accueil.
5: le rendre intelligent
Pour voir ce que je veux dire par? Intelligent ,? visitez les deux exemples ci-dessus. La première vérifie le contenu des utilisateurs dans le champ pour s’assurer qu’il est correct (validation du formulaire, par exemple). Par exemple, si vous tapez? Joe? Dans le champ d'adresse électronique, le formulaire vous invite à entrer une adresse électronique valide. Le deuxième exemple implémente simplement la mise en évidence de formulaire de manière créative. En faisant en sorte que le champ actuel de l'utilisateur se démarque de manière significative, vous l'aidez à rester concentré et à se positionner dans le formulaire. C'est une petite touche de convivialité qui peut vraiment aider toute personne qui pourrait avoir du mal à voir dans quel domaine elle se trouve.
Ressources utiles:
Aucune idée de comment vous faire des formulaires intelligents? Voici quelques ressources de validation de formulaire parmi lesquelles choisir:
- Validation de formulaire vraiment facile
- Tutoriel: Validation de formulaire avec JavaScript
- Script de validation de formulaire libre (connexion de développeur Apple)
6: Parcourez-les
Si vous souhaitez obtenir des informations spécifiques de l'utilisateur, telles que des exigences budgétaires ou un domaine d'intérêt, ne comptez pas sur l'utilisateur pour les inclure, même si vous indiquez explicitement que les informations doivent être présentes. À la place, utilisez des cases à cocher, des boutons radio et des menus déroulants pour vous assurer de ne pas les oublier. Ces outils aident non seulement les utilisateurs à se rappeler de tout ce qu'il faut inclure, mais ils facilitent généralement le processus de contact en simplifiant considérablement le travail d'écriture.
Ressources utiles:
Consultez cette liste complète des éléments d'interface utilisateur répartis par navigateur et système d'exploitation.
7: l'anime
Les deux sites ci-dessus utilisent un menu déroulant animé pour leur formulaire de contact. En plaçant ce menu directement sur la page d'accueil, il est très facile pour les visiteurs de vous contacter sans chercher d'informations de contact. L'aspect déroulant lui permet d'accomplir cette tâche sans ajouter de fouillis à votre page d'accueil. Notez que le menu Blue Acorn enfonce le contenu du site pendant que Fred Maya glisse sur le contenu existant. Les deux méthodes fonctionnent très bien, mais je préfère la méthode Blue Acorn car elle ne gêne rien et est plus facile à lire sans transparence.
Ressources utiles:
Pour obtenir un effet similaire sur votre site, consultez le tutoriel de la Noupe sur la création du menu déroulant Sexy avec jQuery & CSS.
8: Thème It
Ma réponse standard pour tout ce qui est créatif: il suffit de proposer un thème intelligent! Faire en sorte qu'une interface reflète quelque chose que les gens connaissent déjà peut non seulement fournir de bonnes idées de conception, mais également augmenter votre convivialité (peut également la réduire si vous ne faites pas attention). L'exemple ci-dessus utilise un iPod touch comme interface pour le formulaire de contact. Essayez de penser à quelque chose d'unique pour le vôtre! Les possibilités comprennent tout, du post-it à la carte de visite.
9: Rendez-le conversationnel
L'exemple ci-dessus était l'une des idées les plus uniques que j'ai rencontrées. Un peu comme le formulaire de contact Mad Libs, l'utilisateur reçoit quelques phrases et est invité à remplir les espaces vides.Cela garantit que vous obtenez les informations que vous souhaitez mais que vous présentez à l'utilisateur est un format beaucoup plus convivial que les anciens champs avec des étiquettes. Certes, il est sans doute moins utilisable, car il implique plus de lecture de la part de l'utilisateur, mais il devient une étoile dorée en s'amusant!
10: le rendre surdimensionné
Un moyen simple d'attirer l'attention d'un utilisateur sur tout ce que vous concevez est de le rendre beaucoup plus grand que ce à quoi il s'attendait. Après avoir utilisé un tas de formulaires de contact de taille normale, celui sur le site ci-dessus semblait carrément énorme. La surprise a été agréable, car j’ai adoré l’aspect surdimensionné des formes et du texte. Je ne sais pas trop pourquoi, mais pour une raison quelconque, Big se sent sympathique!
Conclusion
Vous devriez maintenant être bourré d’idées nouvelles sur la manière de faire de votre propre contact un point d’orgueil. Allez-y et créez d’étonnantes pages de contact et parlez-nous d’elles dans les commentaires ci-dessous. Assurez-vous également de nous faire savoir lequel des exemples ci-dessus était votre préféré, ainsi que de bonnes idées pour les améliorer.