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, à la fois dans le générateur de formulaires et avec votre propre CSS.
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.
Styliser le bouton de soumission dans le générateur de formulaires
La façon la plus rapide de relooker votre bouton de soumission est dans le générateur de formulaires, où vous pouvez voir vos modifications au fur et à mesure. Aucun CSS requis.
Ouvrez le générateur de formulaires et accédez à Paramètres » Thèmes.
Recherchez ensuite la section Styles de bouton sur la gauche.
- Taille : Définit la taille de votre bouton. Les options incluent Petit, Moyen et Grand.
- Bordure : Encadre votre bouton avec une bordure pleine, en tirets ou en pointillés.
- Épaisseur de la bordure : Définit l'épaisseur de la bordure. L'unité par défaut est le pixel (px), mais vous pouvez choisir une unité différente.
- Rayon de la bordure : Arrondit les coins de votre bouton pour un aspect plus doux ou plus net. Le pixel (px) est également l'unité par défaut ici.
En dessous, vous trouverez trois options de couleur pour votre bouton. Pour changer une couleur, cliquez sur l'échantillon pour ouvrir le sélecteur de couleurs. Vous pouvez soit choisir une couleur visuellement, soit entrer un code hexadécimal pour un contrôle précis.
- Arrière-plan : Définit la couleur derrière le libellé de votre bouton.
- Bordure : Définit la couleur de la bordure de votre bouton. Ceci ne s'applique que si vous avez choisi un style de bordure ci-dessus.
- Texte : Définit la couleur du libellé de votre bouton.
Vous pouvez également choisir un thème de couleur prêt à l'emploi dans le paramètre Thèmes, qui met à jour votre bouton ainsi que le reste de votre formulaire. Pour en savoir plus, consultez notre tutoriel sur l'utilisation des thèmes de formulaires.
Une fois que vous êtes satisfait de vos modifications, cliquez sur Enregistrer, puis utilisez le bouton Aperçu pour voir votre formulaire avec les styles appliqués.
Le générateur de formulaires couvre les modifications dont la plupart des sites ont besoin. Pour un contrôle plus fin, tel que le remplissage exact, l'alignement des boutons, les boutons pleine largeur ou une police spécifique, vous aurez besoin d'une petite quantité de CSS. Nous allons aborder cela ensuite.
Styliser le bouton de soumission avec CSS
CSS vous donne un contrôle total sur le bouton de soumission, ainsi que sur tout autre aspect de votre formulaire. C'est l'outil idéal lorsque vous avez besoin de quelque chose que le générateur de formulaires n'offre pas encore.
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 et 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 */
color:#000 !important;
}
Ensuite, vous devrez ajouter ce CSS à votre site. WordPress conserve le panneau CSS additionnel dans l'un des deux endroits suivants, en fonction du type de thème que vous utilisez :
- Thèmes classiques : Allez dans Apparence » Personnaliser et sélectionnez CSS additionnel.
- Thèmes de blocs : WordPress masque le personnaliseur lorsqu'un thème de blocs est actif. Vous ajouterez donc votre CSS dans l'éditeur de site. Allez dans Apparence » Éditeur et ouvrez Styles pour trouver l'option CSS additionnel.
Voici le panneau CSS additionnel dans le personnaliseur, ce que vous verrez sur un thème classique.
Et voici dans l'éditeur de site, ce que vous verrez sur un thème de blocs.
Une fois que vous avez ouvert la section CSS additionnel, collez votre nouveau CSS et enregistrez vos modifications.
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 modifier la taille et le remplissage du bouton de soumission ?
Partiellement. Dans le constructeur de formulaire, allez dans Paramètres » Thèmes » Styles du bouton et utilisez le réglage Taille pour choisir entre Petit, Moyen et Grand. C'est suffisant pour la plupart des sites, et cela fonctionne aussi avec WPForms Lite.
Si vous avez besoin d'une taille de texte exacte ou de valeurs de remplissage spécifiques, vous devrez ajouter un extrait de code CSS. Voici un exemple.
div.wpforms-container-full .wpforms-form button[type=submit] {
font-size: 18px !important; /* Text size */
padding: 14px 40px !important; /* Space inside the button */
}
Puis-je changer la position du bouton pour qu'il s'affiche au centre ?
L'alignement des boutons n'est pas encore disponible dans le constructeur de formulaire, vous aurez donc besoin d'un petit extrait de code CSS pour cela. Par défaut, les boutons de soumission WPForms sont alignés sur le côté gauche de la page. Pour centrer le bouton, 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.
Puis-je styliser le bouton de soumission dans Divi ?
Oui, bien que vous le stylisiez dans le constructeur de formulaire WPForms plutôt qu'à l'intérieur de Divi. Le module WPForms n'inclut pas de contrôles de style de formulaire, donc ses paramètres ne couvrent que les propres options de Divi comme la taille et l'espacement.
Définissez vos styles de bouton sous Paramètres » Thèmes dans le constructeur de formulaire, et ils seront reportés sur votre formulaire sur la page Divi. Cela fonctionne que vous intégriez votre formulaire avec le module WPForms ou le shortcode. Pour plus de détails, consultez notre guide sur l'ajout de formulaires WPForms à une page Divi.
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.
Et voilà ! Vous pouvez maintenant personnaliser le bouton de soumission de votre formulaire, soit dans le constructeur de formulaire, soit avec votre propre CSS.
Ensuite, souhaitez-vous styliser le reste de votre formulaire pour qu'il corresponde ? Consultez notre guide complet sur le style de vos formulaires pour voir toutes les options disponibles dans le constructeur de formulaire.