Bagaimana… Menambahkan Gambar ke Formulir (menggunakan Gravity Forms)

Mencoba menambahkan gambar ke formulir WordPress Anda?

Dengan plugin Gravity Forms, Anda memiliki banyak opsi untuk menyertakan gambar dalam formulir Anda.

Anda dapat menyertakan gambar sebagai opsi di kolom sebenarnya, seperti membiarkan pengunjung memilih di antara beberapa gambar dengan tombol radio/kotak centang atau menyertakannya di kolom produk. Atau, Anda juga bisa memasukkan gambar sebagai elemen yang berdiri sendiri.

Dalam posting ini, kita akan membahas semua opsi berbeda untuk menambahkan gambar ke formulir WordPress yang Anda buat dengan Gravity Forms.

Kami akan mulai dengan berfokus pada fungsionalitas inti yang tersedia di plugin Gravity Forms di semua lisensi. Kemudian, kami juga akan membahas bagaimana Anda dapat menggunakan add-on untuk mendapatkan lebih banyak fleksibilitas, jika diperlukan.

Contoh kasus penggunaan untuk menambahkan gambar ke formulir

Ada banyak alasan berbeda mengapa Anda mungkin ingin menambahkan gambar ke formulir Anda:

• Pengalaman pengguna – gambar dapat menciptakan pengalaman yang lebih baik dan lebih menarik bagi orang-orang yang mengisi formulir Anda.
• Penjelasan/kejelasan – gambar mungkin memudahkan orang untuk memahami berbagai opsi di formulir Anda.
• E-niaga – jika Anda membuat formulir pembayaran untuk menjual produk atau layanan, menambahkan gambar dapat membantu orang memahami produk/layanan yang mereka lihat.
• Personalisasi – gambar dapat menciptakan pengalaman yang lebih personal bagi orang yang mengisi formulir.
• merek – gambar dapat meningkatkan pencitraan merek Anda, meskipun Anda tidak menggunakannya sebagai bagian dari kolom formulir secara langsung.

Ini hanyalah beberapa ide – Anda mungkin juga memiliki alasan sendiri untuk menambahkan gambar ke formulir Anda.

Cara menambahkan gambar ke formulir dengan fitur inti Gravity Forms

Sekarang, kita akan membahas beberapa metode berbeda untuk menambahkan gambar ke formulir WordPress Anda menggunakan fungsionalitas inti di Gravity Forms.

Berikut adalah metode yang akan kami bahas:

• Menggunakan bidang Pilihan Gambar khusus – Bentuk Gravitasi menyertakan bidang Pilihan Gambar khusus yang memungkinkan pengguna memilih dari daftar gambar menggunakan format berbeda seperti tombol radio, kotak centang, dan banyak lagi.
• Menambahkan gambar ke bidang lain menggunakan HTML – ini berfungsi untuk bidang Produk, bersama dengan berbagai jenis bidang lainnya.
• Menyertakan gambar mandiri dalam formulir menggunakan bidang HTML – ini memungkinkan Anda menambahkan gambar individual ke formulir Anda. Ini berguna jika Anda tidak ingin memasukkannya sebagai bagian dari kolom lain.

Sekali lagi, tidak ada metode di bagian ini yang memerlukan add-on. Anda dapat menerapkan semua ini hanya dengan menggunakan plugin inti Gravity Forms, yang berarti plugin tersebut dapat bekerja dengan lisensi apa pun.

Cara mengunggah file gambar ke WordPress

Untuk semua metode ini, kami berasumsi bahwa Anda telah mengunggah gambar yang ingin Anda gunakan ke server situs WordPress Anda.

Jika Anda tidak yakin bagaimana cara melakukannya, cara termudah adalah mengunggah file gambar langsung ke Perpustakaan Media WordPress Anda. Begini caranya:

1. Buka dasbor WordPress Anda.
2. Pergi ke Media → Tambahkan File Media.
3. Seret satu atau lebih file gambar ke antarmuka untuk mengunggahnya. Atau, Anda dapat mengklik Pilih File tombol untuk memilihnya secara manual.

Setelah Anda mengunggah file, file tersebut akan muncul di Perpustakaan Media Anda (Media → Perpustakaan).

Untuk beberapa penggunaan ini, Anda memerlukan URL langsung ke file gambar di server Anda.

Untuk menemukan URL ini, pertama-tama pilih gambar di Perpustakaan Media Anda. Ini akan membuka Detail lampiran popup yang menyertakan informasi lebih lanjut tentang gambar.

Anda dapat menemukan URL-nya di URL berkas kotak. Anda juga dapat mengklik Salin URL ke papan klip tombol untuk menyalin URL file gambar.

Sekarang, mari masuk ke cara menambahkan gambar-gambar itu ke formulir WordPress Anda…

Bidang Pilihan Gambar

Jika Anda ingin membiarkan pengguna memilih di antara beberapa gambar, Gravity Forms menyertakan bidang Pilihan Gambar khusus, yang terletak di Bidang Standar bagian.

