Como Adicionar e Editar Campos de Formulários

Formulários são elementos fundamentais para landing pages, possuem a função de gerar leads. A forma que você usa para desenvolver os seus formulários causa um grande impacto em suas taxas de conversão, e determina a informação que chegará até você após o lead ser convertido. Há diversos usos mais avançados de formulários, incluindo campos de formulários preenchidos previamente, UTM tracking e formulários em etapas. E o objetivo desse artigo é colocar você no caminho certo.

É permitido apenas um formulário por landing page.

Este artigo irá ajudá-lo a:

 

  • Adicionar e editar formulários básicos.
  • Passar parâmetros de URL por formulários.
  • Configurar formulários para serem preenchidos previamente para UTM tracking.
  • Configurar formulário de diversas etapas.


Adicionando e Editando Campos de Formulários

  1. Execute um clique duplo nos campos do formulário para editar um formulário existente.
    OU
    Arraste e solte o Widget de formulário do painel de Widgets à esquerda para adicionar um novo formulário.
  2. Selecione os campos dentre os campos personalizados ou pré-definidos à esquerda do Form Designer.
  3. Clique em Fields para editar:
    • Opções específicas para campos aparecerão à direita do Form Designer;
    • Mova os campos para cima e para baixo, utilizando os botões direcionais abaixo do campo no Form Designer;
    • Apague os campos com o botão vermelho abaixo do campo no Form Designer.
  4. Clique em Done depois de finalizar o Formulário.
    Nome e e-mail são definidos como campos obrigatórios, o campo e-mail verificará automaticamente endereços válidos para garantir que o e-mail utilizado é real. Caso adicione um campo para número de telefone, você também pode configurá-lo para validações de acordo com a região.

Nomes de Campos Personalizados

Você também tem a opção de adicionar valores diferentes para "Field Name and ID" e "Form Label". Esta opção é útil caso faça downlod do CSV de seus leads, é preferível que o nome do valor seja simples e curto. Isto também permite que diversos campos tenham o mesmo rótulo, permitindo que você especifique carácteres maiúsculos para seus rótulos de campos do formulário.

Por padrão, o campo "Field Name and ID" será o mesmo que seu "Field Label". Caso queira personalizá-lo, simplesmente desative "Auto-generate form Field Label", na seção "Name and ID".

Você também pode adicionar campos de texto, checkbox e listas nomeados por você, assim como menus descendentes pré-definidos ou campos ocultos – que podem ser úteis para alguns de seus recursos avançados e integrações. E preste atenção: os campos ocultos apresentarão apenas opções para "Field Name and ID" e não "Field Label".

Quando mudar entre campos, o "Auto-generate from Field Label" só será habilitado novamente, caso o valor do "Field Name and ID" for exatamente igual a versão gerada automaticamente pelo "Field Label".


Propriedades do Formulário

Clique uma vez nos campos do formulário e você verá as Propriedades do Formulário à direita do Page Builder.

Geometria

Ajuste manualmente o tamanho e posição.

Confirmação do Formulário

Consulte nossa próxima seção.

Atributos do Rótulo

Ajuste o alinhamento, a fonte, cor e tamanho.

Atributos do Formulário

Ajuste a altura do campo, espaçamento entre os campos e o tamanho interno da fonte. Você também pode escolher a borda do campo, incluindo o raio dos cantos , cor de fundo e do texto, assim como ativar ou desativar sombra interna.

Atributos da Checkbox e Listas

Caso tenha adicionado checkbox ou botões de rádio (listas), você pode ajustar a aparência, mudando fonte, cor e tamanho.


Como Incluir o Formulário em uma Lightbox

Para incluir um formulário em sua lightbox:

  1. Caso ainda não tenha feito isso, adicione um novo botão do tipo lightbox: arraste e solte o widget a partir do painel à esquerda. 
  2. Clique em "Lightbox" no canto superior esquerdo do Page Builder, arraste o botão Form do painel à esquerda e solte dentro do campo de conteúdo da Lightbox. 
    Não se esqueça de que é permitido apenas um formulário por landing page, portanto, se o botão de seu Formulário está acinzentado, você precisará remover o formulário existente antes de adicionar um novo.
  3. Crie seu formulário e clique em "Done" quando tiver terminado. 

Agora, você pode modificar o formulário em sua Lightbox, assim como faria com qualquer outra página no Builder.

Artigos Relacionados:

Como Adicionar Conteúdo em uma Lightbox

Como Adicionar uma Visualização da Imagem na Lightbox


Transferir Parâmetros de URL através de Formulários

Quando utilizar um formulário (ao invés de um botão), os parâmetros de URL não podem ser transferidos automaticamente junto com o formulário para outra página (ou para a confirmação do formulário).

Formulários da Unbounce são transferidos juntamente com os dados do formulário, mas não com os parâmetros da URL. Para transferir os parâmetros atuais da URL de entrada, você precisará configurar campos escondidos para receber quaisquer parâmetros de entrada:

  1. Adicione campos escondidos a seu formulário dando um clique duplo em seu formulário existente e clicando no botão Hidden Field à esquerda do Form Designer.
  2. Nomeie os campos da mesma maneira que seus parâmetros de entrada: 
  3. Caso esteja enviando tráfego para outra página (não sua Form Configuration), habilite "Append form data to URL" no painel de propriedades à direita: 

