Come Aggiungere un Placeholder al Campo Coupon

Introduzione

Vuoi aggiungere un testo segnaposto al campo Coupon? Implementando un piccolo script, puoi integrare perfettamente questa funzionalità segnaposto. Questo tutorial ti guiderà attraverso ogni passaggio del processo, rendendo semplice migliorare il tuo modulo con questa preziosa funzionalità. Immergiamoci e iniziamo!

Creazione del modulo

Per iniziare, dovrai creare il tuo modulo e aggiungere i tuoi campi, che includeranno il campo Coupon.

Se hai bisogno di aiuto con l'uso di questo campo, dai un'occhiata a questa guida utile.

Aggiunta dello snippet

Ora è il momento di aggiungere lo snippet. Se hai bisogno di aiuto su come e dove aggiungere snippet al tuo sito, ti preghiamo di consultare questo 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);

Analizziamo questo snippet. Per prima cosa, imposteremo una variabile chiamata $couponPlaceholder per il testo che vogliamo appaia all'interno del campo coupon. Inserendo il testo all'interno di questa variabile significa che quando la si utilizza su siti multilingue, il testo verrà tradotto automaticamente.

Successivamente, .wpforms-field-payment-coupon-input cerca la classe CSS applicata al campo Coupon e quando ne trova una nel tuo modulo, questo script applicherà il tuo segnaposto definito in $couponPlaceholder.

Ora, quando i visitatori visualizzeranno il tuo campo, vedranno il testo segnaposto.

E questo è tutto ciò che ti serve per impostare il tuo segnaposto. Vorresti anche rendere questo campo condizionale in base a una selezione nel tuo modulo? Dai un'occhiata al nostro tutorial su Come Creare Logica Condizionale per i Coupon.

Correlati

Riferimento Azione: wpforms_wp_footer_end