Comment ajouter un espace réservé au champ coupon

Introduction

Vous cherchez à ajouter un texte d'exemple au champ Coupon ? En implémentant un petit script, vous pouvez intégrer cette fonctionnalité de manière transparente. Ce tutoriel vous guidera à travers chaque étape du processus, rendant l'amélioration de votre formulaire avec cette fonctionnalité précieuse très simple. Plongeons et commençons !

Création du formulaire

Pour commencer, vous devrez créer votre formulaire et ajouter vos champs, y compris le champ Coupon.

Si vous avez besoin d'aide pour utiliser ce champ, veuillez consulter ce guide utile.

Ajout du snippet

Il est maintenant temps d'ajouter le extrait de code. Si vous avez besoin d'aide sur comment et où ajouter des extraits de code à votre site, veuillez consulter ce tutoriel.

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

Décomposons cet extrait de code. Premièrement, nous allons définir une variable appelée $couponPlaceholder pour le texte que nous voulons voir apparaître dans le champ coupon. En plaçant le texte dans cette variable, cela signifie que lors de son utilisation sur des sites multilingues, le texte sera automatiquement traduit.

Ensuite, .wpforms-field-payment-coupon-input recherche la classe CSS appliquée au champ Coupon et lorsqu'il en trouve une dans votre formulaire, ce script appliquera le texte d'exemple que vous avez défini dans $couponPlaceholder.

Maintenant, lorsque les visiteurs verront votre champ, ils verront le texte d'exemple.

Et c'est tout ce dont vous avez besoin pour définir votre texte d'exemple. Souhaitez-vous également rendre ce champ conditionnel en fonction d'une sélection dans votre formulaire ? Consultez notre tutoriel sur Comment créer une logique conditionnelle pour les coupons.

Articles associés

Référence d’action : wpforms_wp_footer_end