# Como criar um formulário no editor por Componentes

Objetivo: Ensinar como inserir e editar um formulário dentro do Construtor por Componentes.\
Para que serve: É essencial que em sua página de captura tenha um formulário para os contatos preencherem.&#x20;

Quanto mais personalizado e atraente ele for, maior será a chance do cadastro ser concluído.<br>

### Requisitos obrigatórios:&#x20;

1\. Ter uma página criada no Construtor por Componentes, o editor padrão de páginas da leadlovers.

2\. Se pretende inserir um Formulário Dinâmico, é necessário criar os [campos de captura](/paginas/chatbot/como-criar-campos-dinamicos-e-como-criar-formulario-dinamico.md) antes.

### Inserindo o formulário na página <a href="#inserindo-formulario" id="inserindo-formulario"></a>

Nº1– Na lateral direita do editor, vá até a aba “Conteúdo” e selecione a opção “Formulário”. Arraste-o até o local de sua página em que deseja posicioná-lo.

<figure><img src="https://legado.leadlovers.site/wp-content/uploads/2021/12/img01.png" alt=""><figcaption></figcaption></figure>

Nº2– Assim que ele for posicionado, clique em “Editar Formulário”.

<figure><img src="https://legado.leadlovers.site/wp-content/uploads/2021/12/img02.png" alt=""><figcaption></figcaption></figure>

### Como criar um Formulário Estático <a href="#formulario-estatico" id="formulario-estatico"></a>

Nº3– Se quiser que ele seja do tipo “Estático”, selecione a primeira opção na janela que abrir.

Nº4– Clique no botão “+” de acordo com o lugar em que deseja inserir o próximo campo. Por exemplo: se deseja que ele fique acima do formulário, selecione o “+” que fica na parte superior. É possível editar a posição mais tarde, se desejar.

<figure><img src="https://legado.leadlovers.site/wp-content/uploads/2021/12/img03-1.png" alt=""><figcaption></figcaption></figure>

Nº5– Na tela que abrir, escolha o campo que deseja adicionar ao formulário. Se quiser acrescentar mais de um, basta clicar no “+” novamente.

<figure><img src="https://legado.leadlovers.site/wp-content/uploads/2021/12/img04-1.png" alt=""><figcaption></figcaption></figure>

Nº6– Para alterar o local do campo, clique sobre o ícone de seta.

Nº7– Se deseja deixá-lo obrigatório, marque esta opção. É importante ressaltar que o campo “E-mail” sempre deve ser obrigatório nos formulários.

Nº8– Para remover, clique sobre o ícone de “X”.

Nº9– Salve as alterações.

<figure><img src="https://legado.leadlovers.site/wp-content/uploads/2021/12/img05-1.png" alt=""><figcaption></figcaption></figure>

Assim que salvar, você automaticamente será levado para a edição da página com o formulário já inserido nela. Mais adiante explicaremos todas as personalizações que é possível fazer nele.

### Como criar um Formulário Dinâmico <a href="#formulario-dinamico" id="formulario-dinamico"></a>

Nº10– Se deseja que o seu formulário seja dinâmico, selecione a segunda opção. Lembrando que quando ele é desse tipo, é necessário criar os[ campos de captura ](/paginas/chatbot/como-criar-campos-dinamicos-e-como-criar-formulario-dinamico.md)antes para que eles apareçam no editor.

Nº11– Clique no botão de “+” para adicionar um novo campo de acordo com o lugar em que deseja que ele fique localizado. Se quiser, você poderá alterar o posicionamento mais tarde.

<figure><img src="https://legado.leadlovers.site/wp-content/uploads/2021/12/img06-1.png" alt=""><figcaption></figcaption></figure>

Nº12– Escolha o campo que deseja adicionar ao formulário e selecione-o.

<figure><img src="https://legado.leadlovers.site/wp-content/uploads/2021/12/img07-1.png" alt=""><figcaption></figcaption></figure>

Nº13– Para alterar a sua posição, clique sobre o ícone de seta.

Nº14– Se deseja deixar o campo obrigatório, marque esta opção. Certifique-se de sempre marcá-la quando o campo for de e-mail.

Nº15– Clique em “Salvar”.

<figure><img src="https://legado.leadlovers.site/wp-content/uploads/2021/12/img08-1.png" alt=""><figcaption></figcaption></figure>

A seguir, ensinaremos quais são as edições possíveis de fazer no formulário após inseri-lo na página.

### Personalização do formulário <a href="#edicoes-formulario" id="edicoes-formulario"></a>

Quando terminar de criar o formulário, o mesmo aparecerá na edição da página. Basta clicar sobre ele para habilitar a sua personalização no menu lateral direito.

<figure><img src="https://legado.leadlovers.site/wp-content/uploads/2021/12/img09-1.png" alt=""><figcaption></figcaption></figure>

Logo no início do menu, há algumas opções disponíveis:

A– Clique aqui para retornar para a tela de edição do formulário.

B– Altere nesta barra a sua largura.

C– Escolha se deseja alinhá-lo à esquerda, no centro ou à direita.

D– Modifique nesta opção a fonte de seu formulário.

E– Se quiser, pode alterar também o seu tamanho.

