8 beaux exemples de formulaires de contact + Comment les ajouter à votre site Web

Cinq conseils pour réussir la conception de votre formulaire de contact

Avant d'entrer dans les exemples de formulaires de contact réels, faisons un petit détour et parlons de ce qui fait un excellent formulaire de contact. Ce détour préparera le terrain alors que nous discutons de ce que chaque exemple de formulaire de contact fait bien dans la section suivante.

Vous avez probablement un formulaire de contact parce que vous voulez que les gens le remplissent. Alors, comment faire en sorte que plus de gens l'utilisent ? Voici quelques bonnes pratiques…

1. Communiquez clairement à quoi sert votre formulaire

Si vous avez une entreprise ou un site Web occupé, vous pouvez avoir plusieurs formulaires de contact pour différentes utilisations. Par exemple, cela peut être :

• Formulaire de demande de renseignements sur les ventes

• Formulaire de support client

• Formulaire de commande en ligne

• Formulaire de demande de rappel

• Etc.

Il existe deux approches de base pour gérer cela et vous verrez les deux dans les exemples de formulaire de contact ci-dessous :

1. Formes séparées. Créez des formulaires distincts pour chaque cas d'utilisation et ajoutez du texte qui indique clairement ce que fait chaque formulaire.

2. Un champ déroulant. Ajoutez un champ déroulant en haut de votre formulaire qui répertorie les différents cas d'utilisation et achemine automatiquement votre formulaire de contact au bon endroit.

Dans tous les cas, utilisez vos étiquettes de formulaire et le texte environnant pour que l'objectif de chaque formulaire de contact soit absolument clair pour vos visiteurs.

