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