Utilizar Strings de Consulta para Preencher Automaticamente um Campo de Texto

Gostaria de preencher automaticamente um campo de texto para um utilizador com base no link que ele clica? Os links podem ser configurados para enviar informações para um campo, para que o utilizador possa poupar um passo ao preencher o seu formulário.

Este tutorial irá mostrar-lhe como alavancar strings de consulta para preencher automaticamente um campo num 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 publicações ou produtos.

Se alguma vez notou um URL com um ponto de interrogação no meio, já viu uma string de consulta em ação. Um URL com uma string de consulta terá um aspeto semelhante a este:

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

Neste exemplo, vamos mostrar-lhe como usar uma string de consulta para inserir uma palavra ou frase específica num campo de formulário.

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

Criar um Novo Formulário

Antes de começar, você precisará garantir que o WPForms esteja instalado e ativado no 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 aceder ao construtor de formulários.

Se estiver a criar um novo formulário, terá de fornecer um título ao seu formulário e escolher um modelo. Estamos a usar o modelo Formulário de Contacto Simples aqui.

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

Adicionar uma Etiqueta Inteligente de Variável de String de Consulta

Em seguida, precisamos de configurar o valor padrão para o campo de Texto de Linha Única (que renomeámos para "Gostaria de saber mais sobre") para estar pronto a aceitar informações de uma string de consulta.

Para fazer isto, clique no campo para abrir o ecrã Opções do Campo. A partir daqui, terá de abrir o separador Avançadas, percorrer até à caixa rotulada Valor Padrão e, em seguida, clicar em Mostrar Etiquetas Inteligentes.

A partir da lista pendente, selecione a opção chamada Variável de String de Consulta.

Depois de fazer esta seleção, notará que {query_var key=""} foi adicionado à caixa Valor Padrão. Entre essas aspas vazias, precisa de adicionar um nome (chamado uma chave) para representar este campo. Esta chave será usada mais tarde na nossa string de consulta.

Daremos à nossa página um campo com a chave “contact-reason”. É importante notar que o nome que usar para esta chave será visível no URL que configuraremos mais tarde, pelo que o nome deve ser lógico para o propósito da chave. Além disso, certifique-se de que a sua chave não inclui espaços – em vez disso, substitua os espaços por um hífen “-” ou um sublinhado “_”.

Publicar o Seu Formulário

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

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

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

Isto adicionará o bloco WPForms ao ecrã do editor. Em seguida, prossiga e incorpore o seu formulário selecionando-o no menu suspenso Selecionar um Formulário.

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

Criar um Link com uma String de Consulta

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

Neste exemplo, o nosso formulário está na nossa página de contacto, pelo que um link padrão seria algo como: https://example.com/contact.

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

Neste momento, esse link simplesmente abrirá a página de Contacto. Em seguida, modificaremos este link para conter uma string de consulta. Este link modificado não só abrirá a página de contacto, mas também passará uma string de consulta que preenche automaticamente o campo de Texto de Linha Única no nosso formulário:

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

Eis como construímos este novo link, por ordem dos seus componentes:

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

Ao clicar neste link, a 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” nesse campo:

Para adicionar espaços ao texto que aparece neste campo, basta colocar %20 onde quer 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 o tenha ajudado a configurar links com strings de consulta que preencherão automaticamente um campo de texto num formulário.

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