Personnaliser le style des champs de formulaire individuels

Mis à jour :
Afficher Markdown

Souhaitez-vous styliser des champs spécifiques dans vos formulaires, sans affecter les autres champs ? Avec le bon sélecteur CSS, vous pouvez modifier les styles de n'importe quel composant de formulaire pour répondre à vos besoins.

Dans ce tutoriel, nous fournirons une liste de presque tous les sélecteurs dont vous pourriez avoir besoin pour styliser des champs individuels sur vos formulaires.

Note : Ce tutoriel est un peu plus avancé et nécessite quelques connaissances en CSS. Si vous préférez ne pas utiliser de code, vous pouvez consulter notre guide sur la stylisation de WPForms dans l'éditeur de blocs.

Comment utiliser le code ci-dessous

Vous trouverez ci-dessous une liste des sélecteurs CSS dont vous aurez besoin pour cibler des champs de formulaire individuels avec votre code CSS.

Vous trouverez également ci-dessous les styles par défaut que WPForms applique automatiquement à ces sélecteurs. Pour personnaliser n'importe quelle partie de votre formulaire, vous pouvez commencer par copier un extrait de code CSS de ce tutoriel sur votre site, puis le modifier selon vos besoins.

Note : Vous ne savez pas comment ajouter du CSS à votre site ? Consultez le tutoriel de WPBeginner sur l'ajout de CSS personnalisé à votre site WordPress.

Sélecteurs et styles par défaut de WPForms

Certains des styles que vous voyez dans votre formulaire (comme la police) proviendront de votre thème. WPForms inclut également quelques styles de base pour aider vos formulaires à être superbes sur n'importe quel thème. Quelle que soit l'origine du style initial, il peut généralement être remplacé en utilisant des sélecteurs CSS très spécifiques.

Note : Lors de l'ajout de CSS à votre site, il peut être nécessaire d'inclure !important avant le point-virgule pour vous assurer que vos styles personnalisés sont appliqués avec succès. Cela aidera à remplacer tout CSS ajouté par votre thème ou d'autres plugins. Consultez notre guide sur le dépannage CSS pour plus de détails.

Vous trouverez ci-dessous une liste de sélecteurs CSS spécifiques à chaque partie d'un formulaire, ainsi que les styles qui seront inclus par défaut via WPForms.

Titre et description du formulaire

.wpforms-form .wpforms-title {
    font-size: 26px;
    margin: 0 0 10px 0;
}

Description du formulaire

.wpforms-form .wpforms-description {
    font-size: 13px;
    line-height: 1.3;
    margin: 8px 0 0 0;
}

Indicateur de progression multi-pages

Note : Pour modifier la couleur de remplissage verte de l'indicateur de progression, veuillez utiliser les options multi-pages dans le constructeur de formulaire.

Titre de page de l'indicateur de progression

span.wpforms-page-indicator-page-title {
    font-size: 18px;
}

Étapes de l'indicateur de progression

span.wpforms-page-indicator-steps {
    font-size: 18px;
}

Étape actuelle de l'indicateur de progression

span.wpforms-page-indicator-steps-current {
    font-size: 18px;
}

Barre de progression de l'indicateur de progression

Barre de progression

.wpforms-form .wpforms-page-indicator.progress .wpforms-page-indicator-page-progress-wrap {
    display: block;
    width: 100%;
    background-color: #ddd;
    height: 18px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    margin: 5px 0 0;
}

Barre de progression de l'indicateur de progression (remplissage uniquement)

.wpforms-form .wpforms-page-indicator.progress .wpforms-page-indicator-page-progress {
    height: 18px;
    position: absolute;
    left: 0;
    top: 0;
}

Indicateur de progression : cercles

Cercles d'indicateur de progression

Cercles d'étape (les couleurs s'appliquent uniquement aux étapes non actives)

.wpforms-form .wpforms-page-indicator.circles .wpforms-page-indicator-page-number {
    height: 40px;
    width: 40px;
    border-radius: 50%;
    display: inline-block;
    margin: 0 10px 0 0;
    line-height: 40px;
    text-align: center;
    background-color: #ddd;
    color: #666;
}

Cercle de l'étape actuelle

.wpforms-form .wpforms-page-indicator.circles .active .wpforms-page-indicator-page-number {
    color: #fff;
}

Connecteur de l'indicateur de progression

Connecteur de l'indicateur de progression

Sections de l'étape

.wpforms-form .wpforms-page-indicator.connector .wpforms-page-indicator-page {
    float: left;
    text-align: center;
    font-style: 16px;
    line-height: 1.2;
}

Sélecteurs globaux de champs de formulaire

