Résumé IA
Les boutons de soumission sont l'un des aspects les plus facilement ignorés de la conception des formulaires. Même s'ils ne représentent qu'une petite partie des formulaires, nichés en bas, les boutons de soumission peuvent avoir un impact important sur l'attrait visuel général de votre formulaire.
Après avoir testé des tonnes de différents types de formulaires de prospects pour augmenter les conversions, je peux vous dire qu'un bouton de soumission bien conçu peut faire toute la différence pour attirer l'attention de vos visiteurs.
Dans cet article, je vais partager quelques conseils et bonnes pratiques basés sur mon expérience d'optimisation des formulaires de prospects pour les conversions. Plongeons dans le vif du sujet.
Conseils de base pour le style du bouton de soumission dans WPForms
WPForms vous offre différentes manières de styliser le bouton de soumission dans votre formulaire. Je préfère utiliser les options de style du formulaire dans l'éditeur de blocs WordPress. C'est le moyen le plus simple de personnaliser à peu près tous les composants de votre formulaire.
Les personnalisations de style des boutons sont disponibles dans toutes les versions de WPForms. Mais je recommande d'utiliser WPForms Pro pour débloquer toute la gamme d'options de style, y compris les thèmes de formulaires prêts à l'emploi ainsi que les paramètres pour l'arrière-plan et les conteneurs de votre formulaire.
Vous pouvez trouver les paramètres de style du bouton de soumission dans le panneau de droite des options de votre formulaire dans l'éditeur de blocs.
Ces paramètres vous permettent de contrôler la taille, la bordure et les couleurs du bouton de soumission sans aucun code.
Taille du bouton de soumission
WPForms vous offre trois préréglages pour la taille des boutons : petit, moyen et grand.
Les 3 options sont parfaitement viables d'un point de vue design. Vous ne violerez aucune bonne pratique en choisissant n'importe quelle taille de bouton ici.
Ce qui est plus important ici, c'est la cohérence du design. Par exemple, si vous utilisez des tailles de champs petites et des boutons grands, votre formulaire pourrait sembler un peu disproportionné par endroits.
Pour le meilleur équilibre, essayez d'utiliser une taille cohérente pour tous les éléments de vos formulaires.
Notre guide sur le style des formulaires à l'aide de l'éditeur de blocs explore les différentes options de personnalisation pour chaque composant du formulaire. Tous ces différents aspects se combinent pour créer la conception parfaite du formulaire.
Type de bordure
Les types de bordures sont entièrement un choix stylistique. Si vous l'avez remarqué, il est de plus en plus courant d'utiliser un design sans bordure pour un style épuré et minimaliste.
Cependant, vous avez également la possibilité d'utiliser des types de bordures moins courants dans WPForms :
- Les bordures pleines sont très populaires et donnent à vos formulaires un aspect professionnel et raffiné.
- Les bordures tirets ou pointillés sont moins courantes, mais elles ajoutent une touche de créativité ludique. Utilisez-les si le thème de votre site est plus décontracté, mais attention à ne pas en abuser.
- Les conceptions sans bordure sont élégantes et modernes, souvent utilisées pour souligner le minimalisme ou pour intégrer le bouton de manière transparente à l'arrière-plan. Lorsque vous supprimez les bordures, assurez-vous qu'il y a suffisamment de contraste ou d'ombre pour distinguer le bouton des éléments environnants.
Taille de la bordure
Vous pouvez également ajuster la taille de votre bordure. Il est de bon ton d'avoir une épaisseur de bordure qui complète la taille du bouton. Lorsque j'utilise une petite taille de bouton, je m'assure de la compléter avec une bordure fine de 3-4 pixels. Cela crée l'aspect le plus équilibré visuellement, d'après mon expérience.
Pour les gros boutons, une largeur de bordure de 4-6 pixels est plus appropriée. Une bonne règle à suivre est d'utiliser des bordures subtiles qui ajoutent de la structure sans submerger la conception du bouton.
Rayon de bordure
Le réglage du rayon de bordure dans WPForms vous donne un contrôle total sur l'arrondi de vos boutons. Les boutons plus arrondis fonctionnent bien dans les thèmes utilisant des styles modernes.
En fait, certaines études ont trouvé une corrélation entre les boutons ronds et des conversions plus élevées. Il vaut la peine d'expérimenter avec des boutons ronds si vous optimisez pour les conversions.
Vous pouvez utiliser un rayon de bordure d'environ 15-20 pixels pour obtenir l'aspect de bouton de style capsule que de nombreux sites modernes utilisent aujourd'hui.
Si vous préférez conserver une ambiance formelle, n'hésitez pas à laisser le rayon de bordure à 0 pixel pour que votre bouton reste carré.
L'important est d'équilibrer la courbure de votre bouton avec le thème général de conception de votre site Web.
J'ai une théorie selon laquelle les formes plus rondes fonctionnent mieux lorsqu'elles sont utilisées avec parcimonie. De cette façon, elles sont plus susceptibles de se démarquer des formes géométriques populaires que vous utilisez généralement sur d'autres parties de votre site.
Couleur d'arrière-plan du bouton
Dans WPForms, la couleur d'arrière-plan du bouton est facile à sélectionner avec le sélecteur de couleur. Choisir la couleur est important car cela affecte la visibilité de votre bouton.
Sélectionnez une couleur d'arrière-plan qui contraste avec l'arrière-plan de votre formulaire pour rendre votre bouton aussi visible que possible sur tous les appareils.
Votre image de marque joue également un rôle dans la sélection des couleurs. Si la conception de votre site Web est basée sur une palette de couleurs de marque, il est généralement judicieux de s'en tenir aux couleurs thématiques de votre marque.
Dans tous les cas, assurez-vous d'éviter les couleurs trop vives ou discordantes qui pourraient distraire inutilement les utilisateurs.
Couleur de la bordure
La bordure n'est qu'une petite fraction du bouton de soumission. Mais c'est un excellent endroit pour ajouter des couleurs d'accentuation afin d'améliorer l'attrait visuel de votre formulaire.
Les bordures sont plus attrayantes lorsqu'elles contrastent bien avec la couleur de fond de votre bouton. Cela ajoute non seulement de la personnalité à votre design, mais améliore également la visibilité de votre bouton.
Je recommande d'utiliser des tons subtils pour éviter d'attirer trop l'attention sur la bordure elle-même. Le but est d'accentuer le bouton plutôt que d'augmenter les distractions avec des bordures de bouton tape-à-l'œil.
Couleur du texte du bouton
Avec la couleur du texte du bouton, vous ne devriez avoir qu'un seul objectif : prioriser la lisibilité. La façon la plus simple de rendre le texte de votre bouton facile à lire est d'utiliser une couleur de texte qui contraste fortement avec l'arrière-plan du bouton.
Une bonne règle générale à suivre est d'utiliser du texte blanc pour les arrière-plans de bouton sombres et du texte noir ou gris foncé pour les nuances plus claires d'arrière-plans.
Bien que vous puissiez vous permettre des couleurs vives et audacieuses dans d'autres composants du bouton de soumission, il est préférable d'éviter de trop s'éloigner des couleurs neutres standard pour la couleur du texte afin de maintenir une bonne lisibilité.
Techniques de style avancées pour les boutons de soumission
WPForms ne vous oblige pas à utiliser de code pour le style de base de votre bouton. Cependant, vous devrez utiliser du CSS simple pour certains effets avancés comme les couleurs dégradées.
C'est beaucoup plus facile que cela en a l'air. Tout d'abord, vous aurez besoin du plugin WPCode installé sur votre site, ce qui vous permettra d'insérer facilement des extraits de code pour modifier les styles de votre bouton de soumission.
Installer WPCode
Ouvrez votre tableau de bord WordPress et allez dans Plugins » Ajouter.
Sur l'écran Ajouter des plugins, utilisez la boîte de recherche pour rechercher WPCode. Ensuite, appuyez sur le bouton Installer maintenant pour ajouter le plugin à votre site.
Le bouton « Installer maintenant » deviendra « Activer » une fois l'installation terminée. Appuyez sur le bouton Activer et vous êtes prêt à utiliser WPCode pour ajouter des extraits de code à votre site.
Après cela, survolez Extraits de code dans le panneau latéral de votre tableau de bord WordPress et cliquez sur + Ajouter un extrait lorsque le menu se développe.
Ensuite, cliquez sur Utiliser un extrait sous Ajouter votre code personnalisé (Nouvel extrait)
Vous devrez ensuite sélectionner le type d'extrait. Pour les ajustements de style, vous ajouterez des extraits personnalisés CSS. Alors, sélectionnez Extrait CSS parmi les options disponibles.
Maintenant, il vous suffira de copier et coller des extraits de code dans la fenêtre de l'éditeur de code pour appliquer des changements de style à vos formulaires. Je vais partager des exemples de codes CSS courants que vous pouvez utiliser pour modifier le style de votre bouton de soumission.
Ajouter des couleurs dégradées au bouton de soumission
Un dégradé de couleur est très accrocheur et indique généralement une conception de formulaire très professionnelle. C'est idéal lorsque vous souhaitez transmettre votre professionnalisme et votre souci du détail avec des couleurs dégradées pour les boutons.
Voici le code pour un extrait que vous pouvez utiliser pour ajouter un dégradé linéaire à la couleur du bouton de soumission :
#wpforms-8 .wpforms-submit {
background: linear-gradient(45deg, #066aab, #0f88d4); /* Gradient colors */
}
Dans ce code, « #wpforms-8 » fait référence à l'ID du formulaire de votre formulaire spécifique. Le formulaire que j'édite a l'ID 8. Si l'ID de votre formulaire est différent, disons 17, vous pouvez ajouter le bon numéro à ce morceau de code (c'est-à-dire « #wpforms-17 »).
Vous pouvez trouver l'ID du formulaire de votre formulaire en regardant le numéro mentionné dans le shortcode d'un formulaire spécifique. Ceci est mentionné dans la colonne Shortcode de votre formulaire sur l'écran Aperçu des formulaires.
La deuxième partie personnalisable de ce code sont les valeurs pour linear-gradient. Ces trois valeurs à l'intérieur des parenthèses séparées par des virgules sont :
- L'angle du dégradé
- Code hexadécimal de la première couleur
- Code hexadécimal de la deuxième couleur
Vous pouvez modifier ces valeurs à votre guise. Si vous avez besoin de trouver les codes hexadécimaux exacts pour les couleurs dont vous avez besoin, vous pouvez utiliser ce générateur de couleurs HTML.
Une fois que vous avez terminé de créer votre extrait CSS personnalisé, cliquez sur le bouton Enregistrer l'extrait et sur le bouton à bascule à côté pour enregistrer et activer l'extrait.
Votre formulaire aura maintenant des couleurs dégradées appliquées à son bouton de soumission.
Ajouter des effets de survol au bouton de soumission
Par défaut, WPForms ajoute un effet de survol au bouton de soumission pour indiquer qu'il est interactif et fournir un retour visuel immédiat à un visiteur qui a l'intention de cliquer.
Mais si vous souhaitez ajouter un effet de survol lors de l'utilisation d'un dégradé, vous pouvez utiliser ce code :
#wpforms-8 .wpforms-submit {
background: linear-gradient(45deg, #066aab, #0f88d4); /* Gradient colors */
transition: background 0.3s ease; /* Smooth transition on hover */
}
#wpforms-8 .wpforms-submit:hover {
background: linear-gradient(45deg, #0f88d4, #066aab); /* Changes gradient on hover */
}Ce code comprend également un effet de transition pour garantir que les interactions avec le bouton soient fluides. Généralement, un effet de transition de 0,3 s à 0,4 s offre l'effet le plus doux.
Si vous souhaitez simplement modifier l'effet de survol par défaut sur un bouton aux couleurs unies, vous pouvez utiliser les paramètres de style de formulaire WPForms dans l'éditeur de blocs pour définir la couleur de base que vous souhaitez.
Ensuite, utilisez ce code simplifié pour changer les couleurs au survol en ajoutant le code hexadécimal de la couleur souhaitée :
#wpforms-8 .wpforms-submit:hover {
background: #0f88d4; /* Solid color on hover */
transition: background 0.3s ease; /* Smooth transition */
}Assurez-vous de cliquer sur Enregistrer l'extrait et de l'activer pour appliquer les effets de survol sur le bouton de soumission de votre formulaire.
Si vous recherchez un effet de survol plus unique, vous pouvez appliquer l'effet de pulsation avec ce code :
@keyframes pulse {
0% {
box-shadow: 0 0 0 0 rgba(15, 136, 212, 0.4);
}
70% {
box-shadow: 0 0 0 20px rgba(15, 136, 212, 0);
}
100% {
box-shadow: 0 0 0 0 rgba(15, 136, 212, 0);
}
}
#wpforms-8 .wpforms-submit:hover {
animation: pulse 1.5s infinite;
}
Cela ajoute une touche créative avec un bouton qui palpite au survol, invitant les clics des visiteurs.
Conseils d'optimisation pour le texte du bouton de soumission
Le style est un aspect qui influence les clics sur le bouton de soumission. Le deuxième composant important est le texte du bouton de soumission. Ces quelques mots peuvent être le point décisif où vos utilisateurs décident d'agir ou de partir.
Un bon texte de bouton incite à l'action en se concentrant sur un avantage spécifique que votre visiteur peut attendre en cliquant. Évitez de simplement utiliser un « soumettre » générique. Utilisez plutôt un langage direct et orienté vers l'action, pointant vers un objectif.
Voici quelques exemples de textes de bouton de soumission optimisés pour la conversion :
- Obtenir mon devis gratuit
- Télécharger mon eBook
- Rejoindre la communauté
- Commencer mon parcours
- Accéder aux modèles gratuits
- Économiser 20 % aujourd'hui
Mais comment modifier le texte du bouton de soumission dans WPForms ? C'est facile. Dans le constructeur de formulaire, cliquez sur le bouton Soumettre en bas du formulaire pour passer instantanément à Paramètres » Général.
Ensuite, tapez simplement votre texte dans la zone Texte du bouton de soumission. Vous pouvez également modifier le texte qui apparaît pendant le traitement du formulaire dans la zone Texte de traitement du bouton de soumission.
Et c'est tout.
Maintenant que vous avez une meilleure idée des meilleures pratiques pour les boutons de soumission et comment vous pouvez les appliquer à vos formulaires, il est temps d'optimiser le texte de votre bouton pour plus de clics.
Lire aussi : Comment afficher l’historique de vos formulaires dans WordPress
Créer des boutons d’envoi efficaces pour vos formulaires n’est pas une science exacte. N’ayez pas peur d’expérimenter avec différents styles et textes de bouton et de surveiller vos résultats (cela peut être aussi simple que de tester A/B un formulaire et de mesurer la différence dans les taux de soumission de formulaires).
Ensuite, personnalisez les notifications par e-mail de WPForms
La personnalisation des formulaires avec WPForms est un processus rapide et sans effort. Mais cette flexibilité de personnalisation s’étend également à vos notifications par e-mail. Avec les notifications destinées aux clients, vous avez une excellente occasion d’intégrer votre image de marque aux notifications pour ajouter une apparence plus professionnelle à laquelle vos clients peuvent faire confiance.
Notre guide sur la personnalisation des notifications par e-mail des formulaires vous explique la manière la plus simple de personnaliser vos notifications.
Créez votre formulaire WordPress 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.
