Personnalisation du style des champs de paiement

Publié :
Afficher Markdown

Souhaitez-vous styliser des champs individuels 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.

Ce tutoriel fournit une liste de sélecteurs dont vous aurez besoin pour styliser les champs de paiement dans WPForms.

Note : Les étapes de ce tutoriel sont avancées et nécessitent une certaine connaissance du 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.

Utilisation des extraits de code ci-dessous

Vous trouverez ci-dessous une liste des sélecteurs CSS dont vous aurez besoin pour cibler des champs sophistiqués spécifiques avec votre code CSS.

Nous avons également inclus les styles par défaut que WPForms applique automatiquement à ces sélecteurs. Pour personnaliser n'importe quelle partie de votre formulaire, vous pouvez 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.

Note : Pour en savoir plus sur l'utilisation du code ci-dessous, consultez notre tutoriel sur la personnalisation du style des champs standard et d'autres éléments de formulaire.

Champs de paiement

Article unique

Champ d'article unique

Marge intérieure d'un élément
.wpforms-form .wpforms-field.wpforms-field-payment-single {
    padding: 10px 0;
    clear: both;
}
Libellé d'un élément
.wpforms-form .wpforms-field.wpforms-field-payment-single .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

Plusieurs articles

Champ d'éléments multiples

Marge intérieure de plusieurs éléments
.wpforms-form .wpforms-field.wpforms-field-payment-multiple {
    padding: 10px 0;
    clear: both;
}
Libellé de plusieurs éléments
.wpforms-form .wpforms-field.wpforms-field-payment-multiple .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}

Éléments de cases à cocher

Cases à cocher

Marge intérieure des éléments de case à cocher
.wpforms-form .wpforms-field.wpforms-field-payment-checkbox {
    padding: 10px 0;
    clear: both;
}
Libellé des éléments de case à cocher
.wpforms-form .wpforms-field.wpforms-field-payment-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;
}
Libellés des éléments de case à cocher
.wpforms-form .wpforms-field.wpforms-field-payment-checkbox ul li .wpforms-field-label-inline {
    display: inline;
    vertical-align: baseline;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.3;
}

Champ d'éléments de liste déroulante

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

Carte de crédit Stripe

Champ de carte de crédit Stripe

Marge intérieure de la carte de crédit Stripe
.wpforms-form .wpforms-field.wpforms-field-stripe-credit-card {
    padding: 10px 0;
    clear: both;
}
Libellé de la carte de crédit Stripe
.wpforms-form .wpforms-field.wpforms-field-stripe-credit-card .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Sous-libellés de la carte de crédit Stripe
.wpforms-form .wpforms-field.wpforms-field-stripe-credit-card .wpforms-field-sublabel {
    display: block;
    font-size: 13px;
    float: none;
    font-weight: 400;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Champ de saisie du numéro de carte Stripe
.wpforms-form .wpforms-field.wpforms-field-stripe-credit-card .wpforms-field-stripe-credit-card-cardnumber {
    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: 8px 10px;
    height: 38px;
    width: 100%;
    line-height: 1.3;
}
Champ de saisie du nom sur la carte Stripe
.wpforms-form .wpforms-field.wpforms-field-stripe-credit-card input[type=text] {
    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;
}

Square

Champ carré

Marge intérieure Square
.wpforms-form .wpforms-field.wpforms-field-square {
    padding: 10px 0;
    clear: both;
}
Libellé Square
.wpforms-form .wpforms-field.wpforms-field-square .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Sous-libellés Square
.wpforms-form .wpforms-field.wpforms-field-square .wpforms-field-sublabel {
    display: block;
    font-size: 13px;
    float: none;
    font-weight: 400;
    line-height: 1.3;
    margin: 4px 0 0;
    padding: 0;
}
Champ de saisie des détails de la carte Square
.wpforms-form .wpforms-field.wpforms-field-square .sq-card-component {
    position: relative;
    height: inherit;
    width: 100%;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 2px;
}
Champ de saisie du nom sur la carte Square
.wpforms-form .wpforms-field.wpforms-field-square .wpforms-field-square-cardname {
    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;
}

Authorize.Net

Champ Authorize.Net

Marge intérieure Authorize.Net
.wpforms-form .wpforms-field.wpforms-field-authorize_net {
    padding: 10px 0;
    clear: both;
}
Libellé Authorize.Net
.wpforms-form .wpforms-field.wpforms-field-authorize_net .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Sous-libellés Authorize.Net
.wpforms-form .wpforms-field.wpforms-field-authorize_net .wpforms-field-sublabel {
    display: block;
    font-size: 13px;
    float: none;
    font-weight: 400;
    line-height: 1.3;
    margin: 4px 0 0;
    padding: 0;
}
Champ de saisie du numéro de carte Authorize.Net
.wpforms-form .wpforms-field.wpforms-field-authorize_net .wpforms-field-authorize_net-cardnumber {
    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;
}
Mois et année de la carte Authorize.Net
.wpforms-form .wpforms-field.wpforms-field-authorize_net select {
    max-width: 100%;
    text-transform: none;
    white-space: nowrap;
}
Champ de saisie du code de sécurité Authorize.Net
.wpforms-form .wpforms-field.wpforms-field-authorize_net .wpforms-field-authorize_net-code .wpforms-field-authorize_net-cardcvc {
    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;
}

Coupon

Champ de coupon

Marge intérieure du coupon
.wpforms-form .wpforms-field.wpforms-field-payment-coupon {
    padding: 10px 0;
    clear: both;
}
Libellé du coupon
.wpforms-form .wpforms-field.wpforms-field-payment-coupon .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    float: none;
    line-height: 1.3;
    margin: 0 0 4px 0;
    padding: 0;
}
Champ de saisie du coupon
.wpforms-form .wpforms-field.wpforms-field-payment-coupon 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: 120px;
    width: 100%;
    line-height: 1.3;
}
Bouton d'application du coupon
.wpforms-form .wpforms-field-payment-coupon-button {
    font-size: var(--wpforms-label-size-sublabel-font-size, 14px);
    font-weight: 500;
    line-height: 100%;
    background-color: var(--wpforms-label-sublabel-color, rgba(0,0,0,0.5));
    box-shadow: none;
    color: var(--wpforms-button-text-color, #fff);
    border: none;
    border-radius: var(--wpforms-button-border-radius, 3px);
    padding: 0 var(--wpforms-button-size-padding-h, 15px);
    white-space: nowrap;
    margin-left: 15px;
    height: var(--wpforms-field-size-input-height);
    cursor: pointer;
    position: relative;
    transition: all 0.15s ease-in-out;
    text-decoration: none
}
/* Apply button focus and hover styles */
.wpforms-form .wpforms-field-payment-coupon-button:hover,
.wpforms.form .wpforms-field-payment-coupon-button:active,
.wpforms.form .wpforms-field-payment-coupon-button:focus {
    background-color: var(--wpforms-field-text-color, rgba(0,0,0,0.7));
    border: none;
    box-shadow: none;
    color: var(--wpforms-button-text-color, #fff)
}

Total

Champ total

Rembourrage total
.wpforms-form .wpforms-field.wpforms-field-payment-total {
    padding: 10px 0;
    clear: both;
}
Libellé total
.wpforms-form .wpforms-field.wpforms-field-payment-total .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 savez maintenant comment utiliser ces sélecteurs pour appliquer du CSS personnalisé aux champs de paiement de vos formulaires.

Ensuite, souhaitez-vous encore plus d'options de personnalisation ? Consultez notre tutoriel sur la personnalisation du bouton de soumission.

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.