O guia definitivo para formulários interativos em e-mail

Publicados: 2020-05-21

“Formulários em e-mail não funcionam.”

“Formulários são movidos por JavaScript - e isso não é compatível com e-mail.”

Você já ouviu essas palavras antes? Nós também. Muitos profissionais de marketing pensam que o uso de formulários interativos em e-mail simplesmente não é possível, mas estamos aqui para acabar com esse mito. A verdade é que os formulários interativos são suportados em muitos clientes de e-mail populares e podem ser uma ferramenta poderosa para tornar seus e-mails mais envolventes e aumentar as conversões - se você souber como fazer.

O extraordinário desenvolvedor de email Mark Robbins mergulhou profundamente nos formulários interativos por email no Litmus Live 2019 - e isso inspirou nossa equipe aqui no Litmus a experimentar também os formulários interativos. Nesta postagem, compartilharemos os princípios básicos da palestra de Mark, juntamente com dicas e conselhos adicionais de nossos próprios testes, para que você também possa tornar os formulários interativos ativos em seus e-mails.

Pronto para mergulhar? Vamos lá!

O poder dos formulários interativos em e-mail

Pense em todas as vezes que você está usando o e-mail para direcionar seu assinante a uma página de destino e incentivá-lo a preencher algum tipo de formulário. E se você pudesse pular essa etapa completamente e capacitar seus assinantes para agirem exatamente onde estão, no seu e-mail?

Por exemplo, você poderia ...

Colete análises de produtos ou feedback do NPS diretamente no e-mail
Execute pesquisas curtas sem ter que enviar seus assinantes a uma página de destino
Permita que seus assinantes atualizem perfis de usuário ou preferências de e-mail sem que eles tenham que visitar as configurações de sua conta de usuário
Incorpore formulários de geração de leads diretamente em suas campanhas
E mais!

Apresentar um formulário no próprio e-mail pode eliminar a necessidade de uma página de entrada. Cada passo adicional que seus assinantes precisam dar para atingir uma meta aumenta a fricção. Incorporar um formulário ao seu e-mail pode reduzir o atrito, encurtar o caminho para a conversão e, por fim, aumentar as conversões.

Suporte ao cliente de e-mail para formulários por e-mail

Um dos maiores motivos pelos quais designers e desenvolvedores de email evitam usar formulários interativos é porque eles estão preocupados com a possibilidade de não haver suporte em muitos clientes de email. O mito do suporte insuficiente não é mais verdadeiro. Na verdade, 4 dos 5 principais clientes de e-mail - Gmail, iOS Mail, Apple Mail e Yahoo! Mail - suporta formulários interativos e eles respondem por mais de 80% de todos os e-mails abertos, de acordo com a participação de mercado do cliente de e-mail da Litmus.

Aqui está o que descobrimos ao testar o suporte de formulário interativo em clientes de e-mail populares:

Cliente de Email	Formulários suportados?	Notas
Apple Mail	sim	“GET” funciona como esperado. “POST” abre uma página de destino com um formulário em vez de enviar a partir do e-mail
iPhone Mail App	De alguma forma	“GET” funciona como esperado. “POST” não submete.
Gmail Desktop Webmail	sim	Envia com um alerta pop-up.
Gmail (iOS)	De alguma forma	Não se submete no iOS GANGA. A entrada “POST” também é desabilitada.
Gmail Android	De alguma forma	Apenas “GET” funciona, mas abre uma página de destino com um formulário em vez de enviar a partir do e-mail. Com “POST”, o formulário aparece visualmente, mas não permite a entrada do usuário.
Gmail Mobile Webmail	sim
Outlook no Windows	Não
Windows 10 Mail	Não
Outlook MacOS	Não	O formulário é exibido visualmente e permite a entrada do usuário em endereços de e-mail da Microsoft, mas não permite o envio.
Outlook.com	Não	Envia apenas quando um e-mail é aberto em sua própria janela, em vez de ser enviado a partir da visualização da caixa de entrada. Após o envio, os atributos de entrada são prefixados com “x_” para que possa causar problemas com a coleta de dados. Recomendaria esconder para este cliente.
Outlook iOS	sim
Outlook Android	De alguma forma	O formulário é exibido visualmente, mas o teclado não parece permitir que os usuários insiram informações, portanto, os usuários teriam que copiar e colar o texto para inserir. Recomendaria ocultar para este cliente quando uma entrada de teclado for usada, mas permitir formulários se usar outras entradas.
Yahoo! Webmail para desktop	sim	Envia com um alerta pop-up.
Yahoo! iOS	Não	O formulário é exibido visualmente e permite a entrada do usuário, mas não permite o envio.
Yahoo! Android	De alguma forma	O formulário é exibido visualmente, mas o teclado não parece permitir que os usuários façam entrada.
AOL Desktop Webmail	sim
AOL iOS	Não	O formulário é exibido visualmente e permite a entrada do usuário, mas não permite o envio.
AOL Android	sim
Aplicativo Samsung Mail	De alguma forma	O formulário é exibido visualmente, mas o teclado não parece permitir que os usuários insiram informações. Recomendaria ocultar para este cliente quando uma entrada de teclado for usada, mas permitir formulários se usar outras entradas.

