Dapatkah Anda memasukkan formulir html di email?

Pernahkah Anda mendengar kata-kata ini sebelumnya? . Banyak pemasar berpikir bahwa menggunakan formulir interaktif dalam email tidak mungkin dilakukan, tetapi kami di sini untuk mematahkan mitos tersebut. Sebenarnya 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 menyelami lebih dalam formulir interaktif dalam email di Litmus Live 2019—dan itu menginspirasi tim kami di sini di Litmus untuk bereksperimen dengan formulir interaktif juga. Dalam postingan ini, kami akan membagikan prinsip-prinsip dasar dari pembicaraan Mark bersama dengan tips dan saran tambahan dari pengujian kami sendiri sehingga Anda juga dapat membuat formulir interaktif hadir di email Anda.

Siap menyelam?

Kekuatan formulir interaktif dalam email

Pikirkan setiap saat 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 mana 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 mengirim pelanggan Anda ke halaman arahan
• Izinkan pelanggan Anda memperbarui profil pengguna atau preferensi email tanpa mereka harus mengunjungi pengaturan akun pengguna mereka
• Sematkan formulir perolehan prospek tepat 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 friksi. Menyematkan formulir di dalam email Anda dapat mengurangi friksi, mempersingkat jalur Anda menuju konversi, dan pada akhirnya meningkatkan konversi

Dukungan klien email untuk formulir dalam email

Salah satu alasan terbesar mengapa perancang dan pengembang email enggan menggunakan formulir interaktif adalah karena mereka khawatir bahwa mereka mungkin tidak didukung di banyak klien email. Mitos dukungan yang tidak mencukupi 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 klien email populer

 

Klien Email

Formulir didukung?

Catatan

Surat Apple

Ya

"GET" berfungsi seperti yang diharapkan. "POST" membuka halaman arahan dengan formulir alih-alih mengirimkan dari email

Aplikasi Surat iPhone

Agak

"GET" berfungsi seperti yang diharapkan. "POST" tidak dikirim

Email Desktop Gmail

Ya

Kirim dengan peringatan popup

Gmail (iOS)

Agak

Tidak mengirimkan di iOS GANGA. Input “POST” juga dinonaktifkan

Android Gmail

Agak

Hanya "GET" yang berfungsi, tetapi membuka halaman arahan dengan formulir alih-alih mengirim dari email. Dengan "POST", formulir muncul secara visual, tetapi tidak mengizinkan input pengguna

Email Web Seluler Gmail

Ya

Outlook di Windows

Tidak

Surat Windows 10

Tidak

Outlook MacOS

Tidak

Formulir muncul secara visual dan memungkinkan input pengguna di alamat email Microsoft, tetapi tidak mengizinkan pengiriman

Pandangan. com

Tidak

Kirim hanya saat email dibuka di jendelanya sendiri, bukan kirim dari tampilan kotak masuk. Setelah pengiriman, atribut input diawali dengan "x_" sehingga dapat menyebabkan masalah dalam pengumpulan data. Akan merekomendasikan bersembunyi untuk klien ini

Outlook iOS

Ya

Outlook Android

Agak

Formulir ditampilkan secara visual, tetapi keyboard tidak muncul untuk memungkinkan pengguna memasukkan informasi sehingga pengguna harus menyalin dan menempelkan teks untuk memasukkan. Akan merekomendasikan bersembunyi untuk klien ini ketika input keyboard digunakan tetapi izinkan formulir jika menggunakan input lain

Yahoo. Email Web Desktop

Ya

Kirim dengan peringatan popup

Yahoo. iOS

Tidak

Formulir muncul secara visual dan memungkinkan input pengguna, tetapi tidak memungkinkan pengiriman

Yahoo. Android

Agak

Formulir ditampilkan secara visual, tetapi keyboard tidak muncul untuk memungkinkan pengguna memasukkan

Email Web Desktop AOL

Ya

AOL iOS

Tidak

Formulir muncul secara visual dan memungkinkan input pengguna, tetapi tidak memungkinkan pengiriman

AOL Android

Ya

Aplikasi Surat Samsung

Agak

Formulir ditampilkan secara visual, tetapi keyboard tidak muncul untuk memungkinkan pengguna memasukkan informasi. Akan merekomendasikan bersembunyi untuk klien ini ketika 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?

1. Siapkan dasar-dasarnya

Mari kita mulai dengan framework yang sangat sederhana

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

• Tindakan
  Ini menentukan halaman arahan atau tujuan pengiriman data formulir
