Cara Menyesuaikan Formulir WordPress di Elementor [+ TEMPLATES]

Apakah Anda ingin membuat dan menyesuaikan formulir WordPress Anda sendiri di Elementor?

Menyesuaikan formulir untuk situs web Anda adalah cara terbaik untuk menampilkan merek, personalisasi, dan niat spesifik Anda. Dan dengan pembuat intuitif yang ditawarkan oleh WPForms dan Elementor, penyesuaian menjadi sangat mudah.

Pada artikel ini, kami akan menunjukkan cara menyesuaikan formulir WordPress favorit Anda di Elementor. Selain itu, kami menampilkan beberapa Templat formulir kami yang paling populer yang mungkin ingin Anda dapatkan sendiri.

Buat Formulir WordPress Anda Sekarang

Apakah Saya Membutuhkan Elementor untuk WordPress?

Anda tidak perlu mendapatkan plugin Elementor untuk situs WordPress Anda, tetapi ini sangat berguna.

Elementor adalah plugin pembuat halaman yang menawarkan antarmuka drag-and-drop, menjadikannya ideal bagi mereka yang tidak memiliki keterampilan pengkodean atau keahlian desain yang kuat. Ini menawarkan penyesuaian ekstensif, memungkinkan Anda membuat tata letak dan desain situs web yang Anda inginkan.

Jadi, kebutuhannya untuk situs WordPress Anda bergantung pada kebutuhan dan preferensi spesifik Anda. Jika Anda terbiasa dengan HTML, CSS, dan memiliki keterampilan desain yang kuat, Anda mungkin tidak memerlukan Elementor.

Elementor tersedia dalam versi gratis dan premium, sehingga Anda selalu dapat memulai dengan versi gratis dan meningkatkannya jika diperlukan, sehingga dapat disesuaikan dengan kebutuhan Anda.

Cara Menyesuaikan Formulir WordPress di Elementor

Instal dan Aktifkan Plugin

Tentu saja Anda memerlukan WPForms dan Elementor untuk mengikuti langkah-langkah ini di sini.

Namun kami akan tetap melanjutkan dan mengatakannya: Pastikan untuk menginstal dan mengaktifkan plugin WPForms dan Elementor di dashboard WordPress Anda.

Untuk petunjuk lengkap tentang cara memasang plugin di situs web Anda, lihat panduan praktis ini.

Sekarang, Anda siap untuk mulai menyesuaikan. Kami akan menunjukkan cara melakukannya di Elementor, dimulai dengan hal-hal penting yang diperlukan untuk kontak dasar. Kemudian, kita akan mengembangkan elemen-elemen ini (permainan kata-kata) untuk setiap contoh formulir saat mereka menjadi sedikit lebih kompleks.

Ingin lebih banyak inspirasi? Lihat pendekatan berbeda untuk menambahkan dan menyesuaikan formulir WordPress di Elementor.

formulir kontak

Formulir Kontak adalah salah satu formulir paling penting di situs web Anda, dan tetap menjadi Templat formulir kami yang paling populer.

Untuk membuat Formulir Kontak dengan Elementor, pertama-tama navigasikan ke dashboard WordPress Anda. Klik Halaman dari bar samping, lalu Tambah Baru .

Kemudian, klik tombol Edit dengan Elementor berwarna biru untuk memuat pembuat halaman Elementor, yang memungkinkan Anda menyematkan formulir kontak dan menyesuaikan berbagai elemen halaman.

Sekarang, pembuat halaman Elementor akan terbuka, tempat Anda dapat menarik dan melepas semua jenis blok dan elemen untuk disertakan pada halaman.

Silakan dan seret blok WPForms dan letakkan di halaman. Sekarang, Anda bisa memilih formulir dari menu tarik-turun di sini, atau Anda bisa menambahkan formulir baru.

Mari klik + Formulir Baru untuk memasukkan formulir kita ke dalam blok.

Pembuat WPForms kemudian akan memuat sehingga Anda dapat menyesuaikan formulir yang ingin Anda gunakan di Elementor.

Pertama, Beri Nama Formulir Anda dengan mengetik di kotak di bagian atas layar. Kami akan memberi nama kami “Formulir Kontak” sehingga kami tahu di mana dan bagaimana menggunakannya nanti.

Kemudian, Pilih Templat dari galeri untuk membuat formulir Anda.

Anda bisa menggunakan Templat formulir kosong untuk menyusun formulir Anda dari awal, atau Anda bisa memulai dengan menggunakan Templat spesifik yang telah dibuat sebelumnya dengan semua bidang yang diperlukan untuk membantu Anda melanjutkan.

Untuk Formulir Kontak kami, kami akan menggunakan template.

