Cara Membuat Formulir Pendaftaran Kustom di Elementor

Sebagian besar usaha kecil membuat satu kesalahan penting – mereka menggunakan formulir pendaftaran standar yang terlihat sama seperti formulir pendaftaran lainnya di web.

Kami berulang kali melihat pola ini setiap kali kami berkesempatan memeriksa formulir pelanggan sambil menjawab pertanyaan mereka.

Jadi kami ingin menyusun panduan singkat untuk membantu pembaca kami membuat formulir pendaftaran yang mengesankan untuk membuat daftar buletin Anda.

Dalam panduan ini, kami akan memandu Anda melalui langkah-langkah untuk membuat formulir pendaftaran khusus Anda sendiri menggunakan alat pembuat halaman paling populer untuk WordPress – Elementor.

Buat Formulir Pendaftaran Kustom di Elementor

Membuat Formulir Pendaftaran Kustom di Elementor

Gunakan tautan cepat di bawah untuk langsung melompat ke bagian mana pun dari tutorial:

Mari kita mulai.

Langkah 1: Instal Elementor dan WPForms

Karena sebagian besar orang menggunakan Elementor untuk memublikasikan halaman mereka, kami akan menunjukkan cara membuat formulir pendaftaran khusus menggunakan Elementor.

Jika Anda belum memilikinya, lanjutkan dan instal Elementor di situs Anda.

Anda tidak memerlukan lisensi Elementor premium untuk tutorial ini. Sebagai gantinya, Anda dapat menggunakan Elementor bersama dengan WPForms untuk membuat formulir pendaftaran secara gratis!

Jika Anda tidak tahu cara memasang plugin, lihat panduan pemula tentang pemasangan plugin ini.

Meskipun Anda dapat membuat formulir pendaftaran khusus yang tampak cantik menggunakan kombinasi Elementor dan WPForms sepenuhnya gratis, kami menyarankan untuk mencoba lisensi WPForms Pro untuk mengakses beberapa alat canggih guna mencapai hasil yang lebih baik.

Setelah Anda menginstal kedua plugin, saatnya untuk mulai membuat formulir pendaftaran yang sepenuhnya disesuaikan!

Langkah 2: Buat atau Edit Halaman dengan Elementor

Anda dapat menambahkan formulir pendaftaran ke halaman yang sudah ada atau halaman baru. Biasanya, formulir buletin disematkan sebagai salah satu dari beberapa bagian di laman landas yang lebih besar. Tapi kami akan membuat halaman baru yang hanya berisi formulir pendaftaran demi kesederhanaan.

Untuk memulai, buka dashboard WordPress Anda dan klik Halaman » Tambah Halaman Baru .

Setelah Anda berada di dalam editor blok WordPress, klik tombol Edit dengan Elementor di bagian atas.

Setelah mengklik tombol tersebut, editor Elementor akan dimuat dalam beberapa detik. Anda dapat membuat halaman arahan lengkap menggunakan editor seret dan lepas.

Pada langkah selanjutnya, kita akan menggunakan widget WPForms untuk membuat formulir pendaftaran khusus.

Langkah 3: Buat Formulir Pendaftaran Baru

Karena kita hanya perlu menambahkan formulir pendaftaran khusus di sini, mari cari widget WPForms dan seret ke area di sisi kanan.

Saat Anda telah memasukkan widget WPForms ke halaman Anda, Anda dapat memilih formulir tersimpan apa pun yang Anda buat dengan WPForms atau membuat yang baru.

Kami akan membuat formulir pendaftaran baru dengan mengklik tombol + Formulir Baru di panel sebelah kiri.

Pada titik ini, pembuat formulir WPForms akan mulai memuat sebagai overlay. Di sini, Anda dapat membuat formulir pendaftaran yang perlu Anda sematkan di halaman Anda.

Mulailah dengan memberi nama formulir Anda. Ini berguna sehingga Anda dapat merujuk dan menemukannya nanti di dashboard WordPress Anda.

