La guía definitiva para formularios interactivos en correo electrónico

Publicado: 2020-05-21

"Los formularios en el correo electrónico no funcionan".

"Los formularios funcionan con JavaScript, y eso no es compatible con el correo electrónico".

¿Has escuchado estas palabras antes? Nosotros también. Muchos especialistas en marketing piensan que el uso de formularios interactivos en el correo electrónico simplemente no es posible, pero estamos aquí para acabar con ese mito. La verdad es que los formularios interactivos son compatibles con muchos clientes de correo electrónico populares y pueden ser una herramienta poderosa para hacer que sus correos electrónicos sean más atractivos y aumentar las conversiones, si sabe cómo hacerlo.

El extraordinario desarrollador de correo electrónico Mark Robbins se sumergió en profundidad en los formularios interactivos en el correo electrónico en Litmus Live 2019, y eso inspiró a nuestro equipo aquí en Litmus a experimentar también con formularios interactivos. En esta publicación, compartiremos los principios básicos de la charla de Mark junto con sugerencias y consejos adicionales de nuestras propias pruebas para que también pueda hacer que los formularios interactivos cobren vida en sus correos electrónicos.

¿Listo para sumergirte? ¡Vamos!

El poder de los formularios interactivos en el correo electrónico

Piense en todas las veces que usa el correo electrónico para llevar a su suscriptor a una página de destino para alentarlos a completar algún tipo de formulario. ¿Qué pasaría si pudiera omitir ese paso por completo y empoderar a sus suscriptores para que actúen justo donde están, dentro de su correo electrónico?

Por ejemplo, podrías ...

Recopile reseñas de productos o comentarios de NPS directamente en el correo electrónico
Realice encuestas breves sin tener que enviar a sus suscriptores a una página de destino
Permita que sus suscriptores actualicen los perfiles de usuario o las preferencias de correo electrónico sin que tengan que visitar la configuración de su cuenta de usuario
Inserte formularios de generación de clientes potenciales directamente en sus campañas
¡Y más!

Presentar un formulario dentro del correo electrónico puede eliminar la necesidad de una página de destino. Cada paso adicional que deben dar sus suscriptores para lograr un objetivo agrega fricción. Incrustar un formulario en su correo electrónico puede reducir la fricción, acortar su camino hacia la conversión y, en última instancia, aumentar las conversiones.

Soporte de cliente de correo electrónico para formularios en correo electrónico

Una de las principales razones por las que los diseñadores y desarrolladores de correo electrónico evitan el uso de formularios interactivos es porque les preocupa que no sean compatibles con muchos clientes de correo electrónico. Sin embargo, el mito del apoyo insuficiente ya no es cierto. De hecho, 4 de los 5 principales clientes de correo electrónico: Gmail, iOS Mail, Apple Mail y Yahoo! Correo: admite formularios interactivos, y estos representan más del 80% de todos los correos electrónicos abiertos, según la cuota de mercado de clientes de correo electrónico de Litmus.

Esto es lo que encontramos al probar la compatibilidad con formularios interactivos en clientes de correo electrónico populares:

