Usando Strings de Consulta para Preencher Automaticamente um Campo de Texto

Você gostaria de preencher automaticamente um campo de texto para um usuário com base no link que ele clica? Os links podem ser configurados para enviar informações para um campo, para que o usuário possa economizar uma etapa ao preencher seu formulário.

Este tutorial mostrará como usar strings de consulta para preencher automaticamente um campo em um formulário.

O que é uma String de Consulta?

Uma string de consulta é uma parte de um URL que entrega ou recupera informações. Em alguns sites, por exemplo, as strings de consulta são usadas para executar pesquisas de posts ou produtos.

Se você já notou um URL com um ponto de interrogação no meio, você já viu uma string de consulta em ação. Um URL com uma string de consulta se parecerá com isto:

http://example.com/plugin?name=wpforms

Neste exemplo, mostraremos como usar uma string de consulta para inserir uma palavra ou frase específica em um campo de formulário.

Para fazer isso, criaremos um link especial que os usuários podem clicar se quiserem saber mais sobre "Eventos e Festas". O URL desse link levará o usuário ao nosso formulário "Solicitar Mais Informações". A string de consulta que criaremos preencherá automaticamente nosso campo "Eu gostaria de saber mais sobre:" com "Eventos e Festas".

Criando um Novo Formulário

Antes de começar, você precisará garantir que o WPForms esteja instalado e ativado em seu site WordPress e que você tenha verificado sua licença. Em seguida, você pode criar um novo formulário ou editar um existente para acessar o construtor de formulários.

Se você estiver criando um novo formulário, precisará fornecer um título ao seu formulário e escolher um modelo. Estamos usando o modelo Formulário de Contato Simples aqui.

Para este exemplo, criaremos um link que preencherá automaticamente um campo de Texto de Linha Única em nosso formulário. Para adicionar este campo ao seu formulário, clique nele ou arraste e solte-o na área de visualização.

Adicionando uma Tag Inteligente de Variável de String de Consulta

Em seguida, precisamos configurar o valor padrão para o campo de Texto de Linha Única (que renomeamos para "Eu gostaria de saber mais sobre") para que ele esteja pronto para aceitar informações de uma string de consulta.

Para fazer isso, clique no campo para abrir a tela Opções do Campo. A partir daqui, você precisará abrir a guia Avançado, rolar até a caixa rotulada Valor Padrão e, em seguida, clicar em Mostrar Tags Inteligentes.

Na lista suspensa, selecione a opção chamada Variável de String de Consulta.

Depois de fazer essa seleção, você notará que {query_var key=""} foi adicionado à caixa Valor Padrão. Entre essas aspas vazias, você precisa adicionar um nome (chamado de chave) para representar este campo. Essa chave será usada posteriormente em nossa string de consulta.

Daremos à nossa página um campo chamado “contact-reason”. É importante notar que o nome que você usar para este campo ficará visível na URL que configuraremos mais tarde, então o nome deve ser lógico para o propósito do campo. Além disso, certifique-se de que seu campo não inclua espaços – em vez disso, substitua os espaços por um hífen “-” ou um sublinhado “_”.

Publicando seu Formulário

Agora que você configurou o formulário, pode voltar ao seu painel do WordPress. Em seguida, você pode criar uma nova página ou editar uma página existente para publicar o formulário que você acabou de criar.

Para publicar seu formulário, primeiro clique no botão + (mais) para adicionar um novo bloco.

Para localizar o bloco WPForms, você pode pesquisar por “WPForms” ou abrir a categoria Widgets. Em seguida, clique no bloco chamado WPForms.

Isso adicionará o bloco WPForms à tela do editor. Em seguida, incorpore seu formulário selecionando-o no menu suspenso Select a Form.

Agora que seu formulário está incorporado na página, você pode publicá-lo e visitá-lo no frontend do seu site.

Criando um Link com uma String de Consulta

Em seguida, você precisará criar outra nova página ou editar uma página existente onde possamos adicionar um link para este formulário.

Neste exemplo, nosso formulário está em nossa página de contato, então um link padrão seria algo como: https://example.com/contact.

Na nova página, adicionaremos algum texto e vincularemos nosso texto “Eventos e Festas” à página onde nosso formulário está localizado (https://example.com/contact).

No momento, esse link simplesmente abrirá a página de Contato. Em seguida, modificaremos este link para conter uma string de consulta. Este link modificado não apenas abrirá a página de contato, mas também passará uma string de consulta que preencherá automaticamente o campo de Texto de Linha Única em nosso formulário:

https://example.com/contact?contact-reason=EventsandParties

Veja como construímos este novo link, em ordem de seus componentes:

• O link normal (https://example.com/contact)
• Um ponto de interrogação
• O campo que você designou anteriormente (neste exemplo, contact-reason)
• Um sinal de igual
• O texto que você deseja que seja preenchido automaticamente

Ao clicar neste link, nossa caixa de Texto de Linha Única será preenchida automaticamente com qualquer texto após o sinal de igual. Neste caso, o link acima colocará “EventsandParties” neste campo:

Para adicionar espaços ao texto que aparece neste campo, basta colocar %20 onde você quiser que um espaço apareça. Por exemplo, o código https://example.com/contact?contact-reason=Events%20and%20Parties adicionará um espaço ao texto resultante de preenchimento automático, que lê “Events and Parties”:

É isso! Esperamos que este tutorial tenha ajudado você a configurar links com strings de consulta que preencherão automaticamente um campo de texto em um formulário.

Em seguida, você gostaria de preencher campos dinamicamente com o conteúdo do seu site? Certifique-se de conferir nosso guia sobre escolhas de campos dinâmicos para todos os detalhes.