Central de Ajuda - Benchmark Email

Página Inicial da Base de Conhecimentos aero-right Formulários de Inscrição aero-right Como crio um formulário de inscrição para o meu site?

Como crio um formulário de inscrição para o meu site?

Formulários de Inscrição Atualizado em novembro 23, 2022

Formulários de inscrição são uma maneira excelente de capturar contatos em um site ou nas mídias sociais. Há diferentes formulários que você pode criar com a Benchmark Email e neste artigo vamos ensiná-lo como criar e utilizar cada tipo de formulário.

Antes de prosseguir, é importante se atentar ao seguinte:

  • Sua modalidade de plano determina a quantidade de formulários de inscrição disponíveis:
    • Gratuito 1 Formulário
    • Básico 5 Formulários
    • Intermediário 25 Formulários
    • Avançado Ilimitados
    • Descontinuado Ilimitados
  • Se você estiver em um plano antigo descontinuado e fizer upgrade para um plano Básico, Intermediário ou Avançado, nenhum formulário de inscrição criado anteriormente será removido.
  • Contas gratuitas têm o limite de 75 inscrições por dia
  • Contas Premium não têm limite de inscrição.
  • Em setembro de 2018, muitos serviços do Google foram bloqueados na China continental. Devido às restrições, o reCaptcha pode não funcionar corretamente nessas regiões chinesas afetadas. Saiba mais sobre o assunto clicando aqui.
  • Formulários Javascript (com rastreamento de site): As alterações ou atualizações feitas em um formulário Javascript aparecerão automaticamente no formulário do seu site.
  • Formulários HTML (com rastreamento de site): As alterações ou atualizações feitas em um formulário HTML não serão exibidas automaticamente no formulário em seu site. Para que as alterações sejam exibidas, você precisará Salvar & Publicar o formulário novamente, copiar o novo código HTML e, por último, colar o novo código em seu site.
  • Se você estiver familiarizado com CSS, também pode adicionar seu próprio código e dar um toque diferente aos seus formulários.
  • Se as alterações não forem aplicadas, limpe o cache do navegador e tente novamente.
  • Se um formulário de inscrição não estiver coletando novos contatos, certifique-se de que o formulário correto esteja em seu site.

Formulários Incorporados

Para utilizar este formulário de inscrição, faça o seguinte:

  1. Na tela principal da Benchmark, selecione Contatos.
  2. No menu, clique em Formulários de Inscrição.
  3. Em seguida, no lado direito da página, clique no botão Criar Formulário de Inscrição.
  4. Selecione Formulário Incorporado e clique em Próximo. Dê um nome ao formulário, selecione uma lista de contatos e clique em Salvar & Próximo.
  5. Crie e edite o seu Formulário de Inscrição.
    • Você pode editar a mensagem de confirmação de inscrição clicando em Configurações de Opt-in, no canto superior esquerdo.
    • Altere a aparência do seu formulário ou adicione campos adicionais ao passar o mouse sobre o formulário de inscrição e clicando no ícone de mais opções (···).
  6. Quando terminar, clique em Salvar & Publicar.
  7. Em seguida, o código do formulário de inscrição aparecerá, selecione o tipo de código desejado (Javascript ou HTML), copie e então cole no seu site.

IMPORTANTE

  • Caso você não defina a largura em pixel, o formulário preencherá 100% do espaço.
  • A largura máxima do formulário de inscrição em uma área de trabalho é 999px. No entanto, se o formulário de inscrição for aberto em um dispositivo móvel, o formulário será preenchido automaticamente, de acordo com o tamanho da tela.
O que você pode personalizar
  • Você pode adicionar uma largura personalizada, se achar necessário. Apesar disso, não recomendamos fazer alterações na largura. Por padrão, o formulário ocupará 100% do espaço em que estiver incorporado.