Bidang ini mencakup beberapa opsi tergantung pada berapa banyak gambar yang Anda ingin orang dapat pilih:

• Pilih Satu – pengunjung dapat memilih satu opsi (mirip dengan tombol radio).
• Pilih Beberapa – pengunjung dapat memilih opsi sebanyak yang mereka inginkan (mirip dengan kotak centang).
• Pilih Nomor Tepat – pengunjung harus memilih jumlah opsi yang Anda tentukan (misalnya “Pilih tiga opsi”).
• Pilih Rentang – pengunjung dapat memilih antara rentang tertentu (misalnya “Pilih antara satu hingga tiga opsi”).

Saat Anda menambahkan bidang Pilihan Gambar, Anda dapat menggunakan terlebih dahulu Pilihan drop-down untuk mengontrol bagaimana pengunjung dapat memilih opsi.

Kemudian, Anda dapat mengklik Sunting Pilihan tombol untuk mengontrol pilihan mana yang tersedia dan menambahkan gambar.

Untuk menambahkan gambar, klik ikon gambar di daftar pilihan.

Anda kemudian dapat memilih gambar yang ada dari Perpustakaan Media WordPress Anda atau mengunggah gambar baru. Kami juga menyarankan untuk menambahkan teks alternatif agar gambar lebih mudah diakses.

Ulangi proses tersebut untuk menambahkan pilihan/gambar sebanyak yang diperlukan.

Saat Anda menambahkan gambar, gambar tersebut secara otomatis akan muncul di pratinjau langsung bidang tersebut.

Seperti halnya pilihan pada bidang Bentuk Gravitasi lainnya, Anda juga dapat menetapkan nilai pada setiap pilihan dengan mencentang Tunjukkan Nilai kotak. Hal ini dapat berguna jika Anda ingin memasukkan pilihan pengunjung ke dalam perhitungan.

Dan itu saja untuk bidang Pilihan Gambar! Di bagian selanjutnya, kita akan membahas beberapa opsi tentang cara menata gambar dengan mudah.

Cara memberi gaya pada bidang Pilihan Gambar Bentuk Gravitasi

Jika Anda menggunakan tema bentuk Orbital, Anda dapat menata gambar langsung dari editor blok WordPress.

Di Gaya Pilihan Gambar pengaturan, Anda mendapatkan opsi berikut:

• Penampilan – pilih antara tata letak Kartu dan Tanpa Kartu.
• Gaya – pilih antara gambar Kotak atau Lingkaran.
• Ukuran – pilih antara ukuran gambar Kecil, Sedang, atau Besar.

Misalnya, pada tangkapan layar di bawah, Anda dapat melihat bahwa kami telah mengubah gaya gambar menjadi lingkaran, bukan kotak.

Menambahkan gambar ke bidang lain (termasuk bidang Produk)

Selain bidang Pilihan Gambar khusus, Anda juga dapat menambahkan gambar ke jenis bidang lain dengan menggunakan beberapa HTML sederhana.

Ini berfungsi baik untuk bidang Produk dan Opsi, meskipun Anda juga dapat menggunakan pendekatan dasar yang sama untuk jenis bidang lainnya. Ini mencakup bidang khusus lainnya seperti bidang Survei.

Untuk tutorial ini, kami akan fokus menambahkan gambar ke bidang Produk, karena ini adalah kasus penggunaan umum. Namun, langkah dasar yang sama juga dapat diterapkan pada jenis bidang lainnya.

Unggah gambar Anda ke server Anda

Untuk memulai, Anda perlu mengunggah gambar ke server situs Anda, jika Anda belum melakukannya.

Untuk kasus penggunaan ini, kami menyarankan untuk mengubah ukuran gambar sebelum mengunggahnya ke server Anda, karena ini akan mempermudah kontrol tata letak formulir Anda.

Cara termudah untuk mengunggah gambar adalah melalui Perpustakaan Media WordPress, seperti yang kami tunjukkan di atas.

Setelah Anda mengunggah file, Anda juga memerlukan tautan langsung ke file gambar di server Anda. Kami juga membahas cara menemukan tautan ini di bagian sebelumnya.

Siapkan beberapa HTML sederhana

Sekarang, Anda perlu menyiapkan beberapa HTML sederhana untuk gambar yang ingin Anda gunakan.

HTML dasar yang Anda perlukan adalah ini:

<img src=" alt="Describe the image">

Berikut cara mengisinya:

• src – tempel tautan lengkap ke file gambar Anda di dalam tanda kutip.
• alternatif – mendeskripsikan konten gambar dalam teks biasa. Meskipun hal ini tidak diperlukan untuk menyisipkan gambar, ini merupakan bagian penting agar situs web Anda dapat diakses.

Misalnya, Anda ingin menggunakan detail berikut:

• Berkas gambar –
• teks alternatif – Sandwich pesto ayam di atas roti penghuni pertama

HTML gambar lengkapnya akan terlihat seperti ini:

<img src="" alt="A chicken pesto sandwich on sourdough bread">

Tambahkan gambar HTML ke bidang

