Deseja otimizar a experiência de preenchimento de formulários dos seus usuários no WordPress? O preenchimento automático de campos de formulário com informações de um formulário anterior pode aprimorar a experiência do usuário e garantir a precisão dos dados. Este tutorial o guiará pelo processo de transmissão de informações entre formulários usando strings de consulta pré-preenchidas.
Antes de seguirmos as etapas para conseguir isso, vamos nos aprofundar um pouco mais nas strings de consulta e por que elas são incríveis!
O que são cadeias de caracteres de consulta?
Pense nas strings de consulta como mensageiros úteis entre diferentes partes do seu site. Elas são pedaços de informação adicionados ao final de um URL, ajudando as páginas da Web a se comunicarem umas com as outras. Normalmente, você as verá após um ponto de interrogação em um endereço da Web, seguidas por pares de valores-chave separados por sinal de adição.
Como eles funcionam?
Imagine que você está preenchendo um formulário em um site. Quando você clica em Enviar, o formulário envia seus dados para o servidor do site. Mas e se você quiser passar esses dados para outro formulário ou página sem fazer com que os usuários os preencham novamente? É aí que entram as query strings.
Ao adicionar strings de consulta ao URL de redirecionamento após o envio do formulário, você está basicamente dizendo: " Ei, aqui estão algumas informações do primeiro formulário. Use-as para preencher previamente os campos do próximo formulário! É como deixar um rastro de migalhas de pão para o seu site seguir.
Por que eles são benéficos?
- Economiza tempo: os usuários adoram conveniência. As cadeias de consulta evitam o incômodo de redigitar informações que já foram fornecidas.
- Precisão: você já cometeu um erro de digitação ao preencher um formulário? Com as cadeias de consulta, você extrai dados diretamente do primeiro formulário, reduzindo a chance de erros.
- Conversões mais altas: Ao simplificar o processo de preenchimento de formulários, você facilita aos usuários a conclusão de ações no seu site, o que leva a taxas de conversão mais altas.
- Experiência perfeita: Tudo se resume a uma navegação tranquila para seus usuários. Os formulários de preenchimento automático criam uma jornada contínua pelo seu site, aprimorando a experiência do usuário.
Em resumo, as strings de consulta são como fios mágicos que conectam diferentes partes do seu site. Elas passam informações entre formulários, facilitando a vida de você e de seus usuários. Com menos digitação e mais automação, todos saem ganhando!
Dito isso, vamos mergulhar de cabeça!
Usando as cadeias de consulta
Começaremos criando dois formulários separados. Se precisar de ajuda para criar formulários, consulte esta documentação.
1) Criação do formulário da página inicial
Primeiro, crie seu primeiro formulário e adicione todos os campos necessários a esse formulário.
Clique em Save por enquanto, pois revisaremos esse formulário mais tarde.
2) Criação de um formulário adicional
Nesta etapa, criaremos outro formulário que receberá as informações pré-preenchidas. Adicione todos os campos necessários, certificando-se de que estejam alinhados com as informações que você deseja preencher previamente.
Em seguida, navegue até a guia Settings " General e clique na seta suspensa para acessar as opções Advanced. Aqui, você pode alternar o botão para Ativar Preenchimento por URL.
3) Configurar o redirecionamento no envio do formulário
Agora é hora de juntar tudo. Vamos editar o formulário que criamos na primeira etapa, o formulário da página inicial. No construtor de formulários, vá para Settings " Confirmations (Configurações " Confirmações).
Aqui, altere o Confirmation Type (Tipo de confirmação) para Go To URL (Redirect) e, no campo Confirmation Redirect URL (URL de redirecionamento da confirmação ), copie e cole esse URL.
http://example.com/quote/?wpf1036_1={field_id="1"}&wpf1036_2={field_id="2"}
Com esse URL acima, você precisará alterar alguns aspectos. Por exemplo:
- Substitua example.com por seu próprio domínio.
- Substitua a palavra quote pelo nome de sua página.
- Ajustar
wpf1036_1ewpf1036_2para corresponder ao ID do formulário de recebimento e aos respectivos IDs de campo. - Atualização
{field_id="1"}com o ID do campo do formulário da página inicial para o Nome campo.
Se precisar de ajuda para encontrar seus números de ID de campo específicos, dê uma olhada neste tutorial.
Depois de adicionar isso ao URL de redirecionamento de confirmação, clique em Save (Salvar ) no formulário.
Agora, quando os usuários virem o formulário da página inicial, eles poderão preencher o nome e o endereço de e-mail e, quando clicarem no botão Enviar, a página será redirecionada para outro formulário que preencherá automaticamente os campos Nome e Endereço de e-mail com as informações coletadas no formulário da página inicial.
E isso é tudo o que você precisa para usar uma string de consulta para preencher previamente os campos do formulário. Gostaria de ver com quais outros campos você pode usar isso? Dê uma olhada na nossa documentação sobre Como habilitar o pré-preenchimento por configuração de URL no WPForms.
PERGUNTAS FREQUENTES
P: Por que ele não está preenchendo previamente o próximo formulário?
R: Se você perceber que os campos não estão sendo preenchidos previamente, verifique se a configuração foi ativada no segundo formulário.
Abra o construtor de formulários do segundo formulário e vá para a guia Configurações " Geral. Em seguida, clique no menu suspenso Advanced (Avançado ) na parte inferior da tela e alterne o botão para Enable Prefill By URL (Ativar pré-preenchimento por URL).
P: O que devo fazer se estiver usando um nome e um sobrenome no meu campo de nome?
R: Se não estiver usando o formato simples para o seu nome, basta listar o campo do nome no URL da seguinte forma.
http://my-example-site.com/quote/?wpf1036_1_first={field_id="1|first"}&wpf1036_1_last={field_id="1|last"}&wpf1036_2={field_id="2"}
O mesmo pode ser dito sobre o campo Address (Endereço). Seu formato para dividir o endereço seria o seguinte.
&wpf1036_3_address1={field_id="3|address1"}&wpf1036_3_address2={field_id="3|address2"}&wpf1036_3_city={field_id="3|city"}&wpf1036_3_state={field_id="3|state"}&wpf1036_3_postal={field_id="3|postal"}