Personnalisation des boutons Précédent et Suivant dans les formulaires multipages avec CSS

Vous souhaitez personnaliser les boutons précédent et suivant de vos formulaires multipages ? La personnalisation des boutons de vos formulaires peut être un excellent moyen d’ajouter de la personnalité et du style à votre site.

Ce tutoriel vous expliquera comment personnaliser le style des boutons précédent et suivant de votre formulaire multipage.

Avant de commencer, assurez-vous que WPForms est installé et activé sur votre site et que vous avez vérifié votre licence. Ensuite, créez un formulaire multipage pour ajouter des boutons précédent et suivant.

Styliser les boutons précédent et suivant

Le CSS offre une flexibilité incroyable pour personnaliser les boutons précédent et suivant dans WPForms et 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 les boutons précédent et suivant de WPForms, ainsi que des commentaires pour noter ce que fait chaque ligne de CSS :

div.wpforms-container-full .wpforms-form .wpforms-page-button {
    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 chacune de ces valeurs pour styliser vos boutons de différentes manières. Par exemple, nous commencerons par changer la couleur d’arrière-plan de nos boutons en orange et le texte en blanc.

Tout d’abord, nous devrons trouver les codes hexadécimaux des couleurs que nous voulons utiliser. htmlcolorcodes.com et Adobe Color CC sont des outils gratuits utiles qui peuvent vous aider à choisir vos couleurs.

Une fois que nous avons les codes hexadécimaux des couleurs que nous voulons, nous pouvons les ajouter à notre CSS :

div.wpforms-container-full .wpforms-form .wpforms-page-button {
    background-color: #e27730 !important; /* Orange background */
    color: #fff !important; /* White text */
}

Ensuite, nous devons ajouter ce CSS à notre site. La manière la plus simple de le faire est d’utiliser l’éditeur CSS de WordPress. Pour ce faire, allez dans Apparence » Personnaliser et sélectionnez CSS additionnel.

Une fois que vous avez ouvert la section CSS additionnel, vous pouvez ajouter votre nouveau CSS. Cliquez ensuite sur le bouton Publier, et le tour est joué !

Voici à quoi ressembleront nos boutons maintenant, avec notre exemple de CSS appliqué :

Personnaliser les styles au survol

Le CSS vous permet également d’appliquer des styles complètement différents lorsque les utilisateurs survolent un bouton avec leur curseur. Ce changement contribue à améliorer l’expérience utilisateur car il indique aux utilisateurs que le bouton est cliquable.

Vous trouverez ci-dessous le CSS par défaut pour les styles de survol des boutons WPForms. Comme indiqué dans les commentaires, la couleur d'arrière-plan devient légèrement plus foncée et la couleur de la bordure devient légèrement plus claire :

div.wpforms-container-full .wpforms-form .wpforms-page-button:hover, div.wpforms-container-full .wpforms-form .wpforms-page-button:active {
    background-color: #ddd; /* Darker grey background */
    border: 1px solid #ccc; /* Lighter grey border */
}

Vous remarquerez que cela représente beaucoup moins de CSS que ce que vous avez vu pour le bouton lorsqu'il n'est pas survolé. C'est parce que le CSS appliquera tous les styles précédents à votre bouton survolé, sauf indication contraire.

Par exemple, si vous laissez les styles par défaut en place, la couleur du texte restera noire lorsque les utilisateurs survoleront le bouton. 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 de CSS personnalisé précédent, vous pouvez modifier l'une de ces valeurs pour changer les styles de survol du bouton. Pour notre exemple, nous donnerons au bouton un arrière-plan orange plus foncé lorsqu'il est survolé.

div.wpforms-container-full .wpforms-form .wpforms-page-button:hover, div.wpforms-container-full .wpforms-form .wpforms-page-button:active {
    background-color: #cd631d !important; /* Darker orange background */
}

Voici à quoi ressembleront les boutons avec le CSS appliqué :

Exemple de CSS

Maintenant que nous avons couvert les bases, passons en revue un exemple complet de CSS personnalisé pour les boutons précédent et suivant.

Voici le CSS que nous ajouterons pour cet exemple, qui comprend des modifications de style au survol :

/* New button styles */
div.wpforms-container-full .wpforms-form .wpforms-page-button {
    background-color: #003B6D !important; /* Dark blue background */
    border: 2px solid #BDBDBD !important; /* Gray border */
    color: #fff !important; /* White text */
    font-size: 1em !important; /* Increase text size */
    font-weight: bold !important; /* Bold text */
    padding: 16px !important; /* Increase distance between text and border */
    width: 25% !important; /* Make the button quarter-width */
}

/* New button hover styles */
div.wpforms-container-full .wpforms-form .wpforms-page-button:hover, div.wpforms-container-full .wpforms-form .wpforms-page-button:active {
    background-color: #BDBDBD !important; /* Gray background */
    border: 2px solid #003B6D !important; /* Dark blue border */
}

Voici à quoi ressembleront nos boutons personnalisés avec ce CSS appliqué :

Et voici à quoi ressembleront nos boutons lorsqu'ils seront survolés. Rappelez-vous, les seules modifications concernent les couleurs d'arrière-plan et de bordure :

Et voilà ! Vous pouvez maintenant personnaliser vos boutons précédent et suivant en utilisant du CSS personnalisé.

Vous souhaitez ajouter encore plus de styles personnalisés à vos formulaires ? Consultez notre tutoriel sur comment personnaliser des champs de formulaire individuels.