Como criar um widget de coleta de contatos

Um formulário de contato é uma ferramenta essencial para construir relacionamentos duradouros com os clientes. Com ele, você pode coletar endereços de e-mail, números de telefone, links de redes sociais ou quaisquer outros dados necessários para uma comunicação eficaz. Neste artigo, vamos mostrar como criar um widget na plataforma de forma fácil.

Criando um Widget

Acesse o menu Site → Widget, mini-landing.

Clique no botão + para criar um novo widget.

Digite o nome do widget e clique em Salvar.

Isso criará automaticamente um formulário básico com um campo de entrada de e-mail. Esse campo é obrigatório porque é usado para fazer login na plataforma como usuário.

Como o editor se parece:

• Seção central – exibe o formulário e sua aparência

• Painel esquerdo – elementos disponíveis para adicionar (botões, campos, imagens etc.)

• Painel direito – configurações de cada elemento selecionado

Essa interface permite alterar rapidamente a estrutura do formulário, adicionar novos campos e componentes e adaptá-lo aos seus objetivos.

Como Configurar Campos e Etapas no Formulário

Para configurar o formulário, clique nele para selecioná-lo.

Em seguida, clique em + Elemento na barra lateral esquerda. Escolha o tipo de campo desejado ou um elemento adicional.

Na lista, você pode adicionar não apenas campos de contato, mas também outros elementos funcionais:

• Botão – para acionar ações adicionais, como redirecionar para outra página

• Imagem – para design ou destaque visual

• Link – para adicionar redirecionamentos externos ou internos

• Temporizador – para limitar o tempo ou criar senso de urgência

• Redes sociais – botões com ícones do Facebook, Instagram, Telegram etc.

• HTML – insira seu próprio código

• Título e Descrição – para instruções ou explicações em texto

• YouTube e Vimeo – para vídeo incorporado

• Campos de contato (nome, telefone, cidade etc.)

Observação: Os campos adicionados ao formulário são salvos automaticamente no cartão do usuário no CRM. Você pode usar tanto campos padrão (nome, e-mail) quanto criar campos personalizados.

Se você precisar coletar dados adicionais que não estão incluídos no conjunto padrão, poderá criar campos personalizados nas configurações do CRM – mais sobre isso em um artigo separado.

Isso permite adaptar o formulário a tarefas específicas: coletar números de telefone, links de redes sociais, datas de reuniões, cargos, fontes de leads e qualquer outra informação relevante para sua interação com o cliente.

Formulários em Múltiplas Etapas: Por quê e Como?

Se o participante não precisar ser redirecionado para um pagamento ou outra página após concluir o formulário – por exemplo, se for apenas um formulário de coleta de contatos – você pode configurar uma segunda etapa no formulário.

Você pode adicionar até 2 etapas. Alterne entre elas para configurar separadamente o conteúdo de cada etapa.

Isso é útil ao exibir uma confirmação ou informações adicionais após a primeira etapa. A segunda etapa geralmente inclui uma mensagem curta como "Sua solicitação foi recebida", um botão "Fechar" ou um link para material adicional – por exemplo, um canal do Telegram ou um checklist.

Lógica: Aplicando os Dados do Formulário

Para configurar como os dados do formulário serão usados para a coleta de contatos, selecione o formulário na parte central do editor e vá para a seção Lógica no painel esquerdo.

Esta seção define o que acontece depois que um usuário clica no botão do formulário:

• Contato criado no CRM – Os dados do formulário criam automaticamente um novo contato no CRM da Kwiga.

• Acesso ao produto – Um contato é criado no CRM e, se o acesso for concedido a um curso ou produto, o usuário é autorizado e redirecionado para o pagamento ou para a página do curso.

• Negócio – Juntamente com a criação de um contato, um negócio é criado imediatamente no funil e na etapa especificados.

• Enviado para serviço externo – Usando um Webhook, os dados podem ser enviados para sistemas externos – como um CRM de terceiros, chatbot ou outro serviço.

Um recurso adicional de personalização é a marcação automática de novos contatos. Após enviar o formulário, o sistema pode atribuir tags específicas ao contato, simplificando a segmentação e a filtragem no CRM. Por exemplo, você pode rotular automaticamente os contatos por origem, interesse em um produto específico ou qualquer outro critério essencial para sua estratégia de marketing.

