Introdução
Formulários são elementos essenciais para coletar informações dos visitantes em suas páginas na Rockty. Neste tutorial, vamos mostrar como você pode estilizar e configurar formulários, desde ajustes básicos até personalizações avançadas.
1. Como adicionar Formulários:
Para adicionar Formulários à sua página na Rockty, siga estes passos:
A. Adicione um novo elemento em sua página.
B. Selecione o elemento 'Form' na lista de opções disponíveis no menu lateral esquerdo.
💡 Dica: Caso precise de mais detalhes sobre como adicionar elementos, confira nosso tutorial Gerenciando Elementos na Rockty: Adicionar, Excluir e Personalizar para orientações iniciais.
2. Configurações do Formulário:
Para acessar as configurações de um elemento, clique no ícone de engrenagem do elemento ou clique com o botão direito do mouse sobre o elemento para abrir o menu de opções. Isso disponibilizará todas as possibilidades de configuração que veremos neste tutorial.
3. Ajustes
A. Visibilidade: Configure a visibilidade do formulário para Desktop, Tablet e Mobile. Clique no ícone correspondente para ocultar ou mostrar o formulário em cada dispositivo. Para reexibir um formulário oculto, clique novamente no ícone do dispositivo desejado.
B. Nome: Cada formulário deve ter um nome único.
📌 Nota: Isso é crucial para o formulário funcionar corretamente, especialmente se houver múltiplos formulários na mesma página.
C. Integração: Escolha entre várias opções de integração que disponibilizamos. Acesse nossos tutoriais específicos para cada integração clicando aqui.
📌 Importante: Para que o formulário funcione corretamente, é necessário integrar com alguma das opções disponibilizadas.
D. Esconder Campos Ocultos em Modo de Edição: Essa configuração permite que você edite o layout e outros campos do formulário com mais facilidade, sem a interferência visual dos campos ocultos (quando houver).
4. Configuração dos Campos
A. Campos: Adicione e configure os campos do seu formulário. Cada campo deve ser previamente criado na sua ferramenta de e-mail marketing para garantir que os dados sejam capturados corretamente.
B. Tipo: Selecione o tipo de campo (e-mail, texto, telefone, etc.) conforme configurado na sua plataforma de e-mail marketing.
C. Nome: Mapeie o campo ao nome correspondente na sua ferramenta de e-mail marketing.
📌 Nota: Isso é crucial para que o formulário funcione corretamente.
D. Texto de Exibição e Descrição: Adicione textos descritivos acima e dentro dos campos do formulário.
E. É Requerido: Marque a opção se o preenchimento do campo for obrigatório.
Botão de Submissão (Submit Button):
O botão de submeter é gerado automaticamente quando um formulário é adicionado à página. Além de configurar o texto do botão, você pode definir a ação a ser tomada após a submissão do formulário. As opções são:
A. Nenhuma Ação: O formulário será submetido sem redirecionamento.
B. Abrir Link Externo: Insira uma URL para direcionar o usuário após a submissão do formulário.
Opções de Parâmetros de URL:
Repassar Parâmetros: Repassa parâmetros capturados (como UTM) para a próxima página.
Pré-popular Campos: Preenche automaticamente os campos em uma página de checkout, facilitando para o usuário não precisar preencher os mesmos dados novamente.
📌 Para detalhes sobre como configurar parâmetros de UTM e campos ocultos na Rockty, consulte nosso tutorial clicando aqui.
C. Ir para Página no Funil: Selecione uma página do funil para redirecionar o usuário após a submissão.
Opções de Parâmetros de URL:
Repassar Parâmetros: Repassa parâmetros capturados (como UTM) para a próxima página.
Pré-popular Campos: Preenche automaticamente os campos em uma página de checkout.
📌 Para detalhes sobre como configurar parâmetros de UTM e campos ocultos na Rockty, consulte nosso tutorial clicando aqui.
D. Fechar Pop-up: Se o formulário estiver em um pop-up, selecione esta opção para fechá-lo após a submissão e continuar na página.
💡 Dica: Essas opções permitem que você configure a ação desejada após a submissão do formulário, melhorando a experiência do usuário e a integração com outras páginas ou ferramentas.
5. Estilização do Formulário
📌 Observação: Todas as opções de estilização a seguir são válidas tanto para o formulário quanto para o botão de submeter, mas cada um deve ser configurado separadamente.
A. Cor de Fundo: Escolha a cor de fundo ou configure um gradiente.
B. Borda, Sombra e Radial: Adicione bordas, sombras e efeitos radiais.
C. Tipografia: Ajuste a fonte, tamanho e cor do texto dentro dos campos e do botão.
D. Posição: Ajuste a posição, largura, altura, margem e espaçamento interno do formulário e do botão de submeter.
🚨 Importante: Lembre-se de fazer essas edições de forma individual para o formulário e para o botão.
6. Configurações Avançadas
A. Efeitos de Movimento – Animação: Adicione animações aos formulários e botões, configurando o comportamento, ativação, duração e atraso da animação.
B. CSS Classes: Configure CSS personalizado para o formulário. Para mais informações sobre CSS Classes, consulte nosso tutorial dedicado aqui.
7. Edição e Adição de Campos
Use os ícones na linha vermelha visível ao passar o mouse sobre os campos e botões para:
Lixeira: Remover campos ou botões.
Engrenagem: Acessar configurações detalhadas dos campos e botões.
Setas: Mover os campos e botões para cima ou para baixo.
+: Adicionar novos campos ou parâmetros ao formulário.
Conclusão
Agora você sabe como configurar e estilizar formulários na Rockty. Desde ajustes básicos até personalizações avançadas, você tem as ferramentas necessárias para criar formulários que atendem às suas necessidades.
Dicas Adicionais
Verifique os Campos Obrigatórios: Certifique-se de marcar corretamente os campos obrigatórios para evitar que os usuários enviem formulários incompletos.
Teste o Formulário: Sempre teste o formulário em diferentes dispositivos e navegadores para garantir que ele funcione corretamente em todos os cenários.
Otimização para Dispositivos Móveis: Verifique se o formulário é responsivo e acessível em dispositivos móveis, considerando o layout e a usabilidade.
Considere a Experiência do Usuário: Mantenha o formulário simples e direto, evitando campos desnecessários que possam desmotivar o usuário a completá-lo.
Integração com Ferramentas Externas: Garanta que a integração com a ferramenta de gestão de dados externa esteja configurada corretamente para que os dados sejam capturados e processados de maneira adequada.
Precisa de Ajuda?
Se tiver dúvidas ou precisar de suporte adicional, nossa equipe de suporte está à disposição para ajudar você!