Cara Menyesuaikan Formulir di Editor Blok WordPress [2024]

Diterbitkan: 2024-07-31

Jika Anda memiliki situs web, apa pun tujuannya—bisnis, pribadi, afiliasi, atau lainnya—Anda mutlak harus memiliki formulir untuk pelanggan, halaman kontak, dll. Formulir secara umum atau formulir kontak pada khususnya meningkatkan konektivitas, interaksi dengan pengunjung situs web, membuat prospek dan sebagainya. Karena editor Gutenberg mendapatkan popularitas di komunitas WordPress, pertanyaan yang paling sering muncul adalah: Apakah mungkin membuat dan menyesuaikan formulir di WordPress menggunakan editor blok? Jika Anda ingin mengetahui jawabannya, mari kita mulai dengan membaca blog ini.

Customize a Form in WordPress Block Editor

Apakah Editor Gutenberg Memiliki Blok Formulir Default?

Sebelum masuk ke tutorial untuk mengkustomisasi formulir, pertama-tama mari kita cari tahu apakah editor Gutenberg memiliki blok formulir default atau tidak. Jawabannya adalah tidak.

Oleh karena itu, Anda perlu menggunakan pustaka blok Gutenberg pihak ketiga untuk membuat dan memodifikasi formulir di editor blok WordPress . Ada banyak sekali opsi yang tersedia sekarang untuk membuat dan mengkustomisasi formulir. Tentukan pilihan berdasarkan alasan di balik pembuatan dan personalisasi formulir.

3 Plugin Gutenberg Terbaik untuk Menyesuaikan Formulir untuk Editor Blok WordPress

Untuk membantu Anda menyesuaikan formulir, kami telah memilih 3 plugin Gutenberg teratas. Berikut adalah plugin dengan tata letak formulir serbaguna. Lihatlah mereka dan pilih yang paling cocok.

1. Bentuk Blok dari Blok Esensial

Menampilkan lebih dari 50 blok kreatif, Blok Esensial untuk Gutenberg dengan cepat menjadi salah satu plugin blok Gutenberg paling populer. Diantaranya, Blok Formulir adalah salah satu yang membantu Anda membuat dan menyesuaikan formulir sepenuhnya untuk tujuan apa pun: berlangganan, kontak, pembayaran, donasi, dan masih banyak lagi.

Dengan blok Formulir Blok Esensial , Anda akan memiliki opsi penyesuaian dan gaya tanpa batas. Blok formulir menyediakan integrasi dengan reCAPTCHA dan Mailchimp serta memberi Anda akses ke berbagai fungsi. Blok Formulir telah memperkenalkan total sembilan blok dalam untuk menambahkan bidang khusus dan menyesuaikan formulir Anda untuk memaksimalkan pengalaman pengguna Anda. Blok dalam penting lainnya adalah Bidang Teks, Bidang Textarea, Bidang Email, Bidang Nomor, Bidang Pilih, Bidang Kotak Centang, Bidang Radio, Pemilih Tanggal Waktu, dll.

Masih ada lagi di blok Essential Addons Form. Anda dapat dengan mudah mengumpulkan dan menganalisis respons blok formulir dari dasbor, balasan dari backend, dll. Selain itu, Anda dapat dengan mudah mengekspor respons blok formulir sebagai file CSV untuk dianalisis secara menyeluruh.

Customize a Form in WordPress Block Editor

2. Pembuat Formulir Kustom Forminator

Untuk semua jenis situs web atau keadaan, Forminator adalah plugin pembuat formulir WordPress khusus yang ramah pengguna. Anda dapat membuat segala jenis formulir, termasuk pemesanan, pembayaran, kontak, email, umpan balik, jajak pendapat interaktif, dll. Penggunaan yang lebih populer adalah kuis dengan hasil waktu nyata, pertanyaan “tidak ada jawaban yang salah” gaya BuzzFeed, penaksir layanan, dan formulir pendaftaran dengan PayPal dan Stripe sebagai opsi pembayaran.

Menyiapkan dan menyesuaikan formulir untuk situs WordPress Anda mudah dilakukan dengan pembuat visual drag-and-drop Forminator. Kumpulkan informasi, jadikan konten Anda interaktif, dan hasilkan lebih banyak konversi dengan Forminator.

Customize a Form in WordPress Block Editor

3. Bentuk Blok Berang-berang

