Panduan Widget Form RSVPKit: Tab Content (8 Modul Lengkap)

Tab Content widget WDP RSVPKit di Elementor adalah pusat kendali fungsional yang menyediakan 8 modul terpadu: Form Header & Title, Form Fields Setup, Custom Fields Repeater (cf_*), Dynamic Visibility Rules, Confirmation Card Setup, Integrated Response Feed, WhatsApp Direct Action, serta Submit Button & Spinner untuk merancang formulir konfirmasi kehadiran yang interaktif dan cerdas.

Memahami Kebutuhan Struktur Data & Interaktivitas Formulir

Formulir konfirmasi kehadiran bukan sekadar kolom nama dan tombol kirim biasa. Dalam industri undangan pernikahan digital, formulir RSVP adalah gerbang utama pengumpulan data krusial: kepastian kehadiran, alokasi porsi konsumsi katering, sesi prosesi yang dipilih, hingga doa restu tulus dari para kerabat.

Memakai widget form generik yang kaku sering kali menyulitkan vendor. Vendor terpaksa melakukan koding manual yang rumit hanya untuk menyembunyikan kolom tertentu, membatasi jatah pendamping tamu, atau memunculkan kartu bukti reservasi setelah tombol ditekan. Formulir yang tidak intuitif juga berisiko membuat tamu lanjut usia kebingungan dan membatalkan niat mengisi konfirmasi.

WDP RSVPKit mengatasi seluruh kendala tersebut melalui Tab Content widget Elementor yang kaya fitur. Seluruh logika formulir, aturan kondisional, dan penyesuaian kolom dapat dikonfigurasi secara visual melalui antarmuka seret-dan-lepas (drag-and-drop) Elementor tanpa menyentuh kode PHP sama sekali.

Prasyarat Sebelum Konfigurasi

Pastikan hal-hal berikut telah siap sebelum mengatur widget:

Plugin Aktif: Plugin Elementor (Free/Pro) dan WDP RSVPKit telah aktif dengan lisensi resmi.
Container Siap: Siapkan Flexbox Container pada halaman editor Elementor tempat formulir akan disematkan.
Konsep Kolom Data: Tentukan data apa saja yang ingin dikumpulkan dari tamu (nama, nomor WhatsApp, kuota pax, sesi acara, ucapan, atau kolom tambahan).

Tata Letak Antarmuka Elementor Inspector Tab Content Widget WDP RSVPKit dengan 8 Modul Fungsional dan Pratinjau Kanvas

Bedah Mendalam 8 Modul Tab Content

Buka halaman undangan di editor Elementor, cari widget WDP RSVPKit Form di panel widget sebelah kiri, seret ke dalam container, lalu klik tab Content:

1. Modul Form Header & Title

Mengatur tajuk sambutan di bagian paling atas formulir:

Form Title: Teks judul utama formulir (contoh: Konfirmasi Kehadiran).
Form Subtitle: Kalimat pengantar yang santun untuk menyapa para tamu undangan.
Header Icon: Menambahkan ikon grafis SVG atau simbol cinta/cincin di atas judul.
Title Alignment: Perataan posisi tajuk (Kiri, Tengah, atau Kanan).

2. Modul Form Fields Setup

Mengatur kolom-kolom inti masukan data kehadiran:

Nama Tamu: Kolom input nama lengkap dengan opsi placeholder yang dapat disesuaikan.
Nomor WhatsApp: Saklar penentu apakah kolom telepon berstatus Required (wajib diisi) atau Optional (opsional).
Attendance Mode: Memilih gaya tampilan opsi status kehadiran:
Modern Button Cards: Tiga kartu tombol interaktif besar (Akan Hadir, Belum Pasti, Berhalangan) yang ramah sentuhan layar smartphone.
Select Dropdown: Menu tarik-turun klasik yang hemat ruang vertikal kanvas.
Pax Mode: Menentukan cara pemilihan jumlah orang yang mendampingi tamu:
Interactive Stepper (- / +): Tombol sentuh modern untuk menaikkan dan menurunkan angka porsi.
Quantity Dropdown: Daftar angka kuota maksimal sesuai batasan undangan.
Sesi Acara Selector: Memunculkan pilihan sesi prosesi jika postingan memiliki multi-sesi di metabox.