Setelah Anda memiliki HTML untuk gambar Anda, yang perlu Anda lakukan hanyalah menambahkannya ke label bidang.

Mari kita lihat contoh bidang Produk, meskipun prinsip dasar yang sama berlaku untuk jenis bidang lainnya.

Jika Anda memiliki bidang Produk dengan Tombol Radio, Anda akan mengklik Sunting Pilihan lalu tambahkan HTML setiap gambar ke yang relevan Label untuk setiap opsi.

Berikut tampilannya di bagian depan:

Untuk menyesuaikan tata letak gambar, seperti menampilkannya dalam tata letak multi-kolom, Anda dapat menambahkan kelas siap pakai CSS. Kami memiliki postingan blog yang membahas kelas siap pakai CSS atau Anda dapat membaca dokumentasi lengkapnya.

Termasuk gambar mandiri dengan bidang HTML

Sejauh ini, kami fokus pada penambahan gambar ke bidang yang akan berinteraksi langsung dengan pengunjung.

Namun, Anda juga mungkin ingin menyertakan gambar mandiri di formulir Anda. Ini bisa berguna untuk desain, branding, kegunaan, atau kasus penggunaan lainnya selain membantu pengunjung memilih opsi yang tepat.

Untuk mencapai hal ini, tambahkan HTML bidang tempat Anda ingin gambar itu muncul.

Kemudian, edit blok dan tambahkan gambar HTML ke dalamnya Isi.

Catatan – Anda tidak akan melihat gambar muncul di dalam editor backend. Anda perlu mengklik Pratinjau tombol di pojok kanan atas untuk melihat seperti apa tampilan gambar di formulir siaran langsung Anda.

Berikut tampilannya di bagian depan – gambar bukan bagian dari bidang apa pun. Sebaliknya, itu hanya elemen visual yang disertakan sebagai bagian dari formulir.

Cara menambahkan gambar ke formulir dengan add-on Gravity Forms

Selain menggunakan fungsionalitas inti Gravity Forms untuk menyertakan gambar, ada juga sejumlah add-on komunitas pihak ketiga yang dapat memberi Anda lebih banyak fleksibilitas untuk menambahkan gambar ke formulir Anda.

Salah satu opsi yang populer adalah add-on Gravity Forms Image Choices dari JetSloth, Pengembang Bersertifikat Gravity Forms. Artinya, meskipun add-on tersebut berasal dari pengembang pihak ketiga, kualitasnya masih disertifikasi oleh tim Gravity Forms.

Add-on ini menambahkan dukungan gambar ke tombol radio dan bidang kotak centang di seluruh Gravity Forms.

Selain mendukung tipe bidang dasar, ini juga mendukung bidang lanjutan termasuk bidang Survei, Jajak Pendapat, Kuis, Produk, dan Opsi.

Anda juga dapat menemukan add-on komunitas lain untuk membantu Anda menambahkan gambar ke formulir Anda. Jika add-on tidak berasal dari Pengembang Bersertifikat Gravity Forms, kami menganjurkan Anda untuk membaca ulasan dan melakukan uji tuntas sendiri sebelum menginstalnya.

Coba tambahkan gambar ke formulir Anda berikutnya

Dengan Gravity Forms, Anda memiliki banyak opsi tentang cara menambahkan gambar ke formulir WordPress Anda.

Jika Anda ingin pengunjung dapat memilih di antara beberapa opsi yang menyertakan gambar, bidang Pilihan Gambar khusus menawarkan cara paling sederhana untuk memulai.

Ini memungkinkan Anda menambahkan gambar langsung ke bidang dan memilih dari opsi pilihan yang berbeda, termasuk tombol radio, kotak centang pilihan ganda, kotak centang pilihan tepat, dan kotak centang rentang pilihan. Anda juga dapat dengan mudah menata gambar langsung dari editor blok.

Anda juga dapat menyertakan gambar di bidang lain dengan menambahkan gambar HTML yang disematkan langsung ke label bidang. Ini berfungsi baik untuk bidang Produk dan Opsi, serta memungkinkan Anda menambahkan gambar ke jenis bidang lainnya.

Atau, Anda juga bisa menambahkan gambar mandiri ke formulir Anda menggunakan bidang HTML.

Terakhir, jika Anda menginginkan lebih banyak fleksibilitas daripada opsi di plugin inti Gravity Forms, Anda juga dapat menemukan add-on pihak ketiga yang membantu Anda menyertakan gambar dalam formulir Anda. Salah satu opsi yang bagus adalah add-on Gravity Forms Image Choices dari JetSloth, Pengembang Bersertifikat.

Jika Anda sudah memegang lisensi Gravity Forms, cobalah metode ini hari ini untuk mulai menambahkan gambar ke formulir Anda.

Jika Anda belum menggunakan Gravity Forms, belilah lisensinya hari ini untuk memulai di situs web Anda sendiri atau Anda dapat membuat situs web demo gratis yang berfungsi penuh untuk mencoba semua fungsi ini sebelum melakukan pembelian.