Em caso de dúvidas sobre como adicionar um formulário em suas páginas, acesse nosso tutorial sobre como funciona as configurações gerais de elementos no link abaixo:
Para configurar um formulário acesse a engrenagem do elemento (conforme indicado na imagem abaixo) para disponibilizar as possibilidades de configuração que veremos nesse tutorial.
Ajustes
Visibilidade
Nas configurações de ajustes é possível configurar a visibilidade do formulário. Clicando no ícone que representa cada versão Desktop | Tablet | Mobile é possível ocultar ou mostrar o formulário em cada um desses dispositivos. Para voltar a mostrar o formulário que foi ocultado, basta clicar novamente no ícone do dispositivo desejado.
Nome
Todo formulário deve ter um nome único configurado.
Atenção: No caso de ter mais de um formulário na página, cada formulário deve ter um nome único e cada formulário deve ter seu respectivo botão com seu nome selecionado na ação de submeter o formulário para que funcione corretamente.
Integração
Ao clicar no campo Integração será disponibilizado uma lista com as opções possíveis de integração conforme listado abaixo:
Active Campaign | MailChimp | GetResponse | Rd Station | Piperun | Custom Form | Webhook
Acesse os links a seguir para acessar nossos tutoriais específicos sobre cada uma das integrações:
Active Campaign > https://help.rockfunnels.com/pt-BR/articles/6890869-como-integrar-o-active-campaign-com-o-rockfunnels
GetResponse > https://help.rockfunnels.com/pt-BR/articles/8970235-como-integrar-o-rockfunnels-com-o-getresponse
MailChimp > https://help.rockfunnels.com/pt-BR/articles/6891404-como-integrar-o-mailchimp-com-o-rockfunnels
PipeRun > https://help.rockfunnels.com/pt-BR/articles/6891163-como-integrar-o-piperun-com-o-rockfunnels
RD Station > https://help.rockfunnels.com/pt-BR/articles/6890841-como-integrar-o-rockfunnels-com-o-rd-station
Custom Form > https://help.rockfunnels.com/pt-BR/articles/6891486-o-que-e-integracao-por-formulario-customizado-e-como-faze-la
Webhook > https://help.rockfunnels.com/pt-BR/articles/6891412-o-que-e-a-integracao-por-webhook-e-como-faze-la-formularios
Campos
Em ‘Campos’ serão apresentados os campos adicionados ao seu formulário.
Importante: Os campos que adicionar ao seu formulário no RockFunnels precisam ter sido previamente criados na ferramenta de e-mail marketing que utilizar para que o formulário funcione corretamente. Esse etapa é muito importante para indicar à ferramenta de e-mail marketing qual campo capturado no RockFunnels deve ser atribuído ao campo correspondente na ferramenta de e-mail.
Estará disponível também o botão para submeter o formulário, que agora, por padrão, é gerado automaticamente quando se insere um elemento de cadastro (formulário) em suas páginas.
Em frente de cada campo e botão está disponível um ícone em formato de lixeira que ao clicado irá remover o respectivo campo ou botão.
Primeiro veremos as possibilidades de configuração dos campos. Para acessá-las, clique em cada campo do seu formulário.
Veja na imagem abaixo que vamos usar o campo E-mail, como exemplo, porém as mesmas configurações são aplicadas para outros campos do seu formulário.
1. Tipo
Em ‘Tipo’ poderá selecionar o tipo do campo de acordo com o criado na plataforma de e-mail marketing que utiliza.
Importante: O tipo do campo precisa ser associado corretamente ao tipo criado na ferramenta de e-mail marketing para que o formulário funcione corretamente.
Exemplos:
Campo de e-mail associado ao tipo email;
Campo de nome associado ao tipo text;
Campo de data associado ao tipo date;
2. Nome
Opção para associar/mapear o campo ao nome dado a ele na plataforma de e-mail marketing que utiliza.
Importante: Essa configuração é crucial para que o formulário funcione corretamente. O campo precisa ser associado/mapeado corretamente de acordo com o que foi criado na ferramenta de e-mail marketing utilizada.
Exemplo: Campo de E-mail do formulário da sua página associado ao campo E-mail criado na ferramenta de e-mail marketing.
Atenção: Para integrações realizadas através de formulário customizado (Custom Form), o campo 'Nome' não pode ser alterado, devendo ser mantido com o nome gerado automaticamente na integração para que funcione corretamente.
3. Texto de exibição
Opção para inserir um texto acima do campo no formulário.
4. Descrição
Opção para inserir um texto dentro do campo do formulário.
5. É requerido
Ao ativar a chave, o preenchimento do campo será obrigatório para que o formulário possa ser submetido, para desativar, clique na chave novamente.
Submit Button
Agora veremos as configurações do botão de submeter/submit button que agora é gerado automaticamente quando um formulário é adicionado a sua página, e por padrão, já é configurado com a ação de submeter o formulário conforme veremos adiante nesse tutorial.
Ao clicar em Submit Button, será disponibilizado as seguintes opções de configuração:
Ajustes
Texto do botão
No campo poderá definir o texto que deseja que fique visível no botão.
Após Submeter:
Por padrão os formulários já são gerados com um botão configurado para submeter o formulário, sendo necessário apenas definir se deseja configurar uma ação após o formulário ser submetido.
As opções de ação disponíveis para configurar após o formulário ser submetido são:
Nenhuma ação:
O formulário é submetido, mas não ocorrerá nenhuma ação de redirecionamento.
Abrir Link Externo:
Nessa opção é possível inserir uma URL para onde deseja que a pessoa seja direcionada após clicar no botão de submeter o formulário.
Importante: Caso esteja captando parâmetros de UTM, ative a chave. Para desativar, basta clicar na chave novamente.
Ir para página no funil:
Nessa opção é possível selecionar uma página do funil para qual deseja direcionar a pessoa após clicar no botão de submeter o formulário.
Importante: Caso esteja captando parâmetros de UTM, ative a chave. Para desativar, basta clicar na chave novamente.
Fechar Pop-up:
Caso tenha inserido o formulário em um Pop-Up e deseja que após o preenchimento do formulário, o Pop-up seja fechado para a pessoa continuar na página, selecione essa opção e container onde está o Pop-up.
Posição
Nas configurações de “Posição” é possível configurar a posição do botão, tamanho, margem (topo) e espaçamento interno (topo, baixo, esquerda, direita), inserindo um valor manualmente na caixa representada pelo número ou ajustando a barra conforme desejado.
Atenção: Recomendamos não utilizar margens negativas, pois elas podem gerar conflitos com outros elementos da página. Se for usar para deslocar algum elemento de forma intencional, use com moderação e evite margens negativas com valores muito grandes.
Estilo
Cor de fundo
Nas configurações de estilo é possível configurar a cor de fundo do formulário utilizando a paleta de cores ou inserindo o código HEX da cor desejada. Também é possível configurar a cor gradiente, definindo uma orientação para a cor de fundo do formulário.
Borda | Sombra | Radial
Nas configurações de estilo é possível configurar borda ou sombra no formulário. Para isso basta ativar as respectivas chaves que será habilitada a possibilidade de inserir cor, ajustar o tamanho, deslocamento e esfumaçar.
Para ativar o radial basta ativar a respectiva chave e configurar os valores de radial conforme desejado.
Tipografia
Família da Fonte
Todas as fontes do Google Fonts estão disponíveis para seleção nesse campo.
Estilo
Escolha o estilo da fonte entre as opções Light, Regular, Medium, Bold e Black.
Cor
Nas configurações de estilo é possível configurar a cor da fonte utilizando a paleta de cores ou inserindo o código HEX da cor desejada. Para remover a cor clique no ícone de lixeira a frente do HEX da cor
Texto do botão
É possível ajustar o tamanho do texto inserindo um valor manualmente na caixa representada pelo número ou ajustando a barra conforme desejado.
Avançado
Efeitos de movimento – Animação
Nas configurações avançadas é possível configurar efeitos de movimento/animação nos formulários. Basta selecionar um dos efeitos da lista, conforme desejado. Para excluir uma animação clique no ícone em formato de lixeira a frente do nome da animação.
Quando uma animação é selecionada será disponibilizado a possiblidade de configurar algumas ações relacionado ao comportamento da animação, conforme abaixo:
Comportamento:
Uma vez: o efeito de animação será apresentado apenas uma vez.
Infinito: o efeito de animação irá ser apresentado enquanto o usuário estiver na página.
Ativação:
Animação de entrada > ao acessar a página o botão começará a ter o efeito de animação selecionado.
Ao passar o mouse > A animação só acontecerá quando o cursor do mouse passar pelo formulário.
Duração: É possível configurar a velocidade da animação entre “normal”, “devagar” ou “rápido”.
Atraso: É possível configurar um atraso no formulário, ou seja, o formulário irá aparecer na tela após o tempo de atraso configurado. Valores até 1000 segundos podem ser inseridos na caixa representada pelo número ou através das setas < >.
CSS Classes
Nas configurações avançadas é possível configurar CSS para o formulário. O recurso é útil para ativar recursos de estilo através de código utilizando o elemento de Script.
É necessário inserir um nome para o CSS no campo “Insira ou Selecione” e através do elemento de Script utilizar essa referência de nome inserindo o código relacionado ao CSS Classes que deseja aplicar.
Outro recurso importante disponível para adicionar e editar os campos e botão do seu formulário é a linha vermelha que fica visível ao passar o mouse sobre os campos e botão.
Na linha vermelha estão disponíveis os seguintes ícones conforme ilustrados na imagem abaixo:
1. Lixeira
Para remover um campo ou botão, clique no ícone de lixeira.
2. Engrenagem
Para acessar as configurações dos campos ou botão conforme indicados no passo anterior do tutorial, clique na engrenagem.
3. Setas
Para movimentar os campos/botão para cima/baixo, clique nas setas.
4. +
Ao clicar no ícone + será disponibilizado na lateral da página uma janela (imagem abaixo) onde poderá selecionar campos padrões que deseja adicionar ao seu formulário:
Também estarão disponíveis para adicionar ao seu formulário, campos ocultos e parâmetros de UTM.
Acesse nosso tutorial sobre configuração dos parâmetros de UTM e campos ocultos clicando no link abaixo:
Finalizado a configuração dos campos e botão iremos retornar as configurações gerais disponíveis na engrenagem do elemento de formulário conforme veremos a seguir:
Posição
Nas configurações de “Posição” é possível configurar a posição do formulário, largura, altura, margem (topo) e espaçamento interno (topo, baixo, esquerda, direita), inserindo um valor manualmente na caixa representada pelo número ou ajustando a barra conforme desejado.
Atenção: Recomendamos não utilizar margens negativas, pois elas podem gerar conflitos com outros elementos da página. Se for usar para deslocar algum elemento de forma intencional, use com moderação e evite margens negativas com valores muito grandes.
Estilo
Cor de fundo
Nas configurações de estilo é possível configurar a cor de fundo do formulário utilizando a paleta de cores ou inserindo o código HEX da cor desejada. Também é possível configurar a cor gradiente, definindo uma orientação para a cor de fundo do formulário.
Borda | Sombra | Radial
Nas configurações de estilo é possível configurar borda ou sombra no formulário. Para isso basta ativar as respectivas chaves que será habilitada a possibilidade de inserir cor, ajustar o tamanho, deslocamento e esfumaçar.
Para ativar o radial basta ativar a respectiva chave e configurar os valores de radial conforme desejado.
Tipografia
Estilo da fonte (Label)
É possível ajustar o tamanho da fonte do texto acima dos campos do formulário inserindo um valor manualmente na caixa representada pelo número ou ajustando a barra conforme desejado.
Também é possível configurar a cor da fonte utilizando a paleta de cores ou inserindo o código HEX da cor desejada. Para remover a cor clique no ícone em formato de lixeira.
Estilo da fonte (Campo)
É possível ajustar o tamanho da fonte do texto dentro dos campos do formulário inserindo um valor manualmente na caixa representada pelo número ou ajustando a barra conforme desejado.
Também é possível configurar a cor da fonte utilizando a paleta de cores ou inserindo o código HEX da cor desejada. Para remover a cor clique no ícone em formato de lixeira.
Importante: A cor configurada será aplicada apenas no texto digitado dentro do campo.
Avançado
Efeitos de movimento – Animação
Nas configurações avançadas é possível configurar efeitos de movimento/animação nos formulários. Basta selecionar um dos efeitos da lista, conforme desejado. Para excluir uma animação clique no ícone em formato de lixeira a frente do nome da animação.
Quando uma animação é selecionada será disponibilizado a possiblidade de configurar algumas ações relacionado ao comportamento da animação, conforme abaixo:
Comportamento:
Uma vez: o efeito de animação será apresentado apenas uma vez.
Infinito: o efeito de animação irá ser apresentado enquanto o usuário estiver na página.
Ativação:
Animação de entrada: Ao acessar a página o botão começará a ter o efeito de animação selecionado.
Ao passar o mouse: A animação só acontecerá quando o cursor do mouse passar pelo formulário.
Duração: É possível configurar a velocidade da animação entre “normal”, “devagar” ou “rápido”.
Atraso: É possível configurar um atraso no formulário, ou seja, o formulário irá aparecer na tela após o tempo de atraso configurado. Valores até 1000 segundos podem ser inseridos na caixa representada pelo número ou através das setas < >.
CSS Classes
Nas configurações avançadas é possível configurar CSS para o formulário. O recurso é útil para ativar recursos de estilo através de código utilizando o elemento de Script.
É necessário inserir um nome para o CSS no campo “Insira ou Selecione” e através do elemento de Script utilizar essa referência de nome inserindo o código relacionado ao CSS Classes que deseja aplicar.
Para mais detalhes sobre o CSS Classes, acesse nosso tutorial dedicado a esse recurso no link a seguir:
https://help.rockfunnels.com/pt-BR/articles/6891608-como-funciona-a-configuracao-css-classes-no-rockfunnels
Em caso de dúvidas, contate nossa equipe de suporte.