Vous cherchez des inspirations pour la conception de formulaires de contact pour votre site web ? Avec quelques modifications simples, vous pouvez créer des formulaires en ligne comme vous le souhaitez.
Dans cet article, je vais vous montrer quelques exemples de formulaires de contact et vous donner des conseils utiles pour en créer un sur votre site web.
Modifiez votre formulaire de contact dès maintenant !
Je vous montrerai également une méthode très pratique, sans code, pour modifier la présentation de vos formulaires. Vous êtes prêt ? Plongeons dans l'aventure !
Dans cet article
7 modèles de formulaires de contact que vous pouvez vous approprier
Examinons maintenant quelques exemples intéressants et les tactiques clés qu'ils utilisent pour s'en inspirer et les recréer sur votre site.
1. WPForms
J'ai voulu commencer par la page de contact de WPForms, car je pense que c'est un excellent exemple pour les produits SaaS, les sites web de plugins et d'autres petites entreprises.
La partie supérieure de cette page est divisée en deux parties : l'une pour les clients existants ayant des questions techniques et l'autre pour les demandes de renseignements préalables à la vente.
Lire aussi : Comment autoriser les visiteurs à dupliquer les champs d'un formulaire
Pourquoi je pense que ce formulaire de contact sort du lot
Le formulaire de contact n'est pas immédiatement visible et n'apparaît que lorsqu'une personne clique sur le bouton "Remplir un formulaire" dans la section "J'ai une question de base".
Ce choix permet de réduire la taille de la page et de s'assurer que les nouveaux clients potentiels utilisent le formulaire en priorité puisqu'il n'est accessible qu'à partir de la section "Avant-vente".
Cette stratégie permet de diriger rapidement les utilisateurs vers la section appropriée, ce qui simplifie le processus tant pour l'entreprise que pour les personnes qui prennent contact.
En outre, au bas de la page, un lien d'appel à l'action (CTA) invite les visiteurs à rejoindre le Cercle VIP de WPForms.
Comment créer une page de contact comme celle-ci
- Formulaire de contact contextuel : Concevez une page de contact où le formulaire n'apparaît que lorsque l'on clique sur un bouton spécifique. Cela permet de conserver une page soignée et de mettre l'accent sur d'autres éléments jusqu'à ce qu'une interaction soit nécessaire.
- Base de connaissances pour le support client : Mettez en place un wiki ou une base de connaissances sur votre site WordPress. Il s'agit d'une zone d'entraide pour les clients existants, qui répond aux questions et aux problèmes les plus courants.
- Utilisation de modèles : Choisissez parmi plus de 2 000 modèles de formulaires WordPress pour divers objectifs tels que le retour d'information, le marketing et les opérations commerciales. Ces modèles permettent de créer rapidement des formulaires fonctionnels et d'aspect professionnel. (Essayez également ces modèles WPForms cachés pour des situations particulières).
- Traduction des formulaires : Pour les sites web destinés aux non-anglophones ou aux publics multilingues, WPForms permet de traduire facilement les formulaires de contact afin de répondre aux différents besoins linguistiques.
Créez votre formulaire WordPress maintenant
2. Rayure
J'ai décidé de me concentrer sur la page de contact de Stripe, car c'est un excellent exemple de page de contact spécialisée qui traite efficacement les demandes d'information des entreprises.
Pour que le formulaire de contact ait l'air plus court, Stripes utilise un formulaire en plusieurs étapes sur sa page de contact, ce qui contribue certainement à réduire le taux d'abandon des formulaires.
Pourquoi je pense que cette page de contact sort du lot
La particularité de ce formulaire de contact est qu'il se concentre sur la collecte d'informations pertinentes pour l'équipe de vente de Stripe.
Il utilise un formulaire en plusieurs étapes qui demande d'abord votre adresse électronique professionnelle et votre pays/région pour saisir vos informations.
Une fois que vous avez cliqué sur le bouton continuer, le formulaire de contact de Stripe vise à obtenir une bonne compréhension de votre entreprise et de la façon dont Stripe peut vous aider.
En posant des questions sur la taille de votre entreprise, votre chiffre d'affaires et vos besoins en matière d'intégration, ils peuvent acheminer votre demande vers la personne la plus appropriée.
Comment créer une page de contact comme celle-ci
- WPForms Lead Forms Addon : 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 à votre équipe de vente.
- Restez simple : Ne submergez pas les utilisateurs avec trop de champs de formulaire. Ne demandez que les informations essentielles dont vous avez besoin pour qualifier les clients potentiels.
- Des étiquettes et des 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 en plusieurs étapes dès maintenant
3. La légalité
Le formulaire de contact de la page "Contactez-nous" de Legalia Corp est une interface bien pensée, conçue pour faciliter la communication entre le cabinet et ses clients.
Cette page se distingue par sa disposition en plusieurs colonnes, avec une carte à gauche pour clarifier la localisation et un formulaire de contact structuré à droite.
Pourquoi je pense que ce formulaire de contact sort du lot
L'utilisation d'une mise en page à plusieurs colonnes est particulièrement efficace, car elle divise proprement le formulaire en deux sections différentes.
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 que l'inclusion d'une carte permet non seulement de localiser facilement l'entreprise, mais aussi d'en accroître la légitimité et l'accessibilité.
Le formulaire lui-même est également assez simple, demandant des informations essentielles sans pour autant submerger l'utilisateur.
Comment créer une page de contact comme celle-ci
- Planifiez votre présentation : Commencez par choisir une mise en page qui concilie l'interface utilisateur et l'esthétique. Une mise en page divisée peut être très efficace pour séparer visuellement les différents types d'informations tout en les gardant sur la même page.
- Incorporer des cartes : Si votre entreprise dispose d'un site physique, l'intégration d'une carte sur la page de contact peut considérablement renforcer la confiance des utilisateurs et simplifier le processus de recherche d'un site. Utilisez des outils tels que Google Maps pour faciliter l'intégration.
- Simplifiez le formulaire : Limitez les champs de votre formulaire au minimum afin de ne pas décourager les contacts potentiels. Ne demandez que les informations les plus importantes, telles que le nom, l'adresse électronique et une brève boîte de message, ce qui est à mon avis tout à fait suffisant.
Ajouter une carte à votre formulaire de contact
4. Journal des moteurs de recherche
Le formulaire de contact de la page "Contact Us" de Search Engine Journal se distingue 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.
Lire aussi : comment forcer l'espacement entre les champs.
Pourquoi je pense que ce formulaire de contact sort du lot
J'aime beaucoup la façon dont Search Engine Journal a introduit diverses options de catégorisation basées sur le type de requête de l'utilisateur.
Qu'il s'agisse de publicité, de signalement d'un problème technique ou d'autres préoccupations, il existe une option pour chaque besoin.
L'inclusion d'un CAPTCHA permet également d'éviter les soumissions de spam, garantissant que seules les demandes authentiques parviennent à l'équipe du SEJ.
Enfin, les utilisateurs peuvent joindre des fichiers à leurs demandes, ce qui est particulièrement utile pour soumettre des documents à l'appui de leurs messages ou de leurs demandes.
Comment créer une page de contact comme celle-ci
- Mettre en œuvre des fonctions 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.
- Se concentrer sur l'expérience de l'utilisateur : Concevez votre formulaire en pensant à l'utilisateur. Veillez à ce qu'il soit facile à parcourir, à ce que les champs soient clairement identifiés et à ce que les instructions soient simples afin d'éviter toute confusion. Utilisez un champ déroulant pour catégoriser les demandes des utilisateurs.
- Ajouter un champ de téléchargement de fichier : Si vous souhaitez donner aux personnes qui vous contactent la possibilité de joindre des champs à leurs demandes, vous pouvez utiliser WPForms pour ajouter un champ de téléchargement de fichier à votre formulaire, ce qui est assez facile à utiliser.
Mettre en place un CAPTCHA sur votre formulaire WordPress
5. Marvel
Marvel est une société de conception de logiciels qui utilise une disposition en plusieurs colonnes pour son formulaire de contact, avec une image à droite.
La conception est claire et moderne, ce qui permet aux utilisateurs de trouver facilement les informations dont ils ont besoin.
Pourquoi je pense que ce formulaire de contact sort du lot
La conception en plusieurs colonnes est ce qui distingue vraiment ce formulaire de contact, et lui donne cette impression d'espace et de respiration.
Il permet aux utilisateurs de parcourir rapidement la page et de trouver exactement ce dont ils ont besoin sans avoir à passer au crible un grand nombre de textes.
L'image à droite du formulaire n'est pas seulement attrayante sur le plan visuel, elle est aussi en rapport avec l'activité de Marvel, ce qui témoigne de son engagement en matière de conception.
Comment créer une page de contact comme celle-ci
- Mise en page en plusieurs colonnes : Commencez par choisir une mise en page qui concilie l'interface utilisateur et l'esthétique. Une présentation en plusieurs colonnes 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 qui sont en rapport avec l'objectif de la page. L'ajout d'une image à votre formulaire de contact peut le rendre plus attrayant et interactif.
Ajouter des images à votre formulaire de contact
6. Moyen
La page de contact d'un centre d'aide comme celui de Medium est essentielle pour fournir une assistance directe et des conseils aux utilisateurs.
Il contient des liens directs vers les rubriques d'aide et les réponses les plus courantes. Les utilisateurs peuvent facilement soumettre une demande s'ils ne trouvent pas de réponses à leurs questions.
Pourquoi je pense que cette page de contact sort du lot
La page de contact du média comprend généralement des menus déroulants ou des cases à cocher qui permettent aux utilisateurs de classer leurs demandes par catégorie.
De nombreux centres d'assistance proposent des liens vers des questions fréquemment posées ou des articles connexes avant d'autoriser la soumission d'un 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 d'assistance.
Comment créer une page de contact comme celle-ci
- Incorporez des options d'auto-assistance : Intégrez votre page de contact à votre base de connaissances. Fournissez des articles ou des liens vers des FAQ en rapport avec les sélections ou les entrées de l'utilisateur, ce qui peut permettre de résoudre la question.
7. Frontière blanche
Vous souhaitez placer un formulaire au-dessus d'une image de fond ? Vous cherchez un formulaire de contact qui utilise le CSS ? J'ai tout ce qu'il vous faut !
White Frontier utilise un formulaire transparent sur sa page de contact, ce qui lui permet de se fondre parfaitement dans l'arrière-plan.
Lorsque vous testez ce modèle sur votre site, veillez à placer une image en arrière-plan. Sinon, vous ne pourrez pas voir le formulaire.
Comment créer une page de contact comme celle-ci
Pour cet exemple, vous pouvez simplement copier le CSS de conception du formulaire de contact ci-dessous. Vous pouvez consulter notre guide du débutant pour styliser vos formulaires avec CSS pour plus de détails.
Formulaire de contact CSS
/* Fields */ div.wpforms-container-full .wpforms-form input[type=date], div.wpforms-container-full .wpforms-form input[type=datetime], div.wpforms-container-full .wpforms-form input[type=datetime-local], div.wpforms-container-full .wpforms-form input[type=email], div.wpforms-container-full .wpforms-form input[type=month], div.wpforms-container-full .wpforms-form input[type=number], div.wpforms-container-full .wpforms-form input[type=password], div.wpforms-container-full .wpforms-form input[type=range], div.wpforms-container-full .wpforms-form input[type=search], div.wpforms-container-full .wpforms-form input[type=tel], div.wpforms-container-full .wpforms-form input[type=text], div.wpforms-container-full .wpforms-form input[type=time], div.wpforms-container-full .wpforms-form input[type=url], div.wpforms-container-full .wpforms-form input[type=week], div.wpforms-container-full .wpforms-form select, div.wpforms-container-full .wpforms-form textarea { background-color: transparent; /* Remove background fill */ text-transform: uppercase; /* Make text all uppercase */ border-radius: 0; /* Remove corner curve */ border: 2px solid #fff; /* 2px white border */ color: #fff; /* White text */ height: 45px; /* Increase input height */ } ::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #fff; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #fff; opacity: 1; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #fff; opacity: 1; } :-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #fff; } ::-ms-input-placeholder { /* Microsoft Edge */ color: #fff; } /* Button */ div.wpforms-container-full .wpforms-form input[type=submit], div.wpforms-container-full .wpforms-form button[type=submit], div.wpforms-container-full .wpforms-form .wpforms-page-button { text-transform: uppercase; padding: 10px 60px; color: white; background: #444; font-weight: normal; }Personnalisation à l'échelle du site
Il est assez facile de personnaliser vos formulaires à l'échelle du site une fois que vous disposez des snippets CSS que vous souhaitez utiliser.
Il vous suffit de copier les extraits CSS que vous souhaitez utiliser et de les coller dans votre site à l'aide du personnalisateur de thème WordPress ou de l'éditeur de thème.
Une méthode encore plus simple consiste à utiliser un plugin comme WPCode, qui vous permet de coller différents types d'extraits de code sur votre site.
Il se peut également que vous ayez plusieurs formulaires sur votre site web et que vous souhaitiez modifier le style d'un seul d'entre eux. Nous allons voir comment procéder.
Comment personnaliser vos formulaires 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 formulaire à 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 de formulaire, les étiquettes, les boutons, ainsi que les styles de conteneur et d'arrière-plan sans écrire de CSS dans les paramètres du bloc WPForms.
- Vous pouvez choisir un thème de couleurs prédéfini dans le paramètre Thèmes pour modifier le style des champs, étiquettes, boutons, conteneurs et arrière-plans de votre formulaire.
- Dans la section Styles de champ, vous trouverez les options permettant d'ajuster la taille, la bordure, la taille de la bordure, le rayon de la bordure et les couleurs de vos champs de formulaire.
- La section Styles d'étiquettes permet de modifier la taille et la couleur de vos étiquettes de formulaire. Les options de taille disponibles sont Petit, Moyen et Grand.
- Sous Styles de boutons, 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 des Styles de conteneur vous permettent de modifier la couleur, l'ombre, le rembourrage, le style, la taille et le rayon de la bordure entourant le conteneur de votre formulaire.
- Les paramètres des Styles d'arrière-plan vous permettent de contrôler l'image et la couleur d'arrière-plan de votre formulaire afin de lui donner une image de marque.
Une fois que vous avez stylisé votre formulaire de contact, cliquez sur l'onglet Avancé. Vous pouvez y copier le code CSS contenant tous les styles que vous avez ajoutés.
Chaque fois que vous créez un nouveau formulaire, il vous suffit de coller l'extrait de code pour que le formulaire reprenne les styles du formulaire précédent.
De même, vous pouvez concevoir vos notifications par courrier électronique à l'aide de modèles prêts à l'emploi, ce qui constitue un excellent moyen de renforcer votre image de marque sur tous les canaux de communication.
Veillez simplement à ajouter un logo bien proportionné à votre courrier électronique (et à votre site web) pour garantir une clarté et une réactivité parfaites sur tous les appareils.
Stylez votre formulaire de contact maintenant
FAQ sur les formulaires de contact
La conception de formulaires de contact est un sujet d'intérêt populaire parmi nos lecteurs. Voici les réponses à quelques questions courantes à ce sujet :
Peut-on personnaliser WPForms ?
Oui, vous pouvez personnaliser WPForms de manière extensive. WPForms vous permet de créer des modèles personnalisés et de modifier les styles directement dans l'éditeur de blocs de WordPress.
Cette flexibilité vous permet d'adapter vos formulaires à la conception de votre site web et de répondre à vos besoins spécifiques. Consultez ce guide pour plus d'informations.
Comment puis-je personnaliser mon formulaire de contact ?
Pour personnaliser votre formulaire de contact dans WordPress à l'aide de WPForms, commencez par sélectionner un modèle ou créez un formulaire à partir de zéro.
Vous pouvez ajouter, supprimer et réorganiser les champs selon vos besoins. Utilisez le constructeur de formulaires WPForms pour ajuster les paramètres tels que les étiquettes, les espaces réservés et la taille des champs pour une personnalisation plus poussée.
Comment styliser un formulaire de contact dans WordPress ?
Pour styliser un formulaire de contact dans WordPress, utilisez WPForms et l'éditeur de blocs de WordPress. Avec WPForms, vous pouvez choisir parmi des modèles de formulaires prédéfinis et personnalisables.
Dans l'éditeur de blocs, vous pouvez ajouter des feuilles de style CSS personnalisées directement à vos blocs de formulaire afin de modifier les polices, les couleurs, le remplissage, etc. en fonction du style de votre site.
Comment modifier le design d'un formulaire dans WordPress ?
Changez le design de votre formulaire dans WordPress en utilisant WPForms. Sélectionnez le formulaire que vous souhaitez éditer, puis personnalisez son design dans le constructeur de formulaire.
Pour une mise en forme détaillée, utilisez l'éditeur de blocs de WordPress, qui vous permet de modifier le thème du formulaire, les styles des champs, des étiquettes, des boutons, de l'arrière-plan, etc.
Ensuite, apprenez à créer un modèle de formulaire de marque
Les formulaires de marque qui reflètent les couleurs, le logo et le style de votre marque donnent à vos formulaires un aspect plus personnel et professionnel, ce qui renforce l'engagement et la confiance des utilisateurs. Consultez ce guide pour savoir comment créer un modèle de formulaire à votre image.
Créez votre formulaire WordPress maintenant
Prêt à créer votre formulaire ? Commencez dès aujourd'hui avec le plugin de construction de formulaire WordPress le plus facile à utiliser. WPForms Pro inclut de nombreux modèles gratuits et offre une garantie de remboursement de 14 jours.
Si cet article vous a aidé, n'hésitez pas à nous suivre sur Facebook et Twitter pour d'autres tutoriels et guides gratuits sur WordPress.