Toutes les étiquettes de champ

.wpforms-form .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

Tous les sous-titres de champ

.wpforms-form .wpforms-field-sublabel {
    display: block;
    font-size: 13px;
    float: none;
    font-weight: 400;
    line-height: 1.3;
    margin: 4px 0 0;
    padding: 0;
}

Toutes les descriptions de champ

.wpforms-form .wpforms-field-description {
    font-size: 13px;
    line-height: 1.3;
    margin: 8px 0 0 0;
}

Boîtes autour de tous les champs de saisie

.wpforms-container input[type=date], .wpforms-container input[type=datetime], .wpforms-container input[type=datetime-local], .wpforms-container input[type=email], .wpforms-container input[type=month], .wpforms-container input[type=number], .wpforms-container input[type=password], .wpforms-container input[type=range], .wpforms-container input[type=search], .wpforms-container input[type=tel], .wpforms-container input[type=text], .wpforms-container input[type=time], .wpforms-container input[type=url], .wpforms-container input[type=week], .wpforms-container select, .wpforms-container textarea {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}

Marge intérieure entre tous les champs

.wpforms-form .wpforms-field {
    padding: 10px 0;
    clear: both;
}

Tous les petits champs de saisie

.wpforms-container input.wpforms-field-small, .wpforms-container select.wpforms-field-small, .wpforms-container .wpforms-field-row.wpforms-field-small { 
   max-width: 25%;
}

Tous les champs de saisie de taille moyenne

.wpforms-container input.wpforms-field-medium, .wpforms-container select.wpforms-field-medium, .wpforms-container .wpforms-field-row.wpforms-field-medium {
   max-width: 60%;
}

Tous les grands champs de saisie

.wpforms-container input.wpforms-field-large, .wpforms-container select.wpforms-field-large, .wpforms-container .wpforms-field-row.wpforms-field-large { 
   max-width: 100%;
}

Message de confirmation

Message de confirmation

.wpforms-confirmation-container-full {
    color: #333;
    margin: 0 0 24px 0;
    background: #e0ffc7;
    border: 1px solid #b4d39b;
    padding: 15px 15px;
}

Champs obligatoires

Astérisque « Obligatoire »

Astérisque de champ obligatoire

.wpforms-form .wpforms-required-label {
    color: #ff0000;
    font-weight: 400;
}

Erreurs de validation

Erreur de validation

Boîte de champ
.wpforms-form .wpforms-field input.wpforms-error, .wpforms-form .wpforms-field textarea.wpforms-error, .wpforms-form .wpforms-field select.wpforms-error {
    border: 1px solid #cc0000;
}
Message de validation
.wpforms-container em.wpforms-error {
    display: block;
    color: #990000;
    font-size: 12px;
    float: none;
}
Icône d'erreur de validation

Icône d'erreur de validation

 .wpforms-container-full .wpforms-form em.wpforms-error:before {
    content: '';
    position: relative;
    display: inline-block;
    right: 5px;
    top: 1.5px;
    width: 16px;
    height: 14px;
    background-color: var(--wpforms-label-error-color);
}

Champs standard

Texte sur une seule ligne

Champ de texte sur une seule ligne

Marge intérieure du texte sur une seule ligne
.wpforms-form  .wpforms-field.wpforms-field-text {
    padding: 10px 0;
    clear: both;
}
Étiquette du texte sur une seule ligne
.wpforms-form .wpforms-field.wpforms-field-text .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Boîte de saisie du texte sur une seule ligne
.wpforms-form .wpforms-field.wpforms-field-text input {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}

Texte de paragraphe

Champ de texte de paragraphe

Marge intérieure du texte de paragraphe
.wpforms-form .wpforms-field.wpforms-field-textarea {
    padding: 10px 0;
    clear: both;
}
Étiquette du texte de paragraphe
.wpforms-form .wpforms-field.wpforms-field-textarea .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Boîte de saisie de paragraphe
.wpforms-form .wpforms-field.wpforms-field-textarea textarea {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 120px;
    width: 100%;
    line-height: 1.3;
}

Champ déroulant

.wpforms-form .wpforms-field.wpforms-field-select.wpforms-field-select-style-classic {
    padding: 10px 0;
    clear: both;
}
.wpforms-form .wpforms-field.wpforms-field-select.wpforms-field-select-style-classic .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
.wpforms-form .wpforms-valid {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    background-color: #ffffff;
    padding: 4px 6px 1px;
    border: 1px solid #cccccc;
    border-radius: 2px;
    min-height: 35px;
    overflow: hidden;
}

Champ déroulant

