# Integração com Elementor Free

Ao criar um formulário na Aba 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 na sua máquina, 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](https://central.ajudaleadlovers.com/paginas/chatbot/como-criar-um-formulario-com-campos-estaticos) ou [dinâmico](https://central.ajudaleadlovers.com/chatbot/como-criar-campos-dinamicos-e-como-criar-formulario-dinamico#h_01fxamn0cjvezvwx3agbm8yj4w) criado aqui na leadlovers.

{% hint style="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.
{% endhint %}

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.

{% embed url="<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><img src="https://legado.leadlovers.site/wp-content/uploads/2020/09/formulrios-de-captura-teste-2-leadlove.png" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://legado.leadlovers.site/wp-content/uploads/2020/09/elementor.png" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://legado.leadlovers.site/wp-content/uploads/2020/09/denovo.png" alt=""><figcaption></figcaption></figure>

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

<figure><img src="https://legado.leadlovers.site/wp-content/uploads/2020/09/alalalal.png" alt=""><figcaption></figcaption></figure>

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.&#x20;

É 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://legado.leadlovers.site/wp-content/uploads/2020/09/insert.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.

{% hint style="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.
{% endhint %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://central.ajudaleadlovers.com/paginas/wordpress/integracao-com-elementor-free.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.