Cara Membuat Formulir Front-End ACF [Tanpa Kode!]

Diterbitkan: 2022-12-14

Ingin menggunakan Formulir Kustom Tingkat Lanjut di situs WordPress Anda tetapi tidak tahu cara membuat kode? Panduan ini akan membantu Anda membuat formulir front-end ACF dalam waktu singkat!

Perkiraan waktu membaca: 6 menit

Bidang Kustom Lanjutan (ACF) adalah alat yang ampuh.

Dengan kemampuan untuk menyesuaikan bidang Anda dan membuat formulir persis seperti yang Anda inginkan, kemungkinan Anda hampir tidak terbatas.

Tapi ada satu masalah. Anda harus tahu cara membuat kode untuk menampilkan formulir ACF di bagian depan situs web Anda.

Formidable Forms adalah plugin WordPress Form Builder terbaik. Dapatkan gratis!

Atau apakah Anda?

Posting ini akan menunjukkan cara membuat formulir frontend ACF di WordPress tanpa kode dengan mudah! Dan itu semua dilakukan dengan menggunakan Formidable Forms , pembuat formulir ACF yang sempurna.

Mari kita masuk ke dalamnya.

Apa yang salah dengan menggunakan formulir ujung depan Bidang Khusus Tingkat Lanjut?

Sebenarnya, tidak ada salahnya menggunakan ACF untuk membuat formulir frontend Bidang Kustom Tingkat Lanjut!

ACF adalah alat yang ampuh; jika Anda tahu cara membuat kode di PHP, Anda dapat membuat formulir unik dengan cepat.

Tapi, jika Anda tidak tahu cara membuat kode, Anda akan menggaruk-garuk kepala dengan bahasa asing di depan Anda.

Lihat saja kode contoh formulir ACF di bawah ini:

Formulir ujung depan ACF membutuhkan pengetahuan pengkodean

Jadi, Anda memiliki dua opsi:

Pelajari kode dan buat formulir frontend Anda dengan ACF
Biarkan Formidable Forms melakukan semua kerja keras untuk Anda

Meskipun kami memiliki tim pengembang yang luar biasa di sini di Formidable, kami rasa Anda tidak.

Jadi, kami akan fokus pada opsi #2 hari ini untuk tutorial formulir frontend Bidang Kustom Lanjutan kami.

Cara menampilkan form frontend ACF dengan Formidable

Untuk memulai, Anda memerlukan beberapa hal:

Bentuk Rencana Bisnis yang Hebat
Plugin ACF (gratis atau pro)

Dapatkan Formidable Forms sekarang!

Untuk menggunakan beberapa bidang yang lebih canggih dengan frontend ACF, diperlukan versi pro. Namun, untuk bidang dasar, Anda dapat menggunakan versi gratis.

Jika Anda ingin info lebih lanjut, pastikan untuk memeriksa dokumen ACF Knowledgebase kami!

Jadi, setelah Anda menginstal dan mengaktifkan Formidable Forms, buka Formidable → Add-ons dan klik tombol Install untuk plugin ACF Form WordPress .

Kemudian, itu hanya beberapa langkah mudah:

Buat bidang formulir ACF
Buat formulir frontend ACF Anda di Tangguh
Petakan bidang Anda

Mari kita mulai.

Langkah 1: Buat bidang formulir ACF

Sebagai contoh, kami memiliki blog pengamatan burung bernama Here Birdie Birdie .

Kami menginginkan cara bagi pengguna agar kiriman pengamatan burung mereka akan secara otomatis ditampilkan sebagai jenis kiriman khusus di blog.

Jadi, kami ingin membuat beberapa bidang bagi pengguna untuk memasukkan informasi:

Nama
Tanggal
Waktu
Daftar burung melihat
Komentar tambahan

Jadi, hal pertama yang ingin kami lakukan adalah menuju ke ACF untuk menyesuaikan bidang. Untungnya, Formidable mendukung pemetaan untuk 19 jenis bidang ACF yang berbeda. Jadi, Anda punya banyak pilihan.

Untuk melakukannya, buka Bidang Kustom → Grup Bidang dan klik Tambah Baru .

Klik Tombol Tambahkan Baru untuk membuat bidang ACF Anda

Selanjutnya, Anda dapat menambahkan field Anda dengan mengklik tombol Add Field .

Jadi, kami akan membuat bidang yang tercantum di atas dan menyesuaikannya agar sesuai dengan kebutuhan kami.

Kami akan menggunakan bidang Pengulang ACF untuk memudahkan pengunjung menampilkan semua burung yang mereka lihat. Bidang pengulang memungkinkan pengguna untuk menambah atau menghapus entri sebanyak yang mereka inginkan.

Kami akan menggunakan bidang Dropdown ( Pilih di ACF) di bidang ini sehingga pengunjung dapat memilih dari daftar burung. Kami juga akan menambahkan bidang angka untuk memasukkan berapa lama mereka melihat setiap burung.