Selanjutnya, gulir ke bawah dan gunakan bilah pencarian di bawah panel pilihan template untuk menemukan template yang sesuai. Kami akan menggunakan templat Formulir Pendaftaran Buletin untuk tutorial ini.

Setelah memilih templat, pembuat formulir akan dimuat di layar Anda. Anda akan melihat bahwa templat ini sudah menyertakan bidang Nama dan Email, yang pada dasarnya adalah semua yang Anda perlukan untuk mendaftar buletin.

Namun kesenangannya tidak berhenti di situ! Kita dapat membawa formulir ini ke tingkat berikutnya dan membuatnya bersinar nyata.

Salah satu cara yang bisa kita lakukan adalah dengan menambahkan judul menarik yang mengundang lebih banyak orang untuk mendaftar.

Anda dapat melakukan ini menggunakan bidang Konten yang tersedia di WPForms Pro. Kami akan menyisipkan bidang Konten di bagian atas formulir.

Setelah menambahkan bidang, klik bidang tersebut untuk membuka Opsi Bidang terkait di panel sebelah kiri.

Editor teks di panel sebelah kiri memungkinkan Anda menambahkan teks apa pun tanpa kode apa pun. Kita akan menambahkan beberapa teks dan memformatnya sebagai Heading 4. Tambahkan juga emoji agar teksnya lebih menonjol!

Pastikan untuk menekan tombol Perbarui Pratinjau di bawah editor untuk melihat perubahan yang terjadi pada formulir Anda di sebelah kanan.

Sementara kita melakukannya, mari kita ubah juga teks tombol kirim dan membuatnya lebih relevan dengan sifat formulir.

Dari sidebar di pembuat formulir, klik Pengaturan » Umum . Gulir ke bawah hingga Anda menemukan bidang Teks Tombol Kirim. Anda dapat mengganti teks default hanya dengan mengetik di sini.

Besar! Bentuknya sudah terbentuk dengan baik. Ini saat yang tepat untuk menyimpan formulir dengan menekan Simpan di bagian atas.

Namun formulir pendaftaran buletin tidak akan ada artinya tanpa terintegrasi dengan alat pemasaran email Anda.

Pada langkah berikutnya, kami akan menunjukkan kepada Anda untuk mengintegrasikan formulir dengan aplikasi pemasaran Anda sehingga pelanggan baru secara otomatis disalin ke daftar pelanggan Anda.

Langkah 4: Hubungkan Formulir Pendaftaran dengan Platform Pemasaran

WPForms mendukung berbagai integrasi pemasaran mulai dari paket Plus dan di atasnya. Jika Anda menggunakan WPForms Lite, Anda masih dapat mengakses integrasi Kontak Konstan secara gratis.

Untuk contoh ini, kami akan segera menunjukkan cara menghubungkan formulir pendaftaran Anda dengan Brevo.

Cukup buka tab Pemasaran di sidebar.

Kemudian, pilih layanan yang ingin Anda sambungkan dengan formulir Anda. Kecuali Kontak Konstan, semua integrasi pemasaran yang didukung mengharuskan Anda menginstal add-on yang sesuai terlebih dahulu.

Jika Anda belum memiliki addon tersebut, WPForms akan menginstalnya untuk Anda saat Anda mengkliknya.

Dalam hal ini, kami menggunakan Brevo. Mengklik Brevo di dalam tab Pemasaran, kami mendapat perintah untuk menginstalnya. Setelah kita tekan Yes, install dan aktifkan, hanya butuh waktu sekitar 5 detik saja addon Brevo sudah terinstall dan siap.

Selanjutnya, dengan memilih Brevo di panel sebelah kiri, klik Tambahkan Akun Baru di kanan atas.

Sekarang, cukup masukkan Kunci API Brevo dan nama panggilan akun Anda. Jika Anda memerlukan bantuan lebih lanjut dalam menemukan kunci API Brevo Anda, lihat dokumen addon Brevo kami untuk detailnya.

Setelah memasukkan informasi yang diperlukan, klik Tambah.