Anda dapat menggulir halaman ke bawah untuk menelusuri templat, atau Anda dapat mencari sesuatu yang spesifik. Mencari “Formulir Kontak” misalnya, akan menghasilkan semua jenis templat formulir kontak untuk Anda pilih.

Kami akan menggunakan templat Formulir Kontak Sederhana untuk membuat formulir kami.

Ini adalah salah satu Templat formulir kami yang paling populer, jadi kami menyarankan Anda menggunakannya untuk mendapatkan manfaatnya juga!

Dan, seperti biasa, Templat formulir ini mudah dikustomisasi dengan bidang dan pengaturan tambahan. Cukup klik dan tahan pada bidang yang diinginkan dan seret ke formulir Anda. Kemudian, cukup klik pada bidang tersebut untuk mengeditnya.

Dengan templat Formulir Kontak Sederhana, formulir Anda mengumpulkan nama pengguna, sehingga Anda bisa mempersonalisasi korespondensi apa pun dengan mereka, dan juga menyampaikan pesan atau komentar dari mereka kepada Anda.

Elemen penyesuaian tambahan yang perlu dipertimbangkan pada formulir Anda adalah pesan konfirmasi yang diterima pengguna saat mereka mengirimkan formulir. Navigasikan ke bagian Pengaturan pembuat formulir, dan klik pada tab Konfirmasi .

Di sini, Anda dapat mengedit pesan yang muncul di layar setelah pengguna formulir Anda mengklik “Kirim.”

Pada templat Formulir Kontak Sederhana kami, pesan konfirmasi berbunyi, “Terima kasih telah menghubungi kami! Kami akan segera menghubungi Anda.”

Sebagai catatan, semua Templat formulir yang kami tawarkan di galeri kami telah siap pakai dengan Pesan Konfirmasi yang relevan untuk pengguna Anda, namun kami mendorong Anda untuk mengedit pesan ini sesuai keinginan Anda!

Ketika Anda selesai dengan penyesuaian apa pun pada formulir, klik tombol Simpan di bagian atas. Anda dapat menutup pembuat formulir dengan mengklik X di sudut kanan jendela pembuat formulir.

Sekarang, kita akan kembali ke pembuat halaman Elementor.

Dengan Templat Formulir Kontak kami yang tertanam di halaman, kami sekarang dapat menyesuaikan gaya formulir. Kita dapat mengedit gaya bidang, label, tombol, dan lainnya.

Pada formulir kami, kami menggunakan pengaturan Field Style untuk meningkatkan radius dan warna batas hanya dengan beberapa klik.

Anda dapat melihat bagaimana beberapa penyesuaian cepat mempunyai pengaruh yang cukup besar pada gaya halaman formulir ini.

Gaya seperti apa yang akan Anda buat?

Pastikan untuk mempublikasikan halaman formulir Anda setelah Anda selesai mengkustomisasi gaya formulir.

Cukup klik tombol Publikasikan di toolbar bawah.

Sekarang, kita akan melanjutkan langkah-langkah ini untuk menyesuaikan lebih banyak halaman formulir dengan Elementor.

Formulir Pendaftaran Buletin

Jenis formulir umum lainnya yang mungkin Anda inginkan di situs web Anda adalah Formulir Pendaftaran Buletin.

Untuk menyesuaikan formulir ini di Elementor, Anda akan mulai dengan langkah pertama dari atas: menambahkan dan mengedit halaman baru dengan Elementor, menggunakan blok WPForms untuk menambahkan formulir baru, dan memilih templat untuk digunakan sebagai formulir.

Karena formulir ini adalah formulir yang akan digunakan pengunjung situs Anda untuk mendaftar guna menerima buletin dari Anda, Anda memerlukan templat yang menyertakan bidang untuk mengumpulkan nama dan alamat email mereka.

Jadi, kita akan menggunakan Templat Formulir Pendaftaran Buletin.

Kemudian, Anda dapat menggunakan pembuat formulir untuk menyertakan bidang tambahan seperti kotak centang syarat dan ketentuan, CAPTCHA khusus untuk mencegah pendaftaran spam, dan bahkan fitur geolokasi.

Sedangkan untuk pesan konfirmasi, sekali lagi telah ditangani untuk Anda berkat templatnya.

Seperti biasa, kami mendorong Anda untuk menulis pesan apa pun yang Anda ingin diterima oleh pelanggan baru Anda. Sementara itu, tertulis, “Terima kasih telah mendaftar untuk buletin! Kami akan segera menghubungi Anda.”

Jangan lupa untuk menyimpan Formulir Pendaftaran Buletin Anda setiap kali Anda selesai menggunakannya, sebelum keluar.

Kemudian, kembali ke Elementor, kita dapat menyesuaikan lagi gaya formulir. Kali ini, mari kita ubah Field Styles , Label Styles , dan Button Styles .

