### [Come personalizzare il campo della carta di credito Authorize.net](https://wpforms.com/developers/how-to-customize-the-authorize-net-credit-card-field/)
**Pubblicato:** 16 luglio 2021
**Autore:** Team Editoriale
**Estratto:** Questo articolo ti mostrerà come utilizzare il CSS per far visualizzare il tuo campo Authorize.net su una singola riga.
**Contenuto:**
## Panoramica
Vorresti personalizzare il campo **Authorize.net**? Puoi facilmente cambiare l'aspetto di questo campo. Ad esempio, imposteremo il campo della carta di credito su una singola riga. Per fare ciò, dovremo usare un po' di CSS per far visualizzare ogni campo in linea.
## Configurazione
Per prima cosa dovrai creare un modulo e aggiungere il campo **Authorize.net** al tuo modulo.
Se hai bisogno di aiuto nella creazione di un modulo Authorize.net, [consulta questa documentazione](https://wpforms.com/docs/how-to-install-and-use-the-authorize-net-addon-with-wpforms/ "Come installare e utilizzare il componente aggiuntivo Authorize.Net con WPForms").
I campi **Numero Carta**, **Data di Scadenza** e **Codice di Sicurezza** hanno uno stile predefinito che imposta il **Numero Carta** su una riga e gli altri andranno sulla riga successiva.
## Aggiungere il CSS per personalizzare il campo Authorize.net
Ora è il momento di aggiungere il CSS in modo da poter mettere tutti e tre i campi su una riga.
Se hai bisogno di aiuto nell'aggiungere CSS al tuo sito, [consulta questo tutorial](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "Come aggiungere stili CSS personalizzati per WPForms").
```
.wpforms-field-authorize_net .wpforms-field-row {
float: left !important;
width: 45% !important;
}
.wpforms-field-authorize_net .wpforms-field-row:nth-of-type(2) {
margin-left: 3%;
}
.wpforms-field-authorize_net-expiration {
width: 50% !important;
float: left !important;
max-width: 50% !important;
}
.wpforms-field-authorize_net-expiration div {
max-width: 40% !important;
float: left !important;
width: 40% !important;
}
.wpforms-field-authorize_net-expiration span {
float: left !important;
display: inline-block;
width: 8% !important;
max-width: 8% !important;
margin: 0 5% 0 5% !important;
}
.wpforms-field-authorize_net-code {
float: right !important;
max-width: 45% !important;
}
```
Il CSS sopra stilizzerebbe tutti i campi **Carta di Credito Authorize.net** allo stesso modo.
Con questo CSS abbiamo ora personalizzato il campo **Authorize.net** per avere tutti i campi su una singola riga.
E questo è tutto ciò che ti serve per personalizzare il campo modulo **Authorize.net**. Vorresti anche inviare l'indirizzo con il pagamento Authorize.net? Dai un'occhiata al nostro tutorial su [Come inviare un indirizzo tramite i pagamenti Authorize.net](https://wpforms.com/developers/how-to-send-an-address-through-to-authorize-net-payments/ "Come inviare un indirizzo tramite i pagamenti Authorize.net").
## FAQ
#### D: Come posso ripristinare le righe singole sui dispositivi mobili?
**R:** Per gli schermi più piccoli, vorrai che tutti i tuoi campi siano impilati in righe, quindi per contrastare il CSS menzionato in questo articolo, per i dispositivi mobili, potresti voler aggiungere anche questo CSS.
```
@media (max-width: 600px) {
.wpforms-field-authorize_net .wpforms-field-row {
float: none !important;
width: 100% !important;
}
.wpforms-field-authorize_net .wpforms-field-row:nth-of-type(2) {
margin-left: 0;
}
}
```
**Categorie:** Snippet
**Tag:** CSS
---