So fügen Sie einen Platzhalter zum Gutscheinfeld hinzu

Einleitung

Möchten Sie dem Feld Gutschein einen Platzhalter hinzufügen? Durch die Implementierung eines kleinen Skripts können Sie diese Platzhalterfunktionalität nahtlos integrieren. Diese Anleitung führt Sie durch jeden Schritt des Prozesses, sodass Sie Ihr Formular ganz einfach mit dieser wertvollen Funktion erweitern können. Tauchen wir ein und legen wir los!

Erstellung des Formulars

Zuerst müssen Sie Ihr Formular erstellen und Ihre Felder hinzufügen, einschließlich des Feldes Gutschein.

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, den Snippet hinzuzufügen. Wenn Sie Hilfe benötigen, wie und wo Sie Snippets zu Ihrer Website hinzufügen können, lesen Sie bitte diese Anleitung.

/* 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);

Lassen Sie uns diesen Snippet aufschlüsseln. Zuerst legen wir eine Variable namens $couponPlaceholder für den Text fest, der im Gutscheinfeld erscheinen soll. Indem Sie den Text in dieser Variablen platzieren, wird er auf mehrsprachigen Websites automatisch übersetzt.

Als Nächstes sucht .wpforms-field-payment-coupon-input nach der CSS-Klasse, die auf das Gutschein-Feld angewendet wird. Wenn es eine in Ihrem Formular findet, wendet dieses Skript den von Ihnen in $couponPlaceholder definierten Platzhalter an.

Wenn Besucher Ihr Feld nun anzeigen, sehen sie den Platzhaltertext.

Und das ist alles, was Sie brauchen, um Ihren Platzhalter einzurichten. Möchten Sie dieses Feld auch bedingt basierend auf einer Auswahl in Ihrem Formular machen? Sehen Sie sich unsere Anleitung So erstellen Sie bedingte Logik für Gutscheine an.

Verwandt

Aktionsreferenz: wpforms_wp_footer_end