Kompletny przewodnik po interaktywnych formularzach w wiadomości e-mail

Opublikowany: 2020-05-21

„Formularze w wiadomościach e-mail nie działają”.

„Formularze są obsługiwane przez JavaScript — a to nie jest obsługiwane w wiadomościach e-mail”.

Czy słyszałeś już te słowa? Nas też. Wielu marketerów uważa, że używanie interaktywnych formularzy w wiadomościach e-mail po prostu nie jest możliwe, ale jesteśmy tutaj, aby obalić ten mit. Prawda jest taka, że interaktywne formularze są obsługiwane w wielu popularnych klientach poczty e-mail i mogą być potężnym narzędziem, które sprawi, że Twoje wiadomości e-mail będą bardziej angażujące i zwiększą konwersje — jeśli wiesz, jak to zrobić.

Niezwykły programista poczty e-mail, Mark Robbins, podczas Litmus Live 2019 szczegółowo zagłębił się w interaktywne formularze w wiadomościach e-mail — i to zainspirowało nasz zespół w Litmus do eksperymentowania również z interaktywnymi formularzami. W tym poście podzielimy się podstawowymi zasadami z przemówienia Marka, a także dodatkowymi wskazówkami i poradami z naszych własnych testów, dzięki czemu możesz wprowadzić interaktywne formularze również w swoich e-mailach.

Gotowy do nurkowania? Chodźmy!

Siła interaktywnych formularzy w e-mailu

Pomyśl o wszystkich przypadkach, w których używasz poczty e-mail, aby kierować subskrybenta na stronę docelową, aby zachęcić go do wypełnienia jakiegoś formularza. Co by było, gdybyś był w stanie całkowicie pominąć ten krok i umożliwić swoim subskrybentom podjęcie działań tam, gdzie się znajdują, w wiadomości e-mail?

Na przykład możesz…

Zbieraj recenzje produktów lub opinie NPS bezpośrednio w wiadomości e-mail
Przeprowadzaj krótkie ankiety bez konieczności wysyłania subskrybentów na stronę docelową
Pozwól swoim subskrybentom aktualizować profile użytkowników lub preferencje dotyczące e-maili bez konieczności odwiedzania ustawień konta użytkownika
Osadź formularze generowania leadów bezpośrednio w swoich kampaniach
I więcej!

Przedstawienie formularza w samym e-mailu może wyeliminować potrzebę posiadania strony docelowej. Każdy dodatkowy krok, który muszą wykonać Twoi subskrybenci, aby osiągnąć cel, powoduje dodatkowe tarcia. Umieszczenie formularza w wiadomości e-mail może zmniejszyć tarcia, skrócić drogę do konwersji i ostatecznie zwiększyć liczbę konwersji.

Obsługa klienta poczty e-mail dla formularzy w e-mailu

Jednym z głównych powodów, dla których projektanci i programiści poczty e-mail unikają korzystania z formularzy interaktywnych, jest obawa, że mogą nie być obsługiwane w wielu klientach poczty e-mail. Jednak mit o niewystarczającym wsparciu już nie obowiązuje. W rzeczywistości 4 z 5 najlepszych klientów poczty e-mail — Gmail, iOS Mail, Apple Mail i Yahoo! Poczta — obsługuje interaktywne formularze, które odpowiadają za ponad 80% wszystkich otwieranych wiadomości e-mail, zgodnie z udziałami w rynku klientów poczty e-mail firmy Litmus.

Oto, co odkryliśmy podczas testowania obsługi formularzy interaktywnych w popularnych klientach poczty e-mail:

Klient poczty e-mail	Obsługiwane formularze?	Uwagi
Poczta Apple	tak	„GET” działa zgodnie z oczekiwaniami. „POST” otwiera stronę docelową z formularzem zamiast wysyłać z e-maila
Aplikacja Poczta na iPhone'a	Nieco	„GET” działa zgodnie z oczekiwaniami. „POST” nie przesyła.
Poczta Gmail na komputery	tak	Przesłane z wyskakującym alertem.
Gmail (iOS)	Nieco	Nie przesyła się w iOS GANGA. Wejście „POST” jest również wyłączone.
Gmail na Androida	Nieco	Tylko „GET” działa, ale otwiera stronę docelową z formularzem zamiast wysyłać z e-maila. Dzięki „POST” formularz pojawia się wizualnie, ale nie pozwala na wprowadzanie danych przez użytkownika.
Poczta Gmail na telefon komórkowy	tak
Outlook w systemie Windows	Nie
Poczta systemu Windows 10	Nie
Outlook MacOS	Nie	Formularz pojawia się wizualnie i umożliwia wprowadzanie danych na adresy e-mail firmy Microsoft, ale nie pozwala na przesyłanie.
Outlook.com	Nie	Wysyła tylko wtedy, gdy wiadomość e-mail zostanie otwarta w osobnym oknie, a nie z widoku skrzynki odbiorczej. Po przesłaniu atrybuty wejściowe są poprzedzone przedrostkiem „x_”, co może powodować problemy z gromadzeniem danych. Poleciłbym ukrywanie się dla tego klienta.
Outlooka na iOS	tak
Outlooka na Androida	Nieco	Formularz jest wyświetlany wizualnie, ale klawiatura nie pozwala użytkownikom na wprowadzanie informacji, więc użytkownicy musieliby kopiować i wklejać tekst do wprowadzania. Zaleca się ukrycie dla tego klienta, gdy używane są dane wejściowe z klawiatury, ale zezwalaj na formularze, jeśli używasz innych danych wejściowych.
Wieśniak! Poczta internetowa na komputer	tak	Przesłane z wyskakującym alertem.
Wieśniak! iOS	Nie	Formularz pojawia się wizualnie i umożliwia wprowadzanie danych przez użytkownika, ale nie pozwala na przesyłanie.
Wieśniak! Android	Nieco	Formularz jest wyświetlany wizualnie, ale klawiatura nie pozwala użytkownikom na wprowadzanie danych.
Poczta internetowa AOL Desktop	tak
AOL iOS	Nie	Formularz pojawia się wizualnie i umożliwia wprowadzanie danych przez użytkownika, ale nie pozwala na przesyłanie.
AOL Android	tak
Aplikacja Poczta Samsung	Nieco	Formularz jest wyświetlany wizualnie, ale klawiatura nie pozwala użytkownikom na wprowadzanie informacji. Zaleca się ukrycie dla tego klienta, gdy używane są dane wejściowe z klawiatury, ale zezwalaj na formularze, jeśli używasz innych danych wejściowych.

Jak zbudować interaktywny formularz w e-mailu

Ale jak dokładnie zaimplementować formularz w swoich kampaniach e-mailowych HTML? Przeanalizujmy krok po kroku metodę Marka:

1. Skonfiguruj podstawy

Zacznijmy od naprawdę prostego frameworka:

Na najbardziej podstawowym poziomie istnieją dwa atrybuty, które sprawiają, że formularz działa:

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

Akcja
Definiuje stronę docelową lub miejsce docelowe, do którego wysyłane są dane formularza.
metoda
Istnieją dwa sposoby na przesłanie danych do tego miejsca docelowego: za pomocą żądania GET lub POST. GET ma lepszą obsługę poczty e-mail, ale należy pamiętać o jednej rzeczy: jeśli przesyłasz dane metodą GET, w zasadzie dołączasz te dane do adresu URL, więc przesłane dane formularza będą widoczne w polu adresu strony .

Na przykład przesłanie imienia za pośrednictwem formularza oznacza, że tworzysz adres URL, który wygląda tak:

 http://example.com?Fname=Mark

2. Skonfiguruj pola formularza

Następnie musisz zastanowić się, jakie informacje chcesz zebrać od swoich subskrybentów – i jak przełożyć je na poszczególne pola formularza.

Każde pole formularza wymaga etykiety, która informuje czytelnika, do czego służy to pole formularza. W przypadku pola formularza, które prosi czytelnika o imię, wygląda to tak:

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

Chcesz zebrać dane wejściowe dla elementu o id=”fname” — a etykieta for=”fname” łączy te dwa elementy. Niektóre klienty poczty internetowej zmieniają kod i nie obsługują podejścia for & id. Lubią dodawać przedrostki do nazw klas i identyfikatorów — aby Twój identyfikator mógł zostać zmieniony, a atrybut for nie. Wynik: Twoja etykieta nie pasuje już do Twojego identyfikatora, co powoduje uszkodzenie formularza. Oto proste rozwiązanie, aby temu zapobiec: owiń etykietę wokół danych wejściowych w ten sposób:

<label>

First Name: <input type="text">

</label>

Będziesz mieć do wyboru kilka różnych typów wprowadzania tekstu, w tym:

 <input type="text">
<input type="e-mail">
<input type="tel">
<input type="liczba">
<input type="url">
<textarea></textarea>

Wybranie odpowiedniego typu danych wejściowych dla każdego pola formularza pomaga wykonać dwie rzeczy: Podczas przeglądania na urządzeniu mobilnym może zmienić układ klawiatury, aby pasował do wymaganych danych wejściowych. Dodatkowo tam, gdzie jest obsługiwany, istnieje podstawowa walidacja.