Otter adalah perpustakaan Gutenberg populer lainnya yang memiliki blok bentuknya sendiri. Blok Formulir Otter Blocks untuk WordPress memungkinkan pengguna dengan mudah menambahkan formulir kontak yang dapat disesuaikan ke situs web mereka. Ini terintegrasi dengan alat pemasaran seperti SendinBlue dan Mailchimp untuk menghasilkan prospek, mencakup perlindungan bot dengan CAPTCHA dan menawarkan opsi gaya tingkat lanjut. Formulir dapat disesuaikan dalam hal warna teks, ukuran, spasi item, dan lainnya, menjadikannya alat serbaguna untuk meningkatkan interaksi dan fungsionalitas situs web.

Customize a Form in WordPress Block Editor

Bagaimana Cara Menyesuaikan Formulir di Editor Blok WordPress Menggunakan Blok Esensial?

Sekarang kita tahu, ya, kita bisa mengkustomisasi formulir di editor blok WordPress dengan bantuan plugin Gutenberg. Mari selami panduan langkah demi langkah untuk membuat dan menyesuaikan formulir di Gutenberg. Untuk tujuan tutorial kali ini kita akan menggunakan plugin Essential Blocks .

Langkah 1: Instal Dan Aktifkan Plugin Essential Blocks

Untuk membuat dan menyesuaikan formulir di WordPress, Anda harus menginstal dan mengaktifkan plugin di dashboard WordPress Anda. Jadi navigasikan ke Plugins → Add New , cari Essential Blocks lalu instal. Setelah itu, aktifkan juga pluginnya.


Anda akan menemukan blok formulir di tab 'Blok' di dasbor plugin. Aktifkan blok dari sana. Sekarang Anda siap untuk membuat dan menyesuaikan formulir di Gutenberg.

Langkah 2: Sesuaikan Formulir di Gutenberg

Buka halaman di editor Gutenberg tempat Anda ingin menyesuaikan formulir. Selanjutnya, klik ikon '+' dan cari blok Formulir. Dari saran, klik dan itu akan segera ditambahkan ke halaman Anda. Atau Anda bisa langsung drag and drop ke lokasi yang diinginkan.

Customize a Form in WordPress Block Editor

Setelah Anda menambahkan blok ke halaman web atau postingan Anda, Anda akan diminta untuk memilih jenis formulir. Blok Formulir memiliki tiga jenis formulir default yang tersedia: Formulir Kontak, Formulir Berlangganan, dan Formulir RSVP. Selain itu, ada juga opsi untuk menambahkan formulir kosong dan menyesuaikan formulir sesuai kebutuhan.

Kami akan membuat formulir kontak dan kemudian menyesuaikannya. Formulir Kontak hadir dengan dua pilihan templat dan gaya formulir. Anda dapat memilih mana saja yang sesuai dengan preferensi Anda. Selain itu, Anda dapat memilih untuk menambahkan Label Bidang dan Ikon Bidang dengan tombol sakelar.

Customize a Form in WordPress Block Editor

Anda juga dapat mengintegrasikan MailChimp untuk mengakses fitur email. Namun, Anda perlu meningkatkan ke premium untuk menggunakan ini. Masing-masing bidang Formulir Kontak memiliki opsi untuk Tampilkan Label, mengubah Teks Placeholder, membuat bidang diperlukan dengan tombol sekali ketuk, menambah atau menghapus ikon, dan banyak lagi untuk lebih menyesuaikan formulir.

Customize a Form in WordPress Block Editor

Tab Gaya memiliki opsi untuk mengubah tampilan formulir kontak Anda sehingga Anda mendapatkan nuansa yang lebih disesuaikan. Ia memiliki opsi untuk menyesuaikan perataan, celah, warna, tipografi, dan lainnya untuk setiap bidang, ikon, dan bahkan blok dalam.

Customize a Form in WordPress Block Editor

Langkah 3: Publikasikan Formulir yang Baru Dibuat

Setelah Anda selesai menyesuaikan formulir sesuai kebutuhan Anda, publikasikan halaman/postingan Anda. Jadi, dengan mengikuti langkah-langkah sederhana, Anda dapat dengan cepat menambahkan dan menyesuaikan formulir dengan Formulir Blok Esensial di Gutenberg.

Berikut adalah video tutorial yang dapat Anda lihat untuk panduan mendalam.

Buat Formulir Luar Biasa Dan Hasilkan Prospek

Memiliki formulir penting untuk Situs Web Anda. Dan dengan alat yang tepat, Anda dapat menyesuaikan formulir tanpa coding di editor blok WordPress dalam waktu kurang dari 5 menit. Apakah menurut Anda blog ini bermanfaat? Kemudian bagikan dengan orang lain dan berlangganan blog kami untuk pembaruan dan tutorial mendatang.