E-postada Etkileşimli Formlar İçin En İyi Kılavuz

Yayınlanan: 2020-05-21

"E-postadaki formlar çalışmıyor."

"Formlar JavaScript tarafından desteklenir ve bu, e-postada desteklenmez."

Bu sözleri daha önce duydunuz mu? Biz de. Birçok pazarlamacı, e-postada etkileşimli formlar kullanmanın mümkün olmadığını düşünüyor, ancak biz bu efsaneyi yıkmak için buradayız. Gerçek şu ki, etkileşimli formlar birçok popüler e-posta istemcisinde desteklenir ve nasıl yapılacağını biliyorsanız, e-postalarınızı daha ilgi çekici hale getirmek ve dönüşümleri artırmak için güçlü bir araç olabilir.

Olağanüstü e-posta geliştiricisi Mark Robbins, Litmus Live 2019'da e-postadaki etkileşimli formlara derinlemesine daldı ve bu, Litmus'taki ekibimize de etkileşimli formları denemeleri için ilham verdi. Bu gönderide, etkileşimli formların e-postalarınızda da yaşamasını sağlayabilmeniz için Mark'ın konuşmasındaki temel ilkeleri ve kendi testlerimizden ek ipuçları ve tavsiyeler paylaşacağız.

Dalmaya hazır mısınız? Hadi gidelim!

E-postadaki etkileşimli formların gücü

Abonenizi bir tür form doldurmaya teşvik etmek için bir açılış sayfasına yönlendirmek için e-posta kullandığınız tüm zamanları düşünün. Ya bu adımı tamamen atlayabilseydiniz ve abonelerinizin e-postanız içinde oldukları yerde harekete geçmelerini sağlasaydınız?

Örneğin, şunları yapabilirsiniz…

Ürün incelemelerini veya NPS geri bildirimlerini doğrudan e-posta içinde toplayın
Abonelerinizi bir açılış sayfasına göndermek zorunda kalmadan kısa anketler yapın
Abonelerinizin, kullanıcı hesap ayarlarını ziyaret etmek zorunda kalmadan kullanıcı profillerini veya e-posta tercihlerini güncellemelerine izin verin
Potansiyel müşteri yaratma formlarını doğrudan kampanyalarınızın içine yerleştirin
Ve dahası!

E-postanın içinde bir form sunmak, bir açılış sayfasına olan ihtiyacı ortadan kaldırabilir. Abonelerinizin bir hedefe ulaşmak için atması gereken her ek adım, sürtüşme ekler. E-postanıza bir form yerleştirmek, sürtünmeyi azaltabilir, dönüşüm yolunuzu kısaltabilir ve nihayetinde dönüşümleri artırabilir.

E-postadaki formlar için e-posta istemci desteği

E-posta tasarımcılarının ve geliştiricilerinin etkileşimli formları kullanmaktan çekinmesinin en büyük nedenlerinden biri, pek çok e-posta istemcisinde desteklenmeyebileceklerinden endişe duymalarıdır. Yetersiz destek efsanesi artık geçerli değil. Aslında, ilk 5 e-posta istemcisinden 4'ü—Gmail, iOS Mail, Apple Mail ve Yahoo! Posta—etkileşimli formları destekler ve bunlar, Litmus'un E-posta İstemcisi Pazar Paylaşımına göre tüm e-postaların %80'inden fazlasını açar.

Popüler e-posta istemcilerinde etkileşimli form desteğini test ederken şunları bulduk:

E-posta İstemcisi	Formlar destekleniyor mu?	notlar
elma postası	Evet	“GET” beklendiği gibi çalışıyor. "POST", e-postadan göndermek yerine form içeren bir açılış sayfası açar
iPhone Posta Uygulaması	Biraz	“GET” beklendiği gibi çalışıyor. "POST" göndermiyor.
Gmail Masaüstü Web Postası	Evet	Bir açılır uyarı ile gönderir.
Gmail (iOS)	Biraz	iOS GANGA'da gönderilmez. “POST” girişi de devre dışı bırakılır.
Gmail Android	Biraz	Yalnızca “GET” çalışır, ancak e-postadan göndermek yerine form içeren bir açılış sayfası açar. “POST” ile form görsel olarak görünür ancak kullanıcı girişine izin vermez.
Gmail Mobil Web Postası	Evet
Windows'ta Outlook	Numara
Windows 10 Posta	Numara
Outlook MacOS	Numara	Form görsel olarak görünür ve Microsoft e-posta adreslerinde kullanıcı girişine izin verir, ancak gönderime izin vermez.
Outlook.com	Numara	Gelen kutusu görünümünden göndermek yerine, yalnızca bir e-posta kendi penceresinde açıldığında gönderilir. Gönderildikten sonra, girdi niteliklerinin önüne "x_" eklenir, bu nedenle veri toplamada sorunlara neden olabilir. Bu müşteri için saklanmayı tavsiye ederim.
Outlook iOS	Evet
Outlook Android	Biraz	Form görsel olarak gösteriliyor, ancak klavye, kullanıcıların bilgi girmesine izin vermiyor gibi görünüyor; bu nedenle, kullanıcıların giriş için metni kopyalayıp yapıştırması gerekecek. Bir klavye girişi kullanıldığında bu istemci için gizlenmesini tavsiye eder, ancak diğer girişler kullanılıyorsa formlara izin verir.
Yahoo! Masaüstü Web Postası	Evet	Bir açılır uyarı ile gönderir.
Yahoo! iOS	Numara	Form görsel olarak görünür ve kullanıcı girişine izin verir, ancak gönderime izin vermez.
Yahoo! Android	Biraz	Form görsel olarak gösteriliyor, ancak klavye, kullanıcıların giriş yapmasına izin vermiyor.
AOL Masaüstü Web Postası	Evet
AOL iOS	Numara	Form görsel olarak görünür ve kullanıcı girişine izin verir, ancak gönderime izin vermez.
AOL Android	Evet
Samsung Posta Uygulaması	Biraz	Form görsel olarak gösteriliyor, ancak klavye, kullanıcıların bilgi girmesine izin vermiyor. Bir klavye girişi kullanıldığında bu istemci için gizlenmesini tavsiye eder, ancak diğer girişler kullanılıyorsa formlara izin verir.

E-postada etkileşimli bir form nasıl oluşturulur

Ancak HTML e-posta kampanyalarınızda bir formu tam olarak nasıl uygularsınız? Mark'ın yöntemini adım adım inceleyelim:

1. Temel bilgileri ayarlayın

Gerçekten basit bir çerçeve ile başlayalım:

En temel düzeyde, bir formu çalıştıran iki nitelik vardır:

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

Eylem
Bu, form verilerinin gönderildiği açılış sayfasını veya hedefi tanımlar.
Yöntem
Verilerinizi bu hedefe göndermenin iki yolu vardır: GET veya POST isteği yoluyla. GET'in e-postada daha iyi desteği vardır ancak akılda tutulması gereken bir şey vardır: GET yöntemiyle veri gönderiyorsanız, temelde bu verileri bir URL'ye eklersiniz, böylece gönderilen form verileri sayfa adres alanında görünür olur. .

Örneğin, adınızı form aracılığıyla göndermeniz, şuna benzeyen bir URL oluşturduğunuz anlamına gelir:

 http://example.com?Fname=İşaretle

2. Form alanlarınızı ayarlayın

Ardından, abonelerinizden hangi bilgileri toplamak istediğinizi ve bunu bireysel form alanlarına nasıl çevireceğinizi düşünmeniz gerekecek.

Her form alanı bir etiket gerektirir; bu, e-posta okuyucusuna bu form alanının ne için olduğunu söyleyen bilgidir. Okuyucudan şuna benzeyen ilk adını isteyen bir form alanı için:

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

=”fname” kimliğine sahip bir öğe için bir metin girişi toplamak istiyorsunuz ve =”fname” etiketi bu ikisini birbirine bağlıyor. Ancak bazı web posta istemcileri kodunuzu değiştirir ve for & id yaklaşımını desteklemez. Sınıfınıza ve kimlik adlarınıza önek eklemeyi severler; bu nedenle kimliğiniz değişebilir ve for özniteliğiniz değişmez. Sonuç: Etiketiniz artık kimliğinizle eşleşmiyor ve bu da formunuzu bozuyor. İşte bunu önlemek için basit bir çözüm: Etiketinizi girişinizin etrafına şu şekilde sarın:

<label>

First Name: <input type="text">

</label>

Aralarından seçim yapabileceğiniz birkaç farklı türde metin girişine sahip olacaksınız:

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

Her form alanı için doğru giriş türünü seçmek iki şeyi yapmanıza yardımcı olur: Mobilde görüntülendiğinde, klavye düzenini gerekli girişle eşleşecek şekilde değiştirebilir. Ayrıca, desteklendiği yerde bazı temel doğrulamalar vardır.

Bir form aracılığıyla gönderdiğimiz her bir bilgi parçası için iki şey göndermemiz gerekiyor: Bir ad ve bir değer.

İsim:
Bu, bir form alanının geliştirici tanımlı adıdır, bu, URL dizesi aracılığıyla iletilir.
Değer:
Form alanındaki adla ilişkili geliştirici veya kullanıcı tanımlı değer.

Yukarıdaki ilk isim örneğimizi hatırlıyor musunuz? http://example.com?Fname=Mark, First Name (=name) form alanı için “Mark” (=değer) adını gönderen URL'dir.

Formumuza bir yorum alanı (isim=”yorum”) ekleyelim:

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

<textarea name="comment">

</textarea>

Form gönderiminde ortaya çıkan URL şöyle görünecektir:

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

Onay kutuları ve radyo düğmeleri

Metin girişlerinin nasıl ayarlanacağını biliyoruz, ancak formunuza bir onay kutusu veya radyo düğmesi eklemek isterseniz ne olur?

Değerler, onay kutuları için isteğe bağlıdır. Bir onay kutusu için bir değer tanımlamazsanız, "açık" veya "kapalı" olarak gönderilir. Bu işe yarar, ancak alıcı taraftaki verileri nasıl işlemeyi planladığınıza bağlı olarak, değeri farklı ifadelerle güncellemek isteyebilirsiniz.

Örneğin, aboneniz şartlar ve koşullarınızı kabul etmek için kutuyu işaretlerse "kabul et" değerini gönderen bir onay kutusu aşağıdadır:

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

 http://example.com?tc=katılıyorum

Bununla birlikte, radyo düğmeleri için değerler gereklidir ve radyo düğmelerini birlikte gruplayan şey, ad öğenizdir. Buradaki örnekte, biri radyo için diğeri TV için olmak üzere iki grup radyo düğmesi var ve her grupta bir istasyon seçeceksiniz.

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

İlk radyo düğmesinde işaretli olanı gördün mü? Önceden seçilmiş bir seçenek olarak görüntülemek istediğiniz radyo düğmesini bu şekilde işaretlersiniz.

Seçenekleri birlikte gruplandırma

Radyo düğmelerini veya onay kutularını birlikte gruplamak istediğinizde, işte o zaman alan kümeleri ve göstergeler devreye girer.

Alan kümeleri, ilgili öğeleri birlikte gruplandırır
Efsaneler temelde bu öğeler için etiketlerdir.

Buradaki örnekte, tamamı favori renginizi seçmekle ilgili bir dizi radyo düğmesinde kırmızı ve mavi seçenekleri arasında seçim yapacağız.

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

Adres (cadde, posta kodu, eyalet ve ülke) gibi farklı bilgileri bir arada gruplamak istiyorsanız alan kümeleri kullanışlıdır.

Radyo düğmeleri ve onay kutuları için varsayılan stil harika değil. Her ikisi de oldukça küçük görüntülenir, bu da onları birçok okuyucu için erişilemez hale getirir. Bu nedenle yukarıda, varsayılan radyo düğmesi stilini tercih ettiğimiz stiller ile değiştirmemize izin verecek bir div sınıfı ekliyoruz.

Varsayılan radyo düğmesi stilinin üzerine yazma

Radyo düğmeleri için varsayılan stillerin üzerine yazmak birkaç adımı içerir. Bunları tek tek kıralım.

Her şeyden önce, şu stilleri kullanarak varsayılan radyo düğmesini gizlemek isteyeceksiniz:

.hidden-radio{

display:inline-block;

opacity:0;

width:0;

height:0;

margin:0 -9999px 0 0;

float:right;

position:absolute;
}

Artık varsayılan girdileri gizlediğimize göre, okuyucunun odaklandığı öğeye vurgular veya bir anahat ekleyerek odak girdi durumunu kendi stillerimizle değiştirmemiz gerekiyor:

input:focus + .button{

outline: Highlight auto

2px;

outline:

-webkit-focus-ring-color

auto 5px;

}

Ve son olarak, düğmelerimizi normal şekilde şekillendirdiğiniz gibi şekillendiriyoruz. Düğmelerinizi biçimlendirmek ve tıklamaları teşvik etmek için fareyle üzerine gelme efektlerini kullanıyorsanız, bunu burada da yapabilirsiniz. Ayrıca, işaretli bir radyo düğmesini işaretlenmemiş olandan ayırt etmeyi kolaylaştırmak için radyo düğmelerinizin "işaretli" durumuna stiller eklemek isteyeceksiniz.

.button{

/* style */

}

.button:hover,

input:focus + .button{

/* style */

}

input:checked + .button{

/* style */

}

3. Gizli bilgilerin iletilmesi

Kullanıcının forma manuel olarak girmesine gerek kalmadan formdan iletmek istediğiniz bazı bilgiler olması muhtemeldir. Bu, örneğin adlar, kullanıcı kimlikleri veya e-posta adresleri gibi öğeler olabilir. "Gizli" giriş türünü kullanarak perde arkasındaki gizli bilgileri iletebilirsiniz - bu işlem kullanıcı tarafından görülemez veya değiştirilemez:

