Preencher um campo de formulário a partir de um link de âncora

Gostaria de preencher automaticamente os campos do formulário quando os utilizadores clicassem em links na sua página? Utilizando links de âncora e JavaScript, pode preencher campos do formulário com texto predefinido quando os visitantes clicarem em links específicos.

Este guia irá mostrar-lhe como implementar este preenchimento dinâmico de formulários.

Compreender o Conceito

Quando um utilizador clica num link de âncora (como #diário ou #semanal), capturaremos essa interação e preencheremos automaticamente um campo do formulário com texto correspondente. Isto é útil para:

• Formulários de seleção de serviços
• Formulários de consulta de produtos
• Formulários de pedido de suporte
• 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 Linha Única) e Mensagem (Texto de Parágrafo).

Se precisar de orientação sobre como criar o seu formulário, consulte o nosso guia sobre como criar o seu primeiro formulário.

Em seguida, anote os números de ID do seu formulário e dos campos. Precisará deles para o trecho de código. Se não tiver a certeza de como encontrar estes IDs, reveja o nosso guia sobre como encontrar IDs de formulários e campos.

Configurar as Notificações do Formulário

Nesta etapa, faremos com que o nosso campo Assunto preencha automaticamente o campo Assunto no separador Notificações do construtor de formulários.

Simplesmente vá ao separador Notificações e, no campo Assunto, digite o texto que pretende juntamente com o ID do campo, tal como utiliza Smart Tags noutros locais do construtor de formulários.

No nosso exemplo, o ID do nosso campo é 3, pelo que a linha de Assunto será: “Estou interessado em {field_id=”3″} limpeza para a minha empresa”.

Criar Links de Âncora

Em seguida, vamos criar uma nova página no nosso site com links de âncora e o formulário que acabámos de criar.

Se precisar de ajuda para compreender links de âncora ou para os criar, consulte este tutorial da WPBeginner.

Para criar links de âncora, basta digitar o conteúdo da sua página e usar Títulos no WordPress. No Editor de Blocos, selecione um Título, vá ao separador Avançado e adicione o texto que pretende usar para o link de âncora. O WordPress recomenda mantê-lo curto, sem espaços, ou usar hífens para várias palavras. Por exemplo, “sobre-nós” 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, inseriremos um link de âncora de uma palavra. Por exemplo, a secção Diária terá o link de âncora diário.

Depois de adicionarmos os links de âncora, selecionaremos texto no conteúdo que irá saltar para cada secção quando clicado e preencher o campo Assunto do nosso formulário.

Para ligar texto aos links de âncora, adicionaremos um link 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 depois a palavra do link de âncora. Por exemplo, #diário.

O WordPress atribuirá automaticamente a cada link um data-id único com base no nome do link. Assim, #daily terá um data-id de #daily.

Faremos o mesmo para as secções #weekly, #monthly e #quarterly da nossa página.

Preencher o Formulário com o Texto do Link de Âncora

Agora é hora de adicionar o trecho de código que unirá tudo isto. Se precisar de ajuda para adicionar trechos de código ao seu site, consulte este tutorial.

E é tudo! Sabia que pode fazer algo muito semelhante apenas dentro do próprio formulário? Dê uma vista de olhos ao nosso tutorial sobre Como Adicionar um Índice para Formulários Longos.

Ação de Referência

wpforms_wp_footer_end

Perguntas Frequentes

P: Posso também usar um nome de classe ou ID CSS?

R: Absolutamente! Se preferir acionar o JavaScript por uma classe ou ID CSS, basta alterar o script. Por exemplo, se os seus nomes de classe CSS fossem daily-link, weekly-link, monthly-link e quarterly-link, o trecho de código 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 estivesse a usar um ID em vez de uma classe, basta substituir o ponto por um sinal de jogo da galinha em cada um dos links. Exemplo: a#daily-link.

E é tudo. Em seguida, gostaria de criar algumas Smart Tags personalizadas? Dê uma vista de olhos ao nosso tutorial sobre criação de smart tags personalizadas para mais detalhes.