Dla każdej informacji, którą przesyłamy za pośrednictwem formularza, musimy podać dwie rzeczy: nazwę i wartość.

Nazwa:
Jest to nazwa pola formularza zdefiniowana przez programistę, przekazywana przez ciąg adresu URL.
Wartość:
Wartość zdefiniowana przez programistę lub użytkownika powiązana z nazwą w polu formularza.

Pamiętasz nasz przykład z imieniem powyżej? http://example.com?Fname=Mark to adres URL, który przesyła imię „Znak” (=wartość) w polu formularza Imię (=nazwa).

Dodajmy obszar komentarza (name=”comment”) do naszego formularza:

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

<textarea name="comment">

</textarea>

Otrzymany adres URL przy przesyłaniu formularza będzie wyglądał tak:

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

Pola wyboru i przyciski opcji

Wiemy, jak skonfigurować wprowadzanie tekstu, ale co, jeśli chcesz dodać pole wyboru lub przycisk opcji do formularza?

Wartości są opcjonalne dla pól wyboru. Jeśli nie określisz wartości dla pola wyboru, zostanie ono przesłane jako „włączone” lub „wyłączone”. To działa, ale możesz chcieć zaktualizować wartość do różnych sformułowań, w zależności od tego, jak planujesz obsługiwać dane po stronie odbiorcy.

Na przykład, oto pole wyboru, które przesyła wartość „zgadzam się”, jeśli subskrybent zaznaczy to pole, aby zaakceptować Twoje warunki:

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

 http://example.com?tc=agree

Jednak w przypadku przycisków opcji wymagane są wartości, a element name jest tym, co grupuje przyciski opcji. W tym przykładzie masz dwie grupy przycisków radiowych — jedną dla radia i jedną dla telewizji — i możesz wybrać jedną stację z każdej grupy.

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

Czy zauważyłeś zaznaczenie na tym pierwszym przycisku radiowym? W ten sposób zaznaczasz przycisk radiowy, który chcesz wyświetlić jako wstępnie wybraną opcję.

Grupowanie opcji razem

Gdy chcesz pogrupować przyciski opcji lub pola wyboru, wtedy pojawiają się zestawy pól i legendy.

Zestawy pól będą grupować powiązane elementy razem
Legendy to w zasadzie etykiety dla tych samych przedmiotów

W tym przykładzie będziemy mogli wybierać między opcjami czerwonego i niebieskiego w zestawie przycisków radiowych, które dotyczą wyboru ulubionego koloru.

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

Zestawy pól przydają się, jeśli chcesz pogrupować różne informacje, takie jak adres — ulica, kod pocztowy, stan i kraj.

Domyślny styl przycisków radiowych i pól wyboru nie jest świetny. Obydwa są wyświetlane jako niewielkie, przez co są niedostępne dla wielu czytelników. Dlatego powyżej dodajemy klasę div, która pozwoli nam zastąpić domyślny styl przycisków radiowych wybranymi przez nas stylami.

Zastępowanie domyślnego stylu przycisków opcji

Nadpisywanie domyślnych stylów przycisków opcji obejmuje kilka kroków. Podzielmy je jeden po drugim.

Przede wszystkim będziesz chciał ukryć domyślny przycisk opcji, używając tych stylów:

.hidden-radio{

display:inline-block;

opacity:0;

width:0;

height:0;

margin:0 -9999px 0 0;

float:right;

position:absolute;
}

Teraz, gdy ukryliśmy domyślne dane wejściowe, musimy zastąpić stan wejściowy fokusa naszymi własnymi stylami, dodając podświetlenia lub kontur do elementu, na którym skupia się czytelnik:

input:focus + .button{

outline: Highlight auto

2px;

outline:

-webkit-focus-ring-color

auto 5px;

}

I wreszcie, stylizujemy nasze guziki tak, jak je zwykle stylizujesz. Jeśli używasz efektów najechania kursorem, aby stylizować przyciski i zachęcać do kliknięć, możesz to zrobić również tutaj. Ponadto będziesz chciał dodać style do stanu „zaznaczonego” przycisków opcji, aby łatwo odróżnić zaznaczony przycisk opcji od niezaznaczonego.

.button{

/* style */

}

.button:hover,

input:focus + .button{

/* style */

}

input:checked + .button{

/* style */

}

3. Przekazywanie ukrytych informacji

Prawdopodobnie istnieją informacje, które chcesz przekazać przez formularz bez konieczności ręcznego wprowadzania ich przez użytkownika do formularza. Mogą to być na przykład elementy, takie jak imiona i nazwiska, identyfikatory użytkowników lub adresy e-mail. Możesz przekazać ukryte informacje za kulisami, używając typu danych wejściowych „ukryty” — ta akcja nie może być widziana ani modyfikowana przez użytkownika:

Na przykład ten fragment kodu przekaże identyfikator użytkownika w następujący sposób:

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

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

4. Wysłanie formularza

W porządku – twoja forma jest zbudowana. Teraz potrzebujemy sposobu na przesłanie go przez czytelnika. Można to zrobić na dwa sposoby: wejście typu „prześlij” i przycisk typu „prześlij”:

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

<button type="submit">
Submit your form

</button>

Oba działają bardzo podobnie, ale różnica polega na tym, gdzie umieszczasz swój tekst. Jeśli pójdziesz drogą typu wejściowego, będziesz chciał ustawić swój tekst jako wartość. Jeśli używasz przycisku, kopia zgłoszenia zostanie umieszczona tuż przed tagiem zamykającym przycisk.

Strategie awaryjne dla interaktywnych formularzy w wiadomości e-mail

W przypadku każdej interaktywnej wiadomości e-mail kluczowe jest posiadanie rozwiązań awaryjnych. Zastępcze zapewniają, że we wszystkich klientach poczty e-mail, w których formularze nie działają idealnie, ukrywamy je i zamiast tego pokazujemy zastępcze. Ponieważ obsługa formularzy przez telefon komórkowy jest nadal niestabilna, decydujemy się ukryć nasze formularze na telefonie komórkowym dla wszystkich wiadomości e-mail Litmus i kierujemy się w pełni interaktywną obsługą w naszych najpopularniejszych klientach poczty e-mail, które obsługują interaktywne funkcje formularzy. Innymi słowy, zaimplementowaliśmy kod, który…

Wyświetla formularz interaktywny w
- Poczta Apple
- Gmail (internet na komputery)
- Yahoo (internet na komputery)
Pokazuje rezerwę w:
- Cała poczta Outlooka i Windows
- Wszystkie urządzenia mobilne

Oto jak to wygląda w kodzie:

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

Przykłady: Zobacz interaktywne formularze w wiadomości e-mail w akcji

Chcesz zobaczyć to wszystko w akcji?

W tym e-mailu dodaliśmy formularz, aby ułatwić czytelnikom kontakt z jednym z naszych ekspertów Litmus:

Indiana Pacers proszą swoich fanów o opinie — bezpośrednio w e-mailu:

Ale co, jeśli nie umiem kodować?

Interaktywność, a zwłaszcza elementy zaawansowane, takie jak interaktywne formularze, wymagają sporych umiejętności kodowania. Jeśli jesteś programistą poczty e-mail, który zna już kod e-mail, mamy nadzieję, że ten przewodnik krok po kroku pomoże Ci zaimplementować formularze w następnej kampanii.

Jednak dla wielu marketerów i programistów pocztowych na wczesnych etapach kariery wdrażanie elementów interaktywnych, takich jak formularze, może wydawać się zadaniem niemożliwym. Ale jest dla Ciebie dobra wiadomość — przynajmniej jeśli tworzysz pocztę e-mail w Salesforce Marketing Cloud. Mark i jego zespół w Salesforce niedawno dodali bloki formularzy do Content Buildera Salesforce, umożliwiając marketerom dodawanie formularzy do swoich e-maili i dostosowywanie ich do swoich potrzeb — bez umiejętności kodowania. Jeśli jesteś klientem Salesforce, zachęcamy do sprawdzenia!

Czy więcej dostawców usług pocztowych ułatwi marketerom wdrażanie elementów interaktywnych w swoich kampaniach? Uruchomienie dynamicznych bloków formularzy Salesforce może być pierwszym krokiem w tym kierunku.

Udostępnij, dziękuję!

Jak zespoły e-mail napędzają maszynę marketingową: nagrywanie webinarów + pytania i odpowiedzi

W tym seminarium internetowym omówiliśmy, w jaki sposób możesz wykorzystać siłę podejścia e-mail, aby wydobyć najbardziej strategiczną część swojego zespołu.

Czytaj więcej

Dostarczanie odcinka 20: Litmus Live Everywhere z Lauren Kremer

W tym odcinku Delivering, gospodarz Jason Rodriguez przeprowadza wywiad z Lauren Kremer — byłym prelegentem Litmus Live i naszym nowym menedżerem wydarzeń — o tym, jak dostosowujemy Litmus Live w 2020 roku, co to znaczy być Certyfikowanym przez Litmus, The Email First Awards i jak e-mail marketerzy z całego świata mogą uczyć się w Litmus Live Everywhere.

Czytaj więcej