10 Cuplikan Kode untuk Membuat Formulir yang Indah

Setiap situs web biasanya membutuhkan beberapa jenis formulir, apakah itu halaman checkout atau halaman kontak sederhana.

Sangat penting untuk memastikan formulir Anda berfungsi, jadi kegunaan adalah #1. Tetapi estetika juga penting karena desain yang dapat dipercaya selalu lebih menarik.

Jika Anda terjebak untuk ide desain, koleksi ini mungkin bisa membantu. Ini adalah kumpulan 10 desain formulir dengan kode sumber gratis. Anda akan menemukan banyak skema warna yang berbeda, gaya bidang masukan, gaya tipografi, dan banyak lagi.

Plus ini semua dihosting secara gratis sehingga Anda dapat menyalin dan bermain-main dengan kode sesuai keinginan Anda.

1. Desain Bahan

Semua orang tahu tentang bahasa desain material Google karena ketenarannya beberapa tahun terakhir ini. Konsep desain material ditujukan untuk aplikasi Android tetapi dengan cepat menyebar ke web.

Jika Anda menyukai gaya minimalis UI material Google, lihat formulir material yang dibuat oleh Jon Uhlmann ini.

Ini berjalan di Sass dan Pug untuk pra-pemrosesan CSS/HTML. Ini juga merupakan bentuk yang cukup ringan dan elemen desain material harus ditampilkan sama di semua browser.

Benar-benar inspirasi bagi Anda semua desainer material di luar sana.

2. Di Bawah Laut

Lakukan perjalanan ke laut dalam formulir kontak yang sangat unik ini dibangun dengan gaya akuatik.

Seluruh latar halaman menggunakan pola berulang untuk menciptakan gelombang air laut. Tapi ikan-ikan kecil yang dianimasikan adalah keseluruhan cerita lain yang dianimasikan dari gambar latar belakang.

Plus setiap kali Anda memilih bidang input, gurita ramah muncul untuk menyapa. Betapa anehnya!

3. Formulir Bootstrap 3

Gaya Bootstrap default cukup membosankan dan mereka benar-benar telah digunakan sampai mati pada saat ini. Setiap kali saya melihat situs Bootstrap dengan gaya generik yang sama, saya hanya bisa membayangkan perancangnya terlalu malas untuk menyesuaikan atau terlalu fokus pada pengalaman untuk peduli.

Formulir BS3 ini melakukan hal yang benar dengan membangun di atas kerangka Bootstrap. Ini menggunakan beberapa penataan ulang pada bidang input dan tombol kirim untuk membuat formulir Bootstrap yang Anda tidak akan pernah tahu adalah Bootstrap.

Jika Anda menjalankan tata letak BS3 pasti mempertimbangkan pengerjaan ulang formulir Anda seperti ini. Anda juga dapat mencoba menggunakan kerangka kerja pihak ke-3 yang dibangun di atas Bootstrap untuk desain yang lebih disesuaikan.

4. Kontak yang Elegan

Dengan ikon Font Awesome dan beberapa gaya responsif dasar, formulir kontak ini benar-benar unik.

Saya selalu merekomendasikan menambahkan ikon ke dalam formulir, terutama untuk desain yang lebih besar. Dengan lebih banyak bidang, Anda mendapatkan lebih banyak keraguan dan pengguna hanya ingin terbang melalui formulir tanpa hambatan.

Ikon sederhana ini menambahkan isyarat ke setiap bidang sehingga mudah untuk mengetahui secara sekilas jenis informasi apa yang diperlukan.

Dan jika Anda sedang mencari sesuatu yang sedikit unik coba tambahkan iconfont yang berbeda ke dalam campuran.

5. Login Kecil

Terkadang hal-hal kecil benar-benar hal yang terbaik. Dan UI formulir ini membuktikannya dengan membuat formulir login super kecil yang hanya mengguncang.

Tipografi sangat besar dengan desain formulir dan saya sering lebih suka tipografi yang lebih kecil di bidang login. Itu sangat tergantung pada situs web dan seberapa baik teks yang lebih kecil menyatu dengan tata letak.

