Comment personnaliser le placeholder Authorize.net

Introduction

Souhaitez-vous personnaliser le champ de saisie que vous voyez sur le champ Numéro de carte de crédit d’Authorize.net ? En utilisant CSS, vous pouvez facilement styliser non seulement le champ de numéro, mais aussi le champ Code de sécurité. Dans ce tutoriel, nous vous montrerons le CSS nécessaire pour styliser ces deux champs.

Par défaut, le champ dans lequel vous saisissez votre carte de crédit est stylisé avec une mise en forme par défaut.

Création du formulaire

Tout d’abord, nous allons créer un simple formulaire de don et ajouter le champ Carte de crédit Authorize.net. Si vous avez besoin d’aide pour créer ce type de formulaire, veuillez consulter cette documentation.

Une fois que vous avez ajouté le champ de formulaire Authorize.net, accédez aux Options du champ et cliquez sur l’onglet Avancé. À partir de là, vous pouvez ajouter votre texte de Champ de saisie.

Ajout du CSS

Il est maintenant temps d’ajouter le CSS à votre site.

Si vous avez besoin d’aide pour ajouter du CSS à votre site, veuillez consulter ce tutoriel.

input.wpforms-field-authorize_net-cardnumber::-webkit-input-placeholder, 
input.wpforms-field-authorize_net-cardcvc::-webkit-input-placeholder { 
/* Chrome/Opera/Safari */
    color: #333333;
    font-weight: 500;
    font-family: "Roboto";
    font-size: 18px;
    background-color: #f6f6f6;
}
input.wpforms-field-authorize_net-cardnumber::-webkit-input-placeholder, 
input.wpforms-field-authorize_net-cardcvc::-webkit-input-placeholder { 
/* Firefox 19+ */
    color: #333333;
    font-weight: 500;
    font-family: "Roboto";
    font-size: 18px;
    background-color: #f6f6f6;
}
input.wpforms-field-authorize_net-cardnumber::-webkit-input-placeholder, 
input.wpforms-field-authorize_net-cardcvc::-webkit-input-placeholder { 
/* IE 10+ */
    color: #333333;
    font-weight: 500;
    font-family: "Roboto";
    font-size: 18px;
    background-color: #f6f6f6;
}
input.wpforms-field-authorize_net-cardnumber::-webkit-input-placeholder, 
input.wpforms-field-authorize_net-cardcvc::-webkit-input-placeholder { 
/* Firefox 18- */
    color: #333333;
    font-weight: 500;
    font-family: "Roboto";
    font-size: 18px;
    background-color: #f6f6f6;
}

Le nom de classe CSS input.wpforms-field-authorize_net-cardnumber stylisera uniquement le champ Numéro de carte, tandis que le nom de classe input.wpforms-field-authorize_net-cardcvc stylisera uniquement le champ Code de sécurité.

Et c’est tout ce dont vous avez besoin pour personnaliser les champs de saisie Authorize.net. Souhaitez-vous également envoyer un numéro de facture ? Jetez un œil à cet article sur Comment envoyer un numéro de facture via les paiements Authorize.net.