Souhaitez-vous personnaliser la couleur du bouton de soumission de votre formulaire pour qu'il corresponde à l'image de votre site web ? Bien que WPForms 1.8.1+ offre une personnalisation intégrée de la couleur à travers l'éditeur de blocs, vous pouvez également le faire en utilisant un CSS personnalisé pour un contrôle plus précis.
Ce guide vous montrera comment changer la couleur de votre bouton de soumission à l'aide de CSS.
Avec la sortie de WPForms 1.8.1, vous pouvez maintenant facilement changer la couleur du bouton Submit sans utiliser de CSS, simplement en ajoutant le formulaire à votre page en utilisant un éditeur de blocs. Avec cette fonctionnalité de style de formulaire, vous pouvez styliser vos formulaires sans écrire de CSS. Pour en savoir plus, consultez cette documentation utile.
Cependant, vous pouvez également utiliser un CSS personnalisé pour y parvenir et, dans ce tutoriel, c'est la méthode que nous utiliserons pour modifier le style de la couleur du bouton Soumettre.
Mise en place du formulaire
Pour commencer, ouvrez le générateur de formulaires en créant un nouveau formulaire ou en modifiant un formulaire existant. Ajoutez les champs de formulaire souhaités.
Ajouter le code CSS
L'extrait CSS suivant modifiera la couleur de votre bouton de soumission :
Le CSS ci-dessus changera la couleur de fond du bouton de soumission en bleu(#066AAB) avec un texte blanc sur tous les boutons de soumission de WPForms sur votre site.
Personnaliser le code
Pour utiliser des couleurs différentes, remplacez les codes hexagonaux dans le code :
Sur ligne 7, remplacer #066AAB avec la couleur de bouton souhaitée.
Sur ligne 8, remplacer # de la même couleur que la bordure.066AAB
Sur ligne 14, remplacer #04446E avec la couleur de survol souhaitée (généralement une nuance plus foncée de la couleur de votre bouton).
Par exemple, pour créer un bouton rouge, vous pouvez utiliser :
couleur de fond : #ff0000 !important ;
border-color : #ff0000 !important ;
Questions fréquemment posées
Q : Pourquoi ce CSS ne fonctionne-t-il pas pour moi ?
A : Si vous ne voyez pas vos modifications, commencez par vider le cache de votre navigateur. Si cela ne fonctionne toujours pas, il se peut que votre thème prenne le pas sur les styles. Essayez d'ajouter !important à vos règles CSS, comme indiqué dans notre exemple. Pour plus d'aide, consultez notre Guide de dépannage CSS.
Q : Cela fonctionnera-t-il également pour les boutons "Suivant" et "Précédent" ?
R : Si vous utilisez un champ Page Break dans votre formulaire et que vous utilisez les boutons Next et Previous pour la navigation, nous utiliserons une feuille de style CSS qui donnera à tous ces boutons le même style. Il vous suffit de copier cette feuille de style CSS sur votre site.
.wpforms-form button[type=submit], button.wpforms-page-button {
background-color: #024488 !important;
border-color: #024488 !important;
color: #fff !important;
transition: background 0.3s ease-in-out;
}
.wpforms-form button[type=submit]:hover, button.wpforms-page-button:hover {
background-color: #022B57 !important;
}
Q : Puis-je cibler un seul de mes formulaires ?
R : Si vous souhaitez modifier un seul formulaire, il vous suffit de cibler l'ID du formulaire dans votre CSS. Dans cet exemple, nous allons cibler le formulaire ID 999 pour le bouton Soumettre ainsi que les boutons Suivant et Précédent du champ Saut de page.
Vous devrez mettre à jour le 999 pour qu'il corresponde à votre propre ID de formulaire.
button#wpforms-submit-999, form#wpforms-form-999 button.wpforms-page-button {
background-color: #024488;
border-color: #024488;
color: #fff;
transition: background 0.3s ease-in-out;
}
button#wpforms-submit-999:hover, form#wpforms-form-999 button.wpforms-page-button:hover {
background-color: #022B57;
}
Et voilà ! Vous avez modifié la couleur de votre bouton de soumission. Ensuite, vous souhaitez utiliser CSS pour personnaliser le bouton Soumettre d'autres façons ? Consultez notre tutoriel sur l'utilisation de CSS pour personnaliser le bouton de soumission.