Guia prático
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 se o recurso não estiver disponível no seu workspace.
- Crie o formulário em Email MarketingForms 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 | 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
emailoucompany. Mantenha-a única no formulário. - Label, Placeholder (ou Date format para datas:
MM/DD/YYYY,DD/MM/YYYYouYYYY-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 exemploWeekly 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 no seu site, se ainda não tiver feito isso.