Após enviar o formulário, você pode escolher:

• Permanecer no bloco atual – Mostrar a segunda etapa do formulário com uma mensagem de confirmação

• Enviar para o perfil no Kwiga – Login automático e redirecionamento para o perfil do usuário

• Redirecionar para a página – Redirecionar para uma URL especificada

Nota: Você não precisa inserir um link de pagamento manualmente – isso é configurado automaticamente pela opção "Acesso ao produto".

Análises e rastreamento de eventos no FB

Ao preencher e enviar o formulário, o evento Lead é enviado por padrão. Para rastrear esse evento na sua conta do Facebook, você precisa instalar o Facebook Pixel no site onde o widget está colocado. Nenhuma configuração adicional é necessária. Nas configurações do formulário, você pode desativar o envio do evento ou substituí-lo por um personalizado selecionando TrackCustom.

Como instalar o Facebook Pixel:

• Se for uma mini landing page no Kwiga, você precisa adicionar o FB Pixel conforme descrito no artigo Conectando o FB Pixel a um projeto no Kwiga;

• Se você usa outro serviço, instale o FB Pixel de acordo com as recomendações desse serviço.

Além disso, se a integração com a Facebook Conversion API estiver ativada no Kwiga, quando um formulário for enviado pelo Kwiga, o evento também será enviado para a Conversion API.

Configuração de blocos e elementos do formulário

Além das configurações de lógica, o painel à direita oferece blocos adicionais para estilizar o formulário de acordo com as suas necessidades.

Configurações de margem:

• Cor do texto para rótulos, placeholders e texto de entrada

• Cores de fundo e borda

• Cor de foco

Configurações gerais

• Largura e altura (em pixels)

• Cor do loader e do fundo

• Configurações de borda

• Arredondamento dos cantos

• Uso e configuração de sombra

Configurações para desktop

Este bloco permite adaptar a aparência do formulário para telas maiores, garantindo alinhamento adequado e integração perfeita à sua página. As opções disponíveis incluem:

• Layout em linha – Alinhamento horizontal para formulários compactos

• Layout em grade – Uso de um sistema de grade flexível. Exemplo: 2fr 1fr significa que a primeira coluna é duas vezes mais larga que a segunda. Você pode definir tamanhos em fr (frações), px, ou %.

As linhas se ajustam automaticamente, mantendo o layout organizado independentemente do número de elementos.

Espaçamento entre elementos:

Ajuste o espaçamento interno entre os componentes do formulário para garantir legibilidade e evitar poluição visual.

Alinhamento:

Configurações extras permitem alinhar o formulário na página móvel – à esquerda, ao centro ou à direita – dependendo da sua escolha de design.

Preenchimento do bloco:

Isto controla o preenchimento interno e externo do bloco do formulário. Você pode definir separadamente os valores superior, inferior, esquerdo e correto para uma melhor integração ao seu layout.

Configurações gerais do widget e publicação

Depois que o formulário for criado e configurado, ele precisa ser preparado para publicação. No canto superior direito, clique em Configurações para encontrar opções importantes e finalizar seu widget.

Idioma do CTA – Esta configuração localiza os elementos de texto do seu formulário. Quando definida como Automático, o sistema determina o idioma do usuário com base nas configurações do navegador ou na geolocalização, proporcionando uma melhor experiência para um público global.

Ativar fundo para testes – Isso ajuda a visualizar a aparência do seu widget em um fundo que não seja branco. É útil para testes, mas observe que esse fundo é visível apenas no construtor, não no site publicado.

Usar em janela modal – Ative esta opção se você planeja mostrar o widget em um pop-up (por exemplo, após clicar em um botão).

Na aba Publicação, você pode copiar o código do widget para incorporá-lo diretamente à sua página.

Basta colar o código onde você quiser que o formulário apareça.

As instruções também estão disponíveis para adicionar o widget a criadores de sites populares, como Weblium, SendPulse ou Wix.

Graças às configurações flexíveis da plataforma, você pode criar um formulário perfeitamente adaptado às necessidades do seu negócio – desde a simples coleta de e-mails até cenários complexos de várias etapas com integração ao CRM e criação automática de negócios.