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:

  1. Tamu sering salah mengetik angka berlebihan (misal mengetik 10 orang karena membawa seluruh tetangga).
  2. Di smartphone, mengetuk kolom teks angka memunculkan keyboard virtual besar yang menutupi tombol kirim (submit button).
  3. 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

Konfigurasi Quantity Stepper WDP RSVPKit
Konfigurasi Quantity Stepper WDP RSVPKit

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:

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

  1. 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 InspectorNilai RekomendasiDeskripsi & Dampak
Quantity Input ControlStepper (-/+)Mengaktifkan tombol pill interaktif pengganti input manual
Minimum Value1Mencegah tamu memilih 0 saat menyatakan hadir
Display Unit SuffixOrang / PaxKata keterangan yang disematkan di belakang angka
Stepper Button Size44px - 50pxUkuran diameter tombol penyesuai standar Apple Touch Target
Pill Background Color#1a1b26Warna dasar kapsul stepper yang selaras dengan tema gelap
Active Digit Color#c89556Warna 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:

PHP
// 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=2 untuk 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.

Tips & Praktik Terbaik

Aksesibilitas Mobile: Pertahankan ukuran tombol stepper minimal 44x44 pixel di tab Style agar nyaman ditekan oleh tamu lanjut usia tanpa khawatir meleset.
Integrasi BukuTamu Pro: Nilai kuota pax yang dipilih tamu melalui stepper ini akan langsung terbaca otomatis pada sistem meja penerima tamu BukuTamu Pro saat check-in di lokasi acara.

Pertanyaan yang Sering Diajukan (FAQ)

Mengapa tombol Stepper (-/+) lebih unggul dibanding input teks angka biasa? +
Tombol stepper mencegah tamu memasukkan karakter aneh, angka negatif, atau angka ratusan yang merusak kalkulasi katering, serta tidak memicu keyboard angka di smartphone yang menutupi layar.
Bagaimana cara membatasi agar tamu tertentu hanya bisa memilih maksimal 2 orang? +
Anda cukup menyematkan parameter kuota pada tautan undangan, misalnya &pax=2. Sistem Pax Gating WDP RSVPKit otomatis mengunci tombol plus saat angka mencapai 2.
Berapa batas minimal tamu yang bisa dipilih pada stepper? +
Batas minimal standar adalah 1 orang tamu. Tombol minus (-) otomatis menjadi nonaktif saat angka berada di posisi 1.
Apakah stepper tetap muncul jika tamu memilih opsi Tidak Hadir? +
Tidak. Logika kondisional RSVPKit otomatis menyembunyikan input kuota pax jika tamu memilih kartu Tidak Hadir demi menjaga kerapian antarmuka.
Apakah tampilan pill stepper bisa disesuaikan dengan warna tema undangan? +
Bisa. Ukuran tombol plus-minus, warna angka digital, dan border pill bisa diatur secara visual di Tab Style widget Elementor.