Como adicionar um formulário ou um pop-up ao seu blog da systeme.io

Neste artigo, veremos como configurar um formulário de contato no seu blog.

Você vai precisar:

Passo 1. Criar um formulário inline

Primeiro, você precisará criar um formulário de contato para seu funil de vendas.

Para fazer isso, vá até o seu Funil de Vendas, clique em "Adicionar etapa" (número 1 na imagem) e selecione "Formulário Inline" (número 2 na imagem).

Selecione um template de sua preferência, clicando em "Selecionar" (número 3 na imagem).

Acesse o editor da página de formulário, clicando no botão "Editar página", para personalizar seu formulário (número 4 na imagem).

Um formulário de contato deve conter no mínimo, um (1) "Campo de formulário", porém você pode inserir quantos campos desejar.

Selecione o item "Campo de formulário", clique no ícone de configurações do item e escolha o "Tipo de campo" que você deseja coletar.

Também será necessário predeterminar o botão que registrará a ação a ser realizada com o item coletado.

Não se esqueça de clicar em "Salvar alterações" antes de sair do editor do seu "Formulário inline".

Passo 2. Criar um formulário pop-up:

Vá até seu "Funil de Vendas", clique em "Adicionar etapa" para criar uma nova etapa (número 5 na imagem), depois escolha "Formulário Popup" (número 6 na imagem).

Selecione um template de sua preferência, clicando em "Selecionar" (número 7 na imagem).

Acesse o editor da página de formulário, clicando no botão " Editar página", para personalizar seu formulário (número 8 na imagem).

Um formulário de contato deve conter no mínimo, um (1) "Campo de formulário", porém você pode inserir quantos campos desejar.

Selecione o item "Campo de formulário", clique no ícone de configurações do item e escolha o "Tipo de campo" que você deseja coletar.

Também será necessário predeterminar o botão que registrará a ação a ser realizada com o item coletado.

É possível configurar um atraso para que o formulário de contato seja exibido na página do blog. Esse atraso pode ser ajustado usando o Editor.

O atraso a ser configurado é em segundos.

Não se esqueça de clicar em "Salvar alterações" antes de sair do editor do seu " formulário pop-up".

Passo 3. Configurando o formulário inline em seu blog:

Para configurar o formulário de contato em seu blog, você deve utilizar o "Script" e colar na página do seu blog.

A primeira etapa é retornar à "Configurações da etapa" do seu "Formulário inline e, em seguida, clicar em "Script".

Um pop-up será exibido contendo o código "Script" que está associado à página do seu "Formulário Inline"; clique em "Copiar link para a área de transferência".

Agora, você deve ir até o editor da página do blog, na qual deseja adicionar o formulário inline.

Adicione o elemento "Código HTML" em sua página do blog.

Acesse as configurações do elemento "Código HTML" e clique em "Editar código".

No pop-up que será exibido, remova o texto de exemplo e cole o "Script" obtido da página do seu formulário inline.

Certifique-se de clicar em "Salvar" para salvar o código HTML, e clique em "Salvar alterações" no editor para guardar as mudanças antes de sair da página do blog.

Ao clicar em "Pré-visualização" (no editor, ao lado do botão salvar), veremos a exibição do formulário:

Passo 4. Configurando o formulário pop-up em seu blog:

Ao criar um formulário de contato pop-up, há duas maneiras de exibi-lo em sua página do blog:

  • Como um popup que é exibido de acordo com a definição de tempo para sua exibição.
  • A partir de um texto que será clicável e configurado para abrir o pop-up.

Para a primeira opção, o método é o mesmo de quando você adiciona um formulário inline em um blog, portanto, explicaremos o segundo método em detalhes.

Para exibir o "formulário pop-up" após clicar em um texto, volte para a configuração da página no funil (seu "formulário pop-up") e clique em "Crie um link".

Um pop-up será exibido permitindo clicar em um link que abre o pop-up a partir de um texto:
  1. Você deve escolher o conteúdo do texto que será clicável.
  2. Você deve clicar em "Copiar link para a área de transferência".

Agora, volte ao editor da página do blog na qual você gostaria de adicionar seu pop-up.

Adicione um elemento "Código HTML" em sua página do blog e em seguida acesse as configurações do elemento HTML. 

Clique em "Editar código" e cole o "Script" dos links que abrem a página de formulário pop-up.

Certifique-se de clicar em "Salvar" para salvar o código HTML, e clique em "Salvar alterações" no editor para salvar sua página antes de sair do editor.

Ao clicar em "Pré-visualização" (no editor, ao lado do botão salvar), veremos a exibição do pop-up quando clicamos no texto "Clique aqui", conforme demonstrado abaixo:

Artigos úteis: