KI-Zusammenfassung
Einleitung
Möchten Sie den Platzhaltertext des Stripe-Kreditkarten-Formularfelds 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 Kreditkarte eingeben, mit einigen Standardstilen formatiert.
Bitte beachten Sie, dass dieses Snippet nur für das Stripe-Kreditkarten-Formularfeld angewendet wird, wenn im Tab Zahlungen der WPForms-Einstellungen der Kreditkartenfeldmodus auf Kartenelement gesetzt ist.
Um mehr über diese Option zu erfahren, lesen Sie bitte diesen nützlichen Leitfaden.
Erstellung des Formulars
Wir beginnen damit, ein neues Formular zu erstellen und ein Stripe-Kreditkarten-Feld hinzuzufügen.
Wenn Sie Hilfe beim Erstellen dieser Art von Formular benötigen, lesen Sie bitte diese Dokumentation.
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 einfach ein kleines PHP zu unserer Website hinzufügen.
Wenn Sie Hilfe beim Hinzufügen von Snippets zu Ihrer Website benötigen, sehen Sie bitte dieses Tutorial an.
/*
* 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 );
Eine vollständige Liste aller Objekt-Eigenschaften finden Sie in dieser Dokumentation.
Nun sehen Sie, dass sich das Styling des Stripe-Kreditkarten-Feldes geändert hat.
Styling des Platzhaltertextes
Das obige Snippet stylt nur das eigentliche Kartennummer-Feld. Wenn Sie den Platzhaltertext entsprechend stylen möchten, müssen Sie etwas CSS hinzufügen.
Wenn Sie Hilfe beim Hinzufügen von CSS zu Ihrer Website benötigen, lesen Sie bitte dieses 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;
}
Und das ist alles, was Sie brauchen! Möchten Sie auch Metadaten an Stripe senden? Schauen Sie sich unseren Artikel über Metadaten an Stripe-Zahlungen senden an.