Attendance Button Cards: Tombol Kartu Kehadiran Interaktif
Attendance Button Cards mengubah input dropdown kehadiran konvensional menjadi dua kartu tombol interaktif lebar (Akan Hadir vs Tidak Hadir) lengkap dengan animasi border glow, radio indicator aktif, dan responsivitas ramah sentuhan jempol smartphone.
Memahami Kebutuhan & Masalah Lapangan
Pada undangan pernikahan digital konvensional, konfirmasi kehadiran tamu biasanya menggunakan elemen formulir dropdown select konvensional bawaan peramban (native dropdown). Di layar smartphone, elemen ini menyulitkan tamu: teks pilihan sering kali terpotong, membutuhkan minimal dua ketukan hanya untuk melihat pilihan, dan terasa kaku seperti formulir pendaftaran administrasi kantor.
Akibatnya, banyak tamu enggan mengisi konfirmasi, salah menekan opsi antara hadir atau tidak, atau bahkan mengabaikan formulir tersebut sama sekali. Ketidakpastian data ini menjadi mimpi buruk bagi calon pengantin dan pihak catering dalam memprediksi jumlah porsi prasmanan yang harus disediakan.
WDP RSVPKit menghadirkan fitur Attendance Button Cards sebagai solusi visual interaktif. Pilihan konfirmasi kehadiran dihadirkan dalam bentuk kartu tombol dua kolom yang elegan, memiliki visual state yang kontras (normal, hover, active glow), dan terhubung langsung dengan logika kondisional pintar.
Prasyarat Sebelum Memulai
Sebelum menerapkan fitur ini pada halaman undangan Anda, pastikan:
- Website WordPress Anda telah terpasang tema yang kompatibel serta plugin Elementor (Free atau Pro minimal versi 3.0+).
- Plugin WDP RSVPKit minimal versi 1.4.0 aktif dengan lisensi resmi terverifikasi.
- Undangan telah memiliki data sesi acara yang disetel pada panel Metabox RSVP.
Pokok Bahasan & Konfigurasi Teknis
1. Keunggulan UX Tombol Kartu pada Perangkat Mobile
Studi interaksi mobile membuktikan bahwa tombol berbentuk kartu (card-based controls) meningkatkan rasio penyelesaian formulir (completion rate) secara signifikan karena:
- Jangkauan Jempol Alami (Thumb Zone): Area sentuh kartu dirancang minimal setinggi 60px dengan lebar proporsional, memenuhi pedoman aksesibilitas Apple Human Interface Guidelines dan Google Material Design.
- Diferensiasi Visual Instan: Kartu "Akan Hadir" memiliki indikator ikon centang emas/hijau, sedangkan "Tidak Hadir" menyajikan ikon amplop/silang yang ramah, menghindarkan rasa canggung bagi tamu yang berhalangan.
- Status Seleksi Jelas (Clear Affordance): Saat kartu dipilih, sistem menyematkan kelas status aktif
.wdp-card--selectedyang memicu border warna emas serta ambient box-shadow glow.
2. Mengaktifkan Attendance Button Cards di Elementor
Untuk mengaktifkan mode kartu tombol pada formulir undangan:
- Buka halaman undangan di editor Elementor.
- Klik widget WDP RSVPKit Form untuk membuka panel pengeditan di sebelah kiri.
- Buka tab Content, lalu klik accordion 2. Form Fields Setup.
- Cari parameter Attendance Control Type, lalu ubah opsi dari Dropdown Select menjadi Button Cards.
- Tentukan tata letak kartu pada parameter Cards Layout:
- 2 Columns (Inline): Dua kartu berdampingan secara horizontal (sangat ideal untuk smartphone modern).
- 1 Column (Stacked): Kartu tersusun atas-bawah (cocok untuk kontainer sidebar sempit).
3. Tabel Parameter Konfigurasi Tab Style
| Nama Kontrol di Tab Style | Opsi Default | Fungsi & Rekomendasi Desain |
|---|---|---|
| Card Background (Normal) | #1a1a24 | Warna latar kartu saat belum dipilih tamu |
| Card Background (Selected) | #1e1b15 | Warna latar kartu saat aktif terpilih |
| Border Active Color | #c89556 | Garis batas penegas kartu terpilih (Aksen Emas) |
| Active Glow Shadow | 0 4px 16px rgba(200,149,86,0.3) | Efek pencahayaan lembut penanda kartu aktif |
| Radio Icon Indicator | Enabled | Menampilkan lingkaran seleksi di sudut kiri atas kartu |
| Card Border Radius | 12px | Sudut melengkung kartu agar tampil modern dan lembut |
| Subtext Typography | Inter / Outfit, 11px | Teks keterangan penjelas di bawah judul kartu |
4. Integrasi Logika Kondisional Otomatis
Attendance Button Cards bekerja bersama script AJAX bawaan WDP RSVPKit. Saat tamu mengetuk salah satu kartu, event listener JavaScript langsung memicu aksi tanpa memuat ulang halaman (zero page-reload):
- Kartu Akan Hadir Terpilih: Kontainer input jumlah rombongan keluarga (
#wdp-pax-wrapper) dan opsi pemilihan sesi (#wdp-session-wrapper) langsung beranimasi meluncur ke bawah (slide down). - Kartu Tidak Hadir Terpilih: Input jumlah pax otomatis dikunci pada angka 0, dan sistem langsung menampilkan opsi ucapan doa serta tautan amplop digital/kado pernikahan.
Studi Kasus Nyata: Pernikahan Andy & Zhea
Pasangan Andy & Zhea menyelenggarakan resepsi pernikahan di ballroom dengan kapasitas ketat 700 pax katering. Pada undangan digital yang disebarkan ke 350 kontak tamu melalui WhatsApp:
- Tantangan: Memastikan tamu usia paruh baya tidak bingung saat memilih konfirmasi kehadiran di smartphone mereka.
- Penerapan: Andy & Zhea menggunakan mode Attendance Button Cards dengan kartu 2 kolom berlatar gelap elegan dan border aktif emas (#c89556). Di bawah tulisan "Akan Hadir" disematkan keterangan "Insya Allah Hadir", dan di bawah "Tidak Hadir" disematkan keterangan "Titip Doa Restu".
- Hasil: Dari 350 undangan yang disebar, 318 tamu memberikan konfirmasi dalam 48 jam pertama dengan akurasi 100% tanpa ada komplain kebingungan antarmuka.