Como Adicionar um Placeholder ao Campo de Cupom

Introdução

Quer adicionar um placeholder ao campo Cupom? Implementando um pequeno script, você pode integrar essa funcionalidade de placeholder de forma integrada. Este tutorial irá guiá-lo por cada etapa do processo, tornando simples aprimorar seu formulário com este recurso valioso. Vamos mergulhar e começar!

Criando o formulário

Para começar, você precisará criar seu formulário e adicionar seus campos, que incluirão o campo Cupom.

Se precisar de ajuda para usar este campo, por favor, confira este guia útil.

Adicionando o snippet

Agora é hora de adicionar o snippet. Se precisar de ajuda sobre como e onde adicionar snippets ao seu site, por favor, revise 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 detalhar este snippet. Primeiro, vamos definir uma variável chamada $couponPlaceholder para o texto que queremos que apareça dentro do campo cupom. 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 Cupom e, quando encontra uma em seu formulário, este script aplicará o placeholder que você definiu em $couponPlaceholder.

Agora, quando os visitantes visualizarem seu campo, eles verão o texto do placeholder.

E é tudo o que você precisa para definir seu placeholder. Gostaria também de tornar este campo condicional com base em uma seleção em seu formulário? Confira nosso tutorial sobre Como Criar Lógica Condicional para Cupons.

Relacionado

Referência de Ação: wpforms_wp_footer_end