Güzel Formlar Oluşturmak için 10 Kod Parçacığı

İster bir ödeme sayfası ister basit bir iletişim sayfası olsun, her web sitesi genellikle bir tür forma ihtiyaç duyar.

Formlarınızın çalıştığından emin olmak çok önemlidir, bu nedenle kullanılabilirlik 1 numaradır. Ancak estetik de önemlidir çünkü güvenilir tasarımlar her zaman daha ilgi çekicidir.

Tasarım fikirlerine takılıp kaldıysanız, bu koleksiyon yardımcı olabilir. Ücretsiz kaynak kodlu 10 form tasarımından oluşan bir koleksiyon. Birçok farklı renk şeması, giriş alanı stili, tipografik stil ve çok daha fazlasını bulacaksınız.

Ayrıca bunların tümü ücretsiz olarak barındırılır, böylece kodla istediğiniz gibi kopyalayabilir ve oynayabilirsiniz.

1. Malzeme Tasarımı

Google'ın materyal tasarım dilini, son birkaç yıldır yükselişte olan yükselişinden herkes biliyor. Materyal tasarım konseptleri Android uygulamalarına yönelikti ancak hızla web'e yayıldı.

Google'ın materyal kullanıcı arayüzünün minimalist tarzını beğendiyseniz, Jon Uhlmann tarafından oluşturulan bu materyal formuna göz atın.

CSS/HTML ön işleme için Sass ve Pug üzerinde çalışır. Aynı zamanda oldukça hafif bir formdur ve malzeme tasarım öğeleri tüm tarayıcılarda aynı şekilde oluşturulmalıdır.

Dışarıdaki tüm malzeme tasarımcıları için gerçekten bir ilham kaynağı.

2. Deniz Altında

Su stiliyle inşa edilmiş bu eşsiz iletişim formunda okyanusta bir yolculuğa çıkın.

Tüm sayfa arka planı, okyanus suyunun dalgalarını oluşturmak için yinelenen bir desen kullanır. Ama küçük animasyonlu balıklar, bir arka plan görüntüsünden canlandırma yapan tamamen başka bir hikaye.

Ayrıca, bir giriş alanı seçtiğinizde, selamlama için dost canlısı bir ahtapot belirir. Ne tuhaf!

3. Önyükleme 3 Formu

Varsayılan Bootstrap stilleri oldukça sıkıcıdır ve bu noktada gerçekten ölüme alışmışlardır. Ne zaman aynı jenerik stillere sahip bir Bootstrap sitesi görsem, tasarımcının kişiselleştirmek için çok tembel olduğunu veya umursayamayacak kadar deneyime odaklandığını hayal edebiliyorum.

Bu BS3 formu, Bootstrap çerçevesinin üzerine inşa ederek işleri doğru yapar. Bootstrap'd olduğunu asla bilemeyeceğiniz sevimli bir Bootstrap formu oluşturmak için giriş alanlarında birkaç yeniden biçimlendirme ve gönder düğmesi kullanır.

Bir BS3 düzeni çalıştırıyorsanız, kesinlikle formlarınızı bu şekilde elden geçirmeyi düşünüyorsanız. Daha özelleştirilmiş bir tasarım için Bootstrap üzerine kurulu bir 3. taraf çerçevesi kullanmayı da deneyebilirsiniz.

4. Zarif İletişim

Font Awesome simgeleri ve bazı temel duyarlı stiller ile bu iletişim formu gerçekten türünün tek örneğidir.

Özellikle daha büyük tasarımlar için her zaman formlara simgeler eklemenizi öneririm. Daha fazla alanla daha fazla tereddüt yaşarsınız ve kullanıcılar formlar arasında sorunsuz bir şekilde uçmak ister.

Bu basit simgeler, her alana bir ipucu ekler, böylece ne tür bilgilerin gerekli olduğunu bir bakışta söylemek kolaydır.

Ve biraz benzersiz bir şey arıyorsanız, karışıma farklı bir ikon yazı tipi eklemeyi deneyin.

5. Minik Giriş

Bazen küçük şeyler gerçekten en iyi şeylerdir. Ve bu form kullanıcı arayüzü, sadece harika olan süper küçültülmüş bir giriş formu oluşturarak bunu kanıtlıyor.

