Quantity Stepper (-/+) untuk Pemilihan Kuota Tamu (Pax)
Fitur Quantity Stepper menyajikan kontrol tombol plus (+) dan minus (-) berdesain pill yang ramah jempol smartphone untuk menentukan jumlah rombongan keluarga yang hadir, tersinkronisasi otomatis dengan batasan maksimal kuota Pax Gating.
Memahami Kebutuhan & Masalah Lapangan
Salah satu tantangan terbesar bagi pasangan pengantin dan vendor wedding organizer adalah menghitung kepastian porsi katering. Ketika formulir RSVP menggunakan kotak input teks angka manual konvensional, berbagai masalah lapangan kerap terjadi:
- Tamu sering salah mengetik angka berlebihan (misal mengetik 10 orang karena membawa seluruh tetangga).
- Di smartphone, mengetuk kolom teks angka memunculkan keyboard virtual besar yang menutupi tombol kirim (submit button).
- Terjadi kesalahan ketik bernilai 0 atau angka negatif yang memicu error saat data dikirim ke spreadsheet.
Masalah ini berisiko menimbulkan pembengkakan biaya katering (over-budget) atau sebaliknya, kekurangan makanan di lokasi pesta resepsi.
Fitur Quantity Stepper di WDP RSVPKit menggantikan kotak teks kaku tersebut dengan kontrol pill-shaped stepper interaktif: satu sentuhan pada tombol plus (+) menambah 1 orang, dan satu sentuhan pada minus (-) mengurangi 1 orang, terkunci rapat dalam rentang kuota resmi yang diizinkan pengantin.
Prasyarat Sebelum Memulai
Sebelum mengonfigurasi fitur Quantity Stepper, pastikan:
- Plugin WDP RSVPKit v1.4.0 telah aktif dan berlisensi resmi.
- Modul formulir RSVPKit telah diletakkan pada kanvas Elementor.
- Jika ingin membatasi kuota tamu secara individual, pastikan format tautan tamu telah memahami parameter URL
&pax=.
Pokok Bahasan & Konfigurasi Teknis
1. Anatomi Komponen Stepper Ramah Mobile
Komponen stepper WDP RSVPKit terdiri dari tiga elemen harmonis dalam satu kontainer pill:
- Tombol Minus (
-): Tombol berbentuk bundar atau squircle di sisi kiri dengan animasi sentuh halus. Tombol ini otomatis berstatus disabled saat angka berada di nilai batas minimal (default: 1). - Indikator Angka Digital: Teks angka besar berkarakter tegas di bagian tengah yang menampilkan jumlah orang secara realtime (misal: "2 Orang").
- Tombol Plus (
+): Tombol di sisi kanan untuk menambah jumlah tamu. Tombol ini otomatis terkunci dan berwarna abu-abu redup saat nilai mencapai batas maksimal jatah kuota tamu tersebut.
2. Konfigurasi Batas Kuota (Pax Gating Integration)
WDP RSVPKit memiliki arsitektur validasi kuota dua tingkat:
- Batas Maksimal Global (Metabox General):
Diatur melalui panel Metabox halaman undangan: menu RSVP Settings > tab General. Tentukan nilai pada opsi Default Max Pax per Guest (misal: 4). Tamu umum tanpa parameter khusus tidak akan pernah bisa memilih lebih dari 4 orang.
- Batas Maksimal Personal (Parameter URL
&pax=):
Jika Anda menyebarkan tautan khusus seperti: https://weddingandyzhea.com/invitation/?to=Budi+Santoso&pax=2 Sistem RSVPKit secara otomatis mendeteksi angka 2 dan menimpa limit global khusus untuk Bapak Budi Santoso. Tombol plus (+) pada smartphone Bapak Budi akan langsung terkunci begitu angka menyentuh 2 orang.
3. Tabel Opsi Pengaturan di Elementor
| Opsi di Elementor Inspector | Nilai Rekomendasi | Deskripsi & Dampak |
|---|---|---|
| Quantity Input Control | Stepper (-/+) | Mengaktifkan tombol pill interaktif pengganti input manual |
| Minimum Value | 1 | Mencegah tamu memilih 0 saat menyatakan hadir |
| Display Unit Suffix | Orang / Pax | Kata keterangan yang disematkan di belakang angka |
| Stepper Button Size | 44px - 50px | Ukuran diameter tombol penyesuai standar Apple Touch Target |
| Pill Background Color | #1a1b26 | Warna dasar kapsul stepper yang selaras dengan tema gelap |
| Active Digit Color | #c89556 | Warna aksen emas pada angka kuota yang dipilih |
4. Proteksi Sisi Server (Server-Side Sanitization)
Bukan sekadar animasi frontend di JavaScript, WDP RSVPKit menyertakan validasi PHP sisi server:
// Cuplikan sanitasi server-side WDP RSVPKit
$submitted_pax = absint($_POST['wdp_pax']);
$allowed_max = !empty($_POST['wdp_max_pax']) ? absint($_POST['wdp_max_pax']) : 4;
if ($submitted_pax < 1) {
$submitted_pax = 1;
} elseif ($submitted_pax > $allowed_max) {
$submitted_pax = $allowed_max; // Mengunci dari manipulasi inspect element
}
Proteksi ini memastikan data yang masuk ke database WordPress maupun Google Sheets 100% valid dan bebas dari manipulasi pihak luar.
Studi Kasus Nyata: Pernikahan Andy & Zhea
Pada pernikahan Andy & Zhea, terdapat dua kategori undangan:
- Tamu VIP / Keluarga Inti: Diberikan jatah 4 pax per undangan untuk mengikutsertakan pasangan dan anak-anak.
- Tamu Teman Kantor & Rekan Kerja: Diberikan jatah maksimal 2 pax (plus one).
Dengan memanfaatkan fitur Quantity Stepper & Pax Gating:
- Tim pengantin membuat tautan generator undangan yang menyematkan
&pax=2untuk seluruh rekan kantor. - Rekan kantor yang membuka undangan hanya bisa menaikkan angka stepper maksimal hingga 2 orang. Tombol plus otomatis terkunci dan memunculkan notifikasi halus bahwa kuota undangan adalah 2 orang.
- Hasil: Tidak ada satu pun rombongan tamu rekan kantor yang datang membawa 4-5 orang tanpa konfirmasi, sehingga alokasi kursi dan katering Andy & Zhea tepat 100% sesuai kapasitas gedung.