Setelah Anda terhubung dengan akun Brevo Anda, daftar pengaturan baru akan muncul di panel sebelah kanan.

Silakan gunakan bidang tarik-turun untuk mengonfigurasi cara kerja formulir Anda dengan akun Brevo Anda. Anda dapat mengatur hal-hal seperti tindakan yang akan dilakukan di Brevo saat formulir dikirimkan, daftar di mana pelanggan baru harus ditambahkan atau dihapus, memetakan bidang email, dan banyak lagi.

Setelah selesai, pastikan untuk menekan Simpan di bagian atas.

Integrasi pemasaran kini telah selesai. Itu mudah, bukan!?

Langkah 5: Gaya Formulir Pendaftaran Anda dan Publikasikan

Pada titik ini, kita sudah selesai menyiapkan fungsionalitas yang diperlukan untuk formulir pendaftaran. Namun seperti yang kami tekankan di awal tutorial ini, bentuk yang berdampak harus lebih dari sekadar fungsional – namun juga harus mengesankan secara visual.

Meskipun kami telah membuat formulir kami lebih menarik dengan menambahkan beberapa teks dan emoji dengan bidang Konten , kami dapat melangkah lebih jauh dengan kekuatan gabungan WPForms dan Elementor.

Setelah formulir Anda siap, cukup keluar dari WPForms dengan menekan tombol silang. Anda sekarang harus memiliki editor Elementor dengan formulir yang baru Anda buat tertanam sebagai widget.

Klik pada formulir lalu pilih tab Gaya yang terletak di panel sebelah kiri.

Di bawah tab ini, Anda akan menemukan opsi untuk menyesuaikan gaya komponen formulir yang berbeda. Misalnya, Anda dapat menyesuaikan gaya bidang, label, dan tombol tanpa kode apa pun.

Dalam formulir kami, batas bidang berbentuk persegi panjang dengan sudut lurus secara default. Namun jika Anda membutuhkan batas bidang yang lebih bulat, Anda dapat melakukannya hanya dengan meningkatkan nilai radius batas di bawah Gaya Bidang.

Demikian pula, Anda dapat mengubah warna bidang, label, dan tombol dengan satu klik. Kami akan menggunakan warna default karena cocok dengan tema kami. Namun Anda bebas bereksperimen dengan warna berbeda pada formulir Anda.

Di Elementor, Anda juga dapat mengubah gaya wadah formulir Anda. Untuk melakukan itu, klik pada tab Lanjutan .

Anda akan menemukan banyak pengaturan menarik di sini termasuk penyesuaian tata letak, efek animasi, penyesuaian latar belakang, dan banyak lagi.

Mari tambahkan warna latar belakang ke wadah formulir untuk memberikan tampilan yang lebih hidup. Klik pada opsi Latar Belakang untuk memperluas menu dengan pengaturan tambahan.

Kami akan menambahkan warna solid dengan mengklik ikon pemilihan warna di sebelah kanan.

Alat pemilih warna memungkinkan Anda memilih warna apa pun dengan mudah hanya dengan satu klik.

Setelah memilih warna, bentuknya langsung terlihat lebih menarik secara visual!

Namun, elemen di dalam formulir menyentuh batas wadah, sehingga tidak terlihat bagus.

Ini adalah perbaikan yang mudah!

Klik pada opsi Layout di bawah menu Advanced di panel sebelah kiri untuk mengakses pengaturan margin dan padding. Kami cukup menambahkan beberapa padding dan hasilnya terlihat bagus!

Pada titik ini, kami siap untuk melanjutkan dan mempublikasikan formulir Anda. Namun jika Anda ingin mencoba penyesuaian lebih lanjut, silakan habiskan lebih banyak waktu di sini dan jelajahi berbagai opsi.

Jika Anda sudah siap, tekan tombol Publikasikan di bagian bawah.

Anda akan segera melihat pesan muncul menanyakan apakah Anda ingin melihat halaman yang Anda terbitkan sekarang.

Silakan dan lihat halaman Anda setelah dipublikasikan.