Como construir um formulário interativo em e-mail

Mas como exatamente você implementa um formulário em suas campanhas de e-mail em HTML? Vamos analisar o método de Mark passo a passo:

1. Configure o básico

Vamos começar com uma estrutura realmente simples:

No nível mais básico, existem dois atributos que fazem um formulário funcionar:

<form action="[example_url]" method="get">
<!-- Form content -->
</form>

Açao
Isso define a página de destino ou destino para o qual os dados do formulário são enviados.
Método
Existem duas maneiras de enviar seus dados para esse destino: Por meio de uma solicitação GET ou POST. GET tem melhor suporte por e-mail, mas há uma coisa a se ter em mente: se você estiver enviando dados por meio do método GET, basicamente estará anexando esses dados a um URL, de modo que os dados do formulário enviado ficarão visíveis no campo de endereço da página .

Por exemplo, enviar seu primeiro nome por meio do formulário significa que você está criando um URL parecido com este:

 http://example.com?Fname=Mark

2. Configure os campos do seu formulário

Em seguida, você terá que pensar em quais informações gostaria de coletar de seus assinantes - e como traduzir isso em campos de formulário individuais.

Cada campo de formulário requer um rótulo, que é a informação que informa ao leitor de e-mail para que serve esse campo de formulário. Para um campo de formulário que pede ao leitor o primeiro nome que se parece com isto:

<label for="fname">
 First Name:
</label>
<input type="text" id="fname">

Você está procurando coletar uma entrada de texto para um elemento com o id = ”fname” - e o rótulo para = ”fname” está conectando os dois. Alguns clientes de webmail alteram seu código e não suportam a abordagem for & id. Eles gostam de adicionar prefixos aos nomes de sua classe e ID - portanto, seu ID pode ser alterado e seu atributo for, não. O resultado: seu rótulo não corresponde mais ao seu ID e isso quebra o seu formulário. Aqui está uma solução simples para evitar isso: envolva seu rótulo em torno de sua entrada assim:

<label>

First Name: <input type="text">

</label>

Você terá alguns tipos diferentes de entradas de texto para escolher, incluindo:

 <input type = "text">
<input type = "email">
<input type = "tel">
<input type = "number">
<input type = "url">
<textarea> </textarea>

Selecionar o tipo certo de entrada para cada campo de formulário ajuda você a fazer duas coisas: Quando visualizado no celular, pode alterar o layout do teclado para corresponder à entrada necessária. Além disso, onde é suportado, há alguma validação básica.

Para cada informação que enviamos por meio de um formulário, precisamos enviar duas coisas: um nome e um valor.

Nome:
Esse é o nome definido pelo desenvolvedor de um campo de formulário, que é passado por meio da string de URL.
Valor:
Valor definido pelo desenvolvedor ou usuário associado ao nome no campo do formulário.

Lembra do nosso exemplo de primeiro nome acima? http://example.com?Fname=Mark é o URL que está enviando o nome “Mark” (= valor) para o campo de formulário Nome (= nome).

Vamos adicionar uma área de comentários (nome = ”comentário”) ao nosso formulário:

<input type="text" name="Fname">

<textarea name="comment">

</textarea>

O URL resultante no envio do formulário será semelhante a este:

 http://example.com?Fname=Mark&comment=hello

Caixas de seleção e botões de opção

Nós sabemos como configurar entradas de texto, mas e se você quisesse adicionar uma caixa de seleção ou botão de rádio ao seu formulário?

Os valores são opcionais para caixas de seleção. Se você não definir um valor para uma caixa de seleção, ela será enviada como “ligada” ou “desligada”. Isso funciona, mas você pode querer atualizar o valor para diferentes formulações, dependendo de como você planeja lidar com os dados na extremidade receptora.

Por exemplo, aqui está uma caixa de seleção que envia o valor “concordo” se seu assinante marcar a caixa para concordar com seus termos e condições:

<input type="checkbox" name="t-c" value="agree" >

 http://example.com?tc=agree

