# Criar um formulário

> Use o editor de formulários para adicionar etapas, textos, imagens, botões e campos de entrada, definir o estilo do formulário, visualizá-lo em cada dispositivo e publicá-lo quando as verificações passarem.

O editor de formulários é um editor em tela cheia em que você desenha o que os visitantes veem: uma ou mais etapas de formulário, uma etapa de sucesso, todos os blocos delas e os estilos do formulário. Esta página percorre cada parte do editor e as verificações em que um formulário precisa passar antes de você poder publicá-lo.

## Antes de começar

- Os formulários estão em acesso antecipado. Consulte [Formulários](/pt/docs/forms/) se o recurso não estiver disponível no seu workspace.
- Crie o formulário em **Email Marketing → Forms** com **Create form**, informando um **Name** e um **Type**.

## Abrir o editor

Na página do formulário, selecione **Edit form**. O editor abre sobre o painel:

- **Cabeçalho:** o nome do formulário (selecione-o para renomear), o selo **Draft** ou **Live**, um indicador **Unsaved** quando há alterações, **Undo** e **Redo**, um botão por etapa, **Add step**, **Publish**, **Save** e o botão de fechar.
- **Canvas:** uma prévia ao vivo da etapa selecionada. Alterne entre **Desktop**, **Mobile** e **Both**, confira o tamanho do formulário, ajuste o zoom com **Scale** e selecione **Reset canvas** para centralizá-lo de novo.
- **Painel lateral:** as abas **Content** e **Styles**, e **Alerts & checks** na parte inferior.

Selecione **Save** para manter as suas alterações. Salvar um formulário publicado também o atualiza no seu site.

## Etapas

Um formulário novo tem duas etapas: **Step 1**, com um texto “Join our list”, um campo **Email** e um botão **Subscribe**, e uma etapa **Success** que diz “Thanks for subscribing!”.

- **As etapas de formulário** contêm os campos que os visitantes preenchem. Selecione **Add step** (o botão de mais no cabeçalho) para adicionar outra etapa de formulário. As novas etapas ficam antes da etapa de sucesso.
- **A etapa de sucesso** aparece depois que o visitante envia o formulário. Use-a para agradecer, apontar para algum lugar ou oferecer um código de desconto.
- **Navegue entre as etapas** com botões. Um botão **Next step** valida a etapa atual e mostra a próxima. Um botão **Submit** valida a etapa, envia a resposta e mostra a etapa de sucesso.

Selecione o botão de uma etapa no cabeçalho para editá-la no canvas.

## Adicionar blocos

Na aba **Content**, selecione um bloco para adicioná-lo à etapa atual. Para inserir um bloco em um lugar específico, passe o cursor sobre o canvas entre dois blocos e selecione o botão de mais. Arraste os blocos para reordená-los e selecione um bloco para editar as configurações dele. **Delete** fica no topo das configurações de cada bloco.

| Grupo | Bloco | Use para |
| --- | --- | --- |
| **Elements** | **Text** | Títulos e parágrafos, com negrito, itálico, links e emoji. |
| | **Button** | Enviar, ir para a próxima etapa, fechar o formulário ou abrir um link. |
| | **Image** | Um logo, uma foto de produto ou uma imagem de banner, com link opcional. |
| **Inputs** | **Email** | O endereço de e-mail do visitante. O formato é validado. |
| | **Text input** | Qualquer texto curto, como um nome ou uma empresa. |
| | **Phone** | Um número de telefone. O formato é validado. |
| | **Radio** | Uma escolha em uma lista. |
| | **Checkbox** | Várias escolhas em uma lista, ou uma única caixa de seleção de consentimento. |
| | **Date** | Uma data, no formato que você escolher. |
| | **Dropdown** | Uma escolha em uma lista, em um menu compacto. |

### Configurações dos blocos

**Text**

- O conteúdo, editado diretamente no bloco.
- **Typography:** **Alignment**, **Font size**, **Weight**, **Color** e **Link color**.

**Button**

- **Label** e **Action**: **Submit**, **Next step**, **Close** ou **Go to URL**. **Go to URL** também exige uma **URL**.
- **Button style:** **Width** (automática ou total), **Alignment**, **Background**, **Text**, **Hover** e **Border radius**.

**Image**

- **Image URL**, **Alt text** e um **Link URL** opcional.
- **Layout:** **Width (%)**, **Alignment** e **Object fit**.

