10 fragmentów kodu do tworzenia pięknych formularzy

Każda strona internetowa zwykle potrzebuje jakiegoś formularza, niezależnie od tego, czy jest to strona kasy, czy prosta strona kontaktowa.

Upewnij się, że formularze działają, dlatego użyteczność jest na pierwszym miejscu. Ale estetyka jest również ważna, ponieważ projekty godne zaufania są zawsze bardziej angażujące.

Jeśli utkniesz w pomysłach na projekt, ta kolekcja może pomóc. To zbiór 10 projektów formularzy z darmowym kodem źródłowym. Znajdziesz wiele różnych schematów kolorów, stylów pól wejściowych, stylów typograficznych i wiele więcej.

Dodatkowo wszystkie są hostowane za darmo, dzięki czemu możesz kopiować i grać z kodem według własnych upodobań.

1. Projekt materiału

Wszyscy wiedzą o języku projektowania materiałów Google, który zyskał sławę w ciągu ostatnich kilku lat. Koncepcje projektowania materiałów były skierowane do aplikacji na Androida, ale szybko rozprzestrzeniły się w Internecie.

Jeśli podoba Ci się minimalistyczny styl interfejsu materiałów Google, sprawdź tę formę materiału stworzoną przez Jona Uhlmanna.

Działa na Sass i Pug do wstępnego przetwarzania CSS/HTML. Jest to również dość lekka forma, a elementy Material Design powinny wyświetlać się tak samo we wszystkich przeglądarkach.

Prawdziwa inspiracja dla wszystkich projektantów materiałów.

2. Pod morzem

Wybierz się w podróż do oceanu w tej wyjątkowej formie kontaktu zbudowanej w wodnym stylu.

Całe tło strony wykorzystuje powtarzający się wzór, aby stworzyć fale wody oceanu. Ale małe animowane rybki to zupełnie inna historia animowana z obrazu tła.

Dodatkowo za każdym razem, gdy wybierzesz pole wprowadzania, przyjazna ośmiornica pojawi się na powitanie. Jak ciekawy!

3. Forma Bootstrapa 3

Domyślne style Bootstrap są dość nudne i zostały naprawdę przyzwyczajone do śmierci w tym momencie. Ilekroć widzę witrynę Bootstrap z tymi samymi ogólnymi stylami, mogę sobie tylko wyobrazić, że projektant był zbyt leniwy, aby dostosować lub zbyt skoncentrowany na doświadczeniu, aby się nim zająć.

Ten formularz BS3 robi wszystko dobrze, opierając się na frameworku Bootstrap. Używa kilku zmian stylizacji w polach wejściowych i przycisku przesyłania, aby stworzyć sympatyczny formularz Bootstrap, o którym nigdy nie wiesz, że jest Bootstrap'd.

Jeśli używasz układu BS3, zdecydowanie rozważasz przerobienie swoich formularzy w ten sposób. Możesz także spróbować użyć platformy innej firmy opartej na Bootstrap, aby uzyskać bardziej spersonalizowany projekt.

4. Elegancki kontakt

Dzięki ikonom Font Awesome i podstawowym stylom responsywnym ten formularz kontaktowy jest naprawdę jedyny w swoim rodzaju.

Zawsze polecam dodawanie ikon do formularzy, zwłaszcza przy większych projektach. Przy większej liczbie pól masz większe wahanie, a użytkownicy chcą po prostu przechodzić przez formularze bez żadnych problemów.

Te proste ikony dodają wskazówkę do każdego pola, dzięki czemu można łatwo określić na pierwszy rzut oka, jakiego rodzaju informacje są wymagane.

A jeśli szukasz czegoś wyjątkowego, spróbuj dodać do miksu inną ikonę fontu.

5. Małe logowanie

Czasami małe rzeczy są naprawdę najlepsze. A ten interfejs formularza udowadnia to, tworząc superminifikowany formularz logowania, który po prostu się kołysze.

Typografia jest ogromna w projektowaniu formularzy i często wolę mniejsze kroje czcionek w polach logowania. To naprawdę zależy od strony internetowej i tego, jak dobrze wkomponowuje się mniejszy tekst w układ.