Para botões de opção, no entanto, os valores são obrigatórios e seu elemento de nome é o que agrupa os botões de opção. Neste exemplo, você tem dois grupos de botões de rádio - um para rádio e um para TV - e pode escolher uma estação em cada grupo.

<input type="radio" name="radio" value="radio1" checked>

<input type="radio" name="radio" value="radio2">

<input type="radio" name="tv" value="BBC1">

<input type="radio" name="tv" value="BBC2">

Você identificou o marcado no primeiro botão de opção? É assim que você marca o botão de rádio que deseja exibir como uma opção pré-selecionada.

Opções de agrupamento

Quando você deseja agrupar botões de opção ou caixas de seleção, é aí que entram os conjuntos de campos e as legendas.

Os conjuntos de campos agruparão itens relacionados
As lendas são basicamente rótulos para esses mesmos itens

Neste exemplo, vamos escolher entre as opções vermelho e azul em um conjunto de botões de opção que tratam de como escolher sua cor favorita.

<fieldset>

<legend>Favourite color</legend>

<label>Red

<input type="radio" name="color" value="r">

<div class="button red"></div>

</label>

<label>Blue

<input type="radio" name="color" value="b">

<div class="button blue"></div>

</label>

</fieldset>

Os conjuntos de campos são úteis se você deseja agrupar diferentes informações, como um endereço - rua, CEP, estado e país.

O estilo padrão para botões de rádio e caixas de seleção não é bom. Ambos são exibidos em tamanho pequeno, o que os torna inacessíveis para muitos leitores. É por isso que acima estamos adicionando uma classe div que nos permitirá substituir o estilo do botão de opção padrão por estilos de nossa escolha.

Substituindo o estilo do botão de opção padrão

Substituir estilos padrão para botões de rádio envolve algumas etapas. Vamos dividi-los um por um.

Em primeiro lugar, você deseja ocultar o botão de opção padrão usando estes estilos:

.hidden-radio{

display:inline-block;

opacity:0;

width:0;

height:0;

margin:0 -9999px 0 0;

float:right;

position:absolute;
}

Agora que ocultamos as entradas padrão, precisamos substituir o estado de entrada de foco por nossos próprios estilos, adicionando destaques ou um contorno ao elemento que o leitor está focando:

input:focus + .button{

outline: Highlight auto

2px;

outline:

-webkit-focus-ring-color

auto 5px;

}

E, finalmente, estamos estilizando nossos botões como você normalmente os estiliza. Se estiver usando efeitos de foco para estilizar seus botões e estimular cliques, você também pode fazer isso aqui. Além disso, você desejará adicionar estilos ao estado “marcado” de seus botões de opção para que seja fácil distinguir um botão de opção marcado de um não marcado.

.button{

/* style */

}

.button:hover,

input:focus + .button{

/* style */

}

input:checked + .button{

/* style */

}

3. Passando informações ocultas

É provável que haja alguma informação que você gostaria de passar pelo formulário sem que o usuário tenha que inseri-la manualmente no formulário. Podem ser itens como nomes, IDs de usuário ou endereços de e-mail, por exemplo. Você pode passar informações ocultas nos bastidores usando o tipo de entrada “oculto” - esta ação não pode ser vista ou modificada pelo usuário:

Por exemplo, este trecho de código passará um ID de usuário como este:

<input type="hidden" name="user-id" value="U12345">

 http://example.com?user-id=U12345

4. Enviando o formulário

Tudo bem - seu formulário foi criado. Agora, precisamos de uma forma para o leitor enviá- lo. Existem duas maneiras de fazer isso: o tipo de entrada “enviar” e um tipo de botão “enviar”:

<input type="submit" value="Submit your form" >

<button type="submit">
Submit your form

</button>

Ambos funcionam de forma muito semelhante, mas a diferença é onde você coloca o seu texto. Se você seguir a rota do tipo de entrada, você desejará definir seu texto como o valor. Se você estiver usando o botão, sua cópia de envio irá antes da tag de fechamento do botão.

Estratégias alternativas para formulários interativos em e-mail

Para cada e-mail interativo, é crucial ter substitutos em vigor. Os substitutos garantem que, em todos os clientes de e-mail nos quais os formulários não funcionam perfeitamente, nós os ocultemos e mostremos um substituto. Como o suporte móvel para formulários ainda é irregular, optamos por ocultar nossos formulários no celular para todos os e-mails Litmus e direcionar a experiência interativa completa para nossos clientes de e-mail mais populares que suportam a funcionalidade de formulário interativo. Em outras palavras, implementamos um código que ...

