Como Adicionar um Placeholder ao Campo de Cupom

Introdução

Pretende adicionar um texto de exemplo ao campo Cupão? Ao implementar um pequeno script, pode integrar perfeitamente esta funcionalidade de texto de exemplo. Este tutorial irá guiá-lo através de cada passo do processo, tornando simples a melhoria do seu formulário com esta funcionalidade valiosa. Vamos começar!

Criação do formulário

Para começar, terá de criar o seu formulário e adicionar os seus campos, que incluirão o campo Cupão.

Se precisar de ajuda a usar este campo, consulte este guia útil.

Adição do trecho de código

Agora é hora de adicionar o trecho de código. Se precisar de ajuda sobre como e onde adicionar trechos de código ao seu site, reveja este 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);

Vamos analisar este trecho de código. Primeiro, vamos definir uma variável chamada $couponPlaceholder para o texto que queremos que apareça dentro do campo do cupão. Ao colocar o texto dentro desta variável, significa que, ao usá-la em sites multilíngues, o texto será traduzido automaticamente.

Em seguida, o .wpforms-field-payment-coupon-input procura a classe CSS que é aplicada ao campo Cupão e, quando encontra uma no seu formulário, este script aplicará o seu texto de exemplo definido em $couponPlaceholder.

Agora, quando os visitantes visualizarem o seu campo, verão o texto de exemplo.

E é tudo o que precisa para definir o seu texto de exemplo. Gostaria também de tornar este campo condicional com base numa seleção no seu formulário? Consulte o nosso tutorial sobre Como Criar Lógica Condicional para Cupões.

Relacionado

Referência de Ação: wpforms_wp_footer_end