3. Modul Custom Fields Repeater (`cf_*`)

Fasilitas fleksibel untuk menambahkan kolom pertanyaan khusus tanpa batas:

Field Type: Pilihan tipe input (Teks Singkat, Pilihan Ganda / Radio, Dropdown, Checkbox, atau Area Teks Panjang).
Field Name (Slug): Kunci pengenal kolom dengan format wajib cf_namakolom (contoh: cf_ukuran_baju, cf_vegetarian_menu, atau cf_alamat_suvenir).
Field Label & Placeholder: Teks instruksi yang dibaca oleh pengunjung.
Required Toggle: Menentukan apakah kolom kustom ini wajib diisi sebelum formulir dapat dikirim.

4. Modul Dynamic Visibility Rules

Menyematkan kecerdasan logika kondisional pada elemen formulir:

Show Column If: Mengatur pemunculan kolom berdasarkan pilihan tamu. Contoh penerapan: kolom Alasan Berhalangan hanya akan muncul secara animasi jika tamu mengklik tombol Berhalangan.
Hide Stepper If: Menyembunyikan pemilih jumlah pax secara otomatis jika tamu memilih status tidak hadir, menjaga formulir tetap ringkas dan elegan.

5. Modul Confirmation Card Setup

Mengatur kartu tanda terima digital yang langsung muncul menggantikan formulir setelah tombol submit berhasil diklik:

Success Heading & Subtitle: Pesan terima kasih atas konfirmasi kehadiran.
Show Reservation Summary: Menampilkan ringkasan data nama, status, porsi pax, dan sesi acara.
Show Download Button: Menampilkan tombol simpan kartu bukti reservasi untuk dibawa ke lokasi acara.

6. Modul Integrated Response Feed

Mengatur etalase daftar ucapan doa restu yang terletak langsung di bawah formulir:

Show Response Feed Toggle: Menghidupkan atau mematikan tampilan daftar ucapan di bawah form.
Responses Per Page: Jumlah baris ucapan yang ditampilkan sebelum tombol Load More muncul.
Show Attendance Badge: Menampilkan lencana penanda kehadiran di samping nama pengirim doa.

7. Modul WhatsApp Direct Action

Memicu alur komunikasi instan setelah pengisian berhasil:

Trigger WhatsApp Redirect: Mengarahkan browser tamu secara otomatis ke aplikasi WhatsApp dengan pesan obrolan terformat rapi yang ditujukan ke nomor calon pengantin.
WhatsApp Message Template: Kustomisasi draf kalimat pembuka chat otomatis.

8. Modul Submit Button & Loading Spinner

Mengatur tombol eksekusi formulir:

Button Text: Label tombol pengiriman (contoh: Kirim Konfirmasi Kehadiran).
Button Icon: Menambahkan ikon amplop, centang, atau pesawat kertas di sisi tombol.
Loading Spinner: Animasi putaran halus yang muncul saat sistem sedang memproses data via AJAX, mencegah tamu menekan tombol berulang kali.

Tabel Parameter Kontrol Tab Content

Nama Kontrol Elementor	Tipe Kontrol	Nilai Bawaan	Fungsi Teknis
`form_title`	Text Input	`Konfirmasi Kehadiran`	Judul tajuk utama formulir di frontend
`attendance_ui_type`	Select	`button_cards`	Pilihan: `button_cards` atau `select_dropdown`
`pax_input_type`	Select	`stepper`	Pilihan: `stepper` (-/+) atau `dropdown`
`phone_field_required`	Switcher	`yes`	Validasi wajib isi nomor telepon WhatsApp
`custom_fields_list`	Repeater	(Kosong)	Daftar input tambahan dengan prefix `cf_*`
`show_response_feed`	Switcher	`yes`	Menampilkan etalase ucapan di bawah form
`show_confirm_card`	Switcher	`yes`	Menampilkan kartu tanda terima setelah kirim
`submit_button_text`	Text Input	`Kirim Konfirmasi`	Label teks pada tombol utama kirim data

