Contoh Formulir Situs Web Terbaik untuk 2022

Hampir setiap situs web memiliki beberapa jenis. Contoh dan tip formulir terbaik berikut akan membantu Anda mempelajari cara membuat formulir dan halaman formulir yang menarik yang akan membantu menghasilkan interaksi dan konversi.

Dari cara menggunakan halaman formulir hingga elemen formulir yang memfasilitasi aliran pengguna ke plugin formulir, contoh-contoh ini pasti akan membantu Anda merasa sedikit lebih kreatif saat mendesain elemen formulir untuk proyek situs web Anda.

Mari selami!

Untuk Apa Formulir Situs Web Digunakan?

Hal pertama yang pertama, formulir web atau HTML adalah elemen interaktif apa pun di situs web yang memungkinkan pengguna memasukkan informasi yang kemudian dikirim ke server atau aplikasi lain untuk diproses.

Formulir adalah alat yang berharga untuk situs web karena memungkinkan Anda mengumpulkan data dan informasi dengan cara yang mudah bagi pengguna. Formulir yang baik bahkan dapat memvalidasi elemen informasi tertentu untuk memastikan data yang Anda ambil akurat.

• Hampir setiap situs web memiliki beberapa jenis formulir.
• Mendaftar untuk email
• Periksa
• Registrasi
• Minat
• Masuk ke situs web/informasi akun
• Kontak
• Survei
• Mencari
• Dukungan/obrolan
• Jenis timah lainnya

Anda memerlukan halaman formulir untuk memastikan bahwa pengunjung situs web memahami mengapa ada formulir dan mengapa mereka harus menggunakannya. Halaman formulir harus dirancang untuk mengoptimalkan interaksi dan penyelesaian formulir yang berhasil.

Halaman-halaman ini di situs web Anda harus melakukan beberapa hal berbeda untuk mendorong penyelesaian formulir.

• Gunakan petunjuk arah untuk memandu pengguna ke formulir di halaman. Itu mungkin termasuk apa saja mulai dari spasi putih hingga panah hingga "gerakan" ke arah formulir di halaman.
• Sertakan konten yang menjual nilai formulir dan terlibat dengannya. Apa yang didapat pengguna jika mereka mengisi formulir? Harus ada manfaat untuk menarik penyelesaian.
• Rancang halaman yang menarik secara visual dan terlihat memiliki otoritas yang kredibel. Tidak seorang pun ingin memberikan informasi di tempat yang tampak samar atau seperti informasi tersebut akan disalahgunakan. Gunakan warna, kontras, tipografi, dan tulisan yang kuat (termasuk mikrokopi) untuk membantu mengarahkan pengunjung situs web ke formulir.
• Segala sesuatu di halaman formulir harus mengarahkan pengunjung situs web ke tindakan mengisi formulir. Cobalah untuk menghindari halaman formulir yang berantakan dengan terlalu banyak instruksi atau ajakan bertindak lainnya. Jelaskan untuk apa halaman itu – untuk mengisi formulir.
• Sertakan formulir di halaman formulir Anda. Tidak ada gunanya membuat halaman formulir yang menjelaskan mengapa seseorang harus mengisi formulir dan kemudian membuat mereka mengklik ke tempat lain untuk mengisinya. Halaman formulir harus berisi semua yang dibutuhkan pengunjung situs web untuk memahami formulir dan menyelesaikan prosesnya.

Apa itu Plugin Formulir WordPress?

Jika Anda menggunakan WordPress, plugin formulir dapat membuat pembuatan dan pengelolaan formulir menjadi jauh lebih mudah. Pengguna WordPress hampir semuanya setuju tentang satu hal dalam hal formulir: plugin formulir WordPress adalah cara yang tepat.

Plugin formulir WordPress adalah alat yang terintegrasi dengan situs web WordPress Anda dan membantu Anda membuat formulir dengan elemen yang telah dikodekan sebelumnya, database untuk menyimpan hasil, dan otomatisasi (seperti pengiriman email atau pemrosesan pembayaran) yang menghubungkan formulir Anda dengan tindakan.

Banyak plugin formulir memiliki pembuat drag-and-drop dengan berbagai default bidang formulir untuk membuat pembangunan cepat dan mudah. Sebagian besar, mereka dibuat untuk bekerja dengan CSS situs web Anda sehingga formulir terlihat seperti bagian dari desain situs web secara keseluruhan. Plugin kemudian memungkinkan Anda untuk menyesuaikan bidang untuk memenuhi kebutuhan Anda lebih lanjut.