Dan itu saja!

Anda baru saja menambahkan formulir pendaftaran khusus menggunakan Elementor dan WPForms.

Dengan ini, Anda dapat memastikan bahwa formulir Anda terlihat unik untuk situs web Anda dan dilengkapi dengan integrasi yang menghemat waktu untuk membantu Anda mengembangkan pelanggan email tanpa kerumitan apa pun!

FAQ tentang Formulir Pendaftaran Elementor

Apakah Anda masih memiliki pertanyaan tentang membuat formulir pendaftaran di Elementor? Berikut beberapa pertanyaan yang pernah ditanyakan pelanggan kepada kami sebelumnya.

Apakah saya memerlukan Elementor Pro untuk membuat formulir pendaftaran?

Tidak, Anda tidak memerlukan Elementor Pro untuk membuat formulir pendaftaran selama Anda telah menginstal WPForms. Anda dapat mengakses widget WPForms di Elementor tanpa perlu mengupgrade ke versi Pro. Namun, Elementor juga memiliki pembuat formulir tersendiri. Jika Anda ingin membuat formulir pendaftaran hanya dengan Elementor, Anda memerlukan lisensi Pro.

Meskipun Elementor adalah alat pembuat halaman yang fantastis, pembuat formulir Elementor lebih mendasar dan memiliki berbagai keterbatasan dibandingkan dengan pembuat formulir tingkat lanjut seperti WPForms.

Bagaimana cara menata formulir pendaftaran agar sesuai dengan merek situs web saya?

Cara termudah untuk mencocokkan formulir pendaftaran Anda dengan merek situs web adalah dengan menggunakan warna tema situs Anda untuk berbagai aspek formulir Anda. WPForms secara otomatis memilih warna primer dan sekunder tema Anda, sehingga Anda dapat dengan mudah menggunakan warna-warna ini untuk berbagai komponen formulir Anda seperti batas, label, dan tombol.

Anda dapat mengakses pengaturan penyesuaian gaya ini di widget Elementor WPForms dengan mengklik tab Style. Di sana, Anda akan menemukan opsi untuk mengubah warna berbagai bagian formulir Anda dengan memilih warna tema yang tersedia agar sesuai dengan merek Anda. Tidak diperlukan pengkodean!

Bisakah saya menggunakan CSS khusus untuk menata formulir pendaftaran saya?

Ya, Anda dapat menambahkan kelas CSS khusus ke formulir pendaftaran jika Anda menggunakan WPForms. Untuk melakukan ini, klik Style setelah memilih widget WPForms di Elementor, lalu klik Advanced . Anda kemudian dapat memasukkan CSS khusus untuk menata formulir pendaftaran Anda.

Bagaimana cara membuat formulir pendaftaran multi-langkah?

WPForms memberi Anda beberapa cara untuk membuat formulir pendaftaran multi-langkah. Anda dapat menambahkan hentian halaman untuk membagi formulir menjadi beberapa halaman, atau Anda dapat menggunakan add-on Formulir Prospek yang secara otomatis mengubah formulir biasa menjadi formulir pendaftaran multi-langkah dengan hentian halaman di antaranya.

Selanjutnya, Buat Formulir ConvertKit Kustom

WPForms terintegrasi dengan berbagai platform pemasaran termasuk ConvertKit. Kami memiliki panduan khusus yang menunjukkan kepada Anda cara membuat formulir ConvertKit khusus. Pastikan untuk memeriksanya!

Anda juga dapat membandingkan opsi formulir pemesanan gratis jika Anda menjual produk apa pun secara online.

Buat Formulir Pendaftaran Khusus di Elementor

Siap membuat formulir pendaftaran khusus Anda? Mulailah hari ini dengan plugin pembuat formulir WordPress termudah. WPForms Pro menyertakan banyak templat gratis dan menawarkan jaminan uang kembali 14 hari.

Jika artikel ini membantu Anda, silakan ikuti kami di Facebook dan Twitter untuk tutorial dan panduan WordPress gratis lainnya.