Comment personnaliser les boutons de saut de page

Introduction

Envie de donner une touche unique à vos formulaires WPForms en personnalisant les boutons de Page Break ? Ne cherchez plus ! Dans ce tutoriel, nous vous guiderons à travers le processus d'utilisation du CSS pour personnaliser l'apparence de vos boutons. Avec une gamme d'extraits CSS, vous pouvez facilement obtenir le look que vous désirez pour un formulaire plus personnalisé et visuellement attrayant.

Créer votre formulaire multipage

Commençons par créer un formulaire multipage. Si vous n'êtes pas sûr du processus et que vous avez besoin d'aide, n'hésitez pas à consulter cette documentation utile sur la Création de formulaires multipages.

Dans le tutoriel d'aujourd'hui, nous nous concentrons sur la création d'un formulaire conçu pour recueillir des idées d'articles de blog.

Activer l'affichage précédent

Après avoir intégré vos boutons de Page Break, n'oubliez pas d'activer l'option Display Previous sur chacun de ces sauts de page. Cela garantit que vos visiteurs peuvent revenir en arrière pour examiner et apporter des modifications avant de finaliser le formulaire.

Lorsque vous utilisez les boutons Next et Previous pour votre formulaire, par défaut, ces boutons apparaîtront déjà sur la même ligne.

Mais que faire si nous voulions les centrer, ou en faire des boutons plus grands ? C'est là que le CSS entre en jeu !

Centrer les boutons

Ajoutons maintenant du CSS pour centrer les boutons Next et Previous sur notre formulaire.

Si vous ne savez pas où ni comment ajouter du CSS à votre site, veuillez consulter ce tutoriel.

form#wpforms-form-605 .wpforms-pagebreak-left {
text-align: center;
}

Ce CSS ne sera appliqué qu'à l'ID de formulaire 605. Vous devrez mettre à jour cet ID de formulaire pour qu'il corresponde au vôtre. Si vous ne savez pas où trouver l'ID de votre formulaire, veuillez consulter ce guide.

Si vous vouliez utiliser un CSS comme celui-ci pour qu'il s'applique à tous les formulaires, vous utiliseriez plutôt ce CSS.

.wpforms-pagebreak-left {
text-align: center !important;
}

Créer des boutons plus grands

Pour cette section, nous allons agrandir nos boutons tout en utilisant le CSS ci-dessus pour les maintenir centrés.

form#wpforms-form-605 .wpforms-pagebreak-left {
text-align: center;
}

form#wpforms-form-605 .wpforms-page-next {
width: 48% ;
float: right ;
margin: 0px ;
}

form#wpforms-form-605 .wpforms-page-prev {
margin-right: 0px ;
width: 48% ;
float: left ;
margin: 0 ;
padding: 0 ;
}

Pour apporter cette modification à tous les formulaires, utilisez plutôt ce CSS.

.wpforms-pagebreak-left {
text-align: center !important;
}

.wpforms-page-next {
width: 48% !important;
float: right !important;
margin: 0px !important;
}

.wpforms-page-prev {
margin-right: 0px !important;
width: 48% !important;
float: left !important;
margin: 0 !important;
padding: 0 !important;
}

Aligner les derniers boutons

Avec le formulaire multipage et l'utilisation des boutons Previous, la dernière page du formulaire affichera le bouton Previous final au-dessus du bouton Submit. Pour notre tutoriel, nous voulons aligner ces boutons sur la même ligne.

Alors, en utilisant tout le CSS que nous avons utilisé jusqu'à présent, rassemblons tout cela.

form#wpforms-form-605 .wpforms-page-next {
width: 48% ;
float: right ;
margin: 0px ;
}

form#wpforms-form-605 .wpforms-page-prev {
margin-right: 0px ;
width: 48% ;
float: left ;
margin: 0 ;
padding: 0 ;
}

form#wpforms-form-605 .wpforms-submit-container {
float: right ;
width: 48% ;
margin: 0 ;
padding: 0 ;
clear: none ;
}

form#wpforms-form-605 .wpforms-submit-container button {
width: 100%;
}

form#wpforms-form-605 .wpforms-page.last .wpforms-field-pagebreak {
float: left;
display: block;
width: 48%;
padding: 0;
}

form#wpforms-form-605 .wpforms-page.last .wpforms-pagebreak-left {
width: 100%;
}

form#wpforms-form-605 .wpforms-page.last .wpforms-page-prev {
width: 100%;
}

Et comme avec les autres CSS ci-dessus, si vous voulez cela pour tous les formulaires, vous utiliseriez ce CSS.

.wpforms-page-next {
width: 48% !important;
float: right !important;
margin: 0px !important;
}

.wpforms-page-prev {
margin-right: 0px !important;
width: 48% !important;
float: left !important;
margin: 0 !important;
padding: 0 !important;
}

.wpforms-submit-container {
float: right !important;
width: 48% !important;
margin: 0 !important;
padding: 0 !important;
clear: none !important;
}

.wpforms-submit-container button {
width: 100% !important;
}

.wpforms-page.last .wpforms-field-pagebreak {
float: left !important;
display: block !important;
width: 48% !important;
padding: 0 !important;
}

.wpforms-page.last .wpforms-pagebreak-left {
width: 100% !important;
}

.wpforms-page.last .wpforms-page-prev {
width: 100% !important;
}

Et voilà tout ce dont vous avez besoin pour personnaliser l'apparence des boutons multipages. Souhaitez-vous également passer à la page suivante automatiquement en fonction d'une question de votre formulaire ? Jetez un œil à notre tutoriel sur Comment passer automatiquement à la page suivante.