Semua formulir sekarang responsif seluler secara default. Ini berarti tidak diperlukan konfigurasi lebih lanjut.
Penggunaan web seluler adalah arus utama. Jika situs web Anda tidak ditampilkan dengan benar di web, Anda kehilangan pengguna. Orang-orang sering menggunakan perangkat seluler mereka untuk mengakses situs web. Hal tersebut termasuk formulir web Anda, seperti formulir pendaftaran, kontak, atau pembuatan prospek. Formulir harusnya responsif seluler di semua perangkat untuk kegunaan yang baik dan pengalaman pengguna berkualitas tinggi. Salah satu cara untuk melakukannya adalah dengan membuat formulir Anda responsif seluler. Artinya, tidak peduli dari perangkat apa pengguna mengakses formulir Anda, formulir akan ditampilkan dengan tepat. Mereka tidak perlu memperbesar atau memperkecil untuk melihatnya. Tutorial ini akan menunjukkan cara membuat formulir responsif seluler dengan Jotform.
Jotform memiliki beberapa opsi untuk membuat formulir responsif seluler bahkan tanpa menulis satu baris kode untuk pengguna non-teknis. Berikut adalah cara membuat formulir responsif seluler dengan Jotform.
Membuat Formulir Responsif Seluler pada Desainer Formulir
Ini adalah metode yang disarankan karena akan mengubah formulir Anda menjadi formlir yang sepenuhnya responsif seluler di berbagai perangkat seperti iPhone dan iPad, baik dalam mode potret atau lanskap. Berikut adalah langkah-langkah untuk mengaktifkan hal tersebut di formulir Anda.
- Saat berada di Pembangun Formulir, klik ikon Desainer. Ini akan membuka desainer mini.
- Di jendela desainer mini, klik tombol Desainer Lanjutan untuk membuka desainer lengkap.
- Di Perancang Tingkat Lanjut, klik Tata Letak Formulir di panel kanan dan centan opsi Jadikan Formulir ini responsif.
Desainer Formulir memiliki mode pratinjau bawaan untuk perangkat dan tampilan yang berbeda. Cukup simpan formulir Anda, yang menyebabkan tombol pratinjau muncul.
Kekuatan Menyuntikkan CSS
Jika Anda memiliki gaya pribadi dengan desain formulir dan lebih suka menggunakan kode CSS khusus, inilah yang Anda cari. Ini untuk pengguna tingkat lanjut.
Menyuntikan CSS dapat dilakukan baik dari pembangun formulir atau desainer formulir. Berikut adalah petunjuk tentang cara menyuntikan CSS dari Pembangun Formulir. Desainer Formulir lebih tingkat lanjut, jadi kami sarankan untuk menulis CSS di sana. Untuk mulai membuat kode CSS khusus, cukup klik tab CSS saat berada di Desainer Formulir.
Kiat cepat dalam menyuntikan CSS khusus:
@media query adalah cara umum untuk membuat halaman web menjadi responsif, ini juga berlaku untuk formulir. Ini digunakan untuk menentukan aturan gaya yang berbeda untuk jenis alat/media yang berbeda. Berikut adalah contoh CSS kueri media yang menargetkan lebar tertentu.
/* Menargetkan area tampilan dengan lebar maksimum 768px*/
@media screen and (max-width:768px) {
/* GAYA LETAKAN DI SINI */
} Jika Anda ingin mengetahui lebih lanjut tentang kode CSS kueri media yang menargetkan perangkat yang berbeda, berikut inilah satu sumber yang bagus.
Menggunakan Widget Responsif Seluler
Jika Anda ingin menggunakan widget daripada menggunakan dua opsi sebelumnya untuk memasukkan kode CSS Anda sendiri, widget ini telah melihat semuanya dan telah membantu jutaan formulir untuk melakukan apa yang mereka butuhkan – menjadi responsif seluler.
Kami menyarankan untuk menggunakan salah satu dari dua opsi pertama, tetapi untuk kelengkapan, widget ini adalah cara yang bagus untuk mencapai hal yang sama.
Jika Anda baru mengenal widget, Anda dapat melihat cara menambahkannya ke formulir Anda di sini.
Harap perhatikan bahwa responsivitas seluler adalah hal yang rumit. Dengan begitu banyak perangkat berbeda yang tersedia dan perbedaan kinerja yang begitu dekat dengan komputer desktop dan berbagai CMS, desain dan begitu banyak faktor lain yang berperan, masing-masing opsi di atas akan bekerja dengan sendirinya, tetapi juga dalam kombinasi dengan opsi lain. .
Jika Anda menyematkan formulir ke situs web Anda dan Anda tidak puas dengan tampilannya dengan dua opsi yang diaktifkan, jangan ragu untuk mulai bereksperimen.
Anda dapat mencoba kombinasi apa pun yang disebutkan di atas, dan jika Anda menemukan cara baru untuk mencapai responsivitas seluler yang tidak tercantum di sini, beri tahu kami di komentar di bawah.
Coba dan mulailah membuat formulir responsif seluler dengan Jotform!
Kirim Komentar: