Bagaimana Cara Menambahkan Bidang WYSIWYG di Formulir WordPress?

Diterbitkan: 2022-10-13

Ingin tahu bagaimana cara menambahkan bidang WYSIWYG di Formulir WordPress? Nah, tetap bersama kami sampai akhir untuk mengetahui bagaimana tepatnya.

Sederhananya, WYSIWYG (diucapkan wiz-ee-wig) adalah perangkat lunak pengeditan. Alat luar biasa ini menunjukkan kepada Anda seperti apa tampilan konten setelah Anda menerbitkannya.

Demikian juga, di bidang formulir WYSIWYG, teks yang Anda ketikkan ke editor menyerupai tampilan teks yang diterbitkan. Dan jika Anda menginginkan bidang WYSIWYG di formulir Anda, kami siap membantu.

Pada artikel ini, kita akan menjelajahi bidang WYSIWYG dan langkah-langkah untuk menambahkannya ke formulir. Ayo mulai!

Daftar isi

Apa itu Bidang WYSIWYG dan Mengapa Anda Membutuhkannya?

WYSIWYG , kependekan dari What You See Is What You Get , adalah editor yang digunakan di sebagian besar situs WordPress. Editor ini memungkinkan pengguna untuk memanipulasi tata letak atau konten tanpa harus mengetikkan perintah apa pun.

Misalnya, ketika pengguna menulis dokumen menggunakan pengolah kata, ia menggunakan WYSIWYG. Ini mereplikasi apa yang mereka buat, edit, atau format dalam dokumen cetak atau file PDF.

Jadi, menambahkan bidang WYSIWYG ke formulir WordPress Anda menyediakan editor untuk pengguna Anda. Mereka dapat mengetikkan konten apa pun yang mereka inginkan ke dalam bidang dan memformatnya sesuai dengan itu. Dengan bidang WYSIWYG, Anda dapat:

  • Biarkan pengguna mengirimkan posting tamu melalui formulir front-end.
  • Biarkan pengguna melihat seperti apa tampilan konten setelah dipublikasikan saat mengedit.
  • Memungkinkan pengguna tanpa pengetahuan pemrograman untuk menggunakan editor ini.

Dengan demikian, Anda juga harus memiliki alat yang memungkinkan Anda menambahkan bidang WYSIWYG tanpa kerumitan. Dan Everest Forms adalah plugin yang sempurna untuk ini! Ini adalah pembuat formulir WordPress drag-and-drop yang menawarkan bidang WYSIWYG. Anda dapat menambahkan bidang ini ke formulir Anda untuk tujuan apa pun yang diperlukan.

Bentuk Everest

Jadi, kami akan menggunakan plugin ini untuk menunjukkan cara menambahkan bidang WYSIWYG ke formulir.


Bagaimana Cara Menambahkan Bidang WYSIWYG di Formulir WordPress?

Langkah 1: Instal dan Aktifkan Formulir Everest dan Formulir Everest Pro

Hal pertama yang perlu Anda lakukan adalah mengatur Formulir Everest dan Formulir Everest Pro di dasbor WordPress Anda.

Ya, Anda memerlukan plugin versi pro. Itu karena bidang WYSIWYG dibuka hanya dengan versi premium.

Untuk panduan terperinci, baca artikel kami tentang cara menginstal Everest Forms Pro.


Langkah 2: Buat Formulir Kustom Baru

Setelah instalasi plugin selesai, buka Everest Forms >> Add New . Di halaman Tambahkan Formulir Baru , Anda akan menemukan kumpulan Templat formulir yang dibuat sebelumnya. Namun, Anda juga bisa memulai dari awal.

Dalam tutorial ini, kita akan memulai dari awal. Jadi, klik Mulai Dari Awal dan beri nama formulir Anda. Di sini kita beri nama "Formulir WYSIWYG" dan tekan Continue.

Nama pop up

Anda dapat membuat semua jenis formulir sesuai dengan kebutuhan Anda; itu bisa berupa formulir kontak, formulir permintaan cuti, formulir posting tamu, dll.

Yang harus Anda lakukan adalah menarik dan melepaskan bidang yang diperlukan ke dalam editor formulir dan klik Simpan .


Langkah 3: Tambahkan & Sesuaikan Bidang WYSIWYG di Formulir Anda

Menambahkan bidang WYSIWYG menggunakan Formulir Everest di formulir Anda adalah hal yang mudah. Cukup seret dan lepas bidang WYSIWYG dari Bidang Lanjutan ke formulir.

Seret Jatuhkan Bidang WYSIWYG

Selanjutnya, Anda dapat menyesuaikan bidang WYSIWYG. Anda hanya perlu mengklik bidang tersebut dan Opsi Bidangnya akan muncul di sebelah kiri.

Selanjutnya, Anda dapat melakukan perubahan pada opsi bidang seperti yang dijelaskan di bawah ini:

  • Label : Di sini, Anda dapat mengubah label bidang dengan memasukkan Label yang Anda inginkan.
  • Meta Key : Meta key menyimpan data field dalam database Anda dan mengambilnya kembali bila diperlukan.
  • Deskripsi : Anda dapat memasukkan teks untuk deskripsi bidang formulir di sini.

Selanjutnya Anda cukup mencentang Required , Tooltip , dan Validate as unique jika Anda ingin opsi ini diaktifkan.

Opsi Bidang Dasar

Gulir ke bawah untuk Opsi Lanjutan di mana Anda akan menemukan:

  • Place Holder Text : Anda dapat memasukkan teks untuk placeholder bidang formulir. Misalnya, kami telah menulis, "Ketik pesan Anda di sini."
  • Sembunyikan Label : Anda cukup mencentang opsi ini untuk menyembunyikan label bidang.
  • Nilai Default : Di sini, Anda dapat memasukkan teks untuk nilai bidang formulir default atau cukup pilih bidang yang diperlukan dengan mengklik tombol <> .
  • Kelas CSS : Anda juga dapat menambahkan kelas CSS khusus untuk penyesuaian lebih lanjut.