Skenario Praktik Lapangan: Andy & Zhea

Vendor pernikahan Andy & Zhea merancang formulir konfirmasi yang elegan untuk pernikahan bertema Intimate Outdoor Garden Party:

Pengaturan Header: Judul disetel ke RSVP & Doa Restu, dengan perataan tengah (Center Alignment).
Penerapan Button Cards & Stepper: Opsi kehadiran disetel ke Modern Button Cards dengan 3 tombol sentuh ramah jempol, serta kuota pax menggunakan Interactive Stepper.
Penambahan Custom Field Kebutuhan Makanan: Di modul Custom Fields Repeater, vendor menambahkan 1 kolom radio baru:

Tipe: Radio Buttons
Slug: cf_dietary_preference
Label: Pilihan Menu Makanan
Opsi: Reguler, Vegetarian, Kids Meal

Logika Kondisional: Di modul Dynamic Visibility Rules, kolom pilihan menu makanan diatur hanya muncul jika tamu memilih status Akan Hadir.
Hasil Nyata: Pengantin menerima data yang sangat terperinci mengenai preferensi katering para tamu tanpa membuat formulir terlihat rumit sejak awal.

Tips & Praktik Terbaik Konfigurasi Tab Content

Gunakan Prefix cf_ Secara Konsisten: Saat menambahkan input baru di Custom Fields Repeater, selalu awali nama kolom dengan cf_ (huruf kecil dan garis bawah) agar sistem database dapat mengindeks data tersebut secara rapi.
Batasi Jumlah Kolom Input: Usahakan formulir hanya menanyakan informasi yang benar-benar esensial untuk menjaga tingkat konfirmasi tamu tetap tinggi.
Pisahkan Feed Ucapan jika Halaman Panjang: Jika halaman undangan memiliki banyak section animasi, matikan toggle feed bawaan di modul 6 dan gunakan widget FeedKit secara terpisah di bagian footer halaman.

Pertanyaan yang Sering Diajukan (FAQ)

Apakah saya bisa menambahkan kolom input kustom seperti Alamat atau Ukuran Baju? +

Bisa. Anda dapat memanfaatkan modul Custom Fields Repeater di Tab Content dengan prefix nama kolom cf_ (contoh: cf_ukuran_baju) yang datanya akan tersimpan otomatis ke database.

Apakah widget Form RSVPKit ini dapat dipasang di dalam popup Elementor? +

Bisa. Formulir RSVPKit dirancang fleksibel dan mendukung penempatan pada container halaman utama maupun di dalam jendela modal popup Elementor Pro.

Bagaimana cara menyembunyikan etalase ucapan doa dari bawah formulir? +

Buka modul ke-6 (Integrated Response Feed) di Tab Content, lalu matikan saklar 'Show Response Feed'. Ucapan doa dapat Anda tampilkan terpisah menggunakan widget FeedKit.

Bagaimana cara kerja aturan visibilitas dinamis (Dynamic Visibility Rules)? +

Aturan ini memungkinkan kolom tertentu hanya muncul jika kondisi tertentu terpenuhi, misalnya kolom teks alasan hanya muncul jika tamu memilih opsi status 'Berhalangan'.

Apakah pengiriman konfirmasi formulir ini membutuhkan proses reload halaman? +

Tidak. Seluruh pengiriman formulir diproses secara asinkron menggunakan teknologi AJAX, sehingga tamu langsung melihat kartu konfirmasi tanpa kedipan layar.