Ale ten formularz ma również małą grafikę kroku postępu zwisającą z boku, wyjaśniającą proces tworzenia formularza. Przyznane tylko dwóm polam wydaje się to głupie, ale w przypadku większych formularzy rejestracyjnych ten pasek postępu okaże się nieoceniony dla doświadczenia użytkownika.

6. Połączenie logowania i rejestracji

Jeśli chcesz skrócić czas logowania, możesz spróbować połączyć formularz logowania i formularz rejestracyjny na jednej stronie. To dużo łatwiejsze niż myślisz i możesz zobaczyć słodkie demo w tym pe .

Za każdym razem, gdy klikniesz linki logowania/rejestracji z boku, zobaczysz piękną niestandardową animację obracającą formularze. Wszystko jest obsługiwane przez jQuery, ale animacje mogą również działać przez CSS.

Zauważyłem jednak jeden błąd w tym układzie, w którym dolna część „ukrytego” formularza jest nadal widoczna po przełączeniu. Możesz rozwiązać ten problem za pomocą właściwości widoczności CSS lub przesuwając pozycję nieco bardziej poza granice.

7. Tablica kontaktowa

Oto naprawdę wyjątkowy styl formularza, który zdecydowanie wyskakuje ze strony. Ten formularz kontaktowy tablicy wykorzystuje gradient tła, aby stworzyć efekt odbijania się światła od tablicy.

Dodatkowo drewniana ramka pomaga sprzedać to jako prawdziwą ofertę.

Twórca Greg Sweet używa nawet niestandardowej czcionki internetowej, która wygląda jak typowe ludzkie pismo odręczne. Jest to idealne rozwiązanie, aby dodać ostatni szlif do formularza, dzięki czemu naprawdę poczujesz się, jakbyś wrócił do szkoły.

8. Płatność kartą kredytową

Widziałem wiele formularzy kasowych, ale ten projekt Fabio Ottavianiego jest prawdopodobnie najlepszym, na jaki kiedykolwiek się natknąłem.

Używa JavaScript do obsługi walidacji pól wejściowych, ale karta kredytowa jest w całości CSS. Animuje się w oparciu o liczby, które wpisujesz w formularzu, a nawet obraca się do tyłu, gdy wpisujesz numer CVV karty kredytowej.

9. Rejestracja niestandardowa

W przypadku czystego formularza rejestracyjnego CSS ten fragment naprawdę zabiera herbatniki. Odpoczynek w jednym pojemniku z małym cieniem wydaje się dość prosty.

Ale pola wejściowe są mocno dostosowane, w tym miejsce wymagane do dodania tych ikon do każdego z nich.

Za każdym razem, gdy podświetlisz pole, granica staje się zielona jak mech. Zauważysz, że ikona też zmienia kolory! Nawet wybrane menu dla kart kredytowych mają swoje własne niestandardowe style.

Jest to dość złożony efekt, który można wykonać wyłącznie w CSS, ale programista Jose Carneiro to umożliwił.

10. Pływające etykiety

Niestandardowe pływające etykiety to jedne z moich ulubionych trendów w projektowaniu formularzy. Zawsze pomagają poprawić użyteczność i dają jasne wyjaśnienie pola, nawet po jego wypełnieniu.

Rzuć okiem na ten formularz z pływającą etykietą działający w CSS3 i Compass.

Twórca Anton Simanov używa jQuery do etykiet, ale wszystko jest kodowane na zamówienie bez żadnych wtyczek. Nie wspominając o tym, że jego rozwiązanie działa dla wszystkich typowych stylów wprowadzania, w tym obszarów tekstowych i menu wyboru.

Bez względu na to, jaki styl formy wybierzesz, mam nadzieję, że ta galeria może dać ci kilka pomysłów i fragmentów, które pozwolą Ci posunąć się do przodu.

Im więcej studiujesz wzorców projektowych, tym więcej pomysłów będziesz musiał budować dla własnych projektów. A CodePen to świetna strona do zbierania tych pomysłów.