Tetapi formulir ini juga memiliki grafik langkah kemajuan kecil yang menggantung di samping menjelaskan proses formulir. Memang dengan hanya dua bidang, ini agak konyol, tetapi untuk formulir pendaftaran yang lebih besar, bilah kemajuan akan terbukti sangat berharga bagi pengalaman pengguna.

6. Masuk & Daftar Kombo

Jika Anda ingin mengurangi waktu login, Anda dapat mencoba menggabungkan formulir login dan formulir pendaftaran dalam satu halaman. Ini jauh lebih mudah daripada yang Anda kira dan Anda dapat melihat demo manis di pe ini.

Setiap kali Anda mengklik tautan masuk/daftar ke samping, Anda akan menemukan animasi khusus yang indah yang memutar formulir ke tampilan. Semuanya didukung melalui jQuery tetapi animasi juga dapat bekerja melalui CSS.

Tapi saya melihat satu bug dalam tata letak ini di mana bagian bawah formulir "tersembunyi" masih terlihat setelah beralih. Anda dapat mengatasi ini dengan properti visibilitas CSS atau dengan memindahkan posisi sedikit lebih keluar dari batas.

7. Kontak Papan Tulis

Inilah gaya formulir unik yang benar-benar melompat dari halaman. Formulir kontak papan tulis ini menggunakan gradien latar belakang untuk menciptakan efek cahaya yang memantul dari papan tulis.

Ditambah perbatasan kayu membantu menjual barang ini sebagai real deal.

Pencipta Greg Sweet bahkan menggunakan font web khusus yang terlihat seperti tulisan tangan manusia pada umumnya. Ini sempurna untuk menambahkan sentuhan akhir ke formulir sehingga benar-benar terasa seperti Anda kembali ke sekolah.

8. Pembayaran Kartu Kredit

Saya telah melihat banyak formulir checkout tetapi desain oleh Fabio Ottaviani ini mungkin yang terbaik yang pernah saya temukan.

Itu memang menggunakan JavaScript untuk menangani validasi bidang input tetapi semua kartu kreditnya adalah CSS. Ini bernyawa berdasarkan angka yang Anda masukkan ke dalam formulir dan bahkan berputar ke belakang saat Anda mengetikkan nomor CVV kartu kredit.

9. Pendaftaran Kustom

Untuk formulir pendaftaran CSS murni, cuplikan ini benar-benar membutuhkan biskuit. Rasanya cukup sederhana beristirahat dalam satu wadah dengan drop shadow kecil.

Tetapi bidang input sangat disesuaikan termasuk ruang yang diperlukan untuk menambahkan ikon tersebut ke masing-masing ikon.

Setiap kali Anda menyorot sebuah bidang, perbatasan akan menjadi hijau lumut. Anda akan melihat ikon berubah warna juga! Bahkan menu pilihan untuk kartu kredit memiliki gaya kustom mereka sendiri.

Ini adalah efek yang cukup rumit untuk dibuat murni dalam CSS tetapi pengembang Jose Carneiro mewujudkannya.

10. Label Mengambang

Label mengambang khusus adalah beberapa tren favorit saya dalam desain formulir. Mereka selalu membantu meningkatkan kegunaan dan mereka memberikan penjelasan yang jelas tentang bidang itu bahkan setelah Anda mengisinya.

Intip formulir label mengambang ini yang berjalan di CSS3 dan Kompas.

Pencipta Anton Simanov menggunakan jQuery untuk label tetapi semuanya dikodekan secara khusus tanpa plugin apa pun. Belum lagi solusinya berfungsi untuk semua gaya input tipikal termasuk textareas dan menu pilih.

Tidak peduli apa gaya bentuk yang Anda tuju, saya tentu berharap galeri ini dapat memberi Anda beberapa ide & cuplikan untuk bergerak maju.

Semakin banyak Anda mempelajari pola desain, semakin banyak ide yang harus Anda bangun untuk proyek Anda sendiri. Dan CodePen adalah situs yang bagus untuk mengumpulkan ide-ide itu.