Jika diperlukan, Anda bahkan dapat menerapkan logika kondisional ke bidang dengan opsi Aktifkan Logika Bersyarat .

Tambahkan Bidang WYSIWYG di Bidang Lanjutan Formulir WordPress

Terakhir, Anda dapat menekan tombol Simpan di bagian atas. Jika Anda ingin melihat pratinjau formulir Anda, klik Pratinjau .

Seperti yang Anda lihat, bidang WYSIWYG dari Formulir Everest memungkinkan pengguna situs Anda beralih di antara dua mode:

  • Visual : Gambar dan teks ditampilkan langsung di editor teks.
  • Teks : Gambar dan teks ditampilkan dalam format HTML.
Visual atau Teks

Berikut daftar opsi bilah alat yang akan Anda temukan untuk mode Visual di bidang WYSIWYG:

  • Berani
  • miring
  • Daftar peluru
  • Daftar nomor
  • Blok kutipan
  • Rata kiri
  • Rata tengah
  • Rata kanan
  • Sisipkan/edit tautan
  • Sisipkan tag Baca Selengkapnya
  • Layar penuh

Untuk menampilkan opsi tambahan, klik ikon Toggle ToolBar .

Ikon Beralih Bilah Alat

Berikut daftar semua opsi tambahan yang tersedia:

  • dicoret
  • Garis horisontal
  • Warna teks
  • Tempel sebagai teks
  • Hapus pemformatan
  • Karakter spesial
  • Kurangi indentasi
  • Tingkatkan indentasi
  • Pintasan keyboard

Selain itu, pengguna akan dapat memilih format teks seperti Paragraf, Judul, dll. dari drop-down.

Drop Down Paragraf

Di sisi lain, pengguna harus mengetikkan tag HTML ke dalam bidang jika mereka memilih mode Teks . Ada daftar tag HTML umum di atas bidang yang dapat langsung ditambahkan pengguna ke editor alih-alih mengetiknya.


Langkah 4: Konfigurasikan Pengaturan Formulir Anda

Selanjutnya, buka tab Pengaturan formulir untuk mengonfigurasi pengaturan formulir Anda. Di sini, Anda akan menemukan 3 bagian dengan berbagai opsi penyesuaian.

Umum: Dengan pengaturan Umum, Anda dapat mengedit Deskripsi Formulir , Pesan Dinonaktifkan Formulir , Aktifkan Logika Bersyarat , Desain Tata Letak , dll.

Pengaturan Umum

Email: Pengaturan Email memungkinkan Anda membuat template pemberitahuan email admin dan pengguna.

pengaturan email

WebHook: Menggunakan WebHook, Anda dapat mengirim data formulir ke URL eksternal apa pun. Yang harus Anda lakukan adalah mengatur URL Permintaan, Metode Permintaan, Format Permintaan , dan Header Permintaan .

Pengaturan WebHook

Terakhir, Anda dapat menekan tombol Simpan .


Langkah 5: Tampilkan Formulir Anda di Situs Web

Anda telah berhasil membuat formulir Anda menggunakan Formulir Everest untuk menambahkan bidang WYSIWYG. Tapi itu tidak akan terlihat oleh pengguna Anda kecuali Anda menampilkan formulir Anda di situs WordPress Anda.

Oleh karena itu, untuk menambahkan formulir ke situs Anda, Anda dapat menggunakan salah satu dari dua metode ini.

Cara pertama adalah dengan menyalin kode pendek formulir dari atas builder.

Salin Kode Pendek

Kemudian, buat halaman atau posting baru, dan Anda akan masuk ke editor Gutenberg. Di sini, tekan ikon Add Block ( + ) dan cari blok Shortcode . Selanjutnya, klik pada blok untuk menambahkannya ke halaman atau posting.

Blok Kode Pendek

Setelah itu, tempelkan kode pendek yang baru saja Anda salin ke dalam blok, dan klik tombol Terbitkan .

Tempel Kode Pendek

Itu dia! Formulir Anda akan ditampilkan di situs Anda.

Atau, Anda dapat menggunakan blok Everest Forms untuk menampilkan formulir Anda. Klik tombol ( + ) dan cari blok Everest Forms .

Blok Bentuk Everest

Tambahkan ke halaman dan pilih formulir WYSIWYG WordPress Anda dari drop-down.

Drop Down Blok Everest

Terakhir, Anda dapat menekan tombol Publikasikan di bagian atas.


Membungkusnya!

Dan itu adalah bungkus untuk panduan kami tentang cara menambahkan bidang WYSIWYG di Formulir WordPress. Yang Anda butuhkan hanyalah plugin Everest Forms yang luar biasa. Anda cukup menarik dan melepas bidang WYSIWYG ke dalam formulir Anda dan menyesuaikannya tanpa kerumitan.

Tidak hanya itu yang dapat Anda lakukan dengan Everest Forms. Anda dapat menggunakan plugin yang kuat ini untuk mengaktifkan pratinjau entri dalam formulir multi-bagian, mengaktifkan pengalihan bersyarat setelah pengiriman formulir, dan banyak lagi.

Baca lebih lanjut tentang Formulir Everest di blog kami jika Anda tertarik. Anda juga dapat mengunjungi saluran YouTube kami untuk tutorial video yang mudah.

Juga, jangan lupa untuk mengikuti kami di Facebook dan Twitter untuk pembaruan di masa mendatang.