Riassunto AI
Introduzione
Vuoi cambiare lo stile del testo segnaposto del campo Stripe Credit Card con WPForms? Utilizzando un piccolo snippet PHP e anche CSS personalizzato, puoi facilmente cambiare 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 uno stile predefinito.
Tieni presente che questo snippet verrà applicato solo al campo modulo Stripe Credit Card quando si utilizza la Modalità Campo Carta di Credito dalle Impostazioni di WPForms, nella scheda Pagamenti, impostata su Elemento Carta.
Per saperne di più su questa opzione, consulta questa utile guida.
Creazione del modulo
Inizieremo creando un nuovo modulo e aggiungendo un campo Stripe Credit Card al modulo.
Se hai bisogno di aiuto nella creazione di questo tipo di modulo, controlla questa documentazione.
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 all'interno di Testo Segnaposto Nome sulla Carta.
Aggiunta dello snippet
Per cambiare 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.
/*
* Update placeholder text styles on Stripe Credit Card form field
*
* @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.
Ora vedrai che lo stile del campo Stripe Credit Card è cambiato.
Stilizzazione del testo segnaposto
Lo snippet sopra stilizzerà solo il campo effettivo Numero Carta; se vuoi stilizzare il testo segnaposto per farlo corrispondere, dovrai aggiungere del CSS.
Se hai bisogno di aiuto nell'aggiungere CSS al tuo sito, consulta questo tutorial.
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ò di cui hai bisogno! Vuoi anche inviare metadati a Stripe? Dai un'occhiata al nostro articolo su Come Inviare Metadati ai Pagamenti Stripe.