Résumé IA
Vous cherchez des inspirations de conception de formulaires de contact pour votre site Web ? Avec quelques ajustements simples, vous pouvez créer des formulaires en ligne comme vous le souhaitez.
Dans cet article, je vais vous montrer quelques exemples de conception de formulaires de contact intéressants et vous donner des conseils utiles pour en créer un sur votre site Web.
Je vais également vous montrer une méthode très pratique sans code pour modifier la mise en page de vos formulaires. Prêt ? Plongeons !
Personnalisez votre formulaire de contact dès maintenant ! 😀
8 modèles de formulaires de contact que vous pouvez copier
Maintenant, examinons quelques exemples intéressants et les tactiques clés qu'ils utilisent pour vous en inspirer et les recréer sur votre site.
1. WPForms
Je voulais commencer par la page de contact WPForms, car je pense que c'est un excellent exemple pour les produits SaaS, les sites Web de plugins et autres petites entreprises.
La section supérieure de cette page est divisée en deux parties : une pour les clients existants ayant des questions techniques et une autre pour les demandes de pré-vente.
À lire également : Comment permettre aux visiteurs de dupliquer les champs de formulaire
Pourquoi je pense que ce formulaire de contact se démarque
Le formulaire de contact n'est pas immédiatement visible, et il n'apparaît que lorsque quelqu'un clique sur le bouton « Compléter un formulaire » sous la section « J'ai une question simple ».
Ce choix de conception minimise la taille de la page et garantit que les nouveaux prospects utilisent principalement le formulaire, car il n'est accessible que par la section pré-vente.
Cette stratégie permet d'orienter rapidement les utilisateurs vers la section appropriée, simplifiant ainsi le processus pour l'entreprise et les personnes qui prennent contact.
En bas de la page, il y a également un discret appel à l'action invitant les visiteurs à rejoindre le Cercle VIP WPForms, ce qui est une manière agréable et sans pression de pousser les gens vers une communauté sans surcharger le flux de contact.
Comment créer une page de contact comme celle-ci
- Formulaire de contact contextuel : Concevez une page de contact où le formulaire apparaît uniquement lorsqu'un bouton spécifique est cliqué. Cela maintient la page propre et met l'accent sur d'autres éléments jusqu'à ce qu'une interaction soit nécessaire.
- Base de connaissances pour le support client : Implémentez un wiki ou une base de connaissances sur votre site WordPress. Cela sert de zone d'auto-assistance pour les clients existants, répondant aux questions et problèmes courants.
- Utilisation de modèles : Choisissez parmi plus de 2 100 modèles de formulaires WordPress pour diverses utilisations telles que les commentaires, le marketing et les opérations commerciales. Ces modèles aident à configurer rapidement des formulaires professionnels et fonctionnels. (essayez également ces modèles WPForms cachés pour des situations spéciales).
- Traduction de formulaires : Pour les sites Web destinés à un public non anglophone ou multilingue, WPForms permet une traduction facile des formulaires de contact pour répondre aux divers besoins linguistiques.
Créez votre formulaire WordPress maintenant ! 🙂
2. Stripe
J'ai décidé de me concentrer sur la page de vente de contact de Stripe car c'est un excellent exemple de page de contact spécialisée qui gère efficacement les demandes commerciales.
Afin de rendre le formulaire de contact court, Stripe utilise un formulaire en plusieurs étapes sur sa page de contact, ce qui contribue certainement à réduire son taux d'abandon de formulaire.
Pourquoi je pense que cette page Contactez-nous se démarque
Ce qui rend ce formulaire de contact unique, c'est qu'il se concentre sur la collecte d'informations pertinentes pour l'équipe de vente de Stripe. Il utilise une approche de formulaire multi-étapes qui demande d'abord votre e-mail professionnel et votre pays/région pour capturer vos informations.
Une fois que vous cliquez sur le bouton Continuer, le formulaire de contact de Stripe vise à bien comprendre votre entreprise et comment Stripe peut vous aider.
En posant des questions sur la taille de votre entreprise, vos revenus et vos besoins d'intégration, cela leur permet de transmettre votre demande à la personne la plus appropriée.
Comment créer une page de contact comme celle-ci
- Module complémentaire Lead Forms de WPForms : Utilisez le champ Page Break ou le module complémentaire Lead Forms pour diviser votre formulaire en sections distinctes.
- Concentrez-vous sur les informations pertinentes : Réfléchissez aux informations sur les clients potentiels qui seraient les plus utiles pour votre équipe de vente.
- Restez simple : Ne submergez pas les utilisateurs avec trop de champs de formulaire. Demandez simplement les informations essentielles dont vous avez besoin pour qualifier les prospects.
- Étiquettes et instructions claires : Utilisez des étiquettes claires et concises pour chaque champ et fournissez toutes les instructions nécessaires pour éviter toute confusion.
Créez votre formulaire multi-étapes dès maintenant ! 🙂
3. Legalia
Le formulaire de contact sur la page « Contactez-nous » de Legalia Corp est une interface bien pensée conçue pour faciliter une communication fluide entre le cabinet et ses clients.
Ce qui ressort de cette page, c'est sa mise en page en plusieurs colonnes, avec une carte à gauche pour plus de clarté sur l'emplacement et un formulaire de contact structuré à droite.
Pourquoi je pense que ce formulaire de contact se démarque
L'utilisation d'une mise en page en plusieurs colonnes est particulièrement efficace, car elle divise le formulaire proprement en deux sections distinctes.
Cela permet aux utilisateurs de séparer visuellement les informations géographiques des champs de contact, ce qui est une approche intéressante.
Je pense également qu'inclure une carte aide non seulement à localiser facilement le cabinet, mais augmente également la légitimité et l'accessibilité de l'entreprise.
Le formulaire lui-même est également assez simple, demandant les informations essentielles sans submerger l'utilisateur.
Comment créer une page de contact comme celle-ci
- Planifiez votre mise en page : Commencez par décider d'une mise en page qui équilibre l'interface utilisateur et l'esthétique du design. Une mise en page divisée peut être très efficace pour séparer visuellement différents types d'informations tout en les gardant sur la même page.
- Intégrez des cartes : Si votre entreprise a un emplacement physique, intégrer une carte sur la page de contact peut considérablement renforcer la confiance des utilisateurs et simplifier le processus de localisation. Utilisez des outils comme Google Maps pour une intégration facile.
- Simplifiez le formulaire : Limitez vos champs de formulaire au minimum pour éviter de dissuader les contacts potentiels. Ne demandez que les informations les plus critiques, telles que le nom, l'e-mail et une brève boîte de message, ce qui, je crois, est tout à fait suffisant.
Ajoutez une carte à votre formulaire de contact ! 🙂
4. Search Engine Journal
Le formulaire de contact sur la page « Contactez-nous » de Search Engine Journal se démarque par ses fonctionnalités complètes adaptées à une variété de besoins des utilisateurs.
Ce formulaire intègre des fonctionnalités avancées telles que le captcha pour la sécurité, une option de téléchargement de fichiers et la catégorisation des requêtes.
Pourquoi je pense que ce formulaire de contact se démarque
La catégorisation est la partie que je veux souligner. SEJ demande d'emblée si vous écrivez sur la publicité, un problème technique ou autre chose.
Cette seule liste déroulante fait probablement gagner à leur équipe énormément de temps de triage car le routage se fait avant que le message n'atteigne une boîte de réception.
Le CAPTCHA remplit la tâche fastidieuse mais nécessaire de réduire le volume de spam. Un site avec le trafic de SEJ serait autrement submergé par les bots.
Et le champ de téléchargement de fichiers est vraiment utile pour le type de soumissions qu'un éditeur reçoit, captures d'écran, présentations commerciales, parfois brouillons d'articles.
Comment créer une page de contact comme celle-ci
- Implémentez des fonctionnalités de sécurité : Incluez des mesures de sécurité comme un CAPTCHA avec l'aide de WPForms pour protéger votre site contre le spam et les abus, ce qui aidera à maintenir l'intégrité de vos communications.
- Concentrez-vous sur l'expérience utilisateur : Concevez votre formulaire en pensant à l'utilisateur. Assurez-vous qu'il est facile à naviguer, que les champs sont clairement étiquetés et que les instructions sont simples pour éviter toute confusion. Utilisez un champ de liste déroulante pour la catégorisation des requêtes des utilisateurs.
- Ajoutez un champ de téléchargement de fichiers : Si vous souhaitez donner aux personnes qui vous contactent la possibilité de joindre des fichiers à leurs demandes, vous pouvez utiliser WPForms pour ajouter un champ de téléchargement de fichiers à votre formulaire, ce qui est très facile à utiliser.
Configurez le CAPTCHA sur votre formulaire WordPress ! :)
5. Marvel
Marvel est une société de conception logicielle qui utilise une mise en page multicolonne sur son formulaire de contact avec une image sur la droite. Le design est épuré et moderne, garantissant que les utilisateurs peuvent trouver les informations dont ils ont besoin sans tracas.
Pourquoi je pense que ce formulaire de contact se démarque
La conception multicolonne est ce qui distingue vraiment ce formulaire de contact et lui donne cette sensation aérée et épurée.
Il permet aux utilisateurs de parcourir rapidement la page et de trouver exactement ce dont ils ont besoin sans avoir à trier une grande quantité de texte.
L'image sur le côté droit du formulaire est non seulement visuellement attrayante, mais aussi pertinente pour l'activité de Marvel, mettant en valeur leur engagement envers le design.
Comment créer une page de contact comme celle-ci
- Mise en page multicolonne : Commencez par décider d'une mise en page qui équilibre l'interface utilisateur et l'esthétique du design. Une mise en page multicolonne peut être très efficace pour séparer visuellement différents types d'informations tout en les gardant sur la même page.
- Utilisation stratégique de l'imagerie : Choisissez des images qui reflètent votre marque et sont liées à l'objectif de la page. Ajouter une image à votre formulaire de contact peut le rendre plus attrayant et interactif dans l'ensemble.
Ajoutez des images à votre formulaire de contact ! :)
6. Medium
L'expérience de contact de Medium est intéressante car ce n'est pas vraiment un formulaire de contact. C'est d'abord un centre d'aide, et ce n'est que si vous ne trouvez pas ce dont vous avez besoin que vous avez la possibilité de soumettre une demande.
La page propose des liens directs vers des sujets d'aide populaires, une recherche et des FAQ. Vous pouvez catégoriser le type d'aide dont vous avez besoin avant toute autre chose.
Pourquoi je pense que cette page Contactez-nous se démarque
La page de contact de Medium comprend généralement des menus déroulants ou des cases à cocher qui permettent aux utilisateurs de catégoriser leurs demandes. De nombreux centres d'aide proposent des liens vers les questions fréquemment posées ou des articles connexes avant de permettre la soumission du formulaire.
Cependant, le principal inconvénient de leur page est que Medium n'utilise pas de formulaire de contact. Cela peut être frustrant pour les utilisateurs qui ont un besoin urgent de contacter leurs équipes de support.
Comment créer une page de contact comme celle-ci
- Intégrez des options d'auto-assistance : Intégrez votre page de contact à votre base de connaissances. Fournissez des articles ou des liens vers des FAQ liés aux sélections ou aux entrées de l'utilisateur, résolvant potentiellement la requête.
- Affichez quand même le formulaire : Ne cachez pas le formulaire à tel point que les cas de support réels abandonnent. Un lien visible « J'ai toujours besoin d'aide » en bas est la soupape de sécurité.
7. White Frontier
White Frontier est une brasserie artisanale suisse, et sa page de contact utilise un formulaire transparent superposé à une image d'arrière-plan. Si vous voulez un formulaire de contact qui ne se trouve pas dans une simple boîte blanche, c'est le modèle à examiner.
Pourquoi je pense que cette page Contactez-nous se démarque
Un formulaire transparent conserve la personnalité visuelle de la marque sur la page. Vous ne perdez pas la photographie d'arrière-plan dans un énorme conteneur de formulaire gris. Pour le style de vie, l'hôtellerie, l'alimentation et les boissons, ou partout où l'image de marque a beaucoup de poids, cela compte.
L'image d'arrière-plan doit supporter un texte lisible, sinon le formulaire devient illisible. White Frontier utilise une photographie de bière assombrie, ce qui donne aux étiquettes blanches du formulaire suffisamment de contraste pour rester lisibles. Si vous copiez ce modèle sur une photographie chargée, vous aurez besoin d'une superposition pour que les choses restent lisibles.
Comment créer une page de contact comme celle-ci
- Style avec CSS : WPForms vous permet d'ajuster les styles du conteneur, de l'arrière-plan et des champs directement depuis l'éditeur de blocs, sans avoir besoin de CSS. Pour des looks entièrement personnalisés, consultez notre guide pour débutants sur la stylisation de vos formulaires avec CSS.
- Choisissez un arrière-plan qui supporte le texte : Soit une photo à faible contraste, soit une photo avec une superposition sombre appliquée. Testez sur mobile, où l'arrière-plan se recadre généralement différemment que sur ordinateur.
- Enregistrez vos styles pour les réutiliser : Une fois que vous avez peaufiné vos paramètres de style, copiez le CSS généré par l'éditeur de blocs et réutilisez-le sur chaque formulaire du site afin que le design reste cohérent.
8. HubSpot
La page de contact de HubSpot offre plusieurs façons de prendre contact sur la même page : un formulaire de vente, un chat de vente, un numéro de téléphone et des liens vers la base de connaissances de support.
C'est le bon modèle lorsque vous avez des acheteurs et des clients existants avec des besoins très différents, et que vous ne voulez pas que l'un ou l'autre groupe ait l'impression d'être une réflexion après coup.
Pourquoi je pense que cette page Contactez-nous se démarque
HubSpot traite le contact comme un problème de routage avant tout. La page est organisée par ce que vous voulez faire (parler aux ventes, parler au support, obtenir une démo, trouver une ressource), et chaque option a son propre appel à l'action clair. Il n'y a pas de méga-formulaire unique prétendant servir tout le monde.
Le chat de vente se trouve côte à côte avec le formulaire de vente, ce qui est une reconnaissance tacite que certains acheteurs souhaitent rédiger une demande détaillée et que d'autres souhaitent poser une question rapide avant de s'engager. Offrir les deux n'est pas redondant, c'est couvrir le spectre.
Pour les petites entreprises, cela peut être excessif. Mais le principe est évolutif. Même sur un petit site, distinguer « Je veux acheter » de « J'ai besoin d'aide pour ce que j'ai déjà acheté » avant que le formulaire de contact ne se charge améliore les deux flux.
Comment le recréer dans WordPress
- Canaux à onglets ou groupés : Utilisez un bloc à onglets ou une simple grille de cartes d'appel à l'action pour permettre aux visiteurs de choisir leur chemin. Chaque carte mène à son propre formulaire ou à sa propre page.
- Formulaires différents pour des intentions différentes : Ayez un formulaire « Parler aux ventes » avec des champs de qualification des ventes et un formulaire « Demande de support » avec des numéros de commande et des noms de produits. Ne les fusionnez pas.
- Afficher les alternatives près du formulaire : Un numéro de téléphone, une adresse e-mail, un lien de chat. Certains visiteurs préféreront toujours sauter le formulaire, et offrir l'alternative réduit la frustration sans nuire aux soumissions de formulaires.
Comment personnaliser vos modèles de formulaire de contact
Avant de commencer, assurez-vous que WPForms est installé et activé sur votre site WordPress et que vous avez vérifié votre licence.
Ensuite, créez un nouveau formulaire et ajoutez-le à une page ou à un article. Dans l'éditeur de blocs, cliquez sur le formulaire pour ouvrir des options de style supplémentaires pour le bloc WPForms.
Vous pouvez modifier le thème de couleur, les champs du formulaire, les étiquettes, les boutons, ainsi que les styles du conteneur et de l’arrière-plan sans écrire de CSS dans les paramètres du bloc WPForms.
- Vous pouvez choisir un thème de couleur prédéfini dans le paramètre Thèmes pour modifier le style des champs, des étiquettes, des boutons, des conteneurs et des arrière-plans de votre formulaire.
- Dans la section Styles de champ, vous trouverez les options pour ajuster la taille, la bordure, la taille de la bordure, le rayon de la bordure et les couleurs de vos champs de formulaire.
- La modification de la taille et de la couleur de vos étiquettes de formulaire est possible dans la section Styles d'étiquette. Les options de taille disponibles incluent Petit, Moyen et Grand.
- Sous Styles de bouton, vous pouvez modifier la taille, la couleur, la bordure, la taille de la bordure, le rayon de la bordure et le style de la bordure de vos boutons.
- Les paramètres Styles de conteneur vous permettent de modifier la couleur, l'ombre, le remplissage, le style, la taille et le rayon de la bordure autour du conteneur de votre formulaire.
- Les paramètres Styles d'arrière-plan vous donnent le contrôle sur l'image et la couleur d'arrière-plan de votre formulaire pour donner à votre formulaire une touche de marque.
Une fois que vous avez stylisé votre formulaire de contact, cliquez sur l'onglet Avancé. Ici, vous pouvez copier le code CSS contenant tous les styles que vous avez ajoutés.
Chaque fois que vous créez un nouveau formulaire, collez simplement l'extrait de code, et la conception du formulaire utilisera les styles du formulaire précédent.
De même, vous pouvez concevoir vos notifications par e-mail avec des modèles prêts à l'emploi, ce qui est un excellent moyen d'améliorer votre image de marque sur tous les canaux de communication.
Assurez-vous simplement d'ajouter un logo bien proportionné à votre e-mail (et à votre site Web) pour garantir une clarté et une réactivité parfaites sur tous les appareils.
FAQ sur la conception de formulaires de contact
La conception de formulaires de contact est l'un des sujets sur lesquels on me pose le plus de questions. Voici les réponses aux questions qui reviennent sans cesse.
Qu'est-ce qui fait un bon design de formulaire de contact ?
Un bon design de formulaire de contact limite les champs au minimum acceptable pour un visiteur, étiquette clairement chaque champ de saisie, s'intègre au reste de votre site et place le bouton de soumission dans un endroit évident. Le style visuel importe moins que les choix structurels qui l'entourent.
Combien de champs un formulaire de contact doit-il comporter ?
Trois à cinq champs est le point idéal pour la plupart des formulaires de contact des petites entreprises. Nom, e-mail, message est la base. Ajoutez un champ objet ou un menu déroulant de type de demande si vous traitez différents types de requêtes, et ajoutez un champ téléphone uniquement si vous rappelez réellement les gens.
Peut-on personnaliser WPForms ?
Oui, WPForms est conçu pour être personnalisé sans code. Vous pouvez ajuster les styles des champs, des étiquettes, des boutons et des conteneurs directement dans l'éditeur de blocs WordPress. Pour des modifications plus approfondies, vous pouvez également coller du CSS personnalisé ou créer vos propres modèles de formulaire.
Comment personnaliser mon formulaire de contact ?
Commencez par choisir un modèle ou créez un formulaire à partir de zéro dans le constructeur de formulaires WPForms. Ajoutez, supprimez et réorganisez les champs selon vos besoins. Ajustez ensuite les étiquettes, les espaces réservés et la taille des champs depuis le constructeur de formulaires, et utilisez les contrôles de style de l'éditeur de blocs pour définir les couleurs et les formes qui correspondent à votre marque.
Comment styliser un formulaire de contact dans WordPress ?
WPForms et l'éditeur de blocs WordPress gèrent la plupart des styles de formulaire sans aucun code. Choisissez un thème de couleur prédéfini pour commencer, puis affinez les champs, les étiquettes, les boutons et les arrière-plans depuis l'éditeur de blocs. Pour des designs uniques, collez du CSS personnalisé dans votre bloc de formulaire.
Comment changer le design d'un formulaire dans WordPress ?
Ouvrez le formulaire que vous souhaitez modifier dans WPForms, puis personnalisez le design depuis le constructeur de formulaires pour la mise en page et l'agencement des champs, et l'éditeur de blocs pour les styles visuels. Pour un style détaillé, utilisez les contrôles de thème, de champ, d'étiquette, de bouton et d'arrière-plan de l'éditeur de blocs.
Ensuite, créez une page de contact exceptionnelle autour de votre formulaire
Si vous êtes prêt à rassembler tout ce que nous avons couvert ici, mon guide pour créer une page Contactez-nous exceptionnelle vous guide à travers les éléments de support (titres, signaux de confiance, canaux alternatifs) qui entourent le formulaire lui-même.
Si vous n'avez pas encore créé votre formulaire, l'endroit le plus rapide pour commencer est le modèle de formulaire de contact simple de WPForms. Vous pouvez créer un formulaire de contact simple dans WordPress en environ cinq minutes à partir de là.
Créez votre formulaire de contact maintenant
Prêt à créer votre formulaire ? Commencez dès aujourd'hui avec le plugin de création de formulaires WordPress le plus simple. WPForms Pro inclut de nombreux modèles gratuits et offre une garantie de remboursement de 14 jours.
Si cet article vous a aidé, suivez-nous sur Facebook et Twitter pour plus de tutoriels et de guides WordPress gratuits.
