Formulir sangat penting untuk situs web mana pun—dari formulir kontak sederhana hingga alur pendaftaran multi-langkah yang kompleks. Elementor Pro menyertakan widget Formulir bawaan yang menghilangkan kebutuhan untuk plugin formulir terpisah dalam banyak kasus. Dalam panduan ini, kami membahas cara membuat formulir kontak, formulir pendaftaran, dan formulir multi-langkah menggunakan Elementor Pro, bersama dengan opsi integrasi untuk pemasaran email dan layanan CRM.
Tutorial ini memerlukan Elementor Pro. Versi gratis dari Elementor tidak menyertakan widget Formulir.
Ikhtisar Widget Formulir Elementor
Widget Formulir Elementor mendukung jenis bidang berikut:
| Jenis Bidang | Kasus Penggunaan | Catatan |
|---|---|---|
| Teks | Nama, perusahaan, subjek | Input teks satu baris |
| Pengumpulan alamat email | Termasuk validasi format email | |
| Textarea | Isi pesan, komentar, deskripsi | Teks multi-baris dengan baris yang dapat dikonfigurasi |
| Tel | Nomor telepon | Mengaktifkan keyboard numerik di ponsel |
| Nomor | Kuantitas, anggaran, penilaian | Validasi min/maks/langkah |
| URL | Alamat situs web | Validasi format URL |
| Pilih | Pilihan dropdown (negara, kategori) | Pilih tunggal atau ganda |
| Radio | Pilihan tunggal dari opsi (jenis layanan) | Opsi terlihat tanpa dropdown |
| Checkbox | Pilihan ganda (minat, layanan) | Pilihan ganda diperbolehkan |
| Tanggal | Tanggal janji, tanggal acara | Pemilih tanggal bawaan |
| Waktu | Jadwal janji | Kontrol pemilihan waktu |
| Unggah File | Pengiriman resume, dokumen, gambar | Jenis file dan batas ukuran yang dapat dikonfigurasi |
| Penerimaan | Syarat dan ketentuan, persetujuan GDPR | Checkbox wajib dengan tautan |
| Tersembunyi | Data pelacakan (URL halaman, pengarah) | Tidak terlihat oleh pengguna |
| reCAPTCHA | Perlindungan spam | Checkbox v2 atau v3 tidak terlihat |
| Honeypot | Anti-spam (tidak terlihat oleh manusia) | Bidang tersembunyi yang menangkap bot |
Membuat Formulir Kontak
Langkah 1: Tambahkan Widget Formulir
- Buka halaman mana pun di editor Elementor
- Cari "Formulir" di panel widget
- Seret widget Formulir ke dalam tata letak Anda
- Formulir default mencakup bidang Nama, Email, dan Pesan
Langkah 2: Konfigurasi Bidang Formulir
Untuk formulir kontak standar, konfigurasi bidang ini bekerja dengan baik:
- Nama (Bidang teks, wajib) – Placeholder: "Nama Anda"
- Email (Bidang email, wajib) – Placeholder: "[email protected]"
- Subjek (Bidang teks, opsional) – Placeholder: "Bagaimana kami dapat membantu?"
- Pesan (Bidang textarea, wajib) – Placeholder: "Ceritakan tentang proyek Anda...", Baris: 5
- reCAPTCHA atau Honeypot untuk perlindungan spam
Langkah 3: Konfigurasi Tindakan Setelah Pengiriman
Di bawah bagian "Tindakan Setelah Pengiriman", konfigurasi apa yang terjadi ketika pengguna mengirimkan formulir: For related information, see our guide on Elementor complete guide.
- Email: Kirim data formulir ke alamat email Anda (atau beberapa alamat)
- Redirect: Arahkan pengguna ke halaman terima kasih setelah pengiriman
- Popup: Tampilkan popup konfirmasi
- Webhook: Kirim data formulir ke URL eksternal (Zapier, Make, API kustom)
- Mailchimp / ConvertKit / Drip: Tambahkan pelanggan ke daftar pemasaran email
- Slack: Kirim notifikasi ke saluran Slack
- Discord: Kirim notifikasi ke webhook Discord
Langkah 4: Gaya Formulir
Di tab Gaya, sesuaikan penampilan visual: For related information, see our guide on Elementor templates and kits.
- Tata letak formulir
- Jenis bidang: Bidang bertumpuk (lebar penuh) atau inline (bersebelahan)
- Gaya bidang: Border, warna latar belakang, padding, border-radius, warna saat fokus
- Gaya label: Keluarga font, ukuran, warna, spasi
- Gaya tombol: Warna latar belakang, warna teks, border, efek hover, opsi lebar penuh
- Pesan: Warna dan tipografi pesan sukses dan kesalahan
Membuat Formulir Multi-Langkah
Formulir multi-langkah berguna untuk formulir panjang (pendaftaran, aplikasi, survei) di mana menampilkan semua bidang sekaligus dapat membebani pengguna. Elementor Pro mendukung formulir multi-langkah secara native. For related information, see our guide on creating landing pages with Elementor.
Cara Mengatur Langkah
- Tambahkan widget Form ke halaman Anda
- Dalam daftar bidang formulir, tambahkan jenis bidang "Langkah" di antara kelompok bidang
- Setiap bidang Langkah membuat langkah baru dengan tombol "Selanjutnya" dan "Sebelumnya"
- Contoh struktur:
- Langkah 1: Nama, Email, Telepon (Informasi Pribadi)
- Langkah 2: Perusahaan, Anggaran, Timeline (Detail Proyek)
- Langkah 3: Pesan, Unggah Berkas (Informasi Tambahan)
Formulir multi-langkah menampilkan indikator kemajuan yang menunjukkan langkah mana yang sedang diambil pengguna. Ini mengurangi kompleksitas yang dirasakan dan meningkatkan tingkat penyelesaian dibandingkan dengan menampilkan semua bidang sekaligus.
Membuat Formulir Pendaftaran Pengguna
Elementor Pro dapat membuat formulir pendaftaran pengguna WordPress tanpa plugin terpisah:
- Tambahkan widget Form dan konfigurasikan bidang (Nama Pengguna, Email, Kata Sandi)
- Di bawah "Tindakan Setelah Kirim," tambahkan tindakan "Daftar"
- Petakan setiap bidang formulir ke bidang pengguna WordPress yang sesuai
- Tetapkan peran pengguna default untuk pendaftaran baru
- Opsional, arahkan pengguna ke halaman akun mereka setelah pendaftaran
Catatan: WordPress memerlukan admin untuk menyetujui pengguna baru secara default. Anda dapat mengubah ini di bawah Pengaturan → Umum → Keanggotaan jika Anda ingin pengguna mendaftar secara bebas.
Integrasi dengan Layanan Pemasaran Email
Elementor Pro terintegrasi dengan platform pemasaran email populer secara langsung:
Layanan Jenis Integrasi Langkah Pengaturan Mailchimp Native (terintegrasi) Tambahkan kunci API → Pilih daftar → Petakan bidang ConvertKit Native (terintegrasi) Tambahkan kunci API → Pilih formulir → Petakan bidang ActiveCampaign Native (terintegrasi) Tambahkan kredensial API → Pilih daftar → Petakan bidang Drip Native (terintegrasi) Tambahkan token API → Pilih akun → Petakan bidang GetResponse Native (terintegrasi) Tambahkan kunci API → Pilih kampanye → Petakan bidang MailerLite Native (terintegrasi) Tambahkan kunci API → Pilih grup → Petakan bidang HubSpot Via Webhook Buat koneksi Zapier/Make dengan tindakan webhook Untuk setiap integrasi, prosesnya adalah: masukkan kunci API layanan Anda di pengaturan integrasi Elementor, lalu pilih layanan sebagai "Tindakan Setelah Kirim" di formulir Anda. Petakan bidang formulir Anda ke bidang layanan, dan pelanggan akan ditambahkan secara otomatis saat formulir dikirim.
Strategi Perlindungan Spam
Formulir kontak menarik bot spam. Elementor Pro menyediakan beberapa opsi pencegahan spam:
- Google reCAPTCHA v3: Deteksi spam yang tidak terlihat yang memberi skor pada pengiriman tanpa interaksi pengguna. Direkomendasikan untuk sebagian besar formulir
- reCAPTCHA v2: Kotak centang "Saya bukan robot". Lebih terlihat tetapi dapat mengurangi penyelesaian formulir
- Bidang Honeypot: Bidang yang tidak terlihat yang diisi oleh bot. Jika bidang berisi data, pengiriman ditolak. Tidak diperlukan interaksi pengguna
- Bidang Penerimaan: Kotak centang yang wajib (persetujuan GDPR, penerimaan syarat) yang juga berfungsi sebagai penghalang bot
Kami merekomendasikan menggunakan reCAPTCHA v3 yang dipadukan dengan bidang Honeypot. Ini memberikan dua lapisan perlindungan spam tanpa dampak yang terlihat pada...
dalam pengalaman pengguna.
Elementor Forms vs Plugin Form Khusus
Fitur Elementor Forms Gravity Forms WPForms Builder Visual Di dalam editor Elementor Drag-and-drop terpisah Drag-and-drop terpisah Logika Kondisional Dasar (tampilkan/sembunyikan field) Advanced Advanced Integrasi Pembayaran Tombol PayPal Stripe, PayPal, Square Stripe, PayPal, Square Perhitungan Tidak Ya Ya (Pro) Multi-Langkah Ya Ya Ya Unggah File Ya Ya Ya Manajemen Entri Melalui pengajuan Elementor Manajer entri penuh Manajer entri penuh Memerlukan Page Builder Ya (Elementor Pro) Tidak Tidak Elementor Forms cukup untuk formulir kontak, pendaftaran newsletter, dan formulir pendaftaran sederhana. Untuk formulir kompleks yang memerlukan pemrosesan pembayaran, logika kondisional yang lebih canggih, atau manajemen entri yang rumit, plugin form khusus seperti Gravity Forms atau WPForms lebih sesuai.
Pertanyaan yang Sering Diajukan
Bisakah saya menggunakan formulir Elementor tanpa Elementor Pro?
Tidak. Widget Form hanya tersedia untuk Elementor Pro. Jika Anda memerlukan formulir dengan versi gratis Elementor, gunakan plugin formulir terpisah seperti Contact Form 7 (gratis), WPForms Lite (gratis), atau Gravity Forms (premium).
Di mana pengajuan formulir Elementor disimpan?
Pengajuan formulir disimpan di database WordPress dan dapat diakses di bawah Elementor → Pengajuan di panel admin. Anda dapat melihat, mengekspor (CSV), dan menghapus pengajuan. Pengajuan juga dikirim ke alamat email yang Anda konfigurasikan dalam tindakan Email.
Bisakah formulir Elementor menerima unggahan file?
Ya. Tambahkan tipe field Unggah File ke formulir Anda. Anda dapat mengonfigurasi tipe file yang diterima (PDF, JPG, PNG, DOCX, dll.) dan ukuran file maksimum. File yang diunggah disimpan di perpustakaan media WordPress dan terhubung ke pengajuan formulir.
Bagaimana cara menambahkan logika kondisional ke formulir Elementor?
Elementor Pro mendukung logika kondisional dasar: tampilkan atau sembunyikan field berdasarkan nilai field lain. Di pengaturan field, aktifkan "Kondisional" dan atur kondisi (misalnya, tampilkan field "Perusahaan" hanya ketika tombol radio "Saya seorang bisnis" dipilih). Untuk logika kondisional yang lebih canggih (perhitungan, kondisi multi-level), plugin formulir khusus mungkin lebih cocok.
Bisakah saya membuat formulir popup dengan Elementor?
Ya. Buat template popup di Elementor, tambahkan widget Form di dalamnya, dan atur kondisi pemicu (klik, persentase gulir, niat keluar, penundaan waktu). Ini berguna untuk pendaftaran newsletter, magnet prospek, dan penawaran promosi tanpa menambahkan formulir ke tata letak halaman utama.
Bagaimana cara mencegah spam di formulir Elementor?
Gunakan Google reCAPTCHA v3 (tidak terlihat) yang dipadukan dengan field Honeypot untuk perlindungan dua lapis. Ini memblokir bot otomatis tanpa menambah gesekan bagi pengguna nyata. Untuk formulir dengan volume spam tinggi, pertimbangkan untuk menambahkan field Penerimaan (checkbox wajib) sebagai lapisan ketiga.
Dapatkan Elementor Pro dengan Pembuat Form
Akses widget Form, Theme Builder, WooCommerce Builder, dan 100+ widget Pro. Buat formulir secara visual tanpa plugin tambahan.
Jelajahi Elementor Pro →