Mostra o formulário interativo em
- Apple Mail
- Gmail (desktop web)
- Yahoo (desktop web)
Mostra o fallback em:
- Todo o Outlook e Windows Mail
- Todos os dispositivos móveis

Veja como isso se parece no código:

CSS

.interactive-form {
	display: block !important;
	max-height: inherit !important;
	overflow: visible !important;
}
.fallback-form {
	display: none;
}

body[data-outlook-cycle] .outlookshow{ display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important;}
body[data-outlook-cycle] .outlookhide{ display:none !important; display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden; }

[class~="x_outlookshow"] { display:block !important; width: auto !important; overflow: visible !important; float: none !important; max-height:inherit !important; max-width:inherit !important; line-height: auto !important; margin-top:0px !important; visibility:inherit !important;}
[class~="x_outlookhide"] { display:none !important; display:none; overflow:hidden; float:left; width:0px; max-height:0px; max-width:0px; line-height:0px; visibility:hidden; }

@media only screen and (max-width: 640px) {
  .fallback-form {
    display:block !important;
    width: auto !important;
    overflow: visible !important;
    float: none !important;
    max-height:inherit !important;
    max-width:inherit !important;
    line-height: auto !important;
    margin-top: 0px !important;
    visibility:inherit !important;
  }
  .interactive-form, 
  .interactive-form p, 
  .interactive-form label, 
  .interactive-form input  {
    display:none !important;
    display:none !important;
    overflow:hidden !important;
    max-height: 0px !important;
    max-width: 0px !important;
    line-height: 0px !important;
    visibility:hidden !important;
  }
}

HTML

<!--[if mso | ie]>
<style>
.fallback-form {
  display: block !important;
  max-height: inherit !important;
  overflow: visible !important;
}
</style>
<![endif]-->


<!-- start FORM_INTERACTIVE -->
<!--[if (!mso)&(gte IE 10)]> <! -- -->
<div class="interactive-form outlookhide" style="display:none; max-height:0; line-height:0; font-size:0; mso-hide:all;">
    [Insert Interactive Form code here]
</div>
<!--<![endif]-->
<!-- end FORM_INTERACTIVE -->

<!-- start FORM_FALLBACK -->
<div class="fallback-form outlookshow">
    [Insert fallback for form section here]
</div>
<!-- end FORM_FALLBACK -->

Exemplos: Veja os formulários interativos no e-mail em ação

Curioso para ver tudo em ação?

Neste e-mail, adicionamos um formulário para tornar mais fácil para os leitores entrarem em contato com um de nossos especialistas Litmus:

Os Indiana Pacers pedem feedback aos fãs - direto no e-mail:

Mas e se eu não conseguir codificar?

A interatividade e, principalmente, os elementos avançados, como os formulários interativos, exigem um pouco de habilidades de codificação. Se você é um desenvolvedor de e-mail já familiarizado com o código de e-mail, esperamos que este guia passo a passo ajude a implementar formulários em sua próxima campanha.

Para muitos profissionais de marketing e desenvolvedores de e-mail nos estágios iniciais de suas carreiras, a implementação de elementos interativos como formulários pode parecer uma tarefa impossível. Mas há boas notícias para você - pelo menos se estiver criando seu email no Salesforce Marketing Cloud. Mark e sua equipe na Salesforce adicionaram recentemente os blocos de formulários ao Content Builder da Salesforce, permitindo que os profissionais de marketing adicionem formulários aos seus emails e os personalizem de acordo com suas necessidades - sem necessidade de habilidades de codificação. Se você é um cliente do Salesforce, recomendamos que você dê uma olhada!

Será que mais provedores de serviço de e-mail tornarão mais fácil para os profissionais de marketing implementar elementos interativos em suas campanhas? O lançamento dos blocos de formulários dinâmicos do Salesforce pode ser o primeiro passo nessa direção.

Compartilhe, obrigado!

Como as equipes de e-mail impulsionam a máquina de marketing: gravação de webinar + perguntas e respostas

Neste webinar, explicamos como você pode aproveitar o poder de uma abordagem inicial por e-mail para destacar a parte mais estratégica de sua equipe.

consulte Mais informação

Entregando o episódio 20: Litmus Live Everywhere com Lauren Kremer

Neste episódio de Delivering, o apresentador Jason Rodriguez entrevista Lauren Kremer - ex-palestrante do Litmus Live e nosso novo gerente de eventos - sobre como estamos adaptando o Litmus Live em 2020, o que significa ser certificado pelo Litmus, The Email First Awards e como enviar e-mail profissionais de marketing de todo o mundo podem aprender no Litmus Live Everywhere.

consulte Mais informação