Como adicionar um marcador de posição ao campo do cupão

Introdução

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

Criar o 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 para utilizar este campo, consulte este guia útil.

Adicionar o snippet

Agora é hora de adicionar o snippet. Se precisar de ajuda sobre como e onde adicionar snippets ao seu site, consulte 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 snippet. Primeiro, vamos definir uma variável chamada $couponPlaceholder para o texto que queremos que apareça dentro do campo do cupão. Colocar o texto dentro desta variável significa que, ao utilizá-lo em sítios multilingues, o texto será automaticamente traduzido.

Em seguida, o .wpforms-field-payment-coupon-input procura a classe CSS que é aplicada ao Cupão e quando encontrar um no seu formulário, este script aplicará o seu marcador de posição que definiu no $couponPlaceholder.

Agora, quando os visitantes visualizarem o seu campo, verão o texto do marcador de posição.

E é tudo o que precisa para definir o seu marcador de posição. 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.

Relacionadas

Referência da ação: wpforms_wp_footer_end