# Integração com Elementor Free

Ao criar um formulário na Opção Formulários de Captura, na leadlovers, irá gerar o formulário em código HTML. É possível inserir esse código HTML dentro das páginas criadas através do plugin Elementor, assim, todas as pessoas que se cadastrarem nesse formulário serão capturadas como leads no seu projeto, funil e sequência.

## **Antes de continuar você deve**

1. Ter o plugin [**Elementor**](https://br.wordpress.org/plugins/elementor/) instalado em seu [**WordPress**](https://wordpress.org/)
2. Ter o plugin [**Insert Headers and Footers**](https://br.wordpress.org/plugins/insert-headers-and-footers/) instalado em seu WordPress.
3. Ter um **Formulário de Captura** [estático](/paginas/chatbot/como-criar-um-formulario-com-campos-estaticos) ou [dinâmico](/paginas/chatbot/como-criar-campos-dinamicos-e-como-criar-formulario-dinamico) criado aqui na leadlovers.

:::warning
A ausência e/ou inserção incorreta dos respectivos códigos nos campos descritos neste tutorial, resultará em mal funcionamento do formulário. Todos os códigos devem ser inseridos.
:::

A seguir, você terá uma opção do passo a passo em vídeo. Em seguida, o mesmo passo a passo com texto e prints.

[▶️ Assista ao vídeo](https://www.loom.com/embed/ce8fe6f90e8b453594107c67e953c5b2)

## **Quais são os códigos do formulário estático de captura?**

Os formulários (Estático Padrão e Dinâmico) possuem três códigos:  CSS – código do formulário – JS . Conforme ilustração abaixo, respectivamente, são esses: primeiro, segundo e terceiro código.\
Códigos esses que devem ser inseridos cada um em seu devido campo dentro de sua página criada através do **WordPress**.

**Observação:** O formulário Estático Simples possui apenas 2 códigos: o CSS (configuração de layout) + o Código do Formulário. Mas, ambos podem ser inseridos juntos direto no corpo da página.

**IMPORTANTE:**\
Caso esteja utilizando o formulário estático do tipo Simples (sem script) faça apenas a parte de [Inserindo o código](#inserindo-o-codigo-do-formulario-na-pagina).\
Agora, se estiver usando o formulário estático do tipo Padrão (com script) ou o formulário Dinâmico realize também os passos da parte Inserindo scripts HEAD e BODY.

Você pode conferir as diferenças entre os formulários nesse artigo [**aqui**](https://suporte.love/criar-formulario-estatico/).

::figure{src="https://objectstorage.sa-saopaulo-1.oraclecloud.com/n/gryhpzkixl8s/b/assets/o/helpcenter%2Fgb-419d43e6cb6d6db2.png"}

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

::figure{src="https://objectstorage.sa-saopaulo-1.oraclecloud.com/n/gryhpzkixl8s/b/assets/o/helpcenter%2Fgb-c1b9c6a86aaa1e79.png"}

1. Após logar no **WordPress**, Acesse aba **páginas** > **todas as páginas**.
2.  Encontre a página em que o formulário está inserido e clique em “**Editar com Elementor**”

::figure{src="https://objectstorage.sa-saopaulo-1.oraclecloud.com/n/gryhpzkixl8s/b/assets/o/helpcenter%2Fgb-1dd048ab96e46dea.png"}

3. Após aparacer a página, no menu do canto esquerdo, arraste para a tela de edição o **widget Form.**

::figure{src="https://objectstorage.sa-saopaulo-1.oraclecloud.com/n/gryhpzkixl8s/b/assets/o/helpcenter%2Fgb-c1b087d6416a8ad2.png"}

4. Em seguida, clique no formulário.
5. No menu esquerdo, no campo código HTML, insira o **código do formulário** criado na leadlovers (**o segundo código**)
6. Salve.

**Observação:** Se você utiliza o formulário do tipo Estático Simples (sem script) o código CSS, o primeiro código, que ele possui pode ser inserido também direto no corpo da página junto ao corpo do formulário. 

É muito importante que a aplicação seja na ordem dos códigos: CSS primeiro e depois o restante.

### **Inserindo scripts HEAD e BODY pelo plugin Headers and Footers**

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

**6 –** Após [instalar o plugin **Insert Headers and Footers**](https://suporte.love/wordpress-plugin-scripts/), acesse, no menu lateral esquerdo, a aba **configurações**.

**7 –** Clique em **Insert Heanders and Footers**

**8 –** No campo **Scripts in Header**, insira o **primeiro código do formulário**, chamado de “**Arquivo CSS**“.

**9 –** No campo **Scripts in Footer**, insira o **terceiro código do formulário**, chamado de “**Arquivos JS**“

**10-** Salve.

:::info
Nos pop-ups nativos do plugin Elementor, os formulários estático do tipo Padrão (com script) e Dinâmico não funcionam.
:::