How to Change the Submit Button Color with WPForms

Afficher Markdown

Souhaitez-vous personnaliser la couleur du bouton de soumission de votre formulaire pour qu'elle corresponde à la marque de votre site Web ? Bien que WPForms 1.8.1+ offre une personnalisation des couleurs intégrée via l'éditeur de blocs, vous pouvez également y parvenir en utilisant du CSS personnalisé pour un contrôle plus précis.

Ce guide vous montrera comment changer la couleur de votre bouton de soumission en utilisant du CSS.

le style par défaut est appliqué au bouton de soumission

Avec la sortie de WPForms 1.8.1, vous pouvez désormais modifier facilement la couleur du bouton de soumission sans utiliser de CSS en ajoutant simplement le formulaire à votre page à l'aide d'un éditeur de blocs. Avec cette fonctionnalité de style de formulaire, vous pouvez styliser vos formulaires sans écrire de CSS. Pour en savoir plus à ce sujet, veuillez consulter cette documentation utile.

Cependant, vous pouvez également utiliser du CSS personnalisé pour y parvenir, et pour ce tutoriel, c'est la méthode que nous utiliserons pour modifier le style de la couleur du bouton Soumettre.

Configuration du formulaire

Pour commencer, ouvrez le constructeur de formulaires en créant un nouveau formulaire ou en modifiant un formulaire existant. Ajoutez les champs de formulaire souhaités selon vos besoins.

Pour obtenir de l'aide sur la création d'un formulaire, veuillez consulter notre guide complet sur la création de votre premier formulaire.

Ajout du code CSS

L'extrait de CSS suivant modifiera la couleur de votre bouton de soumission :

Si vous avez besoin d'aide sur comment et où ajouter du CSS à votre site, consultez notre tutoriel sur l'ajout de styles CSS personnalisés.

Le CSS ci-dessus changera l'arrière-plan de la couleur du bouton de soumission en bleu (#066AAB) avec du texte blanc sur tous les boutons Soumettre de WPForms sur votre site.

Les couleurs de ce CSS sont définies à l'aide de codes hexadécimaux, dont vous pouvez en savoir plus dans cette documentation.

c'est ainsi que nous avons changé la couleur du bouton de soumission

Remarque : Pour des modifications de style supplémentaires du bouton de soumission, telles que les styles au survol, veuillez consulter notre tutoriel sur le style des boutons de soumission.

Personnalisation du code

Pour utiliser des couleurs différentes, remplacez les codes hexadécimaux dans le code :

À la ligne 7, remplacez #066AAB par la couleur de bouton souhaitée.

À la ligne 8, remplacez #066AAB par la même couleur pour correspondre à la bordure.

À la ligne 14, remplacez #04446E par la couleur de survol souhaitée (généralement une nuance plus foncée de votre couleur de bouton).

Par exemple, pour faire un bouton rouge, vous pourriez utiliser :

background-color: #ff0000 !important;
border-color: #ff0000 !important;

Questions fréquemment posées

Q : Pourquoi ce CSS ne fonctionne-t-il pas pour moi ?

R : Si vous ne voyez pas vos modifications, videz d'abord le cache de votre navigateur. Si cela ne fonctionne toujours pas, votre thème pourrait remplacer les styles. Essayez d'ajouter !important à vos règles CSS comme montré dans notre exemple. Pour plus d'aide, consultez notre guide de dépannage CSS.

Q : Est-ce que cela fonctionnera aussi 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 Suivant et Précédent pour la navigation, nous utiliserons un CSS qui rendra tous ces boutons avec exactement le même style. Copiez simplement ce 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 vouliez changer un seul formulaire, vous ciblerez simplement l'ID du formulaire dans votre CSS. Dans cet exemple, nous ciblerons l'ID du formulaire 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.

Si vous n'êtes pas sûr de l'endroit où trouver l'ID de votre formulaire, consultez notre guide sur la recherche de l'ID de champ et 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 maintenant changé la couleur de votre bouton de soumission. Ensuite, souhaitez-vous utiliser CSS pour personnaliser le bouton Soumettre d'autres manières ? Veuillez consulter notre tutoriel sur l'utilisation de CSS pour personnaliser le bouton de soumission.

Comment changer la couleur du bouton Soumettre

Résumé IA