.wpforms-form .wpforms-field.wpforms-field-select.wpforms-field-select-style-modern {
    padding: 10px 0;
    clear: both;
}
.wpforms-form .wpforms-field.wpforms-field-select.wpforms-field-select-style-modern .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
.wpforms-form .choices__inner {
    display: inline-block;
    vertical-align: top;
    width: 100%;
    background-color: #ffffff;
    padding: 4px 6px 1px;
    border: 1px solid #cccccc;
    border-radius: 2px;
    min-height: 35px;
    overflow: hidden;
}

Choix multiples

Champ à choix multiples

Marge intérieure du champ à choix multiples
.wpforms-form .wpforms-field.wpforms-field-radio {
    padding: 10px 0;
    clear: both;
}
Étiquette du champ à choix multiples
.wpforms-form .wpforms-field.wpforms-field-radio .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Étiquettes des options à choix multiples
.wpforms-form .wpforms-field.wpforms-field-radio ul li .wpforms-field-label-inline {
    display: inline;
    vertical-align: baseline;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
}

Cases à cocher

Champ de cases à cocher

Marge intérieure des cases à cocher
.wpforms-form .wpforms-field.wpforms-field-checkbox {
    padding: 10px 0;
    clear: both;
}
Étiquette des cases à cocher
.wpforms-form .wpforms-field.wpforms-field-checkbox .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Étiquettes des options de case à cocher
.wpforms-form .wpforms-field.wpforms-field-checkbox ul li .wpforms-field-label-inline {
    display: inline;
    vertical-align: baseline;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
}

Numérique

Champ de nombres

Marge intérieure des nombres
.wpforms-form .wpforms-field.wpforms-field-number {
    padding: 10px 0;
    clear: both;
}
Étiquette des nombres
.wpforms-form .wpforms-field.wpforms-field-number .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Zone de saisie des nombres
.wpforms-form .wpforms-field.wpforms-field-number input {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;    
}

Nom

Champ de nom

Zone de saisie du prénom
.wpforms-form input[type=text].wpforms-field-name-first {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}
Zone de saisie du deuxième prénom
.wpforms-form input[type=text].wpforms-field-name-middle {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}
Zone de saisie du nom de famille
.wpforms-form input[type=text].wpforms-field-name-last {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}

E-mail

Champ d'e-mail

Marge de courriel
.wpforms-form .wpforms-field.wpforms-field-email {
    padding: 10px 0;
    clear: both;
}
Étiquette du courriel
.wpforms-form .wpforms-field.wpforms-field-email .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Zone de saisie du courriel (principal uniquement)
.wpforms-form input[type=email].wpforms-field-email-primary {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;    
}
Zone de saisie du courriel (confirmer le courriel uniquement)
.wpforms-form input[type=email].wpforms-field-email-confirmation {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;    
}
Sous-étiquettes de courriel
.wpforms-form .wpforms-field.wpforms-field-email .wpforms-field-sublabel {
    display: block;
    font-size: 13px;
    float: none;
    font-weight: 400;
    line-height: 1.3;
    margin: 4px 0 0;
    padding: 0;
}

Curseur numérique

Champ de curseur numérique

Marge du curseur numérique
.wpforms-form .wpforms-field.wpforms-field-number-slider {
    padding: 10px 0;
    clear: both;
}
Étiquette du curseur numérique
.wpforms-form .wpforms-field.wpforms-field-number-slider .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Barre du curseur numérique
.wpforms-form .wpforms-field.wpforms-field-number-slider input[type=range] {
    background-color: #fff;
    box-sizing: border-box;
    border-radius: 2px;
    color: #333;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    display: block;
    float: none;
    font-size: 16px;
    border: 1px solid #ccc;
    padding: 6px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}

Accord RGPD

Champ d'accord RGPD

Marge de l'accord RGPD
.wpforms-form .wpforms-field.wpforms-field-gdpr-checkbox {
    padding: 10px 0;
    clear: both;
}
Étiquette de l'accord RGPD
.wpforms-form .wpforms-field.wpforms-field-gdpr-checkbox .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

C'est tout ! Vous pouvez maintenant utiliser ces sélecteurs pour appliquer du CSS personnalisé aux champs standard de vos formulaires.

Ensuite, souhaitez-vous styliser d'autres champs dans WPForms ? Assurez-vous de consulter nos tutoriels sur la personnalisation du style des champs fantaisie et des champs de paiement.

Toujours bloqué ? Comment pouvons-nous vous aider ?
Dernière mise à jour le 04 juin 2024

Le meilleur plugin de création de formulaires par glisser-déposer pour WordPress

Facile, rapide et sécurisé. Rejoignez plus de 6 millions de propriétaires de sites Web qui font confiance à WPForms.