**Email, Text input, Phone e Date**

- **Property name:** a chave com que o valor é guardado em cada resposta, por exemplo `email` ou `company`. Mantenha-a única no formulário.
- **Label**, **Placeholder** (ou **Date format** para datas: `MM/DD/YYYY`, `DD/MM/YYYY` ou `YYYY-MM-DD`) e **Help text**.
- **Required**, com uma **Required message** opcional, e uma **Invalid message** exibida quando um endereço de e-mail ou número de telefone não parece válido. Os números de telefone são mais fáceis de validar no formato internacional, como `+15551234567`.

**Radio, Checkbox e Dropdown**

- **Property name**, **Label** e **Help text**.
- **Required**, com uma **Required message** opcional.
- **Layout:** vertical ou horizontal.
- **Options**, uma por linha no formato `label|value`, por exemplo `Weekly digest|weekly`.

**Todos os blocos**

- **Spacing:** **Margin top** e **Margin bottom**.
- **Visibility:** **Show on** **Desktop & mobile**, **Desktop only** ou **Mobile only**. Os blocos ocultos continuam no formulário e só são filtrados da prévia e do dispositivo correspondentes.

## Definir o estilo do formulário

A aba **Styles** controla o formulário inteiro:

| Seção | Configurações |
| --- | --- |
| **Form type** | **Type**. Para slide-ins, **Flyout side** (**Bottom right**, **Bottom left** ou **Bottom**). Para banners, **Banner position** (**Top** ou **Bottom**). |
| **Size** | **Width (px)** e **Min height (px)**. Deixe a altura em 0 para altura automática. |
| **Overlay** | **Overlay color** e **Opacity** atrás de pop-ups, slide-ins e formulários de página inteira. |
| **Form background** | **Fill**, **Border color**, **Border width**, **Border radius**, **Padding** e **Shadow**. |
| **Side image** | Uma imagem à esquerda (**Left**) ou à direita (**Right**) do formulário, com **Image URL**, **Alt text** e **Size**. |
| **Background image** | Uma imagem atrás do formulário, com **Image URL** e **Fit** (**Cover** ou **Contain**). |
| **Fonts** | **Font family** (**Inter**, **Georgia**, **Mono** ou **System**), **Heading color** e **Body color**. |
| **Input field styles** | Cores de **Background**, **Border**, **Border radius**, **Text**, **Placeholder** e **Label**. |
| **Button styles** | **Fill**, **Text**, **Hover**, **Border radius** e **Style** (**Solid** ou **Outline**). Cada botão pode substituir essas configurações. |
| **Close icon** | **Color**, **Size** e **Style** (**X** ou **Circle X**) do botão de fechar. Não aparece nos formulários incorporados. |

## Prévia

Use **Desktop**, **Mobile** ou **Both** acima do canvas para conferir o layout em cada tamanho de tela, incluindo os blocos que você ocultou em um dispositivo. **Undo** e **Redo** percorrem as suas alterações recentes.

## Verificar e publicar

**Alerts & checks**, na parte inferior do painel lateral, lista os problemas do formulário. Um contador vermelho mostra quantos erros existem.

| Nível | Verificação |
| --- | --- |
| Erro | “Add at least one form step before publishing.” |
| Erro | “Add a success step before publishing.” |
| Aviso | Uma etapa de formulário não tem blocos de conteúdo. |
| Aviso | Mais de um campo de e-mail. Use um único campo de e-mail sempre que possível. |
| Aviso | Nenhum botão de envio ou de próxima etapa em nenhuma etapa de formulário. |
| Aviso | Um botão **Go to URL** não tem URL. |

Os erros impedem a publicação. Os avisos não, mas corrija-os para que os visitantes consigam preencher o formulário.

Quando as verificações passarem, selecione **Publish** no cabeçalho do editor. O Emailit salva o formulário, publica-o e fecha o editor. Você também pode publicar ou despublicar pela página do formulário. Em seguida, [instale o script](/pt/docs/forms/install/) no seu site, se ainda não tiver feito isso.

## Veja também

  - [Instalar formulários](/pt/docs/forms/install/): Mostre os seus formulários publicados no seu site.
  - [Visão geral dos formulários](/pt/docs/forms/): Tipos de formulário, status e respostas.

---
Fonte: https://emailit.com/pt/docs/forms/build/