Para alterar a largura, siga as etapas abaixo:

  1. Na Etapa 2, clique em Configurações Gerais.
  2. Em seguida, ative a opção Largura Personalizada.
  3. Determine a nova largura.
  • Você pode alterar a cor de fundo, adicionar uma borda ao seu formulário e definir um raio de canto, que é o arredondamento da borda.
  • Clique no seu formulário para adicionar imagens, texto, spacers (espaçadores), personalizar o cabeçalho, os campos e o botão do formulário de inscrição.
  • No Formulário Incorporado, você pode adicionar quantos campos quiser, mas recomendamos mantê-lo simples.

Precisando de inspiração? Veja alguns formulários de inscrição que foram criados na Benchmark.

Voltar ao topo ↑


Pequenos Formulários Incorporados

Antes de prosseguir, é importante se atentar ao seguinte:

  • A largura depende de onde você decidir incluir o formulário de inscrição no seu site.
  • O Pequeno Formulário Incorporado coleta apenas endereço de email, nome e sobrenome.

Saiba como criar um formulário como este:

  1. Faça login na sua conta Benchmark.
  2. No painel principal, selecione Contatos.
  3. Depois disso, clique em Formulários de Inscrição no menu.
  4. No lado direito da página, clique no botão Criar Formulário de Inscrição.
  5. Selecione Pequeno Formulário Incorporado e depois clique em Próximo.
  6. Dê um nome para o seu formulário e selecione uma lista de contatos.
  7. Clique em Salvar & Próximo.
  8. Crie e edite o seu formulário.

Ao finalizar, clique em Salvar & Publicar. Em seguida, o código do formulário de inscrição aparecerá, selecione o tipo de código desejado (Javascript ou HTML), copie e então cole no seu site.

O que você pode personalizar

Como este é um formulário de tamanho compacto, ele é limitado a apenas 3 campos: O de primeiro nome, o de sobrenome e o campo de email. Este formulário não suporta imagens.

  • Você pode adicionar uma largura personalizada, se achar necessário. Apesar disso, não recomendamos fazer alterações na largura. Por padrão, o formulário ocupará 100% do espaço em que estiver incorporado.
  • Você pode alterar a cor de fundo, o cabeçalho, o estilo do botão.
  • No Formulário Incorporado, você pode adicionar quantos campos quiser, mas recomendamos mantê-lo simples.

Precisando de inspiração? Veja alguns formulários de inscrição que foram criados na Benchmark.

Voltar ao topo ↑


Como configurar o Pequeno Formulário Incorporado na horizontal

Os pequenos formulários incorporados permitem apenas 3 campos, que são Nome, Sobrenome e Endereço de Email, e é por isso que recomendamos alterar o código apenas deste modelo de formulário. Recomendamos também que você mantenha apenas dois campos. Se considerar necessário e o design de seu site ou página permitir, você pode habilitar também o campo de sobrenome.

Siga as etapas abaixo para configurar o Pequeno Formulário Incorporado na horizontal.

Começaremos na ferramenta de Formulário de Inscrição

Para criar o formulário horizontal, é necessário ter um pequeno formulário incorporado já criado.

  1. Quando a edição do formulário estiver concluída, você pode clicar em Salvar e Publicar.
  1. Confirme as alterações e, na janela popup, clique no menu suspenso e selecione a opção Código HTML.
  2. Clique na opção de Copiar. Ao clicar nesta opção, você copia o código inteiro.
  1. Feche a janela popup e retorne para o painel principal da Benchmark clicando no logo na parte superior esquerda.
O processo agora continuará dentro do nosso Editor de Código. Esta parte é opcional, você pode utilizar apenas um editor de textos.
  1. Agora, vá até a página com a lista de seus Emails.
  2. Clique no botão de Criar Novo Email e então selecione Envio Padrão.
  3. Parte importantíssima do processo: Selecione o EDITOR DE CÓDIGO.
  1. Defina um nome para o seu email, isso será apenas para fins de teste, já que você não vai enviar esta campanha. Quando terminar, recomendamos deletar o email ou deixar como está porque o código pode mudar.
  2. Não é necessário completar toda a checklist do email, vá diretamente para a opção de Design do Email.
  1. Substitua o texto pré-existente do editor na esquerda com o Código HTML que você copiou anteriormente do Pequeno Formulário Incorporado. Você então verá seu formulário à direita.

