Introduzione
Desiderate personalizzare il segnaposto Authorize.net che vedete nel campo Numero di carta di credito? Utilizzando i CSS, è possibile personalizzare facilmente non solo il campo numero, ma anche il campo Codice di sicurezza. In questo tutorial, vi mostreremo i CSS necessari per modellare questi due campi.
Per impostazione predefinita, il campo in cui si inserisce la carta di credito è caratterizzato da uno stile predefinito.
Creazione del modulo
Per prima cosa, inizieremo a creare un semplice modulo di donazione e ad aggiungere il campo della carta di credito Authorize.net. Se avete bisogno di assistenza per creare questo tipo di modulo, consultate questa documentazione.
Una volta aggiunto il campo del modulo Authorize.net, passare alle Opzioni del campo e fare clic sulla scheda Avanzate. Da qui è possibile aggiungere il testo segnaposto.
Aggiunta del CSS
Ora è il momento di aggiungere il CSS al sito.
Se avete bisogno di assistenza per aggiungere i CSS al vostro sito, consultate questo tutorial.
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;
}
Il nome di classe CSS input.wpforms-field-authorize_net-cardnumber stilizza solo il campo Numero di carta, mentre il nome di classe input.wpforms-field-authorize_net-cardcvc stilizza solo il campo Codice di sicurezza.
Il CSS di cui sopra stilizzerà tutti i campi del numero di carta e del codice di sicurezza per Authorize.net per tutti i moduli.
Questo è tutto ciò che serve per personalizzare i campi segnaposto di Authorize.net. Volete inviare anche un numero di fattura? Date un'occhiata a questo articolo su Come inviare un numero di fattura a Authorize.net Payments.