Jika ada sesuatu yang biasanya sangat umum untuk semua jenis situs web, ini adalah formulirnya. Formulir yang kami gunakan untuk mengisi informasi kontak, masukkan detail bank, masuk ke jejaring sosial atau cukup lakukan pencarian seperti yang biasa kita lakukan setiap hari di mesin pencari Google.
Jadi hari ini kami akan menunjukkannya kepada Anda 40 bentuk dalam CSS mulai dari formulir kontak, pembayaran kartu kredit, login, sederhana, berlangganan atau bahkan validasi. Serangkaian bentuk keanggunan dan gaya yang luar biasa untuk memberikan poin khusus ke situs web Anda, apa pun temanya.
Formulir kontak minimalis
Formulir kontak sederhana dengan a berbagai macam efek seperti tanda mengambang atau animasi garis. Kode CSS yang elegan dengan sedikit JavaScript. Jika Anda mencari file formulir kontak minimalis ini sempurna untukmu.
Bentuk minimalis
Lain bentuk minimal, meskipun hanya dalam CSS menjadi bentuk sederhana dan efek tinggi. Itu tidak memiliki animasi minimalis dari yang sebelumnya, tetapi memenuhi tujuannya dengan sangat baik.
Formulir kontak antik
Formulir kontak antik, desain yang sangat elegan. Responsif untuk situs web tersebut untuk dilihat dari ponsel, meskipun tidak termasuk validasi.
Formulir kontak surat
ini formulir kontak itu memiliki animasi yang agak aneh: sebuah surat terbentuk. Sederhana, tetapi sangat berguna dengan banyak warna.
Formulir kontak yang diperluas
ini formulir kontak yang diperluas Itu hanya ujung depan dan memiliki validasi dengan jQuery. Kami mengklik tombol mengambang dan formulir akan muncul dengan animasi yang hidup. Luar biasa.
Formulir Kontak UI
Formulir Kontak UI Ini adalah formulir yang dibuat dalam HTML dan CSS. Itu menonjol untuk keberadaan kartu kontak sederhana yang bisa kita isi sehingga hanya bidang teks yang berubah saat diklik.
Pembayaran kartu pembayaran
Un pembayaran kartu pembayaran dibuat dalam HTML, CSS dan JavaScript yang dibedakan dengan animasi berputar kartu kredit ketika kita tekan pada kolom CVC atau nomor keamanan.
Desain datar kartu kredit
CSS murni untuk file checkout untuk kartu kredit dalam warna datar. Penuh warna dan sangat sederhana yang mampu menunjukkan kualitas dan profesionalisme.
UI kartu kredit
Kartu kredit lain dalam HTML, CSS dan JavaScript yang menonjol karena betapa bagusnya itu memilih desain keseluruhan. Kami lupa tentang animasi di bagian kode ini untuk situs web Anda. Unduh di tautan ini.
Reaksi Pembayaran
Reaksi Pembayaran, dibuat dengan React.js, dibedakan oleh gambar samping bisa kita sesuaikan dengan layanan atau produk yang kami jual di eCommerce kami.
Kartu pembayaran Checkout
Pembayaran ini menonjol karena kemungkinan meletakkan gambar di kartu. SEBUAH bentuk sederhana dan jelas dibuat dengan CSS3, HTML5 dan sedikit jQuery. Kualitas tinggi dan berbeda dari pembayaran lainnya di daftar ini. Kamu bisa mengunduh di sini kartu pembayaran checkout ini.
Pembayaran kartu kredit
ini formulir pembayaran kartu kredit diprogram untuk berlatih dengan JavaScript untuk manipulasi DOM. Anda dapat mengingat kembali dalam desainnya kode elegan Stripe, layanan perbankan digital yang semakin mendekati PayPal.
Kartu kredit
Elegan checkout untuk pembayaran kartu berbeda dari yang lain dan berdasarkan kartu kredit yang terletak di atas Sehingga di bawah ini kami memiliki seluruh formulir dengan data berbeda yang harus diisi klien untuk melakukan pembayaran di eCommerce.
Bentuk langkah demi langkah
Un bentuk langkah demi langkah untuk pendaftaran dilakukan dalam HTML, CSS dan JavaScript. Empat langkah untuk masing-masing poin terletak di sisi kiri. Animasi yang diselesaikan dengan baik untuk bentuk yang sangat selesai. Sangat dianjurkan.
Bentuk interaktif
Un bentuk interaktif multi-langkah dibuat dengan HTML, CSS dan JavaScript. Itu menonjol untuk animasi transisi di antara setiap langkah. Ini memiliki sentuhan elegan yang tidak akan luput dari perhatian.
Bentuk langkah demi langkah
ini bentuk langkah demi langkah menonjol karena cukup kreatif. Anda akan menjawab pertanyaannya sehingga Anda dapat kembali ke sana kapan saja dengan selalu tampil di layar secara visual.
Selangkah demi selangkah
Langkah demi langkah formulir selesai dalam HTML, CSS dan JavaScript. Ini ditandai dengan animasi transisi antara masing-masing langkah.
Bentuk Jquery multi langkah
Jika Anda punya bentuk yang sangat panjang, ini sempurna untuk bagian berbeda dengan bilah kemajuan yang sangat mencolok. Berdasarkan jQuery dan CSS, itu menonjol karena desainnya dan keanggunannya yang luar biasa.
Bentuk animasi UI
Transisi ini Bentuk animasi UI mereka berdasarkan Domink Marskusic. Perhatian pada efek kreatif dari kotak biru saat kita mengklik beberapa dari dua bidang login atau sesi.
Pembuatan akun / formulir login
Sebuah tipu muslihat login dan pembuatan akun yang didasarkan pada animasi apa yang terjadi antara dua bagian itu. Kehadiran yang sangat terkini dan mencolok untuk dilakukan dalam HTML, JavaScript dan CSS.
Sorotan Ular
Sorotan Ular adalah salah satu proses masuk yang paling mencolok dari daftar mana pun itu menonjol karena animasinya yang elegan yang muncul dengan cepat saat kita mengklik salah satu dari dua bidang.
Layar login
Ilahi desain ini layar login begitu juga mereka animasi dan seberapa kreatif itu. Jika Anda ingin menjadi yang terbaru dalam hal desain web, formulir ini tidak boleh hilang. Sangat diperlukan.
Desain UI login
Didesain menggunakan HTML, Sass, dan jQuery. Desain UI login es elegant dan jelas pada subjek yang tidak kekurangan animasi halus untuk menjadi favorit lain dalam daftar.
Login dan pembuatan akun UI
Khusus desain login dan UI pembuatan akun untuk warna dan untuk presentasi satu kartu besar dua bagian. Salah satu yang terindah dalam eksekusi yang tidak bisa kami lewatkan. Dibuat di HTML, CSS dan JavaScript.
Kesalahan yang menjengkelkan
Kesalahan yang menjengkelkan Ini adalah login yang bagus karena animasinya bidang dengan obnoxious.css. Asli untuk menjadi login yang menyenangkan, tanpa beban, dan sangat berbeda. Asli tanpa keraguan untuk situs web kami.
Login HTML CSS
Login yang penasaran oleh ikon yang berbeda yang menampilkan setiap bidang untuk membawa pengunjung kemanapun kita inginkan. Nuansa yang dipilih dalam warna juga menonjol. Tidak ada animasi apa pun. Itu dibuat dalam HTML dan CSS untuk diterapkan di situs web untuk klien atau milik kita sendiri.
Formulir masuk modal
ini Formulir masuk modal terinspirasi oleh bahasa desain yang terkenal dengan Desain Material. Kami telah melihatnya di banyak aplikasi di perangkat seluler. Dalam kode ini kami memiliki panel login dan panel pendaftaran yang disembunyikan secara default. Panel registrasi dapat diaktifkan dengan mengklik kolom biru yang terletak di sisi kanan. Ini memiliki animasi yang bagus untuk menjadi login yang sangat istimewa dan mencolok.
Bentuk flexbox
Kami memulai formulir pencarian dengan ini bentuk berdasarkan flexbox. Ini menonjol untuk warna merah dari «pencarian» dan sedikit lebih untuk bidang pencarian yang elegan untuk situs web Anda.
Kotak animasi
Dengan ini kotak animasi klik ikon kaca pembesar dan animasi biru cerah akan muncul sehingga kita hanya tinggal mengetikkan pencarian yang akan kita lakukan di website. Dibuat dengan HTML, CSS, dan JavaScript.
Bidang pencarian
sebuah garis besar melintasi layar sehingga saat kita menekannya kita mulai mengetik pencarian. Tombol ambil untuk menentukan ini formulir pencarian sederhana.
Klik bidang pencarian sederhana
Klik bidang pencarian sederhana didasarkan pada interaksi yang terlihat di Aplikasi Komunitas Pengemudi Waze kendaraan. Semua ikon dan gambar dibuat dengan CSS. Itu menonjol untuk ikon-ikon yang memungkinkan kami melakukan pencarian khusus untuk suatu produk atau layanan. Mencolok karena betapa kerennya itu.
Efek input teks CSS
Efek input teks CSS termasuk serangkaian animasi dalam teks dan laci pencarian untuk menjadi pencari yang cermat dalam bentuk.
Pencarian layar penuh
Entri ini dari pencarian layar penuh ini berfungsi dengan semua jenis tata letak atau posisi. Membutuhkan gaya elemen khusus penampung dan hamparan penelusuran untuk ditempatkan di root. Ini ditandai dengan animasi yang memantul saat kita menekan tombol pencarian.
Cari
Un formulir pencarian sederhana itu dia suka bermain dengan posisi yang berbeda dan animasi. Kami mengklik tombol pencarian dan laci lengkap muncul untuk mengetik kata-kata. Sangat terkini dan sangat disarankan untuk kemudahannya.
Tidak ada pertanyaan
Tidak ada pertanyaan es bentuk sederhana dengan bidang teks dan pilihan untuk memilih beberapa jawaban bagi pengguna untuk memilihnya. Sangat bagus secara visual untuk menjadi salah satu yang terbaik.
Formulir langganan popup
Dengan ini formulir berlangganan popup, kita klik tombol mengambang dan itu akan membawa kita ke bentuk dengan nada yang sangat lucu dan bidang tempat memasukkan email. Sempurna untuk pemasaran email.
UI kotak langganan
sebuah kotak langganan dengan bel alarm dan sedikit lebih dari warna datar Dalam desain.
Kotak langganan CSS
sebuah kotak langganan pintar untuk fakta gunakan gradien untuk tombol berlangganan seperti rona ungu lapangan.
Kotak langganan
sebuah kotak langganan sederhana tetapi dengan desain yang sangat berpengaruh.
Formulir validasi EMOJI
Murni CSS ini formulir validasi untuk membuat kuncinya atau kata sandi. Saat kami menulis, emoji akan mengukur tingkat keamanan formulir. Lucu dan penasaran tanpa diragukan lagi.
Jangan lewatkan ini daftar 23 panah animasi di CSS.
Contoh contoh yang sangat baik disajikan di sini. Variasi dan adaptasi untuk konteks yang berbeda dan yang terbaik adalah bahwa tautan dari setiap judul menyertakan demo dan kode sumber meskipun Anda harus menyorotnya dengan tombol «Lihat demo» karena karena penasaran saya menemukannya di judul . Terima kasih atas kontribusinya. Salam dari Caracas.
Itu sangat membantu saya, terima kasih.