2. Limitez la longueur du formulaire pour plus de conversions (mais n'oubliez pas la qualité)

Toutes choses étant égales par ailleurs, les données semblent suggérer que des formulaires de contact plus longs signifient moins de soumissions.

Par exemple, HubSpot a analysé plus de 40 000 pages de destination et a remarqué une corrélation claire entre les taux de conversion et le nombre de champs de formulaire.

Le taux de conversion maximal est d'environ trois champs. Le taux de conversion baisse régulièrement jusqu'à huit champs de formulaire, avant de s'aplatir :

La source

Sur une note plus anecdotique, Marketo a testé trois formulaires avec des résultats similaires à HubSpot :

• 5 champs — taux de conversion de 13,4%

• 7 champs — taux de conversion de 12,0%

• 9 champs — taux de conversion de 10,0%

Bien sûr, le simple fait d'obtenir plus de soumissions de formulaires de contact n'est peut-être pas votre véritable objectif, donc ce n'est pas aussi simple que de simplement réduire le nombre de champs de vos formulaires au strict minimum.

Par exemple, bien que vous puissiez obtenir plus de soumissions en réduisant les champs, ces soumissions peuvent ne pas être d'aussi haute qualité car la barrière à l'entrée est si faible.

Dans l'ensemble, une bonne règle de base consiste à éliminer tous les champs inutiles , mais n'éliminez pas les champs qui collectent des informations importantes dans le seul but de raccourcir votre formulaire, surtout si ces informations servent à qualifier vos prospects.

3. Utilisez la microcopie intelligente pour expliquer les champs

Si votre formulaire de contact contient plus que les champs standards « nom, e-mail, message », vous courez le risque de semer la confusion chez les visiteurs.

Par exemple, si vous avez un champ « budget », il peut être difficile de savoir à quoi correspond ce budget. Est-ce pour l'ensemble du projet ? Est-ce pour une pièce spécifique ?

Pour éviter une telle confusion, vous pouvez ajouter « microcopie » à votre formulaire de contact.

La microcopie est essentiellement un petit texte explicatif qui accompagne les champs du formulaire pour les rendre plus clairs. Par exemple, regardez le champ Volume des paiements ci-dessous (vous verrez également cet exemple plus tard) :

4. Expérimentez avec différents formats

Lorsque la plupart des gens pensent à un formulaire de contact, ils imaginent le même formulaire intégré de base que vous voyez sur la plupart des sites Web. Mais si vous voulez que les gens vous contactent facilement, il est parfois utile d'expérimenter différentes méthodes d'affichage, comme une fenêtre contextuelle ou une barre de notification.

Par exemple, avoir un bouton de contact flottant sur le côté de votre site peut être idéal pour un formulaire de contact d'assistance. Cela permet aux utilisateurs de vous contacter très facilement dès qu'ils rencontrent un problème, sans les obliger à rechercher votre page de contact :

5. Dites aux gens les prochaines étapes et définissez les attentes

La conception de votre formulaire de contact n'est pas terminée une fois que les gens ont cliqué sur Soumettre !

Pour offrir une meilleure expérience utilisateur, vous voulez dire aux gens exactement ce qui se passera ensuite et combien de temps cela prendra. Par exemple…

• Répondez-vous à toutes les demandes ou seulement à certaines ?

• Combien de temps vous faudra-t-il pour répondre ?

• Allez-vous répondre par e-mail ou par une autre méthode ?

Si vous définissez des attentes claires, vos visiteurs ne se demanderont pas ce qui se passe et si votre formulaire fonctionne même.

Huit excellents exemples de formulaires de contact à partir de vrais sites Web

Maintenant que vous connaissez les meilleures pratiques, examinons quelques conceptions de formulaires de contact du monde réel pour vous inspirer et vous montrer ces meilleures pratiques en action.

1. Rayure

Le formulaire de contact commercial de Stripe est un excellent exemple de la façon dont la collecte de quelques informations supplémentaires peut parfois permettre à vos formulaires de contact de générer des prospects plus qualifiés (même si cela peut réduire un peu le taux de conversion de base).

En plus des champs d'informations standard, Stripe ajoute un champ de volume de paiements afin qu'ils puissent mieux comprendre la qualité potentielle de chaque prospect.

Au-delà de cela, il existe d'autres choix de conception intéressants, notamment :

• Preuve sociale — ces logos sur le côté ajoutent une preuve sociale en affichant toutes les entreprises prospères qui utilisent Stripe.

• Microcopie — le terme « volume des paiements » peut être un peu déroutant, alors Stripe ajoute une microcopie utile expliquant comment remplir le champ.

• Objectif – Stripe indique très clairement que ce formulaire est uniquement destiné aux demandes de renseignements sur les ventes. Cela garantit que les gens n'essaient pas de l'utiliser à des fins d'assistance ou à d'autres fins non commerciales.

2. Getsitecontrol

Chez Getsitecontrol, nous gérons la conception de notre formulaire de contact un peu différemment.

Plutôt que de créer une page dédiée "Contactez-nous" vers laquelle les visiteurs doivent accéder, nous incluons simplement un lien Contactez-nous qui ouvre une fenêtre contextuelle immédiatement - aucun rechargement de page requis.

C'est vraiment pratique pour les gens car ils peuvent…

• accéder à notre formulaire de contact depuis n'importe quelle page du site,

• envoyer un message sans interrompre ce qu'ils faisaient d'autre (comme lire cet article de blog !).

  

Le formulaire de contact Getsitecontrol est simple et facile à remplir. De plus, il communique clairement les prochaines étapes une fois que les gens ont soumis le formulaire, ainsi qu'un CTA pour consulter le blog Getsitecontrol.

3. Kinsta

Kinsta a une seule page « Nous contacter » qui guide automatiquement les utilisateurs vers le formulaire de contact approprié sans les obliger à recharger la page.

Kinsta répertorie les cinq demandes de contact les plus populaires :

1. Tarifs ou forfaits

2. Caractéristiques ou informations techniques

3. Demander une migration ou toute question connexe

4. Message invité, message sponsorisé ou demande de backlink

5. Rien d'autre

Lorsque les utilisateurs sélectionnent leur objectif, Kinsta affiche soit un formulaire de contact personnalisé, soit un message.

Cela permet à Kinsta de collecter exactement les informations dont ils ont besoin, sans surcharger les visiteurs avec des champs superflus.

Par exemple, sur le formulaire de contact Tarification ou plans , Kinsta ajoute des champs supplémentaires pour comprendre combien de sites Web et de visiteurs la personne cherche à héberger, mais ces champs n'apparaissent pas sur le formulaire « Autre chose ».

Kinsta définit également des attentes claires au sommet - "Nous vous contacterons dans un délai d'un jour ouvrable".

4. Sélection de sélection

Choice Screening a un long formulaire de contact. À première vue, vous pourriez penser que cela tuera les taux de conversion du formulaire. Et c'est un peu vrai - Choice Screening recevra sans aucun doute moins de soumissions de formulaires qu'avec un formulaire plus court.

Mais parlons de pourquoi parfois c'est bien, et pourquoi c'est un excellent exemple de formulaire de contact.

Choice Screening opère dans un espace interentreprises très spécialisé. Ils essaient d'obtenir des prospects qualifiés qui deviendront des clients de longue date, pas seulement des soumissions de formulaires de contact.

Avec sa liste de services détaillée et ses nombreuses cases à cocher, le formulaire éliminera les personnes qui ne sont pas encore sûres de ce qu'elles veulent et ne laissera passer que des prospects qualifiés qui ont de grandes chances de se transformer en clients.

On pourrait dire que Choice Screening sélectionne ses clients potentiels avec ce formulaire de contact !

5. Joel Klettke / Rédaction publicitaire décontractée

Joel est un rédacteur professionnel, vous pouvez donc parier que la conception et la copie de son formulaire de contact seront au point.

Le formulaire de Joel lui-même est simple, avec les champs standard plus quelques champs qualificatifs supplémentaires pour le budget d'une personne. C'est tout ce qui se passe à côté du formulaire qui en fait un si bon exemple de formulaire de contact.

Dans ce texte, Joel fait un excellent travail de définition des attentes et de qualification de ses prospects. Il chasse aussi volontairement les clients à petit budget en discutant de ses tarifs minimum. Bien que Joel puisse supprimer ces mentions pour obtenir un taux de conversion initial plus élevé, cela entraînerait en fait un pourcentage plus faible de prospects qualifiés et finirait par lui faire perdre du temps.

6. Neil Patel

Neil Patel gère l'un des sites Web de marketing numérique les plus populaires au monde, vous pouvez donc être sûr qu'il reçoit de nombreuses soumissions de formulaires de contact.

Pour aider à acheminer ces soumissions au bon endroit, Neil inclut une liste déroulante « J'aimerais discuter de » où les gens peuvent choisir parmi une gamme d'options prédéfinies. Il utilise également des microcopies dans la zone réservée pour implorer les gens de garder leurs messages courts et précis.

Celui-ci est simple - mais parfois simple est tout ce dont vous avez besoin dans la conception de votre formulaire de contact.

7. Laboratoire de concentration

Ok, celui-ci est amusant, fantaisiste et ne fonctionnera certainement pas pour toutes les entreprises. Mais si vous êtes dans un espace créatif (ce qui est le cas de Focus Lab), la création d'un formulaire de contact fantaisiste comme celui-ci peut montrer que vous êtes capable de sortir des sentiers battus.

Plutôt que de créer un formulaire traditionnel, Focus Lab utilise davantage une approche de style Mad Libs où les visiteurs saisissent leurs informations dans un paragraphe existant. En utilisant cette approche, Focus Lab est également capable de collecter plus d'informations (comme les objectifs et le budget) sans l'aspect imposant qu'une conception de formulaire de contact plus traditionnelle pourrait avoir.

8. CAMICB

CAMICB, abréviation de Community Association Managers International Certification Board, propose une certification pour les associations communautaires aux États-Unis.

La chose notable à propos du formulaire de contact CAMICB est qu'il utilise une approche hybride popup/page "Contactez-nous". Lorsque les utilisateurs accèdent à la page Contactez-nous , le site Web du CAMICB ouvre instantanément un simple formulaire de contact contextuel où les visiteurs peuvent soumettre leurs messages.

Avec seulement trois champs, CAMICB garde sa forme courte et précise. Ensuite, l'approche contextuelle crée une interface agréable sans distraction où l'accent est entièrement mis sur le formulaire.

Cela rend la soumission d'une demande aussi fluide que possible.

Et pour rendre les choses encore plus faciles , CAMICB affiche également un formulaire de contact coulissant auquel les utilisateurs peuvent accéder dans son pied de page :

Comment créer votre propre design de formulaire de contact personnalisable

Après avoir parcouru ces huit exemples de formulaires de contact, vous avez probablement plein d'idées sur la façon dont vous pouvez appliquer ces principes à vos propres conceptions de formulaires de contact.

Si vous voulez commencer, [Getsitecontrol](/feedback-popup/ peut vous permettre d'être opérationnel en un rien de temps.

Contrairement à la plupart des solutions de formulaire de contact, Getsitecontrol vous permet de choisir parmi quatre positions flexibles et des dizaines de modèles pour votre formulaire. Vous pouvez créer une fenêtre contextuelle traditionnelle comme celle que vous avez vue avec CAMICB et le site Web Getsitecontrol. Ou, vous pouvez faire bouger les choses avec des diapositives, des barres de notification, des boutons, etc.

Vous pourrez ajouter autant (ou aussi peu) de champs que nécessaire pour obtenir des soumissions qualifiées, et vous pouvez également insérer une microcopie pour aider les visiteurs à remplir votre formulaire.

Inscrivez-vous à Getsitecontrol aujourd'hui et vous pouvez avoir un formulaire de contact fonctionnel en quelques minutes.