Gostaria de preencher automaticamente campos de formulário quando os utilizadores clicam em links na sua página? Utilizando ligações de âncora e JavaScript, pode preencher campos de formulário com texto predefinido quando os visitantes clicam em ligações específicas.
Este guia mostrar-lhe-á como implementar esta população dinâmica de formulários.
Compreender o conceito
Quando um utilizador clica numa ligação de âncora (como #diariamente ou #semanalmente), captamos essa interação e preenchemos automaticamente um campo de formulário com o texto correspondente. Isto é útil para:
- Formulários de seleção de serviços
- Formulários de consulta de produtos
- Formulários de pedido de apoio
- Formulários de contacto com assuntos predefinidos
Configurar o seu formulário
Primeiro, vamos criar o nosso formulário. É um formulário simples com campos para Nome, Endereço de e-mail, Assunto (Texto de uma linha) e Mensagem (Texto de parágrafo).
Se precisar de orientação para criar o seu formulário, consulte o nosso guia sobre como criar o seu primeiro formulário.
Em seguida, anote os números de identificação do seu formulário e dos campos. Precisará deles para o snippet de código. Se não tiver certeza de como encontrar essas IDs, consulte nosso guia sobre como encontrar IDs de formulário e campo.
Configurar as notificações de formulário
Nesta etapa, faremos com que o nosso campo Assunto preencha automaticamente o campo Assunto no separador Notificações do criador de formulários.
Basta ir ao separador Notificações e, no campo Assunto, escrever o texto pretendido juntamente com o ID do campo, tal como utiliza as etiquetas inteligentes noutras partes do criador de formulários.
In our example, our field ID is 3, so our Subject line will be: “I’m interested in {field_id=”3″} cleaning for my company”.
Criar ligações âncora
Em seguida, vamos criar uma nova página no nosso site com ligações de âncora e o formulário que acabámos de criar.
Se precisar de ajuda para compreender os links de âncora ou para os criar, consulte este tutorial do WPBeginner.
Para criar links de âncora, basta digitar o conteúdo da sua página e usar Cabeçalhos no WordPress. No Editor de blocos, selecione um título, aceda ao separador Avançadas e adicione o texto que pretende utilizar para o link de ancoragem. O WordPress recomenda que o texto seja curto, sem espaços, ou que utilize hífenes para várias palavras. Por exemplo, "about-us" para uma secção Sobre nós.
Para o nosso tutorial, teremos secções para Diário, Semanal, Mensal e Trimestral.
Para cada título, inserimos um link de âncora de uma palavra. Por exemplo, a secção Diário terá o link âncora diário.
Depois de adicionarmos as ligações de ancoragem, seleccionaremos o texto no conteúdo que saltará para cada secção quando for clicado e preencherá o campo Assunto do nosso formulário.
Para ligar o texto às ligações âncora, adicionamos uma ligação como habitualmente no WordPress. Selecione o texto, clique no ícone da corrente e, em vez de um URL completo, adicione um sinal de libra e, em seguida, a palavra do link âncora. Por exemplo, #diário.
O WordPress atribuirá automaticamente a cada link um data-id exclusivo com base no nome do link. Assim, #diário terá um data-id de #diário.
Faremos o mesmo para as secções #semanais, #mensais e #trimestrais da nossa página.
Preenchendo o formulário com o texto do link âncora
Agora é hora de adicionar o snippet que vai juntar tudo isso. Se precisar de ajuda para adicionar snippets ao seu site, consulte este tutorial.
E já está! Sabia que pode fazer algo muito semelhante dentro do próprio formulário? Dê uma olhada no nosso tutorial sobre Como adicionar um índice para formulários longos.
Ação de referência
Perguntas mais frequentes
P: Posso também utilizar um nome de classe ou ID CSS?
R: Sem dúvida! Se preferir acionar o JavaScript por uma classe CSS ou ID, basta alterar o script. Por exemplo, se os nomes das suas classes CSS fossem daily-link, weekly-link, monthly-link e quarterly-link, o snippet seria este.
/**
* Populate field from anchor link.
*
* @link https://wpforms.com/developers/how-to-populate-a-form-field-from-an-anchor-link/
*/
function wpf_dev_autofill_field() {
?>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery( 'a.daily-link' ).click(function(){
document.getElementById( 'wpforms-378-field_3' ).value = "daily cleaning";
});
jQuery( 'a.weekly-link' ).click(function(){
document.getElementById( 'wpforms-378-field_3' ).value = "weekly cleaning";
});
jQuery( 'a.monthly-link' ).click(function(){
document.getElementById( 'wpforms-378-field_3' ).value = "monthly cleaning";
});
jQuery( 'a.quarterly-link' ).click(function(){
document.getElementById( 'wpforms-378-field_3' ).value = "quarterly cleaning";
});
});
</script>
<?php
}
add_action( 'wpforms_wp_footer_end', 'wpf_dev_autofill_field', 10 );
Se estiver a utilizar um ID em vez de uma classe, basta substituir o ponto final por um sinal de libra em cada uma das ligações. Exemplo: a#daily-link.
E já está. A seguir, gostaria de criar algumas etiquetas inteligentes personalizadas? Para mais informações, consulte o nosso tutorial sobre a criação de etiquetas inteligentes personalizadas.