Sumário
- Como funciona?
- Criar um formulário
- Salvar um modelo
- Editar, duplicar ou excluir um modelo
- Integrar o formulário ao seu site
- Integre seu formulário ao WordPress
- Pré-visualizar formulário
- Visualizar código do formulário
- Editar um formulário
- Arquivar, excluir ou restaurar um formulário
- Solução de problemas
Como funciona?
O Criador de Formulários do Mailjet é composto por um formulário de inscrição, um e-mail de confirmação e uma página de confirmação. Quando alguém se inscreve em seu site, é enviado para essa pessoa um e-mail de confirmação com um link para a página de confirmação. Depois que a inscrição for confirmada, o endereço de e-mail será adicionado à sua lista de contatos, juntamente com qualquer outra informação coletada por meio do formulário.
E sabe o que é ainda melhor? Tudo o que você precisa fazer é elaborar e personalizar o formulário, o e-mail e a página de destino no Criador de Formulários, pois o Mailjet vai cuidar do código do formulário de inscrição e do fluxo de trabalho.
Você roda o seu site em WordPress? Sugerimos que experimente o plug-in do Mailjet para WordPress, com o qual é possível criar um formulário de assinatura, gerenciar seus contatos, criar e-mails e visualizar estatísticas em tempo real diretamente no WP Admin.
Criar um formulário
No menu, selecione Contatos → Criador de formulários.
Agora, clique no botão “Criar novo formulário”.
A página “Criar novo formulário” exibe as diferentes seções do seu formulário.
Ao concluir cada seção, a marca de seleção correspondente ficará verde.
Depois que todas as seções estiverem concluídas, você poderá publicar o formulário de inscrição que acabou de criar.
- Título: dê um título ao seu formulário para identificá-lo em seus relatórios. Esse é um nome interno que só você verá.
- Elaborar formulário: crie e pré-visualize seu formulário.
- Detalhes do e-mail: defina a linha de assunto e as informações do remetente.
- Design do e-mail: você pode personalizar a opção de confirmação de inscrição que é enviada por e-mail aos novos assinantes solicitando que validem a inscrição na sua newsletter. Esse e-mail incluirá um botão com o link que redireciona os destinatários para a página de confirmação.
- Página de confirmação: quando alguém se inscrever no seu formulário, essa pessoa receberá um e-mail de confirmação com um link para validar (confirmar) a inscrição. Por padrão, esse link levará à página de confirmação pelo Mailjet, que você pode criar no editor de formulários. Se você quiser usar a página de confirmação do seu próprio site, clique em “Usar página de confirmação externa” e insira o respectivo URL.
- Lista de contatos: escolha onde os dados dos assinantes serão armazenados.
Vamos começar: clique em “Elaborar formulário” para selecionar o modelo do seu formulário.
O primeiro passo é decidir que tipo de formulário você quer criar:
Você quer que o formulário de inscrição seja incorporado diretamente à página do seu site, ou prefere que o formulário apareça como uma nova janela pop-up depois que o usuário clicar em um link ou botão?
Formulário integrado ou pop-up
Formulários de inscrição incorporados e formulários de inscrição pop-up são duas formas diferentes de exibir formulários para coletar informações dos assinantes, frequentemente usadas em sites para coletar endereços de e-mail. Vamos analisar as diferenças e os benefícios de cada um.
Formulário integrado
Descrição:
- Um formulário incorporado é integrado diretamente no conteúdo de uma página web. Ele permanece estático na página, o que significa que está sempre visível para os visitantes, sem necessidade de interação.
- Normalmente, os formulários incorporados são colocados em áreas de alto tráfego, como a barra lateral, rodapé ou ao final de um post de blog.
Benefícios:
- Não intrusivo: Como faz parte da página, não interrompe a experiência do usuário. Os visitantes podem interagir com o formulário no momento em que se sentirem prontos.
- Sempre visível: Fornece uma presença constante na página, tornando fácil para os usuários encontrarem o formulário e se inscreverem.
- Ideal para coleta a longo prazo: Os formulários incorporados são eficazes para manter uma visibilidade contínua, especialmente para usuários que visitam o site frequentemente.
- Melhor integração ao conteúdo: Os formulários incorporados se encaixam naturalmente no contexto, como ao final de um artigo ou descrição de produto, incentivando os usuários a se inscreverem após consumir o conteúdo.
Quando usar:
- Quando você deseja uma abordagem sutil para coletar e-mails, sem interromper a experiência de navegação do usuário.
- Em blogs, artigos ou páginas de produtos onde os usuários podem querer se inscrever depois de obter valor do conteúdo.
Formulário pop-up
Descrição:
- Formulários pop-up aparecem na página como uma janela modal após um determinado período de tempo, após uma ação específica (como rolar a página ou clicar em um botão) ou com intenção de saída (quando o visitante está prestes a sair da página).
- Pop-ups costumam ser visualmente atraentes e frequentemente incluem incentivos, como descontos ou ofertas especiais.
Benefícios:
- Alta visibilidade: Pop-ups atraem imediatamente a atenção, pois aparecem no centro da tela. Isso os torna muito eficazes para gerar inscrições.
- Opções de temporização e gatilho flexíveis: Você pode configurar pop-ups para aparecerem após uma ação específica, como o tempo passado na página, porcentagem de rolagem ou intenção de saída (baseadas em codificação). Isso permite atingir usuários que têm maior probabilidade de estar interessados.
- Eficaz para conversão de leads: Devido à sua natureza intrusiva, os pop-ups são eficazes para aumentar as conversões, especialmente quando acompanhados por uma oferta atraente, como um desconto, um guia gratuito ou conteúdo exclusivo.
- Personalizável de acordo com o comportamento do usuário: Eles podem ser personalizados com base na atividade do usuário, o que os torna ideais para direcionar mensagens específicas para diferentes públicos.
Quando usar:
- Quando você deseja maximizar rapidamente o número de assinaturas e tem um incentivo para oferecer, como um desconto, eBook ou guia gratuito.
- Em páginas onde pode ser necessário capturar a atenção do usuário antes que ele saia, como páginas de produtos ou de intenção de saída.
Se você optar pelo formulário pop-up, um botão adicional chamado de “Acionador” será exibido na página de design do formulário, e você terá a possibilidade de ajustar o botão de gatilho do formulário pop-up conforme as suas preferências (texto, cores, etc.).
Neste exemplo, selecionaremos o formulário “Pop-up”.
Ferramentas de layout de formulários
Este é início do design. É neste momento que você poderá criar a estrutura do seu formulário. Nesta etapa, você poderá adicionar todas as colunas necessárias, que, depois, serão preenchidas com informações.
Você poderá escolher entre 1 e 4 colunas consecutivas e ir testando as proporções de blocos de conteúdo, se necessário. Basta clicar em “Mostrar mais opções”.
O layout poderá ser alterado mais tarde por meio da barra de ferramentas, caso você decida mudar o design.
Ferramentas de conteúdo
Esta área abrange todos os elementos de conteúdo que aparecerão em seu formulário (texto, imagens, botões, compartilhamento em redes sociais, etc.).
Adicionar conteúdo é fácil: basta clicar no bloco de conteúdo e arrastá-lo para a área desejada em seu formulário. Para mover esse bloco, basta arrastá-lo e soltá-lo na posição desejada.
Clique dentro do quadro para personalizar o elemento usando a barra de ferramentas ao redor do quadro.
Texto
Com a barra de ferramentas “Texto”, você pode formatar e personalizar facilmente seu bloco de texto:
- Ajustar altura das linhas
- Alinhar o texto
- Definir a cor do fundo
- Alterar as margens
- Formatar o seu texto (fonte, negrito, itálico, etc.)
- Selecionar o tipo de autorização (explícita ou implícita)
Imagem
A barra de ferramentas “Imagem” permite:
- Definir o posicionamento horizontal
- Alterar as margens
- Aplicar uma borda (formato) à imagem
- Fazer expansão móvel
- Definir a cor de fundo
Existem duas maneiras de adicionar uma imagem à seção:
- Fazer upload da sua imagem ou escolher uma imagem na galeria
- Adicionar um link para uma imagem on-line existente
Neste exemplo, vamos fazer upload de uma imagem.
Depois de clicar no botão de upload de imagem, você pode arrastar e soltar o arquivo de imagem na caixa de diálogo ou clicar no link “importar um arquivo” para fazer upload da sua imagem. Existe também a possibilidade de fazer upload de uma imagem a partir de um link externo.
Você pode optar por adicionar texto ALT à sua imagem. Caso sua imagem não possa ser exibida, o texto ALT será exibido no lugar dela. O texto ALT deverá ser breve e descritivo, como um tuíte. :)
Após escolher uma imagem, você pode usar a ferramenta de edição de imagens para cortar, redimensionar, girar ou inverter a imagem.
Você também pode fazer isso após salvar a imagem: clique na imagem que você deseja modificar e depois no botão da ferramenta de edição de imagens.
Separador
É possível adicionar uma linha divisória para separar seções ou elementos dentro de uma seção.
A barra de ferramentas “Separador” permite:
- Definir a cor de fundo
- Mudar as margens
- Formatar a linha (design, cor, espessura da linha)
- Ajustar o espaçamento horizontal e vertical
Botão
Há várias opções disponíveis na barra de ferramentas “Botão”, incluindo:
- Raio da borda (define o arredondamento dos cantos dos botões)
- Cor, espessura da linha e estilo da borda do botão (contínua, pontilhada, tracejada, etc.)
- Definir o posicionamento horizontal e o preenchimento
- Adicionar hiperlink
- Alinhamento das fontes
- Ajustar as margens
- Personalizar o texto usando as propriedades do contato
- Formatar a fonte (família de fontes, cor, negrito, etc.)
Espaçador
Adicione um espaço em branco para separar elementos ou seções no seu formulário. Com a ferramenta Espaçador, você pode:
- Definir a altura do espaço em branco (em pixels)
- Adicionar uma cor de fundo (opcional)
Compartilhamento em redes sociais
Insira no formulário o ícone das suas redes sociais favoritas, como Facebook, Twitter, LinkedIn, Instagram, YouTube...
Clique no botão “Configurar links” para abrir o modal de configuração de redes sociais, onde você pode:
- Selecionar até 10 ícones de redes sociais
- Modificar o texto da etiqueta
- Compartilhar a versão on-line da sua newsletter de marketing para sua conta de redes sociais ou configurar o link direto para a sua página de redes sociais
- Criar seu próprio ícone de redes sociais clicando em “Adicionar um ícone personalizado”
Para mostrar e configurar as etiquetas de texto, clique em “Exibir etiquetas”.
Clique nas opções do bloco (lápis) para configurar o tamanho, as formas e a cor do ícone, bem como a cor de fundo e o preenchimento da seção.
Bloco HTML
Você pode adicionar códigos HTML diretamente no seu formulário. Arraste o bloco HTML para seu formulário e então clique no botão da barra de ferramentas para abrir a janela do editor HTML. Agora é com você!
Vídeo
Para adicionar um vídeo ao seu formulário, arraste a ferramenta Vídeo até o local desejado. No pop-up modal, adicione a URL de vídeo.
Serão geradas automaticamente imagens de pré-visualização para vídeos do YouTube, do Vimeo e do Dailymotion. Para todos os outros serviços de vídeo, clique em “Escolher a imagem” para adicionar sua própria imagem de pré-visualização.
Criada a miniatura, será adicionado o botão de reprodução padrão. Você pode escolher entre vários modelos para o botão de reprodução. (A imagem do botão de reprodução será redimensionada automaticamente em relação ao tamanho da miniatura. Especificamente, será 50% do lado menor [largura ou altura] da miniatura.)
A última etapa é adicionar uma descrição simples da imagem de pré-visualização no campo “Texto alternativo de imagem”. Esse texto alternativo será exibido caso seu assinante não consiga visualizar a imagem. Em seguida, clique em “Inserir vídeo”.
Na barra de ferramentas Vídeo, clique no botão “Vídeo” para editá-lo a qualquer momento.
Formulários
É fácil coletar informações adicionais (propriedades) dos seus assinantes: basta clicar no bloco de sua escolha e arrastá-lo para a área desejada no formulário. Para mover esse bloco, basta arrastá-lo e soltá-lo na posição desejada.
Texto
O bloco “Texto” permite adicionar uma propriedade de dados em string vinculada ao e-mail do assinante. O comprimento máximo desse campo é de 255 caracteres.
Opções disponíveis:
- Definir o posicionamento horizontal e o preenchimento
- Aplicar uma borda (forma) à imagem
- Definir a cor ou a imagem de fundo
- Selecionar uma propriedade de contato
- Definir o campo como obrigatório
- Adicionar espaço reservado para texto (dicas)
- Ajustar o limite máximo de caracteres
Área de texto
O bloco “Área de texto” no formulário permite que você adicione uma propriedade de dados em string vinculada ao e-mail do assinante (igual ao bloco “Texto”), mas, nesse caso, o comprimento máximo permitido é de 500 caracteres.
Opções disponíveis:
- Definir o posicionamento horizontal e o preenchimento
- Aplicar uma borda (forma) à imagem
- Definir a cor ou a imagem de fundo
- Selecionar uma propriedade de contato
- Definir o campo como obrigatório
- Adicionar espaço reservado para texto (dicas)
- Ajustar o limite máximo de caracteres
Número
O bloco “Número” no formulário permite que você adicione uma propriedade de dados correspondente a números inteiros ou decimais vinculada ao e-mail do assinante. Você pode adicionar um intervalo personalizado e limites de incremento para esse campo.
Opções disponíveis:
- Definir o posicionamento horizontal e o preenchimento
- Aplicar uma borda (forma) à imagem
- Definir a cor ou a imagem de fundo
- Selecionar uma propriedade de contato
- Definir o campo como obrigatório
- Adicionar espaço reservado para texto (dicas)
- Definir intervalo personalizado ou limites de incremento
Botão de opção
O bloco de formulário “botão de opção” permite que o usuário escolha somente uma única opção dentre um conjunto predefinido de possibilidades mutuamente exclusivas. Quando o usuário clica em um botão de opção, qualquer outro botão de opção que já tenha sido marcado no mesmo grupo será desmarcado.
Opções disponíveis:
- Alterar margens
- Formatar texto (fonte, negrito, itálico, etc.)
- Definir cor para plano de fundo, parte interna e bordas dos botões de opção
- Selecionar posicionamento (espaço entre ícones/texto e as opções)
- Usar uma propriedade de contato
- Marcar o campo como obrigatório
- Definir o texto para cada botão de opção
Lembre-se de que as opções de texto irão variar conforme o tipo de informação da propriedade selecionada (string, número inteiro, booleano, etc.)
URL da Web
O bloco de formulário “URL da Web” é usado para armazenar URLs da Web. Esse bloco é usado com mais frequência para armazenar o site pessoal de um contato. O formulário somente aceitará o URL se ele estiver formatado corretamente. Se o formato estiver incorreto, o campo ficará vermelho, e será exibida uma mensagem de erro.
Opções disponíveis:
- Definir bordas e preenchimento
- Definir a cor ou a imagem de fundo
- Marcar o campo como obrigatório
- Adicionar espaço reservado para texto variável (dicas)
- Ajustar o limite máximo de caracteres
Data
O bloco “Data” é usado para armazenar datas específicas em um formulário, como o aniversário de um usuário, por exemplo. A máscara de inserção de dados é automaticamente adicionada ao campo, mostrando ao usuário a ordem correta em que a data deverá ser inserida. Esse recurso pode ser gerenciado no painel de preferências.
Opções disponíveis:
- Definir bordas e preenchimento
- Definir a cor ou a imagem de fundo
- Usar uma propriedade de contato
- Marcar o campo como obrigatório
- Preferências de formato de data
Menu suspenso
O bloco “Menu suspenso” permite que o usuário escolha uma dentre várias opções predefinidas listadas em um menu suspenso, semelhantemente ao bloco “Botão”. Quando o usuário seleciona uma opção no menu suspenso, qualquer outra opção que tenha sido previamente selecionada será desmarcada.
A criação de um menu suspenso pode facilitar o uso do formulário de assinatura, pois reduz a quantidade de palavras que precisam ser digitadas, além de proporcionar um conjunto definido de opções ao usuário. Além disso, ao usarmos um menu suspenso, ajudamos a garantir que os usuários forneçam informações precisas e consistentes, o que pode ser importante para o gerenciamento de assinaturas.
Opções disponíveis:
- Definir bordas e preenchimento
- Formatar texto (fonte, negrito, itálico, etc.)
- Cores dos ícones de seta
- Definir a cor ou a imagem de fundo
- Usar uma propriedade de contato
- Marcar o campo como obrigatório
- Definir texto para cada opção
Seções
Duplicar uma seção
Clique na seção para destacá-la e, em seguida, clique no ícone de duplicação no lado direito da tela.
Excluir uma seção
Para remover uma seção do corpo do formulário, clique na seção, clique no ícone da lixeira e confirme a exclusão.
Também é possível excluir rapidamente uma seção ou elemento, arrastando-os para a área de ferramentas de conteúdo.
Configurações de estilo geral
Com apenas alguns cliques, você pode formatar facilmente os estilos de texto de todos os parágrafos, cabeçalhos e hiperlinks do seu formulário.
Para acessar os estilos gerais de texto, clique no ícone de engrenagem no canto superior esquerdo (guia “Definições”).
Como sugere o nome, a opção “Estilo global” define a família de fontes e as cores para todos os elementos listados (cabeçalhos, parágrafos, links).
Então, você pode personalizar ainda mais o estilo para cada um dos elementos de cabeçalho, parágrafo e link.
Por último, se você quiser ter um estilo de texto diferente para um determinado cabeçalho ou parágrafo no seu formulário, basta mudar o estilo do texto como de costume usando a barra de ferramentas da seção.
Opções de logotipo
Ao usar nosso criador de formulários, um logotipo "Powered by Mailjet" será adicionado ao rodapé.
Você pode escolher entre 5 esquemas de cor diferentes de logotipos na seção “Opções de logotipo”, na guia “Configurações” . Não é possível mover ou redimensionar o logotipo.
Se você estiver usando um plano pago, poderá remover o logotipo selecionando a opção “Sem o logotipo”.
Modificação das mensagens de sucesso ou erro
Essas mensagens são exibidas para os usuários quando o formulário é enviado com sucesso ou quando ocorre um erro de envio. Os usuários ainda precisarão clicar no e-mail de confirmação de inscrição para se inscreverem.
Você não precisa se preocupar com essas mensagens, porque elas são geradas automaticamente para você. Contudo, você também poderá usar as suas próprias mensagens de erro ou de sucesso, se quiser.
Na página 'Design do formulário', clique dentro da estrutura do formulário para exibir a barra de ferramentas e selecione o ícone de botões deslizantes. Em seguida, você poderá modificar as duas mensagens conforme preferir.
Modificação do tipo e do texto de consentimento
Você pode escolher dentre dois tipos de consentimento: explícito ou implícito. Clique dentro do quadro de consentimento para exibir a barra de ferramentas e selecionar o ícone de botões deslizantes. Selecione o tipo de consentimento que você deseja usar e edite o texto como preferir.
Consentimento explícito (recomendado)
O consentimento explícito é aquele que ocorre quando uma pessoa tem a opção de decidir se deseja autorizar a coleta de suas informações pessoais antes desses dados serem coletados. Essa é a melhor maneira de garantir que os assinantes tenham aceitado receber as suas comunicações.
Consentimento implícito
O consentimento implícito, por sua vez, não exige que os assinantes “marquem uma caixa de seleção”. Esse tipo de consentimento significa que, ao enviar o formulário, o assinante concorda em receber as comunicações que você lhe planeja enviar.
Salvar um modelo
A criação de um modelo possibilita que você economize tempo e esforços futuramente. Ao criar um modelo do seu trabalho, você pode reutilizá-lo facilmente para projetos semelhantes, sem precisar começar do zero a cada novo projeto.
Ao projetar o seu formulário, você pode escolher salvá-lo como um novo modelo ou usá-lo para substituir um modelo já existente. Na página de design do Criador de Formulários, basta clicar no menu suspenso na parte superior à direita e selecionar “Salvar como modelo”.
De forma geral, salvar o seu trabalho como modelo pode fazer com que você economize tempo e esforços no longo prazo, além de garantir que os seus projetos sejam criados com consistência, padronização e colaboração.
Para acessar os modelos salvos, quando você estiver criando um formulário, clique no botão “Elaborar formulário” e selecione um dos seus próprios modelos.
Editar, duplicar ou excluir um modelo
Para editar, duplicar ou excluir um modelo de formulário, navegue até a página de gerenciamento de modelos de formulários e clique no ícone de engrenagem.
Então, serão exibidas várias opções. Selecione a ação desejada e... pronto!
Observação: tome bastante cuidado ao excluir modelos de formulários, pois essa ação não poderá ser desfeita.
Integrar o formulário ao seu site
O último passo é integrar o código HTML do formulário de assinatura. Para isso, copie e cole o código em seu site. É simples assim!
Veja abaixo uma descrição das partes do código, que ajudará você a integrá-lo ao seu site.
Integre seu formulário ao WordPress
Você pode adicionar o código do formulário de assinatura diretamente a um post, página ou adicioná-lo através de um widget WordPress.
Para este primeiro exemplo, criaremos uma nova página e adicionaremos o formulário de assinatura.
No menu, selecione “Páginas” → “Adicionar nova”.
Insira o título da página, selecione o bloco “HTML personalizado” e cole o código do formulário de assinatura (da sua conta Mailjet).
Clique em “Publicar”, e pronto: seu widget de assinatura aparecerá na nova página.
Você também pode adicionar o formulário de inscrição ao seu site com os widgets WordPress.
No menu principal, acesse “Aparência” → “Widgets”.
Na página Widgets, você verá todos os widgets existentes. Para adicionar um novo widget (formulário), clique no ícone de “+”, que fica no canto superior esquerdo, e arraste o bloco “HTML personalizado” do menu do widget.
Cole o código do formulário de assinatura (da sua conta Mailjet) na seção “Conteúdo”. Então, clique em “Atualizar”.
E pronto. Basta abrir seu site para ver o widget de assinatura!
Pré-visualizar formulário
Para pré-visualizar o formulário de assinatura, vá para a seção “Elaborar formulário” e clique no ícone de lápis (editar).
Na página “Elaborar formulário”, clique no botão “Pré-visualizar” no canto superior direito da tela.
É possível pré-visualizar seu formulário em diferentes dispositivos, como celular e desktop.
Visualizar código do formulário
Na página de gerenciamento de formulários, clique no ícone de engrenagem do formulário cujo código você deseja visualizar e selecione “Ver código”.
Veja abaixo uma descrição das partes do código, que ajudará você a integrá-lo ao seu site.
Editar um formulário
Na página de gerenciamento de formulários, clique no ícone de engrenagem e selecione “Editar”.
Observe que, após cada modificação feita no formulário de assinatura, você deverá recarregar o código HTML em seu site para que elas possam ser implementadas.
Arquivar, excluir ou restaurar um formulário
Para arquivar um único formulário, clique no ícone de engrenagem na página de gerenciamento de formulários e selecione “Arquivar”.
Para arquivar vários formulários ao mesmo tempo, marque a caixa de seleção de cada um dos formulários e, então, clique no botão “Arquivar”.
Se você quiser excluir permanentemente um formulário que já tenha sido arquivado, vá até a seção “Arquivados” na página de gerenciamento de fomulários, clique no ícone de engrenagem e selecione a opção “Excluir”.
Ao excluir formulários ou quaisquer outros dados da sua conta Mailjet, preste sempre muita atenção, pois não será possível recuperar dados excluídos.
Caso você tenha arquivado um formulário, mas queira recuperá-lo, é possível fazê-lo por meio do ícone de engrenagem, selecionando “Restaurar”.
Solução de problemas
Se você implementou um formulário de assinatura em seu site, e ele parou de funcionar repentinamente, verifique se a lista de contatos associada ao formulário não foi alterada ou excluída.