> ## Documentation Index
> Fetch the complete documentation index at: https://docs.gcvendas.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Formulários

> Crie e administre formulários para coletar leads.

## Como cadastrar um Formulário

1. No menu lateral, vá até a aba **Formulário**.

<img height="200" style={{ borderRadius:"0.5rem" }} src="https://mintcdn.com/gcvendas/idPUNjK6M6CBktdB/images/gestao/formularios/menu.png?fit=max&auto=format&n=idPUNjK6M6CBktdB&q=85&s=2904b6dbf6c410084ceecef53738f541" data-path="images/gestao/formularios/menu.png" />

2. Clique no botão **Adicionar formulários**.

<img height="200" style={{ borderRadius:"0.5rem" }} src="https://mintcdn.com/gcvendas/idPUNjK6M6CBktdB/images/gestao/formularios/add-form.png?fit=max&auto=format&n=idPUNjK6M6CBktdB&q=85&s=0b44f9cf10a4e3c346385b1b024a9eb4" data-path="images/gestao/formularios/add-form.png" />

3. Preencha as informações necessárias no formulário:

* **Título**, **Descrição**, **Cor** e **Texto do botão**: itens obrigatórios.

<img height="200" style={{ borderRadius:"0.5rem" }} src="https://mintcdn.com/gcvendas/idPUNjK6M6CBktdB/images/gestao/formularios/form.png?fit=max&auto=format&n=idPUNjK6M6CBktdB&q=85&s=9fc78d8bd008d2fba2c92c7cb6b0c221" data-path="images/gestao/formularios/form.png" />

4. Clique em **Salvar**.

Após o cadastro, o formulário será exibido automaticamente na tabela da página de **Formulários**.

***

# Como editar ou excluir um formulário

## Excluir um formulário

1. Vá até a página de **Formulários**.
2. Na tabela com a listagem dos formulários, clique no botão de **ações** e selecione a opção **Excluir**.

<img height="200" style={{ borderRadius:"0.5rem" }} src="https://mintcdn.com/gcvendas/idPUNjK6M6CBktdB/images/gestao/formularios/remove-form.png?fit=max&auto=format&n=idPUNjK6M6CBktdB&q=85&s=e469c9898341d4f77bf394c061d33cf2" data-path="images/gestao/formularios/remove-form.png" />

3. Se tiver certeza da exclusão, clique em **Excluir**.

<Warning>
  Ao fazer isso, você excluirá permanentemente o formulário.
</Warning>

***

## Editar um formulário

1. Na mesma tabela de **Formulários**, clique no botão de **ações** e selecione **Editar**.

<img height="200" style={{ borderRadius:"0.5rem" }} src="https://mintcdn.com/gcvendas/idPUNjK6M6CBktdB/images/gestao/formularios/edit-path.png?fit=max&auto=format&n=idPUNjK6M6CBktdB&q=85&s=1094d2f6172977ed35ac8c373a881878" data-path="images/gestao/formularios/edit-path.png" />

2. Um formulário será aberto com os mesmos campos utilizados no cadastro.

<img height="200" style={{ borderRadius:"0.5rem" }} src="https://mintcdn.com/gcvendas/idPUNjK6M6CBktdB/images/gestao/formularios/edit-form.png?fit=max&auto=format&n=idPUNjK6M6CBktdB&q=85&s=6c7b6d1e609b4879de91ddcd45ba2443" data-path="images/gestao/formularios/edit-form.png" />

3. Após fazer as alterações, clique em **Salvar**.

***

# Como incorporar o formulário no seu site

## O que é um iframe?

Um **iframe (inline frame)** é um recurso utilizado em sites que permite **inserir o conteúdo de uma página externa dentro da sua própria página**.

No caso do **GC Vendas**, ele permite exibir o formulário diretamente no seu site.

<Check>
  Assim que você adicionar o iframe no seu site, o formulário já estará pronto para uso e conectado ao GC Vendas.
</Check>

***

## Como copiar o iframe do formulário

1. Na tabela de **Formulários**, clique no botão de **ações**.
2. Selecione **Copiar iframe**.

<img height="200" style={{ borderRadius:"0.5rem" }} src="https://mintcdn.com/gcvendas/idPUNjK6M6CBktdB/images/gestao/formularios/iframe-path.png?fit=max&auto=format&n=idPUNjK6M6CBktdB&q=85&s=52e1ccf7cc7bf8378e8979b06b02f62a" alt="Copiar iframe" data-path="images/gestao/formularios/iframe-path.png" />

3. Será aberto o menu de personalização onde você pode configurar:

* **Visualização**
  * Responsividade
  * Cor de fundo
  * Altura do formulário
* **Código**
  * Visualizar como ficará o iframe antes de copiar.

<img height="200" style={{ borderRadius:"0.5rem" }} src="https://mintcdn.com/gcvendas/idPUNjK6M6CBktdB/images/gestao/formularios/iframe-edit.png?fit=max&auto=format&n=idPUNjK6M6CBktdB&q=85&s=e7d616ab6b7a2c7b0a534da9ce83f28c" alt="Personalizar iframe" data-path="images/gestao/formularios/iframe-edit.png" />

4. Após configurar, clique em **Copiar** e cole o código no seu site.

***

# Configurações avançadas do formulário

## URL de redirecionamento

Você pode configurar uma **URL de redirecionamento** para enviar o usuário para outra página após o envio do formulário.

Exemplo: [https://meusite.com/obrigado](https://meusite.com/obrigado)

### Comportamento

* Se o formulário estiver **em um iframe**, a **página que contém o iframe será redirecionada**.
* Se o formulário estiver **em uma página própria**, o redirecionamento ocorrerá na própria página.

***

## ID do botão (Button ID)

O **ID do botão** permite executar **ações personalizadas com JavaScript** após o envio do formulário.

Exemplos de ID: btn-download, btn-modal, btn-analytics

Com isso é possível:

* baixar arquivos automaticamente
* abrir modais
* enviar eventos para analytics
* executar automações

***

# Exemplo de iframe

```html theme={null}
<iframe
  src="https://gcvendas.com/formularios/SEU_FORM_ID?style=none"
  width="400"
  height="600"
  frameborder="0"
  title="Formulário de contato"
></iframe>
```

## Parâmetros

| Parâmetro     | Descrição               |
| ------------- | ----------------------- |
| `SEU_FORM_ID` | ID do formulário criado |
| `width`       | Largura do iframe       |
| `height`      | Altura do formulário    |
| `?style=none` | Remove estilo padrão    |

```js theme={null}
window.addEventListener("message", function(event) {
  if (event.data.type === "REDIRECT_URL" && event.data.url) {
    window.location.href = event.data.url;
  }
});
</script>
```

## Solução de problemas

### O formulário não aparece

Verifique:

* Se o **ID do formulário está correto**
* Se a URL possui `?style=none`
* Se há erros no console do navegador (F12)

## Resumo

Para utilizar formulários no seu site:

1. Crie o formulário no GC Vendas
2. Copie o **iframe**
3. Cole no seu site
4. (Opcional) configure redirecionamento ou ações com **Button ID**
