Introduction
Vous souhaitez ajouter un espace réservé au champ Coupon? En implémentant un petit script, vous pouvez intégrer de manière transparente cette fonctionnalité de placeholder. Ce tutoriel vous guidera à travers chaque étape du processus, rendant simple l'amélioration de votre formulaire avec cette fonctionnalité précieuse. Plongeons dans ce tutoriel et commençons !
Création du formulaire
Pour commencer, vous devez créer votre formulaire et ajouter vos champs, dont 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 l'extrait. Si vous avez besoin d'aide pour savoir comment et où ajouter des snippets à 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écortiquons cet extrait. Tout d'abord, nous allons définir une variable appelée $couponPlaceholder pour le texte que nous voulons voir apparaître dans le champ du coupon. Le fait de placer le texte à l'intérieur de cette variable signifie qu'en cas d'utilisation sur des sites multilingues, le texte sera automatiquement traduit.
Ensuite, le .wpforms-field-payment-coupon-input recherche la classe CSS appliquée à l'élément Coupon et lorsqu'il en trouvera un dans votre formulaire, ce script appliquera le caractère générique que vous avez défini dans le champ $couponPlaceholder.
Désormais, lorsque les visiteurs consulteront votre champ, ils verront le texte de remplacement.
C'est tout ce dont vous avez besoin pour définir votre espace réservé. Vous souhaitez également rendre ce champ conditionnel en fonction d'une sélection dans votre formulaire ? Consultez notre tutoriel sur la création d'une logique conditionnelle pour les coupons.
En rapport
Référence de l'action : wpforms_wp_footer_end