Comment personnaliser le séparateur de section WPForms à l'aide de CSS

Aperçu

Souhaitez-vous personnaliser le champ de formulaire Séparateur de section de WPForms ? En utilisant un peu de CSS, vous pouvez modifier le style non seulement du séparateur lui-même, mais aussi du texte utilisé avec le séparateur. Dans cet article, nous vous guiderons à travers les étapes nécessaires pour personnaliser le style du champ de formulaire Séparateur de section.

Création du formulaire

Pour commencer, nous allons créer un formulaire, ajouter nos champs, puis diviser ces champs avec le Séparateur de section.

Si vous avez besoin d'aide pour créer votre formulaire, veuillez consulter cette documentation.

Aux fins de cette documentation, nous créons un formulaire qui recueillera des informations personnelles, des antécédents médicaux et des informations sur l'assurance principale. Comme le formulaire sera très long, nous voulons le diviser en sections qui définissent clairement chaque section, et pour ce faire, nous allons utiliser des Séparateurs de section pour diviser le formulaire.

Ajout du CSS

Il est maintenant temps d'ajouter le CSS qui personnalisera le style du Séparateur de section.

Pour obtenir de l'aide sur l'ajout de CSS à votre site, veuillez consulter ce tutoriel.

form#wpforms-form-220 .wpforms-field-divider h3 {
    color: #ffffff;
    text-align: center;
    font-size: 30px;
    text-transform: uppercase;
}

form#wpforms-form-220 .wpforms-field-divider {
    padding: 20px;
    background-color: #e27730;
    border-radius: 3px;
}

Nous ciblons l'ID du formulaire 220. Vous devrez mettre à jour cet ID pour qu'il corresponde à votre propre ID de formulaire. Pour obtenir de l'aide pour trouver cet ID, veuillez consulter ce tutoriel.

Maintenant, avec le CSS ajouté, notre Séparateur de section a un aspect complètement différent.

Et c'est tout ce dont vous avez besoin pour personnaliser le Séparateur de section. Souhaitez-vous également personnaliser le style des éléments de Case à cocher ? Jetez un œil à notre article sur Comment personnaliser les champs Case à cocher et Radio pour qu'ils ressemblent à des boutons.

FAQ

Q : Que faire si je voulais apporter cette modification à tous mes formulaires ?

R : Pour utiliser ce CSS pour tous les WPForms, ajoutez simplement votre CSS à votre site et supprimez l'ID du formulaire préfixé.

.wpforms-field-divider h3 {
    color: #ffffff !important;
    text-align: center !important;
    font-size: 30px !important;
    text-transform: uppercase !important;
}

.wpforms-field-divider {
    padding: 20px !important;
    background-color: #e27730 !important;
    border-radius: 3px !important;
}