Bagaimana Menambahkan HTML untuk Menampilkan Konten Ekstra di Formulir Pendaftaran WordPress?
Diterbitkan: 2023-03-13Ingin mempelajari cara menambahkan HTML untuk menampilkan konten tambahan di formulir Pendaftaran WordPress? Jika ya, artikel ini untuk Anda!
HTML (Hyper Text Mark Up Language) adalah bahasa pengkodean yang digunakan untuk membuat halaman web dari awal.
Namun, di WordPress, kami hanya menggunakan sebagian kecil saja untuk mengontrol struktur konten. Jadi, Anda dapat menyertakan teks, gambar, dan video tambahan di postingan WordPress Anda.
Hal yang sama dapat dilakukan dengan menggunakan bidang formulir HTML pada formulir pendaftaran WordPress Anda. Ini adalah cara yang bagus untuk memberikan informasi atau petunjuk tambahan bagi pengguna yang mendaftar di situs Anda.
Di bawah ini, kami telah menyiapkan panduan sederhana untuk menunjukkan cara menambahkan HTML ke formulir pendaftaran WordPress. Ayo mulai!
Daftar isi
Apa itu Bidang Formulir HTML? Mengapa Menambahkan HTML di Formulir Pendaftaran WordPress?
Orang cenderung waspada terhadap aspek teknis HTML. Terutama, saat Anda perlu menambahkan HTML ke sesuatu yang sederhana seperti formulir pendaftaran.
Tapi dengan bidang formulir HTML di WordPress, tidak ada yang perlu dikhawatirkan. Bidang HTML hanya menggunakan pengkodean minimal, yang sangat mudah untuk dipahami.
Setelah Anda menambahkan bidang ini ke formulir pendaftaran, Anda dapat menyesuaikannya untuk memberikan informasi atau petunjuk tambahan bagi pengguna yang mendaftar di situs Anda.
Selain itu, bidang ini bermanfaat karena beberapa alasan lain:
- Tingkatkan Keterlibatan Pengguna : Elemen visual seperti gambar atau video dapat meningkatkan keterlibatan pengguna. Ini juga mendorong pengguna untuk menyelesaikan proses pendaftaran.
- Penyesuaian : Menambahkan HTML ke formulir pendaftaran memungkinkan Anda menyesuaikan formulir agar lebih sesuai dengan desain dan merek situs web Anda. Ini membuat situs web menonjol dan terlihat lebih profesional.
- Pamerkan Penawaran Khusus : Jika Anda menawarkan penawaran khusus atau menjalankan promosi, HTML dapat membantu Anda menampilkan informasi tersebut. Ini mendorong pengguna untuk mendaftar ke situs Anda.
Ini adalah beberapa alasan mengapa Anda harus menambahkan HTML ke formulir pendaftaran WordPress. Kami yakin Anda dapat menghasilkan lebih banyak.
Karena itu, mari jelajahi cara terbaik untuk menambahkan HTML di formulir pendaftaran WordPress.
Cara Terbaik untuk Menambahkan bidang HTML di Formulir Pendaftaran untuk Menampilkan Konten Tambahan
Cara terbaik untuk menambahkan bidang HTML dalam formulir pendaftaran adalah dengan bantuan plugin formulir pendaftaran.
Plugin ini memungkinkan Anda menambahkan bidang HTML ke formulir pendaftaran WordPress Anda tanpa kerumitan.
Ada begitu banyak pilihan untuk dipilih. Namun, kami menyarankan plugin Registrasi Pengguna, plugin formulir pendaftaran drag-and-drop.
Ini memungkinkan Anda membuat formulir tanpa batas bahkan dengan versi gratisnya. Demikian pula, Anda akan mendapatkan bidang tak berujung untuk ditambahkan ke formulir pendaftaran Anda.
Selain itu, Registrasi Pengguna memungkinkan Anda:
- Buat akun profil pengguna yang intuitif dan dirancang dengan baik dengan gambar profil.
- Ekspor formulir pendaftaran dengan satu klik dan impor di situs yang sama atau berbeda.
- Buat formulir pendaftaran multi-langkah dengan mudah.
- Buat formulir pendaftaran WooCommerce dan sinkronkan dengan halaman pembayaran.
Namun yang terpenting, plugin kaya fitur ini hadir dengan berbagai add-on, termasuk add-on Advanced Fields.
Pengaya ini membantu Anda membuka kunci bidang lanjutan seperti bidang HTML untuk formulir pendaftaran Anda. Dan inilah yang Anda butuhkan di sini.
Mengingat fitur-fiturnya yang canggih, kami akan menggunakan Registrasi Pengguna untuk tutorial ini.
Panduan Langkah demi Langkah untuk Menambahkan HTML di Formulir Pendaftaran WordPress
Untuk mempelajari cara menambahkan bidang HTML untuk menambahkan konten ekstra ke formulir pendaftaran Anda, ikuti langkah-langkah sederhana di bawah ini:
Langkah 1: Instal dan Aktifkan Registrasi Pengguna Pro
Anda memang dapat membuat formulir sederhana dengan plugin versi gratis. Namun, bidang HTML berada di bawah bagian Bidang Lanjutan .
Dan untuk membuka kunci bidang ini, Anda memerlukan add-on Bidang Lanjutan , yang hanya disertakan dengan versi premium plugin.
Proses instalasi User Registration Pro cukup sederhana. Cukup kunjungi situs resmi plugin, di mana Anda akan melihat 3 paket harga yang berbeda.
Anda akan mendapatkan add-on Bidang Lanjutan di semua paket, jadi belilah paket sesuai dengan anggaran dan kebutuhan Anda.
Setelah itu, Anda akan menerima link ke email Anda. Ikuti tautan dan dapatkan akses ke dasbor akun Anda.
Dari sana, Anda dapat mengunduh plugin versi pro dan mendapatkan kunci lisensi di bawah tab L icense Key .
Setelah itu, kembali ke dashboard WordPress Anda dan arahkan ke Plugins >> Add New . Dan cukup klik tombol Unggah Plugin .
Selanjutnya, pilih file zip User Registration Pro yang telah Anda unduh sebelumnya dan tekan Install Now .
Sekarang, rekatkan kunci lisensi di area yang diperlukan dan Aktifkan plugin di situs Anda.
Jika Anda memerlukan seluruh proses penginstalan dan penyiapan secara mendetail, ikuti tautan ini tentang cara menginstal User Registration Pro.
Setelah Anda mengatur plugin dengan benar, Anda dapat melanjutkan ke langkah berikutnya.
Langkah 2: Instal dan Aktifkan Add-on Bidang Lanjutan
Sekarang setelah Anda memiliki versi premium, Anda dapat dengan mudah mengakses add-on Bidang Lanjutan .
Jadi, arahkan ke User Registration >> Extensions dan cari Advanced Fields .
Selanjutnya, klik tombol Install Add-on dan tekan Activate secara berurutan. Dan begitu saja, Anda memiliki add-on Bidang Lanjutan .
Langkah 3: Buat Formulir Pendaftaran Baru dengan Bidang HTML
Nah, inilah langkah menyenangkannya, membuat formulir pendaftaran baru. Anda dapat membuat formulir dari awal atau menggunakan templat yang sudah ada sebelumnya untuk proses ini.
Jadi, buka User Registration >> Add New , pilih Start From Scratch , atau pilih template formulir.
Versi premium menunjukkan bahwa sebagian besar templat Anda tidak terkunci.
Di sini, kita akan menggunakan template Formulir Pendaftaran Siswa untuk tutorial ini. Anda dapat mengarahkan kursor ke template yang diinginkan dan mengklik tombol Memulai .
Anda akan diminta untuk memberi nama formulir Anda segera setelah Anda melakukan ini. Jadi, masukkan nama formulir yang sesuai dan tekan Continue .
Anda dapat melihat bahwa semua bidang penting yang diperlukan untuk formulir pendaftaran siswa telah ditambahkan.
Namun, Anda memerlukan bidang HTML di formulir Anda untuk menambahkan konten tambahan. Seperti disebutkan sebelumnya, Anda dapat menemukan bidang ini di bawah opsi Bidang Lanjutan .
Oleh karena itu, seret dan lepas ke bagian yang sesuai dari formulir pendaftaran.
Anda dapat menambahkan sebanyak mungkin bidang sesuai kebutuhan formulir Anda.
Selanjutnya, Anda dapat menyesuaikan setiap opsi bidang formulir. Cukup klik pada bidang yang diinginkan, dan Opsi Bidangnya akan muncul di sebelah kiri.
Jadi, klik bidang HTML, dan edit yang berikut ini:
- Label : Berikan judul yang sesuai untuk bidang Anda seperti Notes, Request, dll.
- Deskripsi : Tambahkan deskripsi yang ingin Anda sertakan dalam formulir Anda.
- Nama Bidang : Area ini berisi id bidang. Anda dapat membiarkannya apa adanya atau mengubahnya sesuai keinginan Anda.
- Sembunyikan Label : Anda juga dapat menyembunyikan label bidang dari drop-down. Cukup pilih Ya atau Tidak.
- HTML : Anda dapat menambahkan semua konten ekstra di formulir Anda dari bagian ini. Konten tambahan yang diperlukan untuk Anda dapat berupa catatan, konten penafian, peringatan, dll.
- Enable Tooltip : Mengaktifkan tooltip untuk menampilkan informasi tentang bidang tersebut kepada pengguna.
Dengan cara yang sama, edit juga opsi bidang untuk bidang lainnya.
Catatan: Bidang formulir memiliki opsi bidang serupa yang bisa Anda edit. Namun, beberapa opsi ditambahkan/dihapus tergantung pada bidangnya. Jadi, sesuaikan seperlunya.
Setelah penyesuaian selesai, simpan dengan mengklik tombol Perbarui Formulir .
Anda harus tahu bahwa konten bidang HTML tidak akan ditampilkan di pembuat formulir. Tapi Anda selalu bisa Pratinjau untuk melihat tampilannya di ujung depan.
Beginilah tampilan formulir Anda untuk pengguna Anda di web.
Langkah 4: Sesuaikan Pengaturan Formulir Pendaftaran
Langkah penting berikutnya adalah mengonfigurasi pengaturan formulir pendaftaran.
Anda akan menemukan opsi Pengaturan Formulir tepat di sebelah Opsi Bidang .
Mengkliknya selanjutnya akan membawa Anda ke pengaturan Umum . Dan dari sini, Anda dapat menyesuaikan opsi berikut:
- Persetujuan Pengguna dan Opsi Masuk : Anda dapat menetapkan kriteria persetujuan dan masuk khusus untuk pengguna Anda dari tarik-turun.
- Peran Pengguna Default : Plugin memungkinkan Anda mengatur peran pengguna yang mendaftar di formulir Anda. Anda dapat memilih dari 6 peran pengguna default seperti Administrator , Subscriber , Author , dll.
- Aktifkan Kata Sandi Kuat : Centang kotak dan pilih kekuatan yang Anda inginkan untuk kata sandi pengguna.
- Redirect URL : Opsi ini memungkinkan Anda menambahkan URL pengalihan untuk pengguna setelah berhasil mendaftar.
- Kelas Tombol Kirim : Anda dapat memasukkan satu atau beberapa nama kelas CSS secara terpisah untuk tombol kirim.
- Submit Button Text : Masukkan teks yang diinginkan untuk tombol submit. Anda dapat menggunakan istilah seperti Terapkan, Gabung Sekarang, dll.
- Posisi pesan sukses : Anda dapat memilih posisi pesan sukses Anda, seperti Atas atau Bawah.
- Aktifkan Dukungan Captcha : Anda dapat mengaktifkan dukungan CAPTCHA untuk perlindungan spam dan bot.
- Templat Formulir : Pilih dari 5 gaya templat yang berbeda untuk formulir menggunakan drop-down.
- Kelas Formulir : Tambahkan satu atau beberapa nama kelas CSS untuk Pembungkus Formulir.
Selanjutnya, seperti pengaturan Umum , Anda dapat mengonfigurasi pengaturan Ekstra formulir Anda.
Anda dapat mengaktifkan berbagai pilihan proteksi penting, seperti Activate Auto Generated Password for users , Activate Spam Protection by HoneyPot , dan Enable Whitelist/Blacklist Domain .
Demikian pula, Anda dapat Mengaktifkan Formulir Ramah Keyboard dan Mengaktifkan Tombol Reset untuk membuat formulir ramah pengguna. Anda juga dapat mengubah label tombol reset Anda dari Form Reset Button Label .
Dan Anda dapat Mengaktifkan pemetaan bidang formulir dengan bidang tambahan untuk membuat plugin Pendaftaran Pengguna kompatibel dengan plugin eksternal.
Itu saja untuk bagian pengaturan. Sekali lagi, klik formulir Perbarui untuk menyimpan semua perubahan Anda.
Langkah 5: Publikasikan Formulir Pendaftaran di Situs Web Anda
Terakhir, saatnya menerbitkan formulir pendaftaran dengan bidang HTML untuk diisi pengguna di situs Anda.
Untuk menyematkan formulir di situs Anda, buka Post/Pages >> Add New .
Selanjutnya, klik tombol Add Block ( + ) dan cari blok User Registration . Kemudian, tambahkan ke halaman dengan mengkliknya.
Setelah itu, pilih Formulir Pendaftaran Mahasiswa WordPress Anda dari menu drop-down.
Anda juga dapat memeriksa tampilan formulir di bagian depan dengan tombol Pratinjau di bagian atas.
Di bawah ini adalah gambar tampilan formulir Anda di ujung depan.
Dan terakhir, jika Anda menyukai tampilan formulir Anda, Anda dapat menekan Publish .
Pikiran Akhir!
Itu dia; kita telah sampai pada akhir artikel kita. Kami harap Anda telah belajar menambahkan HTML di formulir pendaftaran WordPress untuk menampilkan konten tambahan.
Berkat plugin Pendaftaran Pengguna, menambahkan bidang HTML di formulir pendaftaran cukup mudah. Yang harus Anda lakukan adalah menyeret dan melepaskan bidang ke dalam formulir Anda dan menyesuaikannya.
Demikian pula, Anda dapat menjelajahi Registrasi Pengguna untuk fitur-fitur, seperti menambahkan bidang kata sandi ke formulir pendaftaran, mengaktifkan persetujuan pengguna Woo-Commerce oleh admin, dll.
Anda dapat membaca lebih lanjut tentang plugin yang kuat ini di blog kami. Dan untuk tutorial video yang mudah, Anda dapat berlangganan saluran YouTube kami.
Jika Anda memiliki pertanyaan tentang plugin, hubungi kami melalui media sosial. Kami tersedia di Facebook dan Twitter.