[![](https://legado.leadlovers.site/wp-content/uploads/2021/12/img10-1.png)](https://legado.leadlovers.site/wp-content/uploads/2021/12/img10-1.png)

#### Elementos de Formulário <a href="#elementos-formulario" id="elementos-formulario"></a>

Além disso, há outros menus para personalizar. Adiante falaremos mais especificamente sobre cada um deles.

Manage Fields: Aqui você poderá administrar os campos do seu formulário.

Opções de Etiqueta: Nesta opção, é possível editar algumas características da etiqueta dele, ou seja, do nome do campo.

Opções de Campos: Ao expandir esse menu, você poderá alterar a estética de dentro dos campos.

Opções de Botões: É possível personalizar o estilo do seu botão clicando aqui.

[![](https://legado.leadlovers.site/wp-content/uploads/2021/12/img11.png)](https://legado.leadlovers.site/wp-content/uploads/2021/12/img11.png)

#### Manage fields <a href="#manage-fields" id="manage-fields"></a>

Neste menu, você pode alterar a ordem dos campos, editá-los ou excluí-los.

A– Segure e arraste esse ícone para reposicionar os campos de seu formulário.

B– Ao clicar aqui, é possível editar o campo específico. [A seguir explicaremos cada uma das opções disponíveis.](#editando-campos-especificos)

C– Para remover, basta clicar em “Excluir”.

D– Se quiser adicionar um novo, clique aqui.

[![](https://legado.leadlovers.site/wp-content/uploads/2021/12/img12.png)](https://legado.leadlovers.site/wp-content/uploads/2021/12/img12.png)

### **Editando campos específicos**

Ao clicar em “Edit”, abrirá um pop-up e nele você poderá fazer algumas personalizações.

A– Altere a etiqueta do campo (em outras palavras, o seu nome), se assim desejar.

B– Mantenha o tipo como está.

C– Aqui você pode alterar o texto que fica dentro do campo do formulário e indica o que deve ser preenchido.

D– Para deixá-lo como obrigatório, ative esta opção.

E– Se quiser que não seja possível preenchê-lo, marque aqui.

Certifique-se de salvar as alterações assim que concluí-las.

[![](https://legado.leadlovers.site/wp-content/uploads/2021/12/img13.png)](https://legado.leadlovers.site/wp-content/uploads/2021/12/img13.png)

### Opções de etiqueta <a href="#opcoes-etiqueta" id="opcoes-etiqueta"></a>

Aqui serão feitas todas as edições referentes à etiqueta do formulário, ou seja, ao texto que aparece por fora do campo e indica o que deve ser preenchido.

A– Altere aqui a cor do texto.

B– Escolha se a etiqueta ficará alinhada à esquerda, no centro ou à direita.

C– Modifique neste campo a distância entre as linhas.

D– Se quiser expandir o espaço entre as letras, altere este valor.

E– Deixe a fonte em negrito ou itálico.

F– Escolha se a etiqueta ficará ao lado ou acima do campo.

G– Caso escolha a opção “Lateral” na “Posição da etiqueta”, será possível alterar a largura entre o campo e a etiqueta.

[![](https://legado.leadlovers.site/wp-content/uploads/2021/12/img14.png)](https://legado.leadlovers.site/wp-content/uploads/2021/12/img14.png)

### Opções de Campos <a href="#opcoes-campos" id="opcoes-campos"></a>

Neste menu, a parte de dentro dos campos do formulário pode ser personalizada.

A– Altere a cor do texto de dentro do campo.

B– Também é possível mudar a cor do plano de fundo.

C– Aqui aumente o espaço dentro do campo.

D– Personalize o tamanho da borda e a sua estrutura, que pode ser sólida, pontilhada ou tracejada.

E– Para modificar o arredondamento da borda, altere este valor.

F– Escolha a cor que ficará ao redor do campo enquanto o mesmo estiver sendo preenchido.

[![](https://legado.leadlovers.site/wp-content/uploads/2021/12/img14.png)](https://legado.leadlovers.site/wp-content/uploads/2021/12/img14.png)

### Opções de Botões <a href="#opcoes-botoes" id="opcoes-botoes"></a>

Por fim, você poderá alterar a aparência do seu botão.

A– Altere aqui a sua largura.

B– Mude a cor do seu texto.

C– Personalize a sua cor de fundo.

D– Escolha se ele ficará alinhado à esquerda, no centro ou à direita.

E– Se quiser expandir o espaço entre as letras, altere aqui.

F– Nesta opção, aumente o espaço dentro do botão.

G– Para expandir o espaço ao redor dele, altere este valor.

H– Se quiser adicionar uma borda sólida, pontilhada ou tracejada, basta personalizar este campo.

I– Para alterar o arredondamento da borda, modifique este valor.

[![](https://legado.leadlovers.site/wp-content/uploads/2021/12/img15.png)](https://legado.leadlovers.site/wp-content/uploads/2021/12/img15.png)

Depois que terminar de personalizar, basta salvar a sua página e verificar o seu resultado final!

**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**!


---

# 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/construtores-leadlovers/construtor-de-paginas/componentes-como-criar-um-formulario-dentro-do-editor.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.