Todos os dados do formulário são transferidos no momento da submissão, portanto seus parâmetros de URL de entrada agora serão passados para o próximo destino (seja esse destino a Confirmação do Formulário ou outra página).


Auto-completar um Formulário com Parâmetros de URL

Com a Unbounce, você pode facilmente auto-completar seus campos de formulários com parâmetros de URL (também conhecidos como parâmetros de consulta).

O que é um parâmetro de URL, você pode estar se perguntando...

Bem, dentre outras coisas, um parâmetro de URL é uma maneira de passar dados em um link para uma página da web. Você pode utilizar parâmetros de URL para acompanhar métricas diferentes em serviços como Google Analytics ou, neste caso, para preencher antecipadamente seu formulário.

Um parâmetro de URL tem duas partes. Um nome variável e um valor. No exemplo abaixo, "coupon" é o nome variável e "50_2013" o valor:

http://unbouncepages.com/puravida?coupon=50_2013

Digamos que você queira preencher antecipadamente um código de cupom em seu formulário. Ótimo.

Utilizando o exemplo acima, você apenas teria que adicionar um campo "cupom" a seu formulário e ele se preencheria automaticamente com os parâmetros de consulta correspondentes. Desta maneira: 

Um caso comum que exemplifica este uso é a utilização do UTM tracking do Google...

O Google tem uma ferramenta popular de construção de URL para marcar seus links com dados úteis (o que ocorre automaticamente, se suas contas do Google Adwords e do Google Analytics estão ligadas). O resultado disso são alguns parâmetros alocados no fim da URL da sua página na Unbounce, que pode se parecer com isso:

http://try.myproduct.com/landing-page?utm_source=google&utm_medium=ppc

Para capturar estes dados em seu formulário, basta criar um campo escondido para cada tag e dar a ele o mesmo nome da tag. Portanto, seguindo este exemplo, você criaria os seguintes campos escondidos: 


Formulários de Múltiplas Etapas

Você pode utilizar as configurações do formulário para criar formulários de múltiplas etapas na Unbounce.

Como configurar:

  1. Crie uma nova página, vamos chamá-la de ‘Formulário de Múltiplas Etapas #'.
  2. Adicione um formulário à página para coletar algumas informações básicas. Estou pedindo pelo Nome e E-mail. 
  3. Configure a confirmação para "Vá para outra web page" no painel de Propriedades à direita.
  4. Adicione a URL para a próxima página que você irá desenvolver. Neste caso, utilizei a URL: ""http://promo.site.com/step2". 
  5. Habilite "Append form data to URL":
  6. Publique a página.
  7. Crie uma segunda página. Você provavelmente desejará apenas duplicar esta página, mantendo o mesmo design. Minha segunda página é chamada Multi-step Form #2, e eu me certifiquei de...
  8. Dar a ela a URL que utilizei no passo #3 (neste caso: http://promo.site.com/step2).
  9. Edite o formulário na sua segunda página solicitar outras informações necessárias: 
  10. Adicione campos escondidos para a informação que pediu no primeiro formulário, combinando o nome dos campos. Neste caso, isso é "First Name" e "Email". Deixe os valores padrão em branco.
  11. Publique sua página.

Agora, quando os visitantes preencherem o primeiro formulário, eles serão redirecionados para o segundo formulário e ao preencherem este, ele terá os dados de ambos os formulários na informação de lead. Caso queira ter mais de 2 passos, simplesmente repita os números 7 a 10 para cada página do meio. Observe que, dependendo da quantidade de dados coletadas em seus campos, este método irá parar de funcionar depois de um tempo, já que URLs tem um tamanho máximo.

Você também pode passar parâmetros de URL de entrada através de seu formulário com campos escondidos, como mostrado mais a frente neste artigo.

Como isto funciona?

As páginas da Unbounce farão um preenchimento prévio automático dos campo do formulário de mesmo nome, como um parâmetro GET – portanto, como adicionamos campos escondidos com os nomes "first_name" e "email", estes campos serão automaticamente preenchidos com os valores para formar o URL.

E qual a importância disso?

Além de possibilitar dividir um formulário em diversos passos para não assustar o visitante em sua primeira página, isso também tem o benefício de medir cada passo do caminho. Você pode testar diferentes variações de cada página, e também pode configurar integrações para cada passo. Você provavelmente desejará configurar sua integração com MailChimp/AWeber/Constant Contact no último passo, mas pode configurar uma notificação de e-mail no primeiro passo, caso queira ser notificado sobre os usuários que não passaram por todo seu formulário.

Sabemos que isso é um pouco complicado para algo que deveria ser muito simples e, realmente, esperamos pelo momento que possamos lidar com isso como um recurso interno da Unbounce. Até lá, no entanto, adoraríamos saber se você conseguiu fazer essas configurações com sucesso!

Esse artigo foi útil?
Usuários que acharam isso útil: 10 de 13
Powered by Zendesk