Kami akan melanjutkan dan menyesuaikan Field Styles di sini seperti yang kami lakukan pada formulir kontak di atas: meningkatkan radius batas menjadi 10 piksel dan mengubah warnanya menjadi hitam.

Sekarang, mari kita juga fokus pada Label Styles. Untuk membuat label pada formulir lebih menonjol, perbesar ukurannya. Mari kita juga memilih warna yang menyenangkan untuk digunakan dalam pesan kesalahan. Anda dapat melihat warna ini digunakan untuk tanda bintang pada label bidang.

Kemudian, alihkan perhatian Anda ke tombol Kirim.

Seperti yang bisa Anda lihat di formulir, kami telah menggunakan Button Styles untuk menambah ukuran tombol, bersama dengan warna latar belakang dan batas agar sesuai dengan gaya kami yang lain.

Dan untuk mendapatkan kecocokan warna yang sempurna, kita cukup menyalin warna merah muda yang kita pilih dengan pemilih warna di Label Styles, dan menempelkannya ke pemilih warna Background untuk Button Styles.

Selanjutnya, kita akan menjadi lebih kreatif dengan semua opsi penataan bentuk di Elementor.

Formulir Pendaftaran Perkemahan

Formulir pendaftaran adalah beberapa templat kami yang paling banyak dicari, dengan templat formulir untuk pendaftaran kamp menjadi yang paling banyak diminta akhir-akhir ini.

Kita akan membaca sekilas sebagian besar langkah yang telah kita bahas di sini, dan langsung memilih templat formulir dari WPForms.

Untuk formulir ini, silakan ambil templat Formulir Pendaftaran Perkemahan Pramuka dari pilihan di galeri kami.

Kami tidak akan terlalu khawatir tentang pengeditan kolom formulir atau pesan konfirmasi, meskipun Anda dipersilakan untuk mengkustomisasi templat agar sesuai dengan kebutuhan organisasi Anda.

Kemudian, di dalam pembuat halaman Elementor, kita akan bekerja di Pengaturan lanjutan .

Tab pengaturan ini memungkinkan kita melakukan banyak hal dalam hal penataan gaya dengan blok WPForms, termasuk mengunggah gambar untuk latar belakang khusus.

Klik pada tab Latar Belakang di bawah Pengaturan lanjutan untuk membuat latar belakang Anda. dan pastikan Background Type dalam keadaan Classic .

Kemudian Anda dapat mengunggah gambar untuk dijadikan latar belakang yang ditampilkan di blok WPForms.

Meskipun memerlukan beberapa konfigurasi ukuran gambar latar belakang, posisi, dan elemen lainnya, fitur penyesuaian ini sepadan dengan usaha yang dilakukan.

Dengan contoh di atas, misalnya, kami mungkin ingin mengedit warna teks, margin dan perataan, serta elemen formulir lainnya sebelum dipublikasikan.

Formulir Pemesanan Pelanggan

Kami tidak bisa menulis artikel yang menampilkan Templat formulir dan tidak menyebutkan Templat formulir pesanan kami.

Kami sekali lagi akan melewati langkah-langkah yang telah kami bahas, dan langsung melakukan penyesuaian. Untuk formulir kami di sini, kami akan menggunakan templat formulir pemesanan kami yang paling populer: Templat Formulir Pesanan Pelanggan.

Sekarang, kita akan kembali ke blok WPForms Pengaturan lanjutan . Kami juga mengunjungi kembali tab Background , tapi kali ini, Background Type-nya adalah Gradient .

Dengan pengaturan Gradien, Anda dapat memadupadankan pasangan warna apa pun yang dapat Anda buat, yang akan diterapkan dalam gradien di latar belakang formulir pemesanan Anda.

Hasil akhirnya menakjubkan dan opsi penyesuaian tidak terbatas.

Sekarang, ini hanya sedikit dari permukaan semua opsi penyesuaian dan gaya yang Anda miliki dengan WPForms dan Elementor. Jadi, pastikan untuk melihat tutorial dan artikel Elementor tambahan kami.

Buat Formulir WordPress Anda Sekarang

Selanjutnya, Hubungkan Formulir Elementor ke Google Spreadsheet

Selamat! Anda sudah siap membuat formulir mengagumkan di Elementor.

Sekarang, coba sambungkan formulir ini ke Google Spreadsheet. Meskipun Elementor dapat menyimpan entri formulir Anda di dalam dasbor WordPress Anda, ada kalanya Anda mungkin ingin menyimpan salinan entri formulir dan prospek Anda di Google Sheet.

Jadi, lihat tutorial kami untuk mempelajari caranya!

Siap membuat formulir 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.