Tipografi, form tasarımıyla çok büyüktür ve oturum açma alanlarında genellikle daha küçük yazı tiplerini tercih ederim. Bu gerçekten web sitesine ve daha küçük metnin mizanpaja ne kadar iyi uyum sağladığına bağlıdır.

Ancak bu form aynı zamanda, form sürecini açıklayan küçük bir ilerleme adımı grafiğine sahiptir. Yalnızca iki alan verildiğinde bu biraz aptalca görünebilir, ancak daha büyük kayıt formları için bu ilerleme çubuğu kullanıcı deneyimi için çok değerli olacaktır.

6. Giriş ve Kayıt Kombosu

Giriş sürelerini kısaltmak istiyorsanız, giriş formunu ve kayıt formunu tek bir sayfada birleştirmeyi deneyebilirsiniz. Düşündüğünüzden çok daha kolay ve bu pe'de tatlı bir demo görebilirsiniz.

Yan taraftaki oturum açma/kayıt bağlantılarını her tıkladığınızda, formları görünüme döndüren güzel bir özel animasyon bulacaksınız. Hepsi jQuery ile destekleniyor ancak animasyonlar CSS üzerinden de çalışabilir.

Ancak bu düzende, geçişten sonra "gizli" formun alt kısmının hala görünür olduğu bir hata fark ettim. Bunu CSS görünürlük özelliği ile veya konumu biraz daha sınırların dışına taşıyarak çözebilirsiniz.

7. Kara Tahta İletişim

İşte kesinlikle sayfadan atlayan gerçek bir benzersiz form stili. Bu kara tahta iletişim formu, kara tahtadan yansıyan ışığın etkisini yaratmak için bir arka plan gradyanı kullanır.

Ayrıca ahşap bordür, bu şeyi gerçek anlaşma olarak satmaya yardımcı olur.

Yaratıcı Greg Sweet, tipik insan el yazısına benzeyen özel bir web yazı tipi bile kullanır. Bu, forma son dokunuşu eklemek için mükemmeldir, böylece gerçekten okula dönmüş gibi hissedersiniz.

8. Kredi Kartı Ödemesi

Pek çok ödeme formu gördüm ama Fabio Ottaviani'nin bu tasarımı belki de şimdiye kadar rastladıklarımın en iyisi.

Giriş alanı doğrulamasını işlemek için JavaScript kullanır, ancak kredi kartının tamamı CSS'dir. Forma girdiğiniz sayılara göre hareket eder ve hatta kredi kartı CVV numarasını yazarken arkaya döner.

9. Özel Kayıt

Saf bir CSS kayıt formu için bu pasaj gerçekten bisküviyi alır. Küçük bir gölge ile tek bir kapta dinlenmek oldukça basit hissettiriyor.

Ancak giriş alanları, bu simgelerin her birine eklemek için gereken alan da dahil olmak üzere büyük ölçüde özelleştirilmiştir.

Bir alanı her vurguladığınızda, kenarlık yosun yeşili olarak parlar. Simgenin de renk değiştirdiğini fark edeceksiniz! Kredi kartlarının seçme menülerinin bile kendi özel stilleri vardır.

Bu, tamamen CSS'de yapmak için oldukça karmaşık bir etkidir, ancak geliştirici Jose Carneiro bunu gerçekleştirdi.

10. Yüzen Etiketler

Özel yüzen etiketler, form tasarımında en sevdiğim trendlerden bazıları. Her zaman kullanılabilirliği geliştirmeye yardımcı olurlar ve alanı doldurduktan sonra bile net bir açıklama sunarlar.

CSS3 ve Pusula üzerinde çalışan bu kayan etiket formuna bir göz atın.

İçerik oluşturucu Anton Simanov, etiketler için jQuery kullanıyor ancak bunların tümü herhangi bir eklenti olmadan özel olarak kodlanmıştır. Çözümünün textareas ve seçme menüleri dahil tüm tipik giriş stilleri için çalıştığından bahsetmiyorum bile.

Hangi form stilini seçerseniz seçin, bu galerinin size ilerlemeniz için bazı fikirler ve parçalar verebileceğini umuyorum.

Tasarım kalıpları üzerinde ne kadar çok çalışırsanız, kendi projeleriniz için o kadar çok fikir oluşturmanız gerekecek. CodePen bu fikirleri toplamak için harika bir site.