Einführung
Möchten Sie einen Platzhalter in das Feld Coupon einfügen? Durch die Implementierung eines kleinen Skripts können Sie diese Platzhalterfunktion nahtlos integrieren. Dieses Tutorial führt Sie durch jeden Schritt des Prozesses und macht es Ihnen leicht, Ihr Formular mit dieser wertvollen Funktion zu erweitern. Legen Sie los und fangen Sie an!
Erstellen des Formulars
Zunächst müssen Sie Ihr Formular erstellen und Ihre Felder hinzufügen, zu denen auch das Feld " Gutschein" gehört.
Wenn Sie Hilfe bei der Verwendung dieses Feldes benötigen, sehen Sie sich bitte diese hilfreiche Anleitung an.
Hinzufügen des Snippets
Jetzt ist es an der Zeit, das Snippet hinzuzufügen. Wenn Sie Hilfe benötigen, wie und wo Sie Snippets zu Ihrer Website hinzufügen können, lesen Sie bitte dieses Tutorial.
/* Set a placeholder to the Coupon field
*
* @link https://wpforms.com/developers/how-to-schedule-a-form-base-on-the-time-of-day/
*/
function wpf_add_coupon_placeholder() {
// Set the placeholder text here to keep it available for translation
$couponPlaceholder=__( 'Enter your coupon code here', 'textdomain' );
?>
<script type="text/javascript">
var placeholderText='<?=$couponPlaceholder?>';
document.addEventListener('DOMContentLoaded', function() {
var couponInput = document.querySelector('.wpforms-field-payment-coupon-input');
if (couponInput) {
couponInput.placeholder = placeholderText;
}
});
</script>
<?php
}
add_action('wpforms_wp_footer_end', 'wpf_add_coupon_placeholder', 30);
Schauen wir uns dieses Snippet genauer an. Zuerst setzen wir eine Variable namens $couponPlaceholder für den Text, der im Couponfeld erscheinen soll. Indem wir den Text in dieser Variablen platzieren, wird er bei der Verwendung auf mehrsprachigen Websites automatisch übersetzt.
Als nächstes wird die .wpforms-field-payment-coupon-input sucht nach der CSS-Klasse, die auf den Coupon Feld und wenn es eines in Ihrem Formular findet, wendet das Skript den Platzhalter an, den Sie in der $couponPlaceholder.
Wenn Besucher nun Ihr Feld anzeigen, sehen sie den Platzhaltertext.
Das ist alles, was Sie brauchen, um Ihren Platzhalter festzulegen. Möchten Sie dieses Feld auch abhängig von einer Auswahl in Ihrem Formular machen? Sehen Sie sich unser Tutorial über die Erstellung bedingter Logik für Coupons an.
Verwandte Seiten
Referenz der Aktion: wpforms_wp_footer_end