Como Preencher um Campo de Formulário a partir de um Link de Âncora

Ver Markdown

Deseja preencher automaticamente os campos do formulário quando os usuários clicarem em links na sua página? Usando links âncora e JavaScript, você pode preencher campos do formulário com texto predefinido quando os visitantes clicarem em links específicos.

Este guia mostrará como implementar esse preenchimento dinâmico de formulários.

Entendendo o Conceito

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

Formulários de seleção de serviços
Formulários de consulta de produtos
Formulários de solicitação de suporte
Formulários de contato com assuntos predefinidos

Configurando Seu Formulário

Primeiro, vamos criar 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 ajuda para criar seu formulário, confira nosso guia sobre como criar seu primeiro formulário.

Em seguida, anote os números de ID do seu formulário e dos campos. Você precisará deles para o snippet de código. Se não tiver certeza de como encontrar esses IDs, revise nosso guia sobre como encontrar IDs de formulários e campos.

você precisará registrar o formulário e o ID do campo, pois precisaremos deles na próxima etapa

Configurando as Notificações do Formulário

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

Simplesmente vá para a aba Notificações e, no campo Assunto, digite o texto desejado junto com o ID do campo, assim como você usa Smart Tags em outros lugares do construtor de formulários.

Para mais detalhes sobre como usar IDs de campo dessa forma, confira nosso guia detalhado sobre como usar smart tags.

Em nosso exemplo, o ID do nosso campo é 3, então nossa linha de Assunto será: “Estou interessado em {field_id=”3″} limpeza para minha empresa”.

o Smart Tag de ID de campo agora também preencherá a linha de assunto das notificações por e-mail

Criando Links Âncora

Em seguida, vamos criar uma nova página em nosso site com links âncora e o formulário que acabamos de fazer.

Se precisar de ajuda para entender links âncora ou criá-los, confira este tutorial da WPBeginner.

Para criar links â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á para a aba Avançado e adicione o texto que deseja usar para o link âncora. O WordPress recomenda mantê-lo curto, sem espaços, ou usar hifens para várias palavras. Por exemplo, “sobre-nos” para uma seção Sobre Nós.

Para o nosso tutorial, teremos seções para Diário, Semanal, Mensal e Trimestral.

crie o link âncora dentro do WordPress adicionando isso ao título, em seguida, criaremos o link.

Para cada título, inseriremos um link âncora de uma palavra. Por exemplo, a seção Diária terá o link âncora diario.

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

Para vincular texto aos links âncora, adicionaremos um link como de costume no WordPress. Selecione o texto, clique no ícone de corrente e, em vez de uma URL completa, adicione um sinal de libra e, em seguida, a palavra do link âncora. Por exemplo, #diario.

selecione seu texto para adicionar seu link interno ao link âncora na mesma página

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

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

Preenchendo o Formulário com o Texto do Link Âncora

Agora é hora de adicionar o snippet que unirá tudo isso. Se precisar de ajuda para adicionar snippets ao seu site, consulte este tutorial.

Você precisará atualizar o snippet para corresponder ao mesmo nome dos links internos, bem como ao ID do formulário (378) e ao ID do campo (-field_3).

agora você pode facilmente preencher um campo a partir de um link âncora

E é isso! Você sabia que pode fazer algo muito semelhante apenas dentro do próprio formulário? Dê uma olhada em nosso tutorial sobre Como Adicionar um Sumário 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: Com certeza! Se você preferir acionar o JavaScript por uma classe ou ID CSS, 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 você estivesse usando um ID em vez de uma classe, basta substituir o ponto por um sinal de cerquilha em cada um dos links. Exemplo: a#daily-link.

E é isso. Em seguida, você gostaria de criar algumas Smart Tags personalizadas? Dê uma olhada em nosso tutorial sobre criação de smart tags personalizadas para mais detalhes.

Preenchendo um Campo de Formulário a partir de um Link de Âncora

Resumo de IA