Integrasi Formulir SaaS Pemesanan Undangan Menggunakan JetFormBuilder
Integrasi JetFormBuilder dengan WDP Link Post memungkinkan agensi menciptakan alur pendaftaran undangan multi-tahap (multi-step onboarding form) yang elegan. Klien dapat mengisi data mempelai, memilih paket desain, menentukan nama subdomain, dan langsung menerima website undangan yang siap diedit secara otomatis.
Keunggulan Form Builder Berbasis Blok untuk SaaS Agensi
Untuk agensi yang menginginkan pengalaman registrasi yang lebih interaktif daripada checkout toko online biasa, JetFormBuilder memberikan fleksibilitas penuh:
- Multi-Step Form: Memecah formulir panjang menjadi beberapa tahapan santai (Langkah 1: Data Mempelai, Langkah 2: Pilihan Subdomain, Langkah 3: Pilih Template).
- Live Conditional Logic: Menampilkan atau menyembunyikan kolom input sesuai paket layanan yang dipilih klien.
- Integrasi Native Hook: Memicu aksi pembuatan postingan dan penetapan metadata WDP Link Post secara instan di sisi server.
Konfigurasi Formulir JetFormBuilder
1. Struktur Kolom Input Formulir
Buat formulir baru di menu JetFormBuilder > Add New, lalu susun blok field berikut:
- Text Field (Nama Pengantin Pria): Nama kolom
nama_pria. - Text Field (Nama Pengantin Wanita): Nama kolom
nama_wanita. - Text Field (Pilihan Subdomain):
- Nama kolom:
slug_undangan. - Wajib diisi (Required).
- Validasi Regex:
^[a-z0-9-]+$(hanya huruf kecil, angka, dan tanda hubung).
- Select / Radio Field (Pilihan Tema Desain):
- Nama kolom:
template_master_id. - Berisi daftar ID master template Elementor yang Anda miliki (contoh: Tema Rustic = 101, Tema Floral = 102).
2. Pengaturan Post-Submit Actions
Pada bilah pengaturan sebelah kanan, tambahkan dua aksi utama:
- Aksi 1: Register User:
- Membaut akun login WordPress baru untuk pengantin menggunakan email dan kata sandi yang diinput klien.
- Tetapkan peran pengguna (User Role) sebagai
Subscriber.
- Aksi 2: Custom Action (Otomasi WDP Link Post):
- Pilih opsi Custom Action, beri nama aksi:
wdplp_create_invitation.
3. Penanganan Hook PHP di functions.php
Tambahkan skrip pengendali berikut untuk menghubungkan form ke mesin WDP Link Post:
PHP
add_action('jet-form-builder/custom-action/wdplp_create_invitation', function($request, $action_handler) {
$slug = sanitize_title($request['slug_undangan']);
$template_id = intval($request['template_master_id']);
$user_id = get_current_user_id();
// Validasi apakah slug sudah dipakai postingan lain
$exists = get_posts([
'post_type' => 'page',
'meta_key' => '_wdplp_subdomain',
'meta_value' => $slug,
'fields' => 'ids'
]);
if (!empty($exists)) {
throw new Exception('Maaf, subdomain ' . esc_html($slug) . ' sudah terpakai. Silakan pilih nama lain.');
}
// Buat postingan undangan baru
$new_post_id = wp_insert_post([
'post_title' => 'Undangan ' . sanitize_text_field($request['nama_pria']) . ' & ' . sanitize_text_field($request['nama_wanita']),
'post_name' => $slug,
'post_status' => 'publish',
'post_type' => 'page',
'post_author' => $user_id,
'post_content' => get_post_field('post_content', $template_id)
]);
if (!is_wp_error($new_post_id)) {
// Salin data Elementor dari master template
update_post_meta($new_post_id, '_elementor_data', get_post_meta($template_id, '_elementor_data', true));
update_post_meta($new_post_id, '_elementor_edit_mode', 'builder');
update_post_meta($new_post_id, '_wp_page_template', 'elementor_canvas');
// Daftarkan ke WDP Link Post
update_post_meta($new_post_id, '_wdplp_subdomain', $slug);
update_post_meta($new_post_id, '_wdplp_tier', 'tier1');
}
});
Studi Kasus Operasional: Registrasi Pasangan Andy & Zhea
Pasangan Andy & Zhea mendaftar melalui form multi-step agensi:
- Andy mengisi data kedua mempelai dan memilih tema "Modern Gold".
- Pada kolom subdomain, Andy mengetik
andy-zhea. - Setelah tombol "Kirim & Terbitkan" ditekan, JetFormBuilder menjalankan validasi server dalam 0.8 detik.
- Klien langsung dialihkan ke halaman dasbor pengantin mandiri dengan notifikasi sukses dan link undangan yang sudah dapat diakses.
Tips & Praktik Terbaik
Aktifkan Fitur Auto-Login Pasca Registrasi: Pada aksi Register User di JetFormBuilder, aktifkan opsi Log In User after Registration agar pengantin tidak perlu login ulang setelah mengisi formulir pemesanan.
Gunakan Exception Handler untuk Pesan Kesalahan: Selalu gunakan struktur throw Exception pada hook kustom PHP agar jika ada kesalahan (seperti slug kembar), pesan error muncul secara elegan di antarmuka formulir tanpa memicu halaman putih PHP.
Pertanyaan yang Sering Diajukan (FAQ)
Mengapa memilih JetFormBuilder untuk membangun formulir registrasi undangan SaaS?
JetFormBuilder adalah plugin form builder berbasis blok Gutenberg yang sangat kuat, ringan, dan memiliki fitur multi-step form, pembuatan user registrasi otomatis, serta custom post-submit action hook yang mudah dihubungkan ke PHP.
Bagaimana cara memvalidasi format karakter slug subdomain di JetFormBuilder?
Pada pengaturan field Text slug_undangan di JetFormBuilder, aktifkan opsi Input Mask atau Regular Expression Validation dengan pola ^[a-z0-9-]+$ untuk menjamin input hanya berisi huruf kecil, angka, dan tanda hubung.
Apakah JetFormBuilder bisa sekaligus membuat akun pengguna (user account) untuk pengantin?
Bisa. Pada panel Post-Submit Actions di JetFormBuilder, tambahkan action Register User sebelum action Insert Post agar pengantin otomatis memiliki akun dengan role Subscriber atau Customer.
Bagaimana cara menghubungkan data field form ke metadata WDP Link Post?
Anda dapat menggunakan Post-Submit Action berjenis 'Insert/Update Post' dengan memetakan field slug ke meta key _wdplp_subdomain, atau menggunakan aksi kustom 'Call a Webhook / Custom Action'.
Bisakah setelah submit form klien langsung dialihkan ke URL subdomain barunya?
Sangat bisa. Anda dapat menyetel opsi Redirect to Page pada JetFormBuilder dengan parameter URL dinamis yang mengarah ke https://%slug_undangan%.websiteundangan.com.