# Como inserir um formulário de captura no KlickPages

Objetivo: Mostrar como integrar a leadlovers com uma página criada na plataforma [KlickPages](https://klickpages.com.br/monteseuplano?utm_source=g-ads\&utm_medium=search\&utm_content=branding\&src=sale\&utm_term=klickpages\&utm_campaign=kp\&gclid=CjwKCAjw4rf6BRAvEiwAn2Q76qGisJAPj1cG7PsnIObekbSQm8X4GX1wfIDwAkEGhXD9gNwxuFD4PRoCz-wQAvD_BwE).\
Para quê serve: Ao criar um formulário na Opção Formulários de Captura do seu projeto na leadlovers é gerado um código HTML do mesmo.

&#x20;É possível inserir esse código dentro das páginas criadas na plataforma KlickPages. Dessa forma, todas as pessoas que se cadastrarem neste formulário serão capturadas como leads direto no seu projeto, funil e sequência.

Requisitos obrigatórios:&#x20;

1\. Ter acesso à criação de páginas no [KlickPages.](https://klickpages.com.br/monteseuplano/)&#x20;

2\. Ter um [Formulário de Captura ](/paginas/chatbot)do tipo Estático Simples (Sem Script) criado aqui na leadlovers.

Os formulários do tipo Estático Padrão (Com Script) e Dinâmico possuem três códigos: CSS – Código do Formulário – JS, ilustrados, respectivamente, como primeiro, segundo e terceiro código na imagem abaixo. Todos eles devem ser inseridos cada um em seu devido campo dentro de sua página para que o formulário funcione corretamente.

Já o formulário Estático Simples (Sem Script) possui apenas 2 códigos: CSS – Código do Formulário, que podem ser inseridos juntos direto no corpo da página, na ordem que são apresentados.

[![](https://objectstorage.sa-saopaulo-1.oraclecloud.com/n/gryhpzkixl8s/b/assets/o/helpcenter%2Fgb-f436b036febde2e0.png)](https://legado.leadlovers.site/wp-content/uploads/2020/09/Imagem0.png)

Para ter acesso a esses códigos, basta clicar no botão **“**&#x55;sar” no seu formulário. Copie todos eles e os salve para poder inseri-los na sua página, nos campos que indicarmos. Pode utilizar o Bloco de Notas para guardá-los, por exemplo.

[![](https://objectstorage.sa-saopaulo-1.oraclecloud.com/n/gryhpzkixl8s/b/assets/o/helpcenter%2Fgb-d9d2e3ea98f71712.png)](https://legado.leadlovers.site/wp-content/uploads/2020/09/Imagem1.png)

&#x20;****IMPORTANTE:****

* Na plataforma KlickPages, somente é possível inserir Formulário Estático Simples (Sem script). Os demais tipos de formulário podem apresentar mau funcionamento.
* Para que funcione corretamente, nesta plataforma o **c**ódigo CSS deve sempre ser inserido separadamente pelo menu **“**&#x53;cripts”, conforme ensinamos nos passos abaixo.

### Inserindo o código do formulário na página

Nº1– No KlickPages, encontre a página em que o formulário está inserido e clique em **“**&#x45;ditar”.

[![](https://objectstorage.sa-saopaulo-1.oraclecloud.com/n/gryhpzkixl8s/b/assets/o/helpcenter%2Fgb-492192a19c7ab4ab.png)](https://legado.leadlovers.site/wp-content/uploads/2020/09/Imagem2.png)

Por padrão, as páginas de captura do KlickPages já tem um formulário. Clique duas vezes em cima dele para editar.&#x20;

Será evidenciado um menu lateral de configurações.

Nº2– No menu esquerdo, clique no ícone de carta.

Nº3– Em **“**&#x4E;ome”, insira um título de identificação para sua configuração

Nº4– Abaixo selecione **“**&#x49;mportação de Formulário”.

Nº5– Em seguida, insira o **“**&#x43;ódigo do Formulário” criado na leadlovers (o segundo código).

Nº6– Salve as alterações.

[![](https://objectstorage.sa-saopaulo-1.oraclecloud.com/n/gryhpzkixl8s/b/assets/o/helpcenter%2Fgb-8b4eeb434cdde738.png)](https://legado.leadlovers.site/wp-content/uploads/2020/09/Imagem3.png)

### Inserindo o código CSS na página

O campo de CSS do formulário deve ser inserido em um local próprio para aplicação de códigos adicionais. Para isso, siga os passos abaixo.

Nº7– No menu lateral clique sobre o ícone de engrenagem **“**&#x43;onfigurações Avançadas”.

Nº8– Feito isso, abrirá um menu com algumas opções. Selecione **“**\</> Scripts”.

[![](https://objectstorage.sa-saopaulo-1.oraclecloud.com/n/gryhpzkixl8s/b/assets/o/helpcenter%2Fgb-4515cc73bd98fdf3.png)](https://legado.leadlovers.site/wp-content/uploads/2020/09/Imagem5.png)

Nº9– Iremos inserir o código no **“**&#x48;EAD”.

Nº10– Clique em **“**&#x41;dicionar Script no Head”.

[![](https://objectstorage.sa-saopaulo-1.oraclecloud.com/n/gryhpzkixl8s/b/assets/o/helpcenter%2Fgb-25fb7b8afb8d388a.png)](https://legado.leadlovers.site/wp-content/uploads/2020/09/Imagem6.png)

Nº11– Escolha um nome, somente para segmentação. Sugerimos: “CSS Formulário leadlovers”.

Nº12– Aqui basta inserir o primeiro código do formulário, chamado de **“**&#x41;rquivo CSS”.

Nº13– Salve essas configurações.

[![](https://objectstorage.sa-saopaulo-1.oraclecloud.com/n/gryhpzkixl8s/b/assets/o/helpcenter%2Fgb-22a5ad3413acc5d7.png)](https://legado.leadlovers.site/wp-content/uploads/2020/09/Imagem7.png)

Nº14– Feito isso basta salvar.

Nº15– E depois publicar sua página.

[![](https://objectstorage.sa-saopaulo-1.oraclecloud.com/n/gryhpzkixl8s/b/assets/o/helpcenter%2Fgb-942ee356522acfca.png)](https://legado.leadlovers.site/wp-content/uploads/2020/09/Imagem8.png)

O formulário será inserido nela conforme o exemplo da imagem:

[![](https://objectstorage.sa-saopaulo-1.oraclecloud.com/n/gryhpzkixl8s/b/assets/o/helpcenter%2Fgb-011bde384458fb04.png)](https://legado.leadlovers.site/wp-content/uploads/2020/09/Imagem9.png)

**Suporte**

Se surgir qualquer dúvida ou situação, ou se precisar de qualquer ajuda durante este procedimento, por favor, entre em contato com o nosso suporte!