Jangan ragu untuk menyesuaikan ini dengan kebutuhan Anda sendiri. Namun, untuk mendapatkan fitur yang lebih canggih (seperti Repeater , Anda harus membeli ACF Pro).

Setelah selesai, klik Simpan Perubahan .

Langkah 2: Buat formulir frontend ACF Anda di Tangguh

Sekarang, kami akan membuat formulir yang akan ditampilkan di bagian depan situs web Anda.

Jadi, buka Hebat → Formulir di panel admin WordPress Anda.

Selanjutnya, klik Add New di bagian atas halaman, lalu pilih mulai dari Blank Form atau salah satu template Formidable.

Klik tambahkan baru untuk membuat formulir baru

Jangan ragu untuk memilih opsi yang terbaik untuk situasi Anda. Kami akan mulai dengan Formulir Kosong untuk menyesuaikannya dengan keinginan kami.

Selanjutnya, beri nama formulir Anda, lalu klik Buat .

Plugin ini akan membawa Anda ke pembuat formulir drag-and-drop Formidable, tempat Anda dapat menambahkan elemen formulir apa pun. Nama, email, nomor, alamat — sebut saja, ada di sini.

Pembuat formulir seret dan lepas yang tangguh

Karena kita sudah membuat kolom formulir di ACF, kita hanya perlu menambahkan kolom yang cocok untuk memudahkan menghubungkannya.

Kami menambahkan kolom di bagian atas sehingga pengguna dapat menamai posting blog mereka untuk menjadikannya unik!

Setelah Anda selesai membuat formulir, klik Perbarui untuk menyimpan perubahan Anda.

Tidak ada yang mengingatkan Anda pada tahun 90-an lebih dari kehilangan semua yang Anda buat karena Anda tidak menabung.

Langkah 3: Petakan bidang Anda

Sekarang setelah kami membuat formulir, kami perlu mengaktifkan pemetaan bidang ACF.

Jadi, klik tab Pengaturan di bagian atas halaman, dan buka Tindakan & Pemberitahuan .

Selanjutnya, pilih tindakan Buat Postingan untuk menyesuaikan tampilan kolom formulir.

Dalam tindakan Buat formulir Posting , gulir ke bawah ke bagian Bidang Kustom dan klik sakelar Petakan bidang formulir ke Bidang Kustom Tingkat Lanjut .

Pilih grup bidang ACF Anda dari dropdown, dan mulailah memetakan bidang khusus Anda dengan bidang yang tangguh dengan mengklik Tambah .

Petakan bidang ACF Anda ke bidang Tangguh Anda

Selain itu, jika Anda menggunakan bidang pengulang, Anda harus mencocokkan pengulang dengan benar dan subbidang.

Setelah Anda memetakan bidang Anda, klik Perbarui untuk menyimpan perubahan Anda.

Dan itu saja! Pengguna sekarang dapat mengirimkan entri mereka ke formulir frontend ACF WordPress Anda, dan bidang ACF dan Formidable Forms Anda akan memetakan dan mengirimkan informasinya.

Dari sini, Anda dapat menampilkan informasi di frontend dengan Tampilan atau menggunakan tema yang mendukung ACF, lalu mengedit postingan, judul postingan, konten, dan lainnya!

Apa lagi yang bisa dilakukan plugin formulir frontend ACF ini?

Tangguh mungkin tampak seperti pembuat formulir sederhana untuk ACF, tetapi lebih dari itu.

Dengan lusinan fungsi formulir ACF, file templat, dan kompatibilitas dengan semua tema teratas (termasuk Elementor), Tangguh melakukan semuanya.

Dan ada banyak fitur dan opsi tambahan untuk melengkapi formulir Anda:

Formulir multi-langkah, kuis , dan formulir percakapan
Beberapa opsi perlindungan spam
Penata Formulir Visual bawaan
100+ Templat formulir
Pemandangan yang Menakjubkan

Ini hanya beberapa fitur yang Anda dapatkan. Dan mereka cukup hebat jika kita mengatakannya sendiri.

Jadi, dengan betapa mudahnya meletakkan formulir ACF di frontend dan kekayaan fitur yang Anda dapatkan, tunggu apa lagi?

Tangguh siap untuk meningkatkan situs web Anda hari ini .

Siap membuat bentuk depan ACF Anda?

Jika Anda bertanya-tanya, “Bagaimana cara menambahkan bidang ACF ke frontend?” Anda sekarang punya jawaban Anda.

Dengan solusi tanpa kode yang sederhana dari Formidable, Anda dapat memulai dan menjalankannya dalam hitungan menit. Dan posting ini menunjukkan kepada Anda bagaimana melakukannya.

Apakah Anda menggunakan WordPress ACF pro atau versi gratis, Formidable adalah plugin mitra yang sempurna.

Jadi, jika Anda siap untuk memulai, ambil Formulir yang Hebat sekarang dan dapatkan di situs web Anda.

Dapatkan formulir ujung depan ACF sekarang!

Dan ikuti kami di Facebook, Twitter, dan YouTube untuk tips & trik WordPress yang lebih luar biasa.