Herhangi bir web sitesi türü için genellikle çok yaygın olan bir şey varsa, bunlar formlardır. İletişim bilgilerini doldurmak için kullandığımız formlar, Banka bilgilerini girin, bir sosyal ağda oturum açın veya genellikle Google arama motorunda her gün yaptığımız gibi bir arama yapın.
Bu yüzden bugün size göstereceğiz CSS'de 40 form iletişim formları, kredi kartı ödemeleri, girişler, basit, abonelik ve hatta doğrulamadan. Temadan bağımsız olarak web sitenize bu özel noktayı vermek için harika bir zarafet ve stil formları.
Minimalist iletişim formu
İle basit bir iletişim formu çok çeşitli efektler kayan işaretler veya çizgi animasyonları gibi. Biraz JavaScript ile zarif CSS kodu. Eğer arıyorsanız minimalist iletişim formu bu senin için mükemmel.
Minimalist form
diğer minimal form, yalnızca CSS'de bir basit ve yüksek etkili form. Bir öncekinin minimalist animasyonlarına sahip değil ama amacını çok iyi yerine getiriyor.
Vintage iletişim formu
Vintage iletişim formuçok şık bir tasarım. Bu web siteleri için duyarlı mobilden görülmek üzeredoğrulama içermemesine rağmen.
Mektup iletişim formu
bu iletişim formu oldukça meraklı bir animasyonu var: bir mektup oluşur. Basit ama çok fazla renkle çok kullanışlı.
Genişletilmiş iletişim formu
bu genişletilmiş iletişim formu Yalnızca ön uçtur ve jQuery ile doğrulama. Yüzen düğmeye tıklarız ve form canlı bir animasyonla görünecektir. Muhteşem.
İletişim Formu Kullanıcı Arayüzü
İletişim Formu Kullanıcı Arayüzü HTML ve CSS ile yapılmış bir formdur. Olduğu için öne çıkıyor basit bir kişi kartı doldurabiliriz, böylece tıklandığında yalnızca metin alanı değişir.
Ödeme kartı ile ödeme
Un ödeme kartı ödemesi HTML, CSS ve JavaScript ile yapılmıştır. dönen animasyonla ayırt edilir CVC veya güvenlik numarası alanına bastığımızda kredi kartı.
Kredi kartı düz tasarım
Bir için saf CSS için ödeme düz renkli kredi kartları. Kaliteyi ve profesyonelliği ifade edebilen renkli ve çok basit.
Kredi kartı kullanıcı arayüzü
HTML, CSS ve JavaScript'te ne kadar iyi olduğu ile öne çıkan başka bir kredi kartı genel tasarımı seçti. Web siteniz için bu kod parçasındaki animasyonları unuttuk. Bu bağlantıdan indirin.
Tepki Ödemesi
Tepki Ödemesi, React.js ile yapılan, ayırt edici özelliği özelleştirebileceğimiz yan resim e-Ticaretimizde sattığımız hizmetler veya ürünlerle.
Ödeme ödeme kartı
Bu ödeme, karta bir görüntü koyma olasılığıyla dikkat çekiyor. Bir CSS3, HTML5 ile yapılmış basit ve anlaşılır form ve biraz jQuery. Yüksek kaliteli ve bu listedeki diğer ödeme işlemlerinden farklı. İndirebilirsin burada bu ödeme kartı ödeme.
Kredi kartı ödemesi
bu kredi kartı ödeme formu ile pratik yapmak için programlandı DOM manipülasyonu için JavaScript. PayPal'a yaklaşan dijital bankacılık hizmeti Stripe'ın zarif kodunu tasarımda hatırlayabilirsiniz.
Kredi kartı
Zarif kart ödemesi için ödeme diğerlerinden farklı ve şuna göre üstte bulunan bir kredi kartı Böylece, müşterinin e-Ticarette ödemeyi yapmak için doldurması gereken farklı verileri içeren formun tamamı aşağıda.
Adım adım form
Un adım adım form HTML, CSS ve JavaScript ile yapılan kayıt için. Noktaların her biri için dört adım sol tarafta bulunur. Son derece tamamlanmış bir form için iyi bitmiş animasyonlar. Şiddetle tavsiye edilir.
Etkileşimli form
Un etkileşimli form HTML, CSS ve JavaScript ile yapılan çoklu geçiş. Adımların her biri arasındaki geçiş animasyonuyla dikkat çekiyor. Fark edilmeyecek zarif bir dokunuşa sahiptir.
Adım adım form
bu adım adım form oldukça yaratıcı olmasıyla öne çıkıyor. Soruları cevaplayacaksın böylece her zaman ekranda görsel olarak bulunarak onlara istediğiniz zaman geri dönebilirsiniz.
Adım adım
Adım adım form tamamlandı HTML, CSS ve JavaScript'te. Adımların her biri arasındaki geçiş animasyonu ile karakterizedir.
Çok adımlı Jquery formu
Eğer varsa çok uzun formBu, çok çarpıcı bir ilerleme çubuğuna sahip farklı bölümler için mükemmeldir. JQuery ve CSS'ye dayalı olarak, tasarımı ve muhteşem zarafeti ile dikkat çekiyor.
UI animasyon formu
Bunun geçişleri UI animasyon formu están Domink Marskusic'e dayalı. İki giriş alanından bazılarına tıkladığımızda mavi kutunun yaratıcı etkisine dikkat edin.
Hesap oluşturma / giriş formu
Bir hile giriş ve hesap oluşturma animasyona dayalı olan bu iki bölüm arasında ne olur. HTML, JavaScript ve CSS'de yapılacak çok güncel ve çarpıcı bir duruş.
Yılan Vurgu
Yılan Vurgu herhangi bir listenin en çarpıcı girişlerinden biridir. zarif animasyonuyla dikkat çekiyor Bu, iki alandan birine tıkladığımızda hızlı bir şekilde görünür.
Giriş ekranı
Bu tasarımı ilahi giriş ekranı onların da animasyonlar ve ne kadar yaratıcı. Web tasarımı söz konusu olduğunda en güncel olmak istiyorsanız, bu form eksik olamaz. Vazgeçilmez.
Giriş kullanıcı arayüzü tasarımı
HTML, Sass ve jQuery kullanılarak tasarlanmıştır. Giriş kullanıcı arayüzü tasarımı es eanlaşılır ve anlaşılır ince animasyonlardan yoksun olmayan konuyla ilgili listedeki favorilerden biri haline geliyor.
Giriş ve kullanıcı arayüzü hesabı oluşturma
Özel bir giriş tasarımı ve hesap oluşturma kullanıcı arayüzü renkler ve sunum için bir büyük kart iki bölüm. İnfazda özleyemeyeceğimiz en güzellerden bir diğeri. HTML, CSS ve JavaScript ile yapılmıştır.
İğrenç hatalar
İğrenç hatalar Animasyonu nedeniyle harika bir giriş obnoxious.css içeren alanlar. Eğlenceli, kaygısız ve çok farklı bir oturum açma için orijinal. Web sitemiz için hiç şüphesiz orijinal.
Giriş CSS HTML
Meraklı bir giriş farklı ikonlarla ziyaretçiyi istediğimiz yere götürmek için alanların her birini gösterir. Renklerde seçilen tonlar da dikkat çekiyor. Herhangi bir animasyonu yoktur. Bir müşterimiz veya kendimiz için web sitesinde uygulamak için HTML ve CSS'de yapılır.
Modal giriş formu
bu Modal giriş formu dilinden esinlenmiştir Materyal Tasarımı ile tanınan tasarım. Bunu mobil cihazlarda birçok uygulamada gördük. Bu kodda bir giriş panelimiz ve varsayılan olarak gizlenmiş bir kayıt panelimiz var. Kayıt paneli, sağ taraftaki mavi sütuna tıklanarak etkinleştirilebilir. Çok özel ve çarpıcı bir giriş olması için harika bir animasyonu var.
Esnek kutu formu
Arama formlarına bununla başlıyoruz form flexbox'a dayalı. "Arama" nın kırmızı rengiyle ve biraz daha fazlasıyla web siteniz için zarif bir arama alanıyla öne çıkar.
Animasyonlu kutu
Bu grubu animasyonlu kutu büyüteç simgesine tıklayın ve parlak mavi bir animasyon görünecek böylece sadece web sitesinde yapacağımız aramayı yazmamız gerekiyor. HTML, CSS ve JavaScript ile yapılmıştır.
Arama alanı
bir ekran boyunca büyük çizgi geçiyor böylece bastığımızda aramayı yazmaya başlarız. Bunu tanımlamak için bir alma düğmesi basit arama formu.
Basit arama alanı tıklaması
Basit arama alanı tıklaması görülen bir etkileşime dayanmaktadır Waze Driver Community Uygulaması araç. Tüm simgeler ve resimler CSS ile yapılmıştır. Bir ürün veya hizmet için belirli aramalar yapmamızı sağlayan simgelerle dikkat çekiyor. Ne kadar havalı olduğu için çarpıcı.
CSS metin girişi efekti
CSS metin girişi efekti bir dizi içerir metin ve arama çekmecesinde animasyonlar formda dikkatli bir arayan olmak.
Tam ekran arama
Bu giriş tam ekran arama her türlü düzen veya konumla çalışır. Stil gerektirir kapsayıcıya özgü ve arama yer paylaşımı öğesi kökte bulunacak. Arama düğmesine bastığımız anda sıçrayan bir animasyon ile karakterizedir.
Búsqueda
Un arama formu basit olan farklı pozisyonlarda oynamayı sever ve animasyonlar. Arama düğmesine tıklıyoruz ve kelimeleri yazmak için tam çekmece beliriyor. Çok güncel ve ne kadar basit olduğu için şiddetle tavsiye edilir.
Soru yok
Soru yok es metin alanı ile basit form ve kullanıcının seçmesi için bazı cevapları seçme seçeneği. En iyilerden biri olmak için görsel olarak harika.
Popup abonelik formu
Bu grubu pop-up abonelik formu, yüzen düğmeyi tıklıyoruz ve bizi çok komik bir tonla form ve e-postanın girileceği bir alan. E-posta pazarlaması için mükemmel.
Abonelik kutusu kullanıcı arayüzü
bir abonelik kutusu alarm zili ve düz renklerden biraz daha fazlası Tasarımın içinde.
CSS abonelik kutusu
bir akıllı abonelik kutusu gerçeği için gradyan kullan tıpkı alanın mor tonu gibi abone ol düğmesi için.
Abonelik kutusu
bir basit abonelik kutusu ancak tasarım gereği büyük etkiye sahiptir.
EMOJI doğrulama formu
Saf CSS bunu doğrulama formu anahtarı oluşturmak için veya şifre. Biz yazarken emoji formun güvenlik seviyesini ölçecektir. Şüphesiz komik ve meraklı.
Bunu kaçırma CSS'de 23 animasyonlu ok listesi.
Burada sunulan örneklerin mükemmel bir örneği. Çeşitliliği ve farklı bağlamlara uyarlanması ve en iyisi, her bir başlığın bağlantısının demoyu ve kaynak kodunu içermesidir, ancak onu bir "Demoyu göster" düğmesiyle vurgulamanız gerekir, çünkü onu başlıkta keşfettim meraktan kaynaklanmıştır . Katkı için teşekkürler. Karakas'tan selamlar.
Bana çok yardımcı oldu, teşekkürler.