Panduan Utama untuk Formulir Interaktif di Email

Diterbitkan: 2020-05-21

“Formulir di email tidak berfungsi.”

“Formulir didukung oleh JavaScript—dan itu tidak didukung di email.”

Pernahkah Anda mendengar kata-kata ini sebelumnya? Kami juga. Banyak pemasar berpikir bahwa menggunakan formulir interaktif dalam email tidak mungkin, tetapi kami di sini untuk mematahkan mitos itu. Yang benar adalah bahwa formulir interaktif didukung di banyak klien email populer dan dapat menjadi alat yang ampuh untuk membuat email Anda lebih menarik dan meningkatkan konversi—jika Anda tahu cara melakukannya.

Pengembang email yang luar biasa Mark Robbins mendalami formulir interaktif dalam email di Litmus Live 2019—dan itu mengilhami tim kami di sini di Litmus untuk bereksperimen dengan formulir interaktif juga. Dalam posting ini, kami akan membagikan prinsip-prinsip dasar dari pembicaraan Mark bersama dengan tip dan saran tambahan dari pengujian kami sendiri sehingga Anda dapat membuat formulir interaktif menjadi hidup di email Anda juga.

Siap untuk menyelam? Ayo pergi!

Kekuatan formulir interaktif dalam email

Pikirkan tentang semua waktu Anda menggunakan email untuk mengarahkan pelanggan Anda ke halaman arahan untuk mendorong mereka mengisi beberapa jenis formulir. Bagaimana jika Anda dapat melewati langkah itu sama sekali dan memberdayakan pelanggan Anda untuk mengambil tindakan tepat di tempat mereka berada, di dalam email Anda?

Misalnya, Anda bisa…

Kumpulkan ulasan produk atau umpan balik NPS langsung di dalam email
Jalankan survei singkat tanpa harus mengarahkan pelanggan Anda ke halaman arahan
Izinkan pelanggan Anda memperbarui profil pengguna atau preferensi email tanpa mereka harus mengunjungi pengaturan akun pengguna mereka
Sematkan formulir pembuatan prospek langsung di dalam kampanye Anda
Dan banyak lagi!

Menyajikan formulir di dalam email itu sendiri dapat menghilangkan kebutuhan akan halaman arahan. Setiap langkah tambahan yang harus diambil pelanggan Anda untuk mencapai tujuan menambah gesekan. Menyematkan formulir dalam email Anda dapat mengurangi gesekan, mempersingkat jalur Anda menuju konversi, dan pada akhirnya meningkatkan konversi.

Dukungan klien email untuk formulir di email

Salah satu alasan terbesar mengapa desainer dan pengembang email enggan menggunakan formulir interaktif adalah karena mereka khawatir tidak didukung di banyak klien email. Mitos dukungan yang tidak memadai tidak lagi berlaku. Faktanya, 4 dari 5 klien email teratas—Gmail, iOS Mail, Apple Mail, dan Yahoo! Mail—mendukung formulir interaktif, dan akun tersebut mencakup lebih dari 80% dari semua email yang dibuka, menurut Pangsa Pasar Klien Email Litmus.

Inilah yang kami temukan saat menguji dukungan formulir interaktif di seluruh klien email populer:

Klien Email	Formulir yang didukung?	Catatan
Apple Mail	Ya	"GET" berfungsi seperti yang diharapkan. "POST" membuka halaman arahan dengan formulir alih-alih mengirimkan dari email
Aplikasi Email iPhone	Agak	"GET" berfungsi seperti yang diharapkan. "POST" tidak dikirim.
Email Web Desktop Gmail	Ya	Dikirim dengan peringatan popup.
Gmail (iOS)	Agak	Tidak mengirimkan di iOS GAGA. Input "POST" juga dinonaktifkan.
Gmail Android	Agak	Hanya "GET" yang berfungsi, tetapi membuka halaman arahan dengan formulir alih-alih mengirimkan dari email. Dengan "POST", formulir muncul secara visual, tetapi tidak mengizinkan input pengguna.
Email Web Seluler Gmail	Ya
Outlook di Windows	Tidak
Windows 10 Email	Tidak
Outlook MacOS	Tidak	Formulir muncul secara visual dan memungkinkan pengguna memasukkan alamat email Microsoft, tetapi tidak mengizinkan pengiriman.
Outlook.com	Tidak	Dikirim hanya ketika email dibuka di jendelanya sendiri, bukan mengirimkan dari tampilan kotak masuk. Setelah pengiriman, atribut input diawali dengan “x_” sehingga dapat menyebabkan masalah dengan pengumpulan data. Akan merekomendasikan bersembunyi untuk klien ini.
Outlook iOS	Ya
Outlook Android	Agak	Formulir ditampilkan secara visual, tetapi keyboard tampaknya tidak mengizinkan pengguna memasukkan informasi sehingga pengguna harus menyalin dan menempelkan teks ke input. Akan merekomendasikan bersembunyi untuk klien ini saat input keyboard digunakan tetapi izinkan formulir jika menggunakan input lain.
Yahoo! Email Web Desktop	Ya	Dikirim dengan peringatan popup.
Yahoo! iOS	Tidak	Formulir muncul secara visual dan memungkinkan input pengguna, tetapi tidak mengizinkan pengiriman.
Yahoo! Android	Agak	Formulir ditampilkan secara visual, tetapi keyboard tampaknya tidak mengizinkan pengguna untuk memasukkan.
Email Web Desktop AOL	Ya
AOL iOS	Tidak	Formulir muncul secara visual dan memungkinkan input pengguna, tetapi tidak mengizinkan pengiriman.
Android AOL	Ya
Aplikasi Samsung Mail	Agak	Formulir ditampilkan secara visual, tetapi keyboard tidak muncul untuk memungkinkan pengguna memasukkan informasi. Akan merekomendasikan bersembunyi untuk klien ini saat input keyboard digunakan tetapi izinkan formulir jika menggunakan input lain.

Cara membuat formulir interaktif di email

Tapi bagaimana tepatnya Anda menerapkan formulir dalam kampanye email HTML Anda? Mari kita urai metode Mark selangkah demi selangkah:

1. Siapkan dasar-dasarnya

Mari kita mulai dengan kerangka kerja yang sangat sederhana:

Pada tingkat paling dasar, ada dua atribut yang membuat formulir berfungsi:

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

Tindakan
Ini menentukan halaman arahan atau tujuan pengiriman data formulir.
metode
Ada dua cara untuk mengirimkan data Anda ke tujuan tersebut: Melalui permintaan GET atau POST. GET memiliki dukungan yang lebih baik dalam email tetapi ada satu hal yang perlu diingat: Jika Anda mengirimkan data melalui metode GET, pada dasarnya Anda melampirkan data itu ke URL, sehingga data formulir yang dikirimkan akan terlihat di bidang alamat halaman .

Misalnya, mengirimkan nama depan Anda melalui formulir berarti Anda membuat URL yang terlihat seperti ini:

 http://example.com?Fname=Mark

2. Siapkan bidang formulir Anda

Selanjutnya, Anda harus memikirkan informasi apa yang ingin Anda kumpulkan dari pelanggan Anda—dan bagaimana menerjemahkannya ke dalam bidang formulir individual.

Setiap bidang formulir memerlukan label, itulah info yang memberi tahu pembaca email untuk apa bidang formulir ini. Untuk bidang formulir yang menanyakan nama depan pembaca yang terlihat seperti ini:

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

Anda mencari untuk mengumpulkan input teks untuk elemen dengan id=”fname” — dan label for=”fname” menghubungkan keduanya. Beberapa klien webmail mengubah kode Anda dan tidak mendukung pendekatan for & id. Mereka suka menambahkan awalan ke kelas dan nama ID Anda—sehingga ID Anda mungkin diubah dan atribut for Anda tidak. Hasilnya: Label Anda tidak lagi cocok dengan ID Anda, dan itu merusak formulir Anda. Inilah solusi sederhana untuk mencegahnya: bungkus label Anda di sekitar input Anda seperti ini:

<label>

First Name: <input type="text">

</label>

Anda akan memiliki beberapa jenis input teks yang berbeda untuk dipilih, termasuk:

 <input type="teks">
<input type="email">
<input type="tel">
<input type="nomor">
<input type="url">
<textarea></textarea>

Memilih jenis input yang tepat untuk setiap bidang formulir membantu Anda melakukan dua hal: Saat dilihat di perangkat seluler, ini dapat mengubah tata letak keyboard agar sesuai dengan input yang diperlukan. Plus, jika didukung, ada beberapa validasi dasar.

Untuk setiap informasi yang kami kirimkan melalui formulir, kami harus mengirimkan dua hal: Nama dan nilai.

Nama:
Itu nama bidang formulir yang ditentukan pengembang, ini diteruskan melalui string URL.
Nilai:
Nilai yang ditentukan pengembang atau pengguna yang terkait dengan nama di bidang formulir.

Ingat contoh nama depan kita di atas? http://example.com?Fname=Mark adalah URL yang mengirimkan nama depan “Tandai” (=nilai) untuk bidang formulir Nama Depan (=nama).

Mari tambahkan area komentar (name="comment") ke formulir kami:

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

<textarea name="comment">

</textarea>

URL yang dihasilkan pada pengiriman formulir akan terlihat seperti ini:

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

Kotak centang dan tombol radio

Kami tahu cara mengatur input teks, tetapi bagaimana jika Anda ingin menambahkan kotak centang atau tombol radio ke formulir Anda?

Nilai bersifat opsional untuk kotak centang. Jika Anda tidak menentukan nilai untuk kotak centang, itu akan dikirimkan sebagai "aktif" atau "nonaktif". Itu berhasil, tetapi Anda mungkin ingin memperbarui nilainya ke susunan kata yang berbeda, tergantung pada bagaimana Anda berencana menangani data di pihak penerima.

Misalnya, berikut adalah kotak centang yang mengirimkan nilai "setuju" jika pelanggan Anda mencentang kotak untuk menyetujui persyaratan dan ketentuan Anda:

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

 http://example.com?tc=agree

Namun, untuk tombol radio, nilai diperlukan, dan elemen nama Anda adalah yang mengelompokkan tombol radio. Dalam contoh ini di sini, Anda memiliki dua grup tombol radio—satu untuk radio dan satu untuk TV—dan Anda akan dapat memilih satu stasiun di setiap grup.

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

Apakah Anda melihat tanda centang pada tombol radio pertama itu? Begitulah cara Anda menandai tombol radio yang ingin Anda tampilkan sebagai opsi yang telah dipilih sebelumnya.

Mengelompokkan opsi bersama

Saat Anda ingin mengelompokkan tombol radio atau kotak centang, saat itulah kumpulan bidang dan legenda masuk.

Fieldsets akan mengelompokkan item terkait bersama-sama
Legenda pada dasarnya adalah label untuk barang-barang itu

Dalam contoh ini di sini, kita akan memilih antara opsi merah dan biru dalam satu set tombol radio yang semuanya tentang memilih warna favorit Anda.

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

Kumpulan kolom berguna jika Anda ingin mengelompokkan berbagai informasi seperti alamat—jalan, kode pos, negara bagian, dan negara.

Gaya default untuk tombol radio dan kotak centang tidak bagus. Keduanya ditampilkan agak kecil, membuatnya tidak dapat diakses oleh banyak pembaca. Itu sebabnya di atas kami menambahkan kelas div yang memungkinkan kami mengganti gaya tombol radio default dengan gaya pilihan kami.

Menimpa gaya tombol radio default

Menimpa gaya default untuk tombol radio melibatkan beberapa langkah. Mari kita uraikan satu per satu.

Pertama-tama Anda ingin menyembunyikan tombol radio default menggunakan gaya ini:

.hidden-radio{

display:inline-block;

opacity:0;

width:0;

height:0;

margin:0 -9999px 0 0;

float:right;

position:absolute;
}

Sekarang setelah kita menyembunyikan input default, kita perlu mengganti status input fokus dengan gaya kita sendiri, menambahkan highlight atau outline ke elemen yang menjadi fokus pembaca:

input:focus + .button{

outline: Highlight auto

2px;

outline:

-webkit-focus-ring-color

auto 5px;

}

Dan akhirnya, kami menata tombol kami seperti biasanya Anda menatanya. Jika Anda menggunakan efek arahkan kursor untuk menata tombol dan mendorong klik, Anda juga dapat melakukannya di sini. Plus, Anda ingin menambahkan gaya ke status tombol radio yang "dicentang" sehingga mudah untuk membedakan tombol radio yang dicentang dari yang tidak dicentang.

.button{

/* style */

}

.button:hover,

input:focus + .button{

/* style */

}

input:checked + .button{

/* style */

}

3. Melewati informasi tersembunyi

Kemungkinan ada beberapa informasi yang ingin Anda sampaikan melalui formulir tanpa pengguna harus memasukkannya secara manual ke formulir. Itu bisa berupa item seperti nama, ID pengguna, atau alamat email, misalnya. Anda dapat menyampaikan informasi tersembunyi di balik layar menggunakan jenis input "tersembunyi" — tindakan ini tidak dapat dilihat atau dimodifikasi oleh pengguna:

Misalnya, sedikit kode ini akan meneruskan ID pengguna seperti ini:

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

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

4. Menyerahkan formulir

Baiklah—formulir Anda sudah dibuat. Sekarang, kita membutuhkan cara bagi pembaca untuk mengirimkannya . Ada dua cara untuk melakukannya: jenis input "kirim" dan jenis tombol "kirim":

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

<button type="submit">
Submit your form

</button>

Keduanya berfungsi sangat mirip, tetapi perbedaannya adalah di mana Anda meletakkan teks Anda. Jika Anda menggunakan rute jenis input, Anda ingin mengatur teks Anda sebagai nilainya. Jika Anda menggunakan tombol, salinan kiriman Anda akan berada tepat sebelum tag penutup tombol Anda.

Strategi penggantian untuk formulir interaktif di email

Untuk setiap email interaktif, penting untuk memiliki fallback. Fallback memastikan bahwa di semua klien email di mana formulir tidak berfungsi dengan sempurna, kami menyembunyikannya dan menampilkan fallback sebagai gantinya. Karena dukungan seluler untuk formulir masih bermasalah, kami memilih untuk menyembunyikan formulir kami di ponsel untuk semua email Litmus dan menargetkan pengalaman interaktif penuh di klien email terpopuler kami yang mendukung fungsionalitas formulir interaktif. Dengan kata lain, kami menerapkan kode yang…

Menampilkan formulir interaktif di
- Apple Mail
- Gmail (web desktop)
- Yahoo (web desktop)
Menampilkan mundur di:
- Semua Outlook & Windows Mail
- Semua perangkat seluler

Begini tampilannya dalam kode:

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

Contoh: Lihat formulir interaktif dalam tindakan email

Penasaran melihat semuanya beraksi?

Dalam email ini, kami menambahkan formulir untuk memudahkan pembaca menghubungi salah satu pakar lakmus kami:

Indiana Pacers meminta umpan balik dari penggemar—langsung melalui email:

Tapi bagaimana jika saya tidak bisa membuat kode?

Interaktivitas dan terutama elemen tingkat lanjut seperti formulir interaktif memerlukan sedikit keterampilan pengkodean. Jika Anda seorang pengembang email yang sudah terbiasa dengan kode email, kami harap panduan langkah demi langkah ini membantu Anda menerapkan formulir di kampanye berikutnya.

Bagi banyak pemasar dan pengembang email di tahap awal karir mereka, menerapkan elemen interaktif seperti formulir bisa terasa seperti tugas yang mustahil. Namun ada kabar baik untuk Anda—setidaknya jika Anda membuat email di Salesforce Marketing Cloud. Mark dan timnya di Salesforce baru-baru ini menambahkan Blok Formulir ke Pembuat Konten Salesforce, yang memungkinkan pemasar menambahkan formulir ke email mereka dan menyesuaikannya dengan kebutuhan mereka—tidak diperlukan keterampilan pengkodean. Jika Anda adalah pelanggan Salesforce, sebaiknya Anda memeriksanya!

Akankah lebih banyak penyedia layanan email memudahkan pemasar untuk menerapkan elemen interaktif dalam kampanye mereka? Peluncuran blok formulir dinamis Salesforce mungkin merupakan langkah pertama ke arah itu.

Bagikan, Terima Kasih!

Bagaimana Tim Email Mendukung Mesin Pemasaran: Perekaman Webinar + T&J

Dalam webinar ini, kami membahas bagaimana Anda dapat memanfaatkan kekuatan pendekatan email pertama untuk menampilkan bagian paling strategis dari tim Anda.

Baca lebih lajut

Menyampaikan Episode 20: Litmus Live Everywhere bersama Lauren Kremer

Dalam episode Delivering ini, pembawa acara Jason Rodriguez mewawancarai Lauren Kremer—speaker Litmus Live sebelumnya dan Manajer Acara baru kami—tentang bagaimana kami mengadaptasi Litmus Live pada tahun 2020, apa artinya menjadi Litmus Certified, The Email First Awards, dan bagaimana email pemasar di seluruh dunia dapat belajar di Litmus Live Everywhere.

Baca lebih lajut