Não se preocupe com o rodapé neste momento, pois ele não será exibido quando você copiar seu código.

  1. Agora, use seu teclado para pesquisar os campos. Se você utiliza Mac, use Cmd + f, se usa Windows, utilize Ctrl + F.

Este é um exemplo do que exatamente estamos procurando:

  1. Digite na barra de pesquisa: fieldset OU o nome do campo (ex. Nome). Se você pesquisar por fieldset, você encontrará vários resultados, mas nós estamos procurando pelo seguinte texto:

<fieldset class=”formbox-field 

O primeiro seguido de: class=  

Você irá reconhecê-lo facilmente, já que ele contém o nome do campo. Observe a imagem acima, o nome do campo está destacado em azul.

  1. Agora podemos editar. ANTES da tag <fieldset, adicione o seguinte código (você pode copiar e colar):

<table><tr><td>

  1. Ao concluir, feche a tag adicionando o seguinte código no final:

</td>

Identifique onde está o final do campo ao visualizar esta tag: </fieldset>.

  1. Vá para o próximo campo e adicione antes da tag:

 <td> 

  1. Se você tiver mais um campo (campo de sobrenome), adicione o <td> no início e feche com </td>
  2. No final do seu último campo, feche com as tags:

 </td></tr></table>

  1. Você verá que seu formulário agora estará na horizontal, e então, por último, delete a largura (width).
  2. Vamos fechar a barra de pesquisa novamente e pesquisar pela seguinte largura:

width: 320px

Ao encontrar, DELETE esta parte do código, mas não apague nada além disso.

É assim que o código ficará no final:

Observe que destacamos em azul as tags adicionadas. Além disso, o atributo de largura foi removido e você já poderá visualizar o formulário na horizontal.

  1. E o formulário está pronto! Agora, copie todo o código e cole no seu site.

Se você for uma pessoa mais visual, siga as etapas descritas neste vídeo:

Voltar ao topo ↑


Formulários Pop-up

Esses formulários irão aparecer assim que um usuário visitar sua página. A página ficará acinzentada, dando destaque para a janela do formulário.

Como criar um formulário deste estilo:

  1. Entre na sua conta Benchmark e, na tela principal, selecione Contatos.
  2. Depois, selecione Formulários de Inscrição no menu.
  3. No lado direito da página, clique no botão Criar Formulário de Inscrição.
  4. Selecione Formulário Pop-up e clique em Próximo.
  5. Dê um nome ao seu formulário e selecione a lista de contatos.
  1. Clique em Salvar & Próximo.
  2. Crie e edite seu formulário de inscrição:
    • Você pode adicionar a mensagem de confirmação de inscrição clicando no botão de Configurações de Opt-In na parte superior da página.
    • Defina as configurações do seu pop-up clicando em Configurações Gerais, editando as opções disponíveis.
  3. When done click on Save & Publish.
  4. Ao concluir as modificações, clique em Salvar & Publicar.

Observação:

Por padrão, o Formulário Pop-up tem 400px de largura, com preenchimento de 40px à esquerda e à direita. A área máxima para a imagem é de 320px. No entanto, se a imagem ocupar toda a largura, você poderá alterá-la, se necessário.

O que você pode personalizar

Neste formulário, é possível personalizar mais do que apenas o formulário, por exemplo, também é possível editar a mensagem de sucesso. Lembre-se, este é um formulário que você define para aparecer numa pequena janela quando um novo visitante acessa o seu site. Embora você possa adicionar vários campos, sugerimos manter o formulário pop-up curto, assim você tem mais chances de conquistar inscritos.

  • Você pode escolher a posição em que o pop-up será exibido. A opção mais comum é utilizar o pop-up centralizado.
  • Você pode definir uma nova largura.