Örneğin, bu kod parçası aşağıdaki gibi bir kullanıcı kimliği iletecektir:

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

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

4. Formun Gönderilmesi

Pekala, formunuz oluşturuldu. Şimdi, okuyucunun onu göndermesi için bir yola ihtiyacımız var. Bunu yapmanın iki yolu vardır: "gönder" giriş tipi ve "gönder" buton tipi:

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

<button type="submit">
Submit your form

</button>

Her ikisi de çok benzer şekilde çalışır, ancak fark, metninizi nereye koyduğunuzdur. Giriş türü yoluna giderseniz, metninizi değer olarak ayarlamak isteyeceksiniz. Düğmeyi kullanıyorsanız, gönderim kopyanız düğme kapatma etiketinizden hemen önce gelir.

E-postadaki etkileşimli formlar için geri dönüş stratejileri

Her etkileşimli e-posta için yedeklerin yerinde olması çok önemlidir. Yedekler, formların mükemmel şekilde çalışmadığı tüm e-posta istemcilerinde, onu gizlememizi ve bunun yerine bir geri dönüş göstermemizi sağlar. Formlar için mobil destek hala yetersiz olduğundan, tüm Litmus e-postaları için formlarımızı mobilde gizlemeyi tercih ediyoruz ve etkileşimli form işlevselliğini destekleyen en popüler e-posta istemcilerimizde tam etkileşimli deneyimi hedefliyoruz. Başka bir deyişle, şu kodu uyguladık…

Etkileşimli formu şurada gösterir:
- elma postası
- Gmail (masaüstü web)
- Yahoo (masaüstü web)
Geri dönüşü şurada gösterir:
- Tüm Outlook ve Windows Mail
- Tüm mobil cihazlar

İşte kodda nasıl göründüğü:

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

Örnekler: Etkileşimli formları e-postada çalışırken görün

Hepsini çalışırken görmek mi istiyorsunuz?

Bu e-postaya, okuyucuların Litmus uzmanlarımızdan biriyle iletişim kurmasını kolaylaştırmak için bir form ekledik:

Indiana Pacers, hayranlarından e-postanın içinden geri bildirim istiyor:

Ama ya kod yazamazsam?

Etkileşim ve özellikle etkileşimli formlar gibi gelişmiş öğeler oldukça fazla kodlama becerisi gerektirir. E-posta kodu konusunda zaten deneyimli bir e-posta geliştiricisiyseniz, bu adım adım kılavuzun bir sonraki kampanyanızda formları uygulamanıza yardımcı olacağını umuyoruz.

Ancak kariyerlerinin ilk aşamalarındaki birçok pazarlamacı ve e-posta geliştiricisi için formlar gibi etkileşimli öğeleri uygulamak imkansız bir görev gibi görünebilir. Ancak sizin için iyi haberler var - en azından e-postanızı Salesforce Marketing Cloud'da oluşturuyorsanız. Mark ve Salesforce'taki ekibi kısa süre önce Salesforce'un İçerik Oluşturucusu'na Form Bloklarını ekleyerek pazarlamacıların e-postalarına formlar eklemesine ve bunları ihtiyaçlarına göre özelleştirmesine olanak sağladı; kodlama becerisi gerekmez. Salesforce müşterisiyseniz, kontrol etmenizi öneririz!

Daha fazla e-posta hizmeti sağlayıcısı, pazarlamacıların kampanyalarında etkileşimli öğeler uygulamasını kolaylaştıracak mı? Salesforce'un dinamik form bloklarının piyasaya sürülmesi bu yönde ilk adım olabilir.

Paylaş, Teşekkürler!

E-posta Ekipleri Pazarlama Makinesini Nasıl Güçlendiriyor: Web Semineri Kaydı + Soru-Cevap

Bu web seminerinde, ekibinizin en stratejik bölümünü ortaya çıkarmak için önce e-posta yaklaşımının gücünden nasıl yararlanabileceğinizi anlattık.

Daha fazla oku

20. Bölüm Teslimatı: Lauren Kremer ile Her Yerde Turnusol Canlı

Teslim'in bu bölümünde sunucu Jason Rodriguez, Litmus Live'ın geçmiş konuşmacısı ve yeni Etkinlik Yöneticimiz Lauren Kremer ile 2020'de Litmus Live'ı nasıl uyarladığımız, Litmus Sertifikalı olmanın ne anlama geldiği, The Email First Awards ve e-postanın nasıl e-posta ile gönderileceği hakkında röportajlar yapıyor. dünyanın dört bir yanındaki pazarlamacılar Litmus Live Everywhere'de öğrenebilirler.

Daha fazla oku