Résumé IA
Souhaitez-vous personnaliser le bouton de soumission pour mieux l'adapter au design ou à la personnalité de votre site ? Le bouton de soumission de votre formulaire peut jouer un rôle important dans les taux de soumission.
Ce guide explique comment personnaliser le texte et le style du bouton de soumission de votre formulaire.
Modification du texte du bouton de soumission
Pour modifier le texte « Soumettre » du bouton de votre formulaire, ouvrez le constructeur de formulaire et accédez à Paramètres » Général. Vous y trouverez deux champs pour définir le texte du bouton de soumission :
- Texte du bouton de soumission : Le texte affiché lorsque ce bouton n'a pas encore été cliqué
- Texte de traitement du bouton de soumission : Le texte affiché après que l'utilisateur a cliqué sur ce bouton, mais avant que la confirmation ne soit affichée à l'utilisateur
Vous pouvez modifier le texte du bouton de soumission selon vos préférences. Une fois que vous êtes satisfait des modifications, enregistrez le formulaire.
Style du bouton de soumission
Le CSS offre une flexibilité incroyable pour personnaliser le bouton de soumission, ainsi que tout autre aspect de votre formulaire.
Si vous êtes novice en CSS ou si vous souhaitez un rappel, le meilleur point de départ est notre guide d’introduction à la CSS.
Voici le CSS par défaut pour un bouton de soumission WPForms, ainsi que des commentaires expliquant ce que fait chaque ligne de CSS :
.wpforms-form input[type=submit],
.wpforms-form button[type=submit] {
background-color: #eee; /* Grey background */
border: 1px solid #ddd; /* Dark grey border */
color: #333; /* Black text color */
font-size: 1em; /* Size of text */
padding: 10px 15px; /* Distance between text and border */
}
Vous pouvez modifier n'importe laquelle de ces valeurs pour styliser le bouton différemment. Par exemple, commençons par donner à notre bouton un fond jaune.
La première étape consiste à trouver le code hexadécimal de la couleur souhaitée – htmlcolorcodes.com ou Adobe Color CC sont des outils gratuits pratiques pour cela.
Une fois que nous avons le code hexadécimal de la nuance de jaune souhaitée, nous pouvons créer notre CSS :
.wpforms-form input[type=submit],
.wpforms-form button[type=submit] {
background-color: #FAF243 !important; /* Yellow background */
}
Ensuite, nous devons ajouter ce CSS à notre site. La façon la plus simple de le faire est d'utiliser l'éditeur CSS de WordPress. Pour l'ouvrir, allez dans Apparence » Personnaliser et sélectionnez CSS additionnel.
Une fois que vous avez ouvert la section CSS additionnel, collez votre nouveau CSS. Cliquez ensuite sur le bouton Enregistrer & Publier, et le tour est joué !
Voici à quoi ressemblera notre bouton maintenant avec ce CSS appliqué :
Personnaliser les styles au survol
Le CSS vous permet d'appliquer des styles complètement différents lorsqu'un curseur survole un bouton. Ce changement de style améliore l'expérience utilisateur car il indique à l'utilisateur que cet objet est cliquable.
Voici le CSS par défaut dans WPForms lorsqu'un bouton est survolé. Comme indiqué dans les commentaires, la couleur de fond devient légèrement plus foncée et la couleur de la bordure devient légèrement plus claire :
.wpforms-form input[type=submit]:hover,
.wpforms-form input[type=submit]:active,
.wpforms-form button[type=submit]:hover,
.wpforms-form button[type=submit]:active,
.wpforms-form .wpforms-page-button:hover,
.wpforms-form .wpforms-page-button:active {
background-color: #ddd; /* Darker grey background */
border: 1px solid #ccc; /* Lighter grey border */
}
Vous remarquerez peut-être qu'il y a beaucoup moins de CSS ici que pour le bouton lorsqu'il n'est pas survolé. C'est parce que le CSS appliquera tout le CSS précédent à votre bouton survolé, sauf indication contraire.
Si vous laissez les styles par défaut, par exemple, la couleur du texte restera noire lorsque le bouton est survolé. C'est parce que la couleur du texte du bouton serait normalement noire, et nous ne lui avons pas dit de changer au survol.
Comme pour l'exemple CSS personnalisé précédent, vous pouvez modifier l'une de ces valeurs pour styliser différemment les styles de survol du bouton. Pour notre exemple, nous donnerons au bouton un fond jaune plus foncé lorsqu'il est survolé.
.wpforms-form input[type=submit]:hover,
.wpforms-form input[type=submit]:active,
.wpforms-form button[type=submit]:hover,
.wpforms-form button[type=submit]:active,
.wpforms-form .wpforms-page-button:hover,
.wpforms-form .wpforms-page-button:active {
background-color: #e5da00 !important; /* Darker yellow background */
}
Voici à quoi ressemblera le bouton avec le CSS appliqué :
Personnalisation des styles de focus
Tout comme vous pouvez définir un style de survol pour votre bouton avec CSS, vous pouvez également définir un style de mise au point. Le style de mise au point est appliqué lorsque le bouton est le point focal de tout événement dans la page. Par exemple, si vous utilisez la touche tabulation pour naviguer dans la page.
L'utilisation d'un style de mise au point améliore l'expérience utilisateur, particulièrement utile pour les utilisateurs qui dépendent de la navigation au clavier pour parcourir le Web.
Voici le CSS par défaut dans WPForms lorsqu'un bouton est en mise au point :
.wpforms-form input[type=submit]:focus,
.wpforms-form button[type=submit]:focus,
.wpforms-form .wpforms-page-button:focus {
background-color: #ddd;
border: 1px solid #ccc;
cursor: pointer;
}
Dans ce cas, la background-color est une nuance légèrement plus foncée que la normale, et la bordure est également subtilement modifiée. Cela permet à l'utilisateur de savoir que le bouton est maintenant en mise au point et recevra les frappes clés pertinentes.
Pour cet exemple, nous allons utiliser une couleur autre que le jaune, pour rendre le style de mise au point distinct du style de survol.
.wpforms-form input[type=submit]:focus,
.wpforms-form button[type=submit]:focus,
.wpforms-form .wpforms-page-button:focus {
background-color: #80ccf6 !important;
}
Avec ce CSS personnalisé appliqué, voici à quoi ressemblera le bouton lorsqu'il sera en mise au point :
Exemple de CSS
Maintenant que nous avons couvert les bases, passons à un exemple complet de CSS personnalisé pour un bouton de soumission.
Voici le CSS que nous allons ajouter pour cet exemple, qui comprend des modifications de style pour le survol et la mise au point :
/* New button styles */
.wpforms-form input[type=submit],
.wpforms-form button[type=submit] {
padding: 15px !important; /* Increase distance between text and border */
width: 100% !important; /* Make the button full-width */
font-size: 1.5em !important; /* Increase text size */
background-color: #af0000 !important; /* Red background */
color: #fff !important; /* White text */
border: 8px double #860b0b !important; /* Dark red, double-line border */
}
/* New button hover styles */
.wpforms-form input[type=submit]:hover,
.wpforms-form input[type=submit]:active,
.wpforms-form button[type=submit]:hover,
.wpforms-form button[type=submit]:active,
.wpforms-form .wpforms-page-button:hover,
.wpforms-form .wpforms-page-button:active {
background-color: #860b0b !important; /* Dark red background */
border: 8px double #af0000 !important; /* Red, double-line border */
}
/* New button focus styles */
.wpforms-form input[type=submit]:focus,
.wpforms-form button[type=submit]:focus,
.wpforms-form .wpforms-page-button:focus {
background-color: red !important; /* Dark red background */
border: 8px double #860b0b !important; /* Red, double-line border */
}
Voici à quoi ressemblera notre bouton maintenant avec ce CSS appliqué :
Lorsqu'il est survolé :
Et lorsqu'il est en mise au point. Rappelez-vous, les seules modifications concernent les couleurs de fond et de bordure :
Questions fréquemment posées
Ce sont les réponses à quelques questions fréquentes sur la personnalisation du bouton de soumission dans WPForms.
Puis-je changer la position du bouton pour qu'il s'affiche au centre ?
Par défaut, les boutons de soumission WPForms sont alignés sur le côté gauche de la page. Cependant, vous pouvez utiliser du CSS personnalisé pour aligner le bouton au centre. Pour ce faire, ajoutez l'extrait de code suivant à votre site.
div.wpforms-container-full .wpforms-form button[type=submit] {
margin: 0 auto !important;
display: block !important;
}
Le code CSS ci-dessus appliquera le style à tous les formulaires de votre site. Si vous souhaitez appliquer le style à un formulaire spécifique, vous devrez utiliser le sélecteur CSS #wpforms-submit-FORM-ID. Voici un exemple d'extrait.
#wpforms-submit-FORM-ID {
margin: 0 auto !important;
display: block !important;
}
Voici à quoi ressemblera le bouton sur le frontend.
Si vous souhaitez que le bouton s'affiche en pleine largeur, utilisez la propriété CSS width: 100%. Voici une version mise à jour de l'extrait ci-dessus.
div.wpforms-container-full .wpforms-form button[type=submit] {
margin: 0 auto !important;
display: block !important;
width: 100% !important;
}
Affichage du bouton en pleine largeur.
Puis-je personnaliser le bouton de soumission WPForms dans Elementor Builder ?
Oui. WPForms s'intègre à Elementor pour fournir la personnalisation des formulaires directement dans Elementor Builder. Vous pouvez personnaliser les champs de votre formulaire, les étiquettes, les couleurs et le bouton de soumission.
Pour en savoir plus sur la personnalisation de votre formulaire dans Elementor, consultez notre guide sur l'ajout de WPForms à une page Elementor.
Comment masquer le bouton de soumission sur mon formulaire ?
Masquer le bouton de soumission est particulièrement utile si vous utilisez le module complémentaire Calculs pour créer des calculateurs sur votre site. Pour masquer le bouton de soumission de votre formulaire, vous devrez ajouter un extrait CSS personnalisé à votre site. L'extrait de code est disponible dans la bibliothèque d'extraits de code WPForms.
Pour plus de détails sur la façon d'importer cet extrait sur votre site, assurez-vous de consulter notre guide sur le masquage du bouton de soumission.
C'est tout ! Vous pouvez maintenant personnaliser votre bouton de soumission à l'aide de CSS personnalisé.
Vous voulez plus d'exemples ? Consultez notre tutoriel avec encore plus de CSS pour les boutons de soumission que vous pouvez copier et coller directement sur votre site.