Para alterar a largura, siga as etapas abaixo:

  1. Na Etapa 2, clique em Configurações Gerais.
  2. Em seguida, selecione Configurações.
  3. Determine a nova largura.
  • Você também pode adicionar um efeito! Seu formulário pode surgir da esquerda, de cima, da direita, de baixo, expandir ao abrir ou esmaecer.
  • O tempo de espera significa que é possível escolher um atraso para que o formulário seja exibido, que pode ser de 0 a 60 segundos.
  • Semelhante aos outros formulários, você também pode personalizar cor, borda, raios do cantos e, para esse tipo de formulário, pode adicionar uma sombra, escolher a opacidade e o tamanho dela.
  • Os visitantes poderão fechar a janela pop-up, caso não estiverem interessados. Personalize a posição do ícone de fechar, a cor, o tipo do ícone, fundo, borda, etc.
  • Por padrão, a cor da sobreposição é preta e com 70% de opacidade. Esta sobreposição será o plano de fundo do seu formulário, quando ele for exibido. Você pode personalizar a cor, a opacidade ou mesmo desativá-la, caso queira. Recomendamos que você mantenha a sobreposição para dar ao formulário um impacto visual maior.
  • Clique no formulário para adicionar imagens, texto, espaçadores, personalizar o cabeçalho, os campos e o botão de inscrição.
  • No menu superior, à direita (Inscreva-se), clique na opção Sucesso para personalizar a mensagem. Você pode alterar a fonte, a cor, o texto e o fundo.

Precisando de inspiração? Veja alguns formulários de inscrição que foram criados na Benchmark.

Voltar ao topo ↑


O Formulário Pop-up aparece mais de uma vez para usuários já cadastrados?

Por padrão, nossos formulários pop-up são definidos para aparecer apenas quando um visitante ainda não se inscreveu na lista. Depois que ele se inscrever, o formulário pop-up não será exibido novamente. No entanto, se o visitante que retornar limpa o cache do navegador, usa uma janela anônima ou outro navegador, o formulário pop-up será exibido novamente.

Como definir um formulário pop-up para aparecer apenas uma vez?
  1. Na etapa de Design do seu formulário de inscrição, clique em Configurações Gerais.
  2. Em seguida, clique na opção Fechar.
  3. Depois, selecione a opção “Mostrar o pop-up apenas uma vez para os visitantes de seu site”.
  1. Para finalizar, clique em Salvar & Publicar.

Se o formulário de inscrição for utilizado em várias páginas, a regra de aparecer apenas uma vez ainda se aplicará.

Voltar ao topo ↑


O meu formulário pop-up pode ter um delay (tempo de atraso)?

Os formulários pop-up podem ser configurados para ter um pequeno delay (ou seja, um tempo de atraso para surgir na tela) quando um visitante entra em seu site ou em qualquer página em que estiver incluído. Você pode configurar um delay ao criar seu formulário de inscrição. Para saber como fazer isso, siga as seguintes instruções:

  1. Ir para um formulário popup existente.
  2. Clique em Configurações Gerais, no canto superior esquerdo, e então selecione Configurações da Caixa. Selecione o delay desejado no campo Tempo de Espera.

Você poderá continuar editando o seu formulário de inscrição e, ao concluir, clique na opção Salvar & Publicar.

Voltar ao topo ↑


Formulários de Terceiros

Crie formulários através de plugins integrados:

  • Facebook – Crie e adicione formulários de inscrição ao seu perfil ou página do Facebook.
  • Unbounce – Conecte seu formulário de inscrição a qualquer lista do Unbounce que desejar.
  • WordPress – Adicione formulários de inscrição ao seu site WordPress utilizando nosso plugin.
  • Twitter – Adicione facilmente o seu Formulário de Inscrição de Benchmark como um link no seu perfil do Twitter.

Voltar ao topo ↑


Caso tenha qualquer dúvida sobre este ou outro assunto, entre em contato com a nossa equipe de Suporte.