Selain itu, plugin formulir sering kali datang dengan beberapa formulir pemula untuk membantu Anda memikirkan logika dalam menyusun formulir, urutan bidang, dan bagaimana tampilannya secara keseluruhan.

Jika Anda membutuhkan plugin formulir, pertimbangkan Blok Formulir Blok Kadence. Juga, lihat plugin formulir WordPress terbaik untuk tahun 2022 untuk opsi plugin formulir lainnya.

Bagaimana Anda Membuat Formulir Situs Web yang Efektif?

Formulir web yang efektif memiliki dua elemen berbeda: Mudah dipahami secara visual dan berfungsi seperti yang Anda harapkan. Tanpa elemen-elemen ini, sebagian besar formulir akan jatuh atau duduk di situs web tanpa digunakan.

Elemen visual yang efektif dari suatu bentuk meliputi:

• Tujuan dan arah yang jelas untuk formulir dengan tajuk, deskripsi, dan instruksi (jika perlu)
• Tampilan yang cocok dengan sisa situs web sehingga bentuknya terlihat seperti bagian dari pengalaman situs web
• Banyak ruang untuk mengisi bidang formulir di desktop atau perangkat seluler
• Opsi cerdas yang membantu pengguna memahami apa yang Anda butuhkan – gunakan tombol dan kotak centang di mana Anda bisa daripada jawaban singkat; untuk nomor telepon atau tanggal, berikan format
• Mudah untuk melihat tombol tindakan penyelesaian untuk menyelesaikan aktivitas formulir

Unsur-unsur fungsional dari bentuk efektif meliputi:

• Menjaga formulir sesingkat mungkin dengan hanya meminta informasi yang diperlukan
• Default pintar, seperti informasi lokasi untuk kode ZIP
• Pesan kesalahan yang membantu pengguna jika mereka melakukan kesalahan
• Menyimpan formulir ke satu halaman
• Formulir harus responsif dan sesuai dengan ukuran layar atau browser
• Transmisi data yang aman
• Umpan balik untuk memberi tahu pengguna bahwa formulir telah berhasil diselesaikan (pesan di layar, email, pesan teks, atau kombinasi apa pun)

Bagaimana Anda Membuat Formulir Situs Web Terlihat Profesional?

Formulir profesional bersih, mudah dimengerti, dan terlihat seperti bagian dari desain situs web Anda. Itu harus mudah dibaca, mencakup komunikasi yang jelas tentang tujuan formulir, dan bebas dari kesalahan.

Meskipun semua ini terdengar sangat sederhana, sangat memalukan berapa banyak formulir situs web yang tidak memenuhi kebutuhan sederhana ini.

Bentuk situs web yang memiliki tampilan dan nuansa profesional dapat dipercaya oleh pengguna.

Bagaimana Saya Membuat Halaman Formulir di Situs Web Saya?

Membuat halaman formulir cukup mudah. Itu harus mengikuti aturan, gaya, dan prinsip desain yang sama dengan desain situs web lainnya. Perbedaan besar adalah bahwa konten menjelaskan nilai formulir, dan itu ada di halaman.

Sebagian besar plugin formulir dirancang agar Anda dapat membuat formulir dan kemudian menyematkannya pada halaman di situs web. Itulah tepatnya bagaimana Anda akan membuat halaman formulir Anda.

Saat membuat halaman formulir, salah satu hal utama yang perlu diingat adalah penempatan formulir itu sendiri. Di halaman mana letaknya?

Praktik terbaik untuk penempatan formulir pada halaman adalah di dekat bagian atas. Anda ingin formulir terlihat di atas gulungan sehingga pengguna segera mengetahui tentang halaman yang mereka buka (mengisi formulir). Di ponsel, formulir juga harus tinggi di halaman, dengan sedikit informasi deskriptor di atasnya.

Setelah Anda mengatur desain halaman formulir, Anda hanya perlu menyematkan formulir Anda (jika Anda menggunakan plugin seperti Kadence Blocks) dan kemudian memastikannya pas dengan ruang.

Elemen Apa yang Ada di Halaman Formulir?

Halaman formulir terbaik sederhana. Hal yang sama berlaku untuk formulir Anda sendiri. Baik Anda membantu seseorang memproses pembayaran melalui checkout atau mendaftar ke daftar email, lebih sedikit bidang yang mudah diisi adalah ideal.

Gunakan filosofi yang sama pada halaman formulir Anda.

Ini harus mencakup:

