### [So ändern Sie das Styling des Platzhalters für Kreditkarten von Stripe](https://wpforms.com/developers/how-to-add-change-the-styling-of-the-stripe-credit-card-placeholder/)
**Veröffentlicht:** 13. April 2021
**Autor:** Redaktionsteam
**Auszug:** Dieses Tutorial zeigt Ihnen, wie Sie das Styling des Stripe-Kreditkartenfelds und des Platzhaltertextes mit PHP und CSS ändern können.
**Inhalt:**
## Einleitung
Möchten Sie das Styling des Platzhaltertextes des Formularfelds **Stripe Credit Card** mit WPForms ändern? Mit einem kleinen PHP-Snippet und benutzerdefiniertem CSS können Sie den Stil des Platzhaltertextes einfach ändern. In diesem Tutorial führen wir Sie durch jeden Schritt.
Standardmäßig wird das Feld, in das Sie Ihre Kreditkartendaten eingeben, mit einigen Standardstilen formatiert.
Bitte beachten Sie, dass dieses Snippet nur für das Formularfeld **Stripe Credit Card** angewendet wird, wenn im Tab **Zahlungen** der WPForms-Einstellungen der **Kreditkartenfeldmodus** auf **Card Element** eingestellt ist.
Weitere Informationen zu dieser Option finden Sie in [diesem nützlichen Leitfaden](https://wpforms.com/docs/how-to-install-and-use-the-stripe-addon-with-wpforms/#Selecting_a_Credit_Card_Field_Mode "Stripe Pro Addon").
## Erstellen des Formulars
Wir beginnen mit der Erstellung eines neuen Formulars und fügen ein Feld **Stripe Credit Card** hinzu.
Wenn Sie Hilfe beim Erstellen dieser Art von Formular benötigen, [lesen Sie bitte diese Dokumentation](https://wpforms.com/docs/how-to-install-and-use-the-stripe-addon-with-wpforms/ "How to Install and Use the Stripe Addon With WPForms").
Sobald Sie das Feld zum Formular hinzugefügt haben, wählen Sie das Feld aus, klicken Sie auf **Feldoptionen**, dann auf den Tab **Erweitert** und geben Sie im Feld **Platzhaltertext für Karteninhaber** einen **Platzhaltertext** ein.
## Hinzufügen des Snippets
Um das Styling des Platzhaltertextes wie Schriftgröße, Farbe, Schriftfamilie usw. zu ändern, können wir unserer Website ein kleines PHP hinzufügen.
Wenn Sie Hilfe beim Hinzufügen von Snippets zu Ihrer Website benötigen, [lesen Sie dieses Tutorial](https://wpforms.com/developers/how-to-add-custom-php-or-javascript-for-wpforms/ "How to Add Custom PHP or JavaScript for WPForms").
```
/*
* Stil des Platzhaltertextes für das Stripe-Kreditkartenfeld aktualisieren
*
* @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 );
```
Eine vollständige Liste aller Objekt-Eigenschaften finden Sie in [dieser Dokumentation](https://stripe.com/docs/js/appendix/style "Stripe JS Styling Object Properties").
Jetzt hat sich das Styling des Feldes **Stripe Credit Card** geändert.
## Styling des Platzhaltertextes
Das obige Snippet stylt nur das eigentliche Feld **Kartennummer**. Wenn Sie den Platzhaltertext entsprechend anpassen möchten, müssen Sie etwas CSS hinzufügen.
Wenn Sie Hilfe beim Hinzufügen von CSS zu Ihrer Website benötigen, [lesen Sie dieses Tutorial](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/ "How to Add Custom CSS Styles for 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;
}
```
Das ist alles, was Sie brauchen! Möchten Sie auch Metadaten an Stripe senden? Sehen Sie sich unseren Artikel über [Metadaten an Stripe-Zahlungen senden](https://wpforms.com/developers/how-to-send-metadata-to-stripe-payments/ "How To Send Metadata to Stripe Payments") an.
**Kategorien:** Tutorials
**Schlagwörter:** CSS, PHP
---