Introdução
Deseja adicionar um espaço reservado ao campo Cupom? Ao implementar um pequeno script, você pode integrar perfeitamente essa funcionalidade de espaço reservado. Este tutorial o guiará por cada etapa do processo, facilitando o aprimoramento do seu formulário com esse valioso recurso. Vamos nos aprofundar 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 esse campo, consulte 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, 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 detalhar esse snippet. Primeiro, vamos definir uma variável chamada $couponPlaceholder para o texto que queremos que apareça dentro do campo de cupom. Colocar o texto dentro dessa variável significa que, ao usá-lo em sites multilíngues, o texto será traduzido automaticamente.
Em seguida, o .wpforms-field-payment-coupon-input procura a classe CSS que é aplicada ao Cupom e, quando encontrar um em seu formulário, esse script aplicará o espaço reservado que você definiu no campo $couponPlaceholder.
Agora, quando os visitantes visualizarem seu campo, eles verão o texto do espaço reservado.
E isso é tudo o que você precisa para definir seu placeholder. Você também gostaria de tornar esse 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 da ação: wpforms_wp_footer_end