• Gambar pahlawan atau tajuk dengan teks yang memberi tahu Anda tentang halaman tersebut
• Deskripsi untuk apa formulir itu
• Formulir itu sendiri dengan pesan penyelesaian
• Informasi sekunder untuk pengguna yang belum siap menggunakan formulir dan membutuhkan lebih banyak, seperti tautan ke produk lain atau halaman FAQ
• Elemen situs web statis seperti header dan footer yang konsisten dengan desain situs web lainnya

5 Contoh Formulir Situs Web yang Kami Suka

Halaman formulir tidak harus membosankan. Mereka bisa sangat kreatif selama fungsi untuk memandu pengguna ada di sana. Berikut adalah lima contoh formulir situs web yang cantik dan fungsional.

1. OrangeTheory Fitness

Halaman formulir cerdas membuat segalanya lebih mudah bagi pengguna. OrangeTheory Fitness menggunakan data lokasi untuk membantu pengguna menemukan lokasi terdekat sehingga ketika formulir diisi untuk memesan kelas atau masuk untuk mendaftar kelas, formulir telah memilih lokasi yang tepat. Ini menyelamatkan pengguna dari melihat daftar panjang opsi dan membantu mencegah kesalahan pengguna. Kemudian formulirnya sederhana, hanya menanyakan informasi yang mereka butuhkan dan menjelaskan mengapa data itu penting.

2. Pendaftaran Anggota Nike

Halaman pendaftaran anggota dari Nike sangat sederhana, dengan desain minimal yang hanya menampilkan header dan formulir. Perhatikan deskripsi yang memberi tahu pengguna mengapa informasi itu penting dan bidang formulir yang memiliki banyak ruang di sekitarnya untuk memudahkan pengisian.

3. Kota Wisata

Tidak ada pertanyaan tentang apa yang harus dilakukan pengguna ketika mereka mendarat di situs web Travelocity. Formulir berada di depan dan tengah dengan deretan bidang cepat yang dirancang untuk mengembalikan hasil cepat. Yang menarik dari formulir ini adalah bentuknya yang cukup rumit – perhatikan semua opsi di bagian atas – tetapi disederhanakan sehingga sangat mudah bagi pengguna.

4. Kontak/Obrolan Red Bull

Formulir dari Red Bull ini sesederhana yang didapat dengan fitur obrolan untuk dukungan atau bantuan. Desain layar terbagi menampilkan foto dan header yang bagus yang memberi tahu Anda tentang halaman tersebut dengan formulir di sebelah kanan. Ada instruksi yang jelas dan tombol merah besar untuk menyelesaikan tindakan Anda.

5. Pasar Misfit

Menggunakan formulir pop dan on-site, Misfits Market memungkinkan pembeli baru untuk mendaftar hanya dengan alamat email. Ini adalah halaman formulir yang efektif karena merupakan penghalang masuk yang rendah bagi pengguna. Mereka dapat memasukkan alamat email untuk melihat apakah mereka menyukai produk yang ditawarkan dan menambahkan lebih banyak informasi ke akun mereka nanti jika mereka memilih untuk melakukan pembelian.

Buat Formulir Situs Web Anda Sendiri Sekarang!

Sekarang saatnya untuk membawa formulir situs web Anda ke tingkat berikutnya dengan halaman formulir dan formulir yang membantu menciptakan perolehan prospek, menumbuhkan daftar email, atau bahkan memfasilitasi e-niaga di situs web Anda.

Blok Formulir Kadence Blocks adalah tempat yang bagus untuk memulai. Anda dapat dengan mudah membuat formulir pemasaran atau kontak di dalam editor WordPress dan dukungan untuk banyak jenis bidang umum.

Pelajari lebih lanjut dan mulai hari ini.

Unduh Tema Kadence & Blok Kadence Untuk Membangun Situs Web yang Efektif

Jika Anda suka membuat konten yang menarik dengan desain yang indah, Kadence Blocks menyediakan alat untuk berkreasi langsung di editor WordPress asli. Selain itu, nikmati banyak konten bawaan yang dapat Anda sertakan dengan mudah di situs Anda, termasuk perpustakaan bingkai gambar blok untuk memulai desain web Anda berikutnya. Bagus untuk inspirasi dan pengembangan cepat!

Unduh sekarang

Sepupu Carrie

Carrie Cousins ​​memiliki pengalaman lebih dari 15 tahun di media, desain, dan pemasaran konten. Dia bekerja di pemasaran digital dan juga seorang penulis lepas dan desainer, yang mengkhususkan diri dalam menciptakan pengalaman online yang luar biasa untuk bisnis kecil. Karyanya telah ditampilkan dalam publikasi seperti Design Shack, Webdesigner Depot, The Next Web, dan Fast Company. Dia seorang pelari yang rajin, yang berguna dengan para gembala Australia di rumah.