### [Come modificare lo stile del placeholder della carta di credito Stripe](https://wpforms.com/developers/how-to-add-change-the-styling-of-the-stripe-credit-card-placeholder/)
**Pubblicato:** 13 aprile 2021
**Autore:** Team Editoriale
**Estratto:** Questo tutorial ti mostrerà come modificare lo stile del campo della carta di credito Stripe e del testo segnaposto utilizzando PHP e CSS.
**Contenuto:**
## Introduzione
Vorresti modificare lo stile del segnaposto del campo della carta di credito **Stripe** con WPForms? Utilizzando un piccolo snippet PHP e anche CSS personalizzato, puoi facilmente modificare lo stile del testo segnaposto. In questo tutorial, ti guideremo attraverso ogni passaggio.
Per impostazione predefinita, il campo in cui inserisci la tua carta di credito è stilizzato con alcune impostazioni predefinite.
Si prega di notare che questo snippet verrà applicato solo al campo del modulo **Carta di Credito Stripe** quando si utilizza la **Modalità Campo Carta di Credito** dalla scheda **Pagamenti** delle Impostazioni di WPForms impostata su **Elemento Carta**.
Per saperne di più su questa opzione, [consulta questa utile guida](https://wpforms.com/docs/how-to-install-and-use-the-stripe-addon-with-wpforms/#Selecting_a_Credit_Card_Field_Mode "Stripe Pro Addon").
## Creazione del modulo
Inizieremo creando un nuovo modulo e aggiungendo un campo **Carta di Credito Stripe** al modulo.
Se hai bisogno di aiuto nella creazione di questo tipo di modulo, [consulta questa documentazione](https://wpforms.com/docs/how-to-install-and-use-the-stripe-addon-with-wpforms/ "Come installare e utilizzare il componente aggiuntivo Stripe con WPForms").
Una volta aggiunto il campo al modulo, seleziona il campo e fai clic su **Opzioni Campo**, quindi fai clic sulla scheda **Avanzate** e inserisci del testo **Segnaposto** nel **Testo Segnaposto Nome sulla Carta**.
## Aggiunta dello snippet
Per modificare lo stile del testo segnaposto come dimensione del carattere, colore, famiglia di caratteri, ecc., possiamo semplicemente aggiungere un po' di PHP al nostro sito.
Se hai bisogno di aiuto nell'aggiungere snippet al tuo sito, [consulta questo tutorial](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "Come aggiungere PHP o JavaScript personalizzati per WPForms").
```
/*
* Aggiorna gli stili del testo segnaposto sul campo della carta di credito Stripe
*
* @link https://wpforms.com/developers/how-to-add-change-the-styling-of-the-stripe-credit-card-placeholder/
*/
function wpf_dev_stripe_card_field_style( $element_style ) {
$element_style = [
'base' => [
'iconColor' => '#b95d52',
'fontFamily' => 'Roboto, sans-serif',
'fontSize' => '16px',
'fontWeight' => '100',
'backgroundColor' => '#f6f6f6',
'::placeholder' => [
'color' => '#b95d52',
'font-family' => 'Roboto, sans-serif',
'font-size' => '16px',
'font-weight' => '100',
]
],
];
return $element_style;
}
add_filter( 'wpforms_stripe_api_payment_intents_set_config_element_style', 'wpf_dev_stripe_card_field_style', 10, 1 );
```
Per un elenco completo di tutte le proprietà dell'oggetto, consulta [questa documentazione](https://stripe.com/docs/js/appendix/style "Proprietà di stile dell'oggetto Stripe JS").
Ora vedrai che lo stile del campo **Carta di Credito Stripe** è cambiato.
## Stilizzazione del testo segnaposto
Lo snippet sopra stilizzerà solo il campo effettivo **Numero Carta**, se desideri stilizzare il testo segnaposto per farlo corrispondere, dovrai aggiungere un po' di CSS.
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").
```
input.wpforms-field-stripe-credit-card-cardname::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: #b95d52 !important;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 100;
background-color: #f6f6f6;
}
input.wpforms-field-stripe-credit-card-cardname::-moz-placeholder { /* Firefox 19+ */
color: #b95d52 !important;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 100;
background-color: #f6f6f6;
}
input.wpforms-field-stripe-credit-card-cardname:-ms-input-placeholder { /* IE 10+ */
color: #b95d52 !important;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 100;
background-color: #f6f6f6;
}
input.wpforms-field-stripe-credit-card-cardname:-moz-placeholder { /* Firefox 18- */
color: #b95d52 !important;
font-family: 'Roboto', sans-serif;
font-size: 16px;
font-weight: 100;
background-color: #f6f6f6;
}
```
E questo è tutto ciò che ti serve! Vorresti anche inviare metadati a Stripe? Dai un'occhiata al nostro articolo su [Come inviare metadati ai pagamenti Stripe](https://wpforms.com/developers/how-to-send-metadata-to-stripe-payments/ "Come inviare metadati ai pagamenti Stripe").
**Categorie:** Tutorial
**Tag:** CSS, PHP
---