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:
uma conta na systeme.io
um blog criado com a systeme.io
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".
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".
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:
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:
Você deve escolher o conteúdo do texto que será clicável.
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:
Como criar um blog com a systeme.io
Como criar um funil
Você vai precisar:
uma conta na systeme.io
um blog criado com a systeme.io
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:
Você deve escolher o conteúdo do texto que será clicável.
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:
Como criar um blog com a systeme.io
Como criar um funil
Atualizado em: 28/05/2025
Obrigado!