Souhaitez-vous 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 explique comment personnaliser le style des boutons précédent et suivant de votre formulaire multi-pages.
Remarque: si vous préférez styliser votre formulaire sans utiliser de code, consultez notre tutoriel sur la stylisation des formulaires.
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 multi-pages pour ajouter des boutons précédent et suivant.
Remarque: pour voir un formulaire multipage en action et démarrer rapidement, vous pouvez utiliser notre modèle de formulaire de demande de badge bleu prédéfini comme base pour votre propre formulaire. Vous pouvez ensuite appliquer les personnalisations que nous aborderons dans ce tutoriel pour styliser les boutons précédent et suivant.
Style des boutons Précédent et Suivant
Les CSS offrent une incroyable flexibilité pour personnaliser les boutons précédent et suivant dans WPForms et tout autre aspect de votre formulaire.
Si vous êtes novice en matière de CSS ou si vous souhaitez vous rafraîchir la mémoire, le meilleur moyen de commencer est de consulter notre guide d'introduction aux 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. À titre d'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 devons trouver les codes hexagonaux 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 hexagonaux 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 */
}
Remarque: lorsque vous ajoutez des feuilles de style CSS à votre site, il peut être nécessaire d'inclure !important avant le point-virgule pour vous assurer que vos styles personnalisés sont bien appliqués. Pour plus de détails, consultez notre guide de dépannage des feuilles de style CSS.
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 supplémentaire.
Une fois que vous avez ouvert la section Additional CSS, 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é :
Remarque: vous avez des difficultés à faire apparaître votre nouvelle feuille de style CSS sur votre site ? Consultez notre tutoriel sur la résolution de ce problème.
Personnalisation des styles de survol
CSS vous permet également d'appliquer des styles complètement différents lorsque les utilisateurs passent leur curseur au-dessus d'un bouton. Cette modification contribue à améliorer l'expérience des utilisateurs, car elle leur indique que le bouton est cliquable.
Ci-dessous se trouve le CSS par défaut pour les styles de survol des boutons de WPForms. Comme indiqué dans les commentaires, la couleur de fond devient un peu plus foncée et la couleur de la bordure un peu 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 peut-être que la quantité de CSS est beaucoup moins importante que pour le bouton lorsqu'il n'est pas survolé. En effet, le CSS applique tous les styles précédents au 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. Cela s'explique par le fait que la couleur du texte du bouton est normalement noire et que nous ne lui avons pas demandé de changer au moment du survol.
Comme dans l'exemple précédent de CSS personnalisé, vous pouvez modifier n'importe laquelle de ces valeurs pour changer les styles de survol du bouton. Dans notre exemple, nous allons donner 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 une fois la feuille de style CSS appliquée :
Exemple de CSS
Maintenant que nous avons couvert les bases, voyons un exemple complet de CSS personnalisé pour les boutons précédent et suivant.
Note : Le code ci-dessous changera les boutons précédent et suivant pour tous les formulaires multi-pages créés sur votre site avec WPForms.
Si vous souhaitez styliser les boutons précédent et suivant uniquement pour un seul formulaire, vous devez trouver l'identifiant unique de ce formulaire. Pour plus de détails, consultez notre guide complet pour styliser les formulaires de contact avec CSS.
Voici la feuille de style CSS que nous ajouterons pour cet exemple, qui inclut des changements 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 après l'application de cette feuille de style CSS :
Et voici à quoi ressembleront nos boutons lorsqu'ils seront survolés. Rappelez-vous que les seuls changements sont les couleurs de l'arrière-plan et de la bordure :
Voilà, c'est fait ! Vous pouvez maintenant personnaliser vos boutons précédent et suivant à l'aide d'une feuille de style CSS personnalisée.
Vous voulez ajouter encore plus de styles personnalisés à vos formulaires ? Consultez notre tutoriel sur la personnalisation des champs de formulaire individuels.