• metode
  Ada dua cara agar data Anda dikirimkan ke tujuan itu. Melalui permintaan GET atau POST. GET memiliki dukungan email yang lebih baik, tetapi ada satu hal yang perlu diingat. Jika Anda mengirimkan data melalui metode GET, pada dasarnya Anda melampirkan data tersebut 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 kolom 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

 First Name:

Anda ingin mengumpulkan masukan teks untuk elemen dengan id=”fname” — dan label untuk=”fname” menghubungkan keduanya. Beberapa klien email web mengubah kode Anda dan tidak mendukung pendekatan for & id. Mereka suka menambahkan prefiks ke kelas dan nama ID Anda—jadi ID Anda mungkin akan diubah dan atribut for Anda tidak. Hasil. 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

First Name: 

Anda akan memiliki beberapa jenis masukan teks untuk dipilih, termasuk

_

Memilih jenis masukan yang tepat untuk setiap bidang formulir membantu Anda melakukan dua hal. Saat dilihat di ponsel, itu 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 perlu mengirimkan dua hal. Sebuah nama dan sebuah nilai

• Nama
  Itu adalah 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? . //contoh. com?Fname=Mark adalah URL yang mengirimkan nama depan "Tandai" (=nilai) untuk bidang formulir Nama Depan (=nama)

Mari tambahkan area komentar (nama=”komentar”) ke formulir kita

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 menyiapkan 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 "on" atau "off". Itu berfungsi, tetapi Anda mungkin ingin memperbarui nilai ke kata-kata yang berbeda, bergantung pada bagaimana Anda berencana menangani data di pihak penerima

Misalnya, inilah kotak centang yang mengirimkan nilai "setuju" jika pelanggan Anda mencentang kotak untuk menyetujui syarat dan ketentuan Anda

http://example.com?t-c=agree

_

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

_

Apakah Anda melihat centang pada tombol radio pertama itu?

Mengelompokkan pilihan bersama

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

• Fieldsets akan mengelompokkan item terkait bersama
• 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

http://example.com?Fname=Mark

_0

Fieldset berguna jika Anda ingin mengelompokkan potongan informasi yang berbeda seperti alamat—jalan, kode pos, negara bagian, dan negara

Penataan gaya default untuk tombol radio dan kotak centang tidak bagus. Keduanya ditampilkan agak kecil, sehingga 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

http://example.com?Fname=Mark

_1

Sekarang setelah kita menyembunyikan input default, kita perlu mengganti status input fokus dengan gaya kita sendiri, menambahkan sorotan atau garis besar ke elemen yang menjadi fokus pembaca

http://example.com?Fname=Mark

_2

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

http://example.com?Fname=Mark

_3

3. Meneruskan informasi tersembunyi

Kemungkinan ada beberapa informasi yang ingin Anda berikan 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 masukan "tersembunyi" — tindakan ini tidak dapat dilihat atau diubah oleh pengguna

Misalnya, sedikit kode ini akan meneruskan ID pengguna seperti ini

http://example.com?Fname=Mark

_4

http://example.com?Fname=Mark

_5

4. Mengirimkan formulir

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

http://example.com?Fname=Mark

_6

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

Strategi fallback untuk formulir interaktif di email

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

• Menunjukkan bentuk interaktif di
  • Surat Apple
  • Gmail (web desktop)
  • Yahoo (web desktop)
• Menunjukkan fallback di
  • Semua Outlook & Windows Mail
  • Semua perangkat seluler

Begini tampilannya dalam kode

CSS

http://example.com?Fname=Mark

_7

HTML

http://example.com?Fname=Mark

_8

 

Contoh. Lihat formulir interaktif dalam email beraksi

Penasaran ingin melihat semuanya beraksi?

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

Indiana Pacers meminta umpan balik dari penggemar mereka—langsung di dalam email

Tetapi 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

Namun, bagi banyak pemasar dan pengembang email di tahap awal karier mereka, menerapkan elemen interaktif seperti formulir terasa seperti tugas yang mustahil. Namun ada beberapa 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, memungkinkan pemasar untuk menambahkan formulir ke email mereka dan menyesuaikannya dengan kebutuhan mereka—tidak diperlukan keterampilan pengkodean. Jika Anda adalah pelanggan Salesforce, kami mendorong Anda untuk memeriksanya

Akankah lebih banyak penyedia layanan email memudahkan pemasar untuk menerapkan elemen interaktif dalam kampanye mereka?