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.
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 !
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Hamza est rédacteur au sein de l'équipe WPForms et se spécialise également dans les sujets liés au marketing numérique, à la cybersécurité, aux plugins WordPress et aux systèmes ERP.En savoir plus
Le meilleur plugin WordPress de construction de formulaires par glisser-déposer
Facile, rapide et sécurisé. Rejoignez plus de 6 millions de propriétaires de sites web qui font confiance à WPForms.
Vous voulez améliorer votre jeu sur les médias sociaux ? Connecter votre site WordPress à vos comptes de médias sociaux peut vous aider à rationaliser vos tâches de marketing des médias sociaux et à créer une marque en ligne plus intégrée. Dans cet article, nous partageons les meilleurs plugins de médias sociaux pour WordPress afin de vous aider à garder votre site et vos comptes sociaux synchronisés !
Vous ne recevez pas de notifications par email de vos formulaires de contact WordPress ? Malheureusement, le problème du formulaire de contact WordPress qui n'envoie pas d'email est très courant.
Cependant, vous pouvez rapidement résoudre ce problème et commencer à recevoir ces emails en configurant le protocole SMTP (Simple Mail Transfer Protocol) sur votre site web. Ce tutoriel vous montre exactement comment résoudre le problème d'envoi d'email par le formulaire de contact de WordPress.
Gérez vos préférences en matière de cookies ci-dessous :
Les cookies essentiels permettent des fonctions de base et sont nécessaires au bon fonctionnement du site web.
Nom
Description
Durée de l'accord
Préférences en matière de cookies
Ce cookie est utilisé pour stocker les préférences de l'utilisateur en matière de consentement aux cookies.
30 jours
Préférences en matière de cookies
Ce cookie est utilisé pour stocker les préférences de l'utilisateur en matière de consentement aux cookies.
30 jours
Easy Digital Downloads est un plugin WordPress permettant de vendre des produits numériques sans effort et de gérer les transactions.
Nom
Description
Durée de l'accord
edd_session_
Stocke des informations sur la session utilisateur en cours.
Session
edd_items_in_cart
Stocke des informations sur le contenu du panier.
Session
Ces cookies sont utilisés pour gérer les fonctionnalités de connexion sur ce site Web.
Nom
Description
Durée de l'accord
wordpress_logged_in
Utilisé pour stocker les utilisateurs connectés.
Persistant
wordpress_sec
Utilisé pour suivre l'utilisateur sur plusieurs sessions.
15 jours
wordpress_test_cookie
Utilisé pour déterminer si les cookies sont activés.
Session
WPForms est un plugin WordPress convivial permettant de créer des formulaires personnalisés avec une fonctionnalité glisser-déposer.
Nom
Description
Durée de l'accord
wpfuuid
Utilisé pour suivre les interactions des utilisateurs avec les formulaires.
11 ans
Les cookies statistiques collectent des informations de manière anonyme. Ces informations nous aident à comprendre comment les visiteurs utilisent notre site web.
Google Analytics est un outil puissant qui suit et analyse le trafic du site Web pour des décisions marketing éclairées.
Utilisé pour stocker les données variables personnalisées au niveau du visiteur.
2 ans
__utmz
Enregistre la source de trafic ou la campagne qui explique comment l'utilisateur a atteint votre site.
6 mois
_ga
Utilisé pour distinguer les utilisateurs.
2 ans
_gat
Utilisé pour limiter le taux de requête.
1 minute
_gid
Utilisé pour distinguer les utilisateurs.
24 heures
__utma
Utilisé pour distinguer les utilisateurs.
Persistant
__utmb
Utilisé pour déterminer les nouvelles sessions/visites.
30 minutes
__utmc
Utilisé pour déterminer si l'utilisateur est dans une nouvelle session/visite.
Session
__utmt
Utilisé pour limiter le taux de requête.
10 minutes
Les cookies marketing sont utilisés pour suivre les visiteurs des sites web. L'objectif est d'afficher des publicités pertinentes et attrayantes pour l'utilisateur individuel.
OptinMonster est un puissant outil de génération de leads qui aide les entreprises à convertir les visiteurs en abonnés et en clients.
utilisé pour déterminer si un visiteur a interagi avec un identifiant de campagne de {id} sur votre site.
30 jours
om-interaction-cookie / omGlobalInteractionCookie
Utilisé pour déterminer si un visiteur a interagi avec une campagne sur votre site.
Session
om-global-cookie / omGlobalSuccessCookie
Utilisé pour empêcher les futures campagnes OptinMonster de s'afficher sur votre site.
Session
_omappvs
Le cookie est utilisé pour identifier les visiteurs qui reviennent
1 jour
_omappvp
Le cookie est utilisé pour identifier les visiteurs qui reviennent
1 jour
_omra
Utilisé pour stocker les données d'interaction et de conversion pour les campagnes en conjonction avec l'attribution de revenus.
1 an
omCountdown-{id}-{elementId}
Utilisé pour les éléments de compte à rebours {elementId} dans les campagnes {id} pour déterminer quand il doit se terminer
Session
om-{id}-closed / omSlideClosed-{id}
Utilisé spécifiquement avec les campagnes d'insertion {id} pour déterminer si elles ont été fermées ou non par un visiteur.
30 jours
om-success-cookie / omSuccessCookie
utilisé pour déterminer si un visiteur a participé avec succès à une campagne sur votre site afin de déverrouiller le contenu lors de l'utilisation de la fonction de verrouillage du contenu.
365 jours
om-success-{id} / omSuccess-{id}
Utilisé pour déterminer si un visiteur s'est inscrit avec succès à une campagne avec l'identifiant {id} sur votre site.
365 jours
omSeen-{id}
Utilisé pour déterminer si une campagne a été montrée à un visiteur par le slug. Pas de date d'expiration
30 jours
X Pixel permet aux entreprises de suivre les interactions des utilisateurs et d'optimiser efficacement les performances des publicités sur la plate-forme X.
Ce cookie est mis en place par X pour identifier et suivre le visiteur du site web. Il enregistre si un utilisateur est connecté à la plateforme X et recueille des informations sur les préférences publicitaires.
2 ans
personalization_id
Valeur unique avec laquelle les utilisateurs peuvent être identifiés par X. Les informations collectées sont utilisées pour personnaliser les services X, y compris les tendances X, les histoires, les publicités et les suggestions.
2 ans
référent_externe
Notre site Web utilise des boutons X pour permettre à nos visiteurs de suivre nos flux X promotionnels, et parfois d'intégrer des flux sur notre site Web.