Cliente de correo electronico	¿Formas compatibles?	Notas
Correo de Apple	sí	"GET" funciona como se esperaba. "POST" abre una página de destino con un formulario en lugar de enviar desde el correo electrónico
Aplicación de correo para iPhone	Algo	"GET" funciona como se esperaba. "POST" no se envía.
Webmail de escritorio de Gmail	sí	Envía con una alerta emergente.
Gmail (iOS)	Algo	No se envía en iOS GANGA. La entrada “POST” también está deshabilitada.
Gmail Android	Algo	Solo funciona "OBTENER", pero abre una página de destino con un formulario en lugar de enviarlo desde el correo electrónico. Con "POST", el formulario aparece visualmente, pero no permite la entrada del usuario.
Webmail móvil de Gmail	sí
Outlook en Windows	No
Correo de Windows 10	No
Outlook MacOS	No	El formulario aparece visualmente y permite que el usuario ingrese las direcciones de correo electrónico de Microsoft, pero no permite el envío.
Outlook.com	No	Envía solo cuando un correo electrónico se abre en su propia ventana, en lugar de enviar desde la vista de bandeja de entrada. Tras el envío, los atributos de entrada tienen el prefijo "x_", por lo que pueden causar problemas con la recopilación de datos. Recomendaría esconderse para este cliente.
Outlook iOS	sí
Outlook Android	Algo	El formulario se muestra visualmente, pero el teclado no parece permitir que los usuarios ingresen información, por lo que los usuarios tendrían que copiar y pegar texto para ingresar. Recomendaría ocultarse para este cliente cuando se usa una entrada de teclado, pero permitiría formularios si usa otras entradas.
Yahoo! Webmail de escritorio	sí	Envía con una alerta emergente.
Yahoo! iOS	No	El formulario aparece visualmente y permite la entrada del usuario, pero no permite el envío.
Yahoo! Androide	Algo	El formulario se muestra visualmente, pero el teclado no parece permitir que los usuarios ingresen.
Webmail de escritorio de AOL	sí
AOL iOS	No	El formulario aparece visualmente y permite la entrada del usuario, pero no permite el envío.
AOL Android	sí
Aplicación Samsung Mail	Algo	El formulario se muestra visualmente, pero el teclado no parece permitir que los usuarios ingresen información. Recomendaría ocultarse para este cliente cuando se usa una entrada de teclado, pero permitiría formularios si usa otras entradas.

Cómo crear un formulario interactivo en el correo electrónico

Pero, ¿cómo se implementa exactamente un formulario en sus campañas de correo electrónico HTML? Analicemos el método de Mark paso a paso:

1. Configure los conceptos básicos

Comencemos con un marco realmente simple:

En el nivel más básico, hay dos atributos que hacen que un formulario funcione:

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

Acción
Esto define la página de destino o el destino al que se envían los datos del formulario.
Método
Hay dos formas de enviar sus datos a ese destino: a través de una solicitud GET o POST. GET tiene un mejor soporte en el correo electrónico, pero hay una cosa a tener en cuenta: si está enviando datos a través del método GET, básicamente está adjuntando esos datos a una URL, por lo que los datos del formulario enviado serán visibles en el campo de dirección de la página. .

Por ejemplo, enviar su nombre a través del formulario significa que está creando una URL que se ve así:

 http://example.com?Fname=Mark

2. Configure sus campos de formulario

A continuación, tendrá que pensar en qué información le gustaría recopilar de sus suscriptores y cómo traducirla en campos de formulario individuales.

Cada campo de formulario requiere una etiqueta, esa es la información que le dice al lector de correo electrónico para qué es este campo de formulario. Para un campo de formulario que le pide al lector su primer nombre que se ve así:

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

Está buscando recopilar una entrada de texto para un elemento con id = ”fname” - y la etiqueta para = ”fname” está conectando esos dos. Sin embargo, algunos clientes de correo web modifican su código y no admiten el enfoque for & id. Les gusta agregar prefijos a su clase y nombres de identificación, por lo que su identificación podría modificarse y su atributo for no. El resultado: su etiqueta ya no coincide con su identificación y eso rompe su formulario. Aquí hay una solución simple para evitar eso: envuelva su etiqueta alrededor de su entrada de esta manera:

<label>

First Name: <input type="text">

</label>

Tendrá algunos tipos diferentes de entradas de texto para elegir, que incluyen:

 <input type = "texto">
<input type = "email">
<input type = "tel">
<tipo de entrada = "número">
<input type = "url">
<textarea> </textarea>

Seleccionar el tipo correcto de entrada para cada campo de formulario le ayuda a hacer dos cosas: cuando se ve en un dispositivo móvil, puede cambiar la distribución del teclado para que coincida con la entrada requerida. Además, donde es compatible, hay una validación básica.

Por cada pieza de información que enviamos a través de un formulario, debemos enviar dos cosas: un nombre y un valor.

Nombre:
Ese es el nombre definido por el desarrollador de un campo de formulario, esto se pasa a través de la cadena de URL.
Valor:
Valor definido por el desarrollador o por el usuario asociado con el nombre en el campo del formulario.

¿Recuerda nuestro ejemplo de nombre anterior? http://example.com?Fname=Mark es la URL que envía el nombre "Mark" (= valor) para el campo de formulario Nombre (= nombre).

Agreguemos un área de comentarios (nombre = ”comentario”) a nuestro formulario:

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

<textarea name="comment">

</textarea>

La URL resultante en el envío del formulario se verá así:

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

Casillas de verificación y botones de opción

Sabemos cómo configurar entradas de texto, pero ¿qué sucede si desea agregar una casilla de verificación o un botón de opción a su formulario?

Los valores son opcionales para las casillas de verificación. Si no define un valor para una casilla de verificación, se enviará como "activado" o "desactivado". Eso funciona, pero es posible que desee actualizar el valor a diferentes redacciones, según cómo planee manejar los datos en el extremo receptor.

Por ejemplo, aquí hay una casilla de verificación que envía el valor "aceptar" si su suscriptor marca la casilla para aceptar sus términos y condiciones:

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

 http://example.com?tc=agree

Sin embargo, para los botones de opción, se requieren valores y su elemento de nombre es lo que agrupa los botones de opción. En este ejemplo, tiene dos grupos de botones de opción, uno para radio y otro para TV, y podrá elegir una estación en 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">

¿Viste el marcado en ese primer botón de radio? Así es como marca el botón de radio que le gustaría mostrar como una opción preseleccionada.

Agrupar opciones juntas

Cuando busca agrupar botones de opción o casillas de verificación, es cuando entran los conjuntos de campos y las leyendas.

Los conjuntos de campos agruparán elementos relacionados juntos
Las leyendas son básicamente etiquetas para esos mismos elementos.

En este ejemplo aquí, podremos elegir entre las opciones rojo y azul en un conjunto de botones de radio que tratan de elegir su color favorito.

<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>

Los conjuntos de campos son útiles si desea agrupar diferentes piezas de información como una dirección: calle, código postal, estado y país.

El estilo predeterminado para los botones de opción y las casillas de verificación no es excelente. Ambos se muestran bastante pequeños, lo que los hace inaccesibles para muchos lectores. Es por eso que arriba estamos agregando una clase div que nos permitirá reemplazar el estilo del botón de opción predeterminado con estilos de nuestra elección.

Sobrescribir el estilo del botón de opción predeterminado

Sobrescribir estilos predeterminados para botones de opción implica algunos pasos. Vamos a desglosarlos uno por uno.

En primer lugar, querrá ocultar el botón de opción predeterminado usando estos estilos:

.hidden-radio{

display:inline-block;

opacity:0;

width:0;

height:0;

margin:0 -9999px 0 0;

float:right;

position:absolute;
}

Ahora que ocultamos las entradas predeterminadas, debemos reemplazar el estado de entrada de enfoque con nuestros propios estilos, agregando resaltados o un esquema al elemento en el que se está enfocando el lector:

input:focus + .button{

outline: Highlight auto

2px;

outline:

-webkit-focus-ring-color

auto 5px;

}

Y finalmente, estamos diseñando nuestros botones como usted los diseña normalmente. Si está utilizando efectos de desplazamiento para diseñar sus botones y fomentar los clics, también puede hacerlo aquí. Además, querrá agregar estilos al estado "marcado" de sus botones de opción para que sea fácil distinguir un botón de opción marcado de uno sin marcar.

.button{

/* style */

}

.button:hover,

input:focus + .button{

/* style */

}

input:checked + .button{

/* style */

}

3. Transmitir información oculta

Es probable que haya alguna información que le gustaría pasar a través del formulario sin que el usuario tenga que ingresarla manualmente en el formulario. Pueden ser elementos como nombres, ID de usuario o direcciones de correo electrónico, por ejemplo. Puede transmitir información oculta detrás de escena utilizando el tipo de entrada "oculto"; el usuario no puede ver ni modificar esta acción:

Por ejemplo, este bit de código pasará una ID de usuario como esta:

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

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

4. Envío del formulario

Muy bien, tu forma está construida. Ahora, necesitamos una forma para que el lector lo envíe . Hay dos formas de hacerlo: el tipo de entrada "enviar" y el tipo de botón "enviar":

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

<button type="submit">
Submit your form

</button>

Ambos funcionan de manera muy similar, pero la diferencia es dónde pones tu texto. Si sigue la ruta del tipo de entrada, querrá establecer su texto como el valor. Si está utilizando el botón, la copia de su envío irá justo antes de la etiqueta de cierre del botón.

Estrategias alternativas para formularios interactivos en el correo electrónico

Para cada correo electrónico interactivo, es fundamental contar con alternativas. Los resguardos garantizan que en todos los clientes de correo electrónico en los que los formularios no funcionan a la perfección, los ocultemos y mostramos un resguardo en su lugar. Debido a que el soporte móvil para formularios aún es irregular, optamos por ocultar nuestros formularios en el móvil para todos los correos electrónicos de Litmus y enfocamos la experiencia interactiva completa en nuestros clientes de correo electrónico más populares que admiten la funcionalidad de formulario interactivo. En otras palabras, implementamos código que ...

Muestra el formulario interactivo en
- Correo de Apple
- Gmail (web de escritorio)
- Yahoo (web de escritorio)
Muestra el respaldo en:
- Todo Outlook y Windows Mail
- Todos los dispositivos móviles

Así es como se ve en el 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 -->

Ejemplos: ver formularios interactivos en el correo electrónico en acción

¿Tienes curiosidad por verlo todo en acción?

En este correo electrónico, agregamos un formulario para facilitar que los lectores se pongan en contacto con uno de nuestros expertos en Litmus:

Los Indiana Pacers piden comentarios a sus fanáticos, directamente en el correo electrónico:

Pero, ¿y si no puedo codificar?

La interactividad y los elementos especialmente avanzados como los formularios interactivos requieren bastantes habilidades de codificación. Si es un desarrollador de correo electrónico que ya se siente cómodo con el código de correo electrónico, esperamos que esta guía paso a paso le ayude a implementar formularios en su próxima campaña.

Sin embargo, para muchos especialistas en marketing y desarrolladores de correo electrónico en las primeras etapas de sus carreras, implementar elementos interactivos como formularios puede parecer una tarea imposible. Pero hay buenas noticias para usted, al menos si está creando su correo electrónico en Salesforce Marketing Cloud. Mark y su equipo en Salesforce agregaron recientemente Form Blocks al Content Builder de Salesforce, lo que permite a los especialistas en marketing agregar formularios a sus correos electrónicos y personalizarlos según sus necesidades, sin necesidad de conocimientos de codificación. Si es cliente de Salesforce, le animamos a que lo compruebe.

¿Más proveedores de servicios de correo electrónico facilitarán a los especialistas en marketing la implementación de elementos interactivos en sus campañas? El lanzamiento de los bloques de formularios dinámicos de Salesforce podría ser un primer paso en esa dirección.

¡Comparte, gracias!

Cómo los equipos de correo electrónico impulsan la máquina de marketing: grabación de seminarios web + preguntas y respuestas

En este seminario web, explicamos cómo puede aprovechar el poder de un primer enfoque de correo electrónico para resaltar la parte más estratégica de su equipo.

Lee mas

Entrega del episodio 20: Litmus en vivo en todas partes con Lauren Kremer

En este episodio de Delivering, el presentador Jason Rodriguez entrevista a Lauren Kremer, ex oradora de Litmus Live y nuestra nueva directora de eventos, sobre cómo estamos adaptando Litmus Live en 2020, lo que significa tener la certificación Litmus, The Email First Awards y cómo enviar correos electrónicos los especialistas en marketing de todo el mundo pueden aprender en Litmus Live Everywhere.

Lee mas