Como Adicionar e Editar Botões e Páginas de Confirmação

Botões são os gols de placa de sua landing page. Eles representam o momento em que seu visitante diz "Isso mesmo! Pode contar comigo!" – e é melhor que algo fantástico aconteça quando fizerem isso. Mas não tenha medo, você pode customizar os botões de confirmação em sua página para maximizar a sedução causada por ele.

Este artigo irá ajudá-lo a:

  • Inserir campos pré-definidos e personalizados no formulário de sua landing page;
  • Definir a ordem, tipo e estilo dos campos de seu formulário;
  • Identificar os melhores tipos de formulários de acordo com o uso.


Propriedades do Botão

Clique em seu botão para abrir o painel de propriedades à direita:

Geometria

Altere manualmente o tamanho e posição de seu botão.

Legenda

Mude o texto e fonte de sua Chamada para Ação (Dica: Nunca use Inscreva-se).

Aparência

Escolha um estilo para seu botão (cor sólida, gradiente ou imagem) e então escolha a aparência dentre três opções: Acima, Flutuante e Ativo. Caso selecione um gradiente, o Page Builder selecionará automaticamente uma segunda cor de gradiente para você, mas você pode alterá-la manualmente ao clicar no botão do cadeado. Você também pode alterar a cor da borda e o raio dos cantos de seu botão.

Uma vez que tenha editado a aparência de seu botão em sua página, quaisquer outros botões que adicionar serão iguais a ele (com exceção de imagens como botões).


Opções de Confirmação de Formulários

Clique nos campos do seu formulário para ver as propriedades do formulário à direita. Desça pela página até Confirmação do Formulário e abra o menu, que apresentará quatro opções:

  1. Mostrar Form Confirmation Dialog
    • Apresenta um Form Confirmation Dialog (mais conhecido como "página de agradecimento") que pode ser editado na Unbounce – assim como sua landing page.
    • Para editar o texto de confirmação do formulário, clique no botão abaixo da caixa de Form Confirmation Dialog ou clique na aba "Form Confirmation Dialog" na parte superior esquerda do Page Builder. Você pode utilizar que são apresentadas para alternar entre o Form Confirmation Dialog e a página principal.
  2. Mostrar imagem de alerta: Apresenta uma mensagem de sua escolha dentro do navegador.
  3. Ir para outra página da web: Transporta o usuário para outra página (com a opções de anexar os dados do formulário a URL).
  4. Postar dados do formulário em uma URL: Envia os dados do formulário e o usuário para outra página.

Você também pode usar uma de nossas integrações para coletar dados do formulário.


Exibir conteúdo a partir de uma Lightbox

O Builder pode suportar até um máximo de 20 lightboxes por página.

Para Exibir uma Lightbox a partir de um Botão:

  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. Selecione o botão e clique em "Editar Lightbox". 
  3. Adicione/edite o conteúdo da mesma forma como você faria com suas outras páginas da Unbounce.

Indicadores

 Esse ícone aparecerá quando houver uma nova lightbox que ainda não tenha sido editada.

 Esse ícone aparecerá quando houver uma lighbox sem links nela ou quando a quantidade máxima de lightbox. tenha sido atingida.

Para Lançar uma Lightbox a partir de uma Imagem:

  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. Sob a seção "Appearance" do painel de propriedades, clique no menu "Style" e selecione "Image". 
  3. Na janela "Choose Image" que surge, selecione ou faça upload da imagem que gostaria de apresentar como preview de seu botão lightbox.
    A imagem não será editável dentro do Page Builder, por isso você precisa selecionar a imagem já com o tamanho desejado.
  4. Remova o estilo do botão padrão (ex: remova a borda, remova o texto da legenda, modifique o raio do canto para "0"), conforme desejar, para criar um visual de imagem plana.

    Agora siga em frente e adicione imagens a suas lightboxes!

Artigos Relacionados:


Adicionando Botões Click to Call

Botões de Click to Call fornecem aos que visitam sua página pelo telefone, uma maneira fácil e rápida de fazer a ligação.

Depois que tiver formatado seus botões para terem a aparência desejada no Page Builder, clique neles para mostrar suas propriedades à direta da interface.

Selecione "Vá para o URL" e clique no botão de ação.

Para o link, utilize o formato "tel:[country code][area code][phone number]".

Por exemplo, se o código de país for 1, o código de área for 604 e o número de telefone for 484-1354, o link seria tel:16044841354.

Em seguida, clique na aba de Objetivos de Conversão na parte superior direita definir o link recém-criado como seu objetivo de conversão. Assim, você garantirá que as chamadas sejam apropriadamente gravadas como conversões em suas estatísticas.

Por fim, publique sua página.


Passando Parâmetros de URL de Entrada Para Links de Botão de Saída

Se você está utilizando uma página de click-through pode ser de seu interesse enviar seus visitantes para lá juntamente com os parâmetros de URL com os quais chegaram.

Quando você adiciona o botão, vá até suas propriedades à direita e procure por Click Action. A partir dali, selecione "Pass through URL parameters" e eles serão passados juntamente com seu visitante até seu próximo destino.


Adicionando o Download de um Arquivo

Como Adicionar o Download de Arquivo (PDF, e-book, Livro Branco, etc.)

Seduzir os clientes com conteúdos incríveis é uma ótima estratégia para coletar leads. Quem não gostaria de fazer download de um belo livro? Uma maneira de organizar este processo é incorporar um download de arquivo em sua página de confirmação de geração de lead. Desta maneira, assim que o lead fornecer informações dele, será recompensado com seu adorável conteúdo. Além de ser eficiente, adicionar o download de um arquivo em sua página de confirmação de geração de leads é uma maneira carinhosa de dizer "muito obrigado!" a seus leads.

A Unbounce permite que você coloque download de arquivos em suas páginas de confirmação de geração de lead. Dessa forma, você pode gerenciar facilmente suas campanhas de captura de leads e os arquivos que fornece para as pessoas após elas preencherem seus formulários.

Para fazer isso, siga os passos no vídeo abaixo.

  1. Escolha um template que contenha um formulário ou adicione um formulário a sua página atual.
  2. Clique na aba "Form Confirmation Dialog" na parte superior esquerda do editor para editar a página de confirmação do formulário.
  3. Adicione um botão à página, arraste o ícone do botão verde da paleta de objetos para sua página.
  4. Selecione o botão e mude sua ação para "Download File" no painel de propriedades à direita.
  5. Escolha o arquivo que você gostaria que seus visitantes fizessem download ou faça upload de um novo arquivo (limite de 200mb).
  6. Customize a aparência dos botões e salve sua página.

E pronto!

Agora sua landing page de geração de leads está pronta e possibilitará que seus visitantes façam download de um arquivo depois de completarem seu formulário. Divirta-se!

Como redireciono para outra página depois da submissão do formulário?

Para configurar seu formulário para redirecionar à outra página depois que o botão for pressionado, siga estes passos: 

  1. Clique em um dos campos em seu formulário (não o botão) para "selecionar" o formulário;
  2. No painel de propriedades, localizado no lado direito, escolha "Go to URL" a partir do menu de "Form Confirmation";
  3. Adicione o URL da sua página destino no campo de texto fornecido.

Adicione Uma Janela Lightbox (para Política de Privacidade, Regras, Termos, etc.)

Para este recurso é necessário usar Javascript padrão. Caso não tenha experiência com Javascript, por favor, entre em contato com um de nossos support coaches para buscar uma solução alternativa.

Passo A - Crie e publique uma página contendo sua política de privacidade (regras, termos e condições, etc)

Pronto.. Basta criar e publicar uma landing page com seu conteúdo de Política de Privacidade. Lembre-se de alterar o tamanho das margens da página para que se encaixe confortavelmente no conteúdo de sua página, depois anote o URL de publicação da página.

Passo B - Adicione os scripts necessários a sua landing page principal

  1. Acesse sua página no editor da Unbounce e clique no botão Javascripts na parte inferior esquerda do editor.
  2. Na seção inferior esquerda da caixa do Javascrips, habilite jQuery e jQuery Fancybox.
  3. Clique no botão Add, na parte superior esquerda do diálogo, para adicionar a nova instância do novo script.
  4. Nomeie a nova instância FancyBox e para localização escolha Before Body End Tag.
  5. Copie o seguinte código:
     
  6. Perceba que o fragmento #lp-pom-text-22 no script acima deve ser mudado para o text ID apropriado de sua página. Para encontrar o text ID, clique na text box e navegue até a aba propriedade, na parte superior direita do editor. Na parte inferior da aba de Propriedades, há um título chamado Advanced. Abaixo disso você encontrará o ID da text box ao lado de Id. Copie este ID e coloque-o em seu script, onde #lp-pom-text-22 está atualmente localizado. Depois clique em "Done".
    não remova o 'a' do fragmento. Por exemplo, se seu text ID é '#lp-pom-text-155', seu código irá se parecer com:
    $('#lp-pom-text-155 a').fancybox({
     

Passo C - Adicione um link para lançar a Lightbox

  1. Destaque o texto que você gostaria que abrisse a Lightbox.
  2. Selecione "Action" do painel de Propriedades à direita.
  3. Copie seu URL no campo "URL" e pressione Enter.
  4. Verifique se "Same tab or window" está selecionado no menu descendente "Target" .
  5. Salve e publique sua página e vous a la; está pronto!

Estamos utilizando um plugin jQuery chamado Fancybox neste exemplo, mas qualquer outra opção de overlay/dialog/lightbox do javascript funcionaria (há muitas opções por ai). Confira em Fancybox mais informações sobre o que pode ser feito com esse recurso.

É importante ter em mente que o script de lightbox é muito específico e a versão utilizada aqui funcionará apenas para links de texto da classe iframe fancybox. Para ajuda ao desenvolver uma política de privacidade específica para o caso de sua empresa, recomendamos iubenda.


Adicionando Links e Botões de Rolagem Suave

Para adicionar este recurso, é necessário Javascript padrão. Caso não tenha experiência com Javascript, por favor, entre em contato com um de nossos support coaches para buscar uma solução alternativa.

 

Você pode adicionar links e botões de rolagem suave a sua página utilizando um pouco de javascript. Abra seu dialog do Javascript pela aba localizada na parte inferior esquerda do Unbounce Page Builder e cole o seguinte código:

 

 

Agora você pode selecionar qualquer objeto ou seção da página como destino para o link de rolagem suave.

Copie o Object ID do painel de Propriedades à direita do page builder (ex: #lp-pom-block-9).

Para um botão: Cole o ID como Link para sua Ação de Clicar. Garanta que 'Pass through URL parameters' não esteja selecionado.

Para um link de texto: Cole o ID como URL para seu link. Agora Salve e Publique sua página e veja a rolagem suave em ação!


Apresente Valores de Formulário em seu Dialog de Confirmação de Formulário (Utilizando Texto Dinâmico)

 

Para personalizar sua confirmação de formulário (página de agradecimento) com Dynamic Text Replacement, entre no Page Builder, clique na aba na parte superior direita e navegue até a Form Confirmation Dialog . Assim que o texto estiver com a aparência desejada (você pode utilizar um texto substituto, caso seja necessário seu campo de formulário):

  1. Abra o editor de texto dando um clique duplo na caixa de texto.
  2. Selecione o texto que gostaria de tornar dinâmico:
    • Caso o campo do formulário pelo qual esteja passando não seja obrigatório, você precisa garantir que tenha um texto padrão que faça sentido, ou você pode utilizar um substituto como NOME, pois os visitantes não irão vê-lo.
  3. Nomeie o parâmetro da mesma maneira que o campo do formulário de sua landing page.
    • Geralmente o dá-se o nome em letras minúsculas, com sublinhados no lugar de espaços (ex: primeiro_nome), mas você pode conferir o nome do campo no Form Builder - você verá o nome do campo abaixo do campo em cinza.

Assim que tiver salvado e publicado, a confirmação de seu formulário (página de agradecimento) será atualizada automaticamente na submissão do formulário.


Glossário

Botão: normalmente sua Chamada para Ação, o único lugar em que você quer que as pessoas cliquem após acessarem sua página.

 

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