40 CSS формуляра, които не могат да липсват на нито един уебсайт

Форма за влизане

Ако има нещо, което обикновено е много често за всеки тип уебсайт, това са формулярите. Формулярите, които използваме за попълване на информацията за контакт, въведете банкови данни, влезте в социална мрежа или просто извършете търсене като това, което обикновено правим ежедневно в търсачката на Google.

Така че днес ще ви покажем 40 формуляра в CSS вариращи от формуляри за контакт, плащане с кредитни карти, влизания, прости, абонамент или дори проверка. Поредица от форми с голяма елегантност и стил, които дават тази специална точка на вашия уебсайт, независимо от темата.

Индекс

Минималистична форма за контакт

форма-минималистична

Обикновена форма за контакт с a голямо разнообразие от ефекти като плаващи знаци или анимации на редове. Елегантен CSS код с малко JavaScript. Ако търсите минималистична форма за контакт това е идеално за вас.

Свързана статия:
23 висококачествени CSS библиотеки за уеб дизайн

Минималистична форма

Minimalista

Друг минимална форма, макар и само в CSS да бъде a проста и високоефективна форма. Той няма минималистичните анимации от предишната, но изпълнява целта си много добре.

Винтидж форма за контакт

реколта

Винтидж форма за контакт, много елегантен дизайн. Отзивчиви за тези уебсайтове да се вижда от мобилен телефон, въпреки че не включва валидиране.

Формуляр за контакт с писмо

Писмо

това форма за контакт има доста любопитна анимация: оформя се писмо. Прост, но много полезен с много цветове.

Свързана статия:
27 безплатни HTML и CSS карти за блогове, електронна търговия и др

Разширена форма за контакт

Обширна форма за контакт

това разширена форма за контакт Той е само отпред и има валидиране с jQuery. Щракваме върху плаващия бутон и формулярът ще се появи с жива анимация. Изключителен.

Потребителски интерфейс на формуляра за контакт

Форма за контакти

Потребителски интерфейс на формуляра за контакт това е форма, направена в HTML и CSS. Изпъква с това, че е обикновена карта за контакт че можем да попълним, така че само текстовото поле да се променя при щракване.

Плащане с карта за плащане

Плащане с карта с плащане

Un плащане с карта за плащане направени в HTML, CSS и JavaScript, които отличава се с въртяща се анимация кредитната карта, когато натиснем полето за CVC или номер за сигурност.

Кредитна карта плосък дизайн

Чиста CSS кредитна карта

Чист CSS за a плащане за кредитни карти в плоски цветове. Цветен и много прост, който може да обозначава качество и професионализъм.

Потребителски интерфейс на кредитна карта

Закуски

Друга кредитна карта в HTML, CSS и JavaScript, която се откроява с това колко е добра избра цялостния дизайн. Забравихме за анимациите в този код на вашия уебсайт. Изтеглете го на тази връзка.

React Checkout

Реагират

React Checkout, направен с React.js, се отличава с страничната картина, която можем да персонализираме с услугите или продуктите, които продаваме в нашата електронна търговия.

Платежна карта за плащане

Попов

Това плащане се откроява с възможността за поставяне на изображение на картата. A проста и ясна форма, направена с CSS3, HTML5 и малко jQuery. Високо качество и различно от останалите каси в този списък. Можете да изтеглите тук това плащане с карта за плащане.

Плащане с кредитна карта

Нашивка

това форма за плащане с кредитна карта е програмиран да практикува с JavaScript за DOM манипулация. Можете да си припомните в дизайна елегантния код на Stripe, услугата за цифрово банкиране, която се доближава до PayPal.

Кредитна карта

ежедневно

Елегантен плащане за плащане с карта различен от останалите и въз основа на кредитна карта, разположена в горната част така че по-долу имаме целия формуляр с различните данни, които клиентът трябва да попълни, за да извърши плащането в електронната търговия

Форма стъпка по стъпка

Стъпка по стъпка

Un стъпка по стъпка форма за регистрация, извършена в HTML, CSS и JavaScript. Четири стъпки за всяка от точките разположен от лявата страна. Добре завършени анимации за високо завършена форма. Силно препоръчително

Интерактивна форма

интерактивен

Un интерактивна форма многоетапно направено с HTML, CSS и JavaScript. Откроява се с анимацията на прехода между всяка от стъпките. Има елегантен щрих, който няма да остане незабелязан.

Форма стъпка по стъпка

Стъпка по стъпка

това стъпка по стъпка форма се откроява с това, че е доста креативен. Вие ще отговорите на въпросите за да можете да се върнете при тях по всяко време, като през цялото време визуално присъствате на екрана.

Стъпка по стъпка

Paso

Стъпка по стъпка формулярът е направен в HTML, CSS и JavaScript. Характеризира се с анимация на прехода между всяка от стъпките.

Многоетапна форма на Jquery

JQuery много стъпка

Ако имате много дълга форма, това е идеално за различни секции с много поразителна лента за напредъка. Базиран на jQuery и CSS, той се откроява със своя дизайн и с голямата си елегантност.

Форма за анимация на потребителския интерфейс

Форма за анимация

Преходите от това Форма за анимация на потребителския интерфейс están базиран на Доминк Марскушич. Внимание към творческия ефект на синьото поле, когато щракнем върху някое от двете полета за вход или сесия.

Форма за създаване на акаунт / вход

Създаване на вход

Трик вход и създаване на акаунт който се основава на анимация какво се случва между тези два раздела. Много актуално и поразително присъствие в HTML, JavaScript и CSS.

Snake Highlight

Змия

Snake Highlight Това е едно от най-поразителните входни данни от всеки списък, който се откроява с елегантната анимация това се появява бързо в момента, в който щракнем върху едно от двете полета.

Екран за вход

Влезте

Божествен този дизайн екран за вход такива са и техните анимации и колко креативна е тя. Ако искате да бъдете най-актуални по отношение на уеб дизайна, този формуляр не може да липсва. Незаменим.

Дизайн на потребителския интерфейс за вход

Форма за влизане

Проектиран с помощта на HTML, Sass и jQuery. Дизайн на потребителския интерфейс за вход es eлегален и ясен по темата, на която не липсват фини анимации, за да се превърне в още един от фаворитите в списъка.

Създаване на акаунт за вход и потребителски интерфейс

Регистрация за вход

Специален потребителски интерфейс за дизайн на вход и създаване на акаунт  за цветовете и за представяне в една голяма карта двете секции. Друг от най-красивите в екзекуцията, който не можем да пропуснем. Изработено в HTML, CSS и JavaScript.

Неприятни грешки

противен

Неприятни грешки Това е чудесно влизане поради анимацията на полета с obnoxious.css. Оригинал за забавно, безгрижно и много различно влизане. Оригинал без никакво съмнение за нашия уебсайт.

Влезте в CSS HTML

CSS

Любопитно влизане от различните икони които показват всяко от полетата, за да отведе посетителя, където пожелаем. Открояват се и нюансите, избрани в цветовете. Той няма никаква анимация. Изработен е в HTML и CSS, за да го внедрим на уебсайта за клиент или наш собствен.

Модален формуляр за вход

Модален

това Модален формуляр за вход е вдъхновен от езика на дизайн, известен с Material Design. Виждали сме го в много приложения на мобилни устройства. В този код имаме панел за вход и панел за регистрация, който е скрит по подразбиране. Панелът за регистрация може да се активира, като щракнете върху синята колона, разположена от дясната страна. Той има страхотна анимация, за да бъде много специален и поразителен вход.

Форма flexbox

Flexbox

Започваме формулярите за търсене с това форма на базата на flexbox. Той се откроява с червения цвят на «търсенето» и с малко повече с елегантно поле за търсене на вашия уебсайт.

Анимирана кутия

Анимирана кутия

С това анимирана кутия щракнете върху иконата на лупа и ще се появи ярко синя анимация така че трябва само да напишем търсенето, което ще извършим на уебсайта. Изработено с HTML, CSS и JavaScript.

Поле за търсене

Натиснете търсене

а голяма линия минава през екрана така че когато го натиснем да започнем да въвеждаме търсенето. Бутон за вдигане, за да дефинирате това проста форма за търсене.

Кликнете върху просто поле за търсене

Waze

Кликнете върху просто поле за търсене се основава на взаимодействие, наблюдавано в приложението Waze Driver Community превозно средство. Всички икони и изображения са направени с CSS. Откроява се с онези икони, които ни позволяват да извършваме конкретни търсения на продукт или услуга. Поразително заради това колко е готино.

Ефект на CSS въвеждане на текст

CSS вход

Ефект на CSS въвеждане на текст включва поредица от анимации в текст и чекмедже за търсене да бъдете внимателен търсач във форма.

Търсене на цял екран

Търсене на цял екран

Този запис от търсене на цял екран работи с всякакъв вид оформление или позиция. Изисква стилове специфичен за контейнера елемент и елемент за наслагване при търсене да се намира в корена. Характеризира се с подскачаща анимация в момента, в който натиснем бутона за търсене.

Търсене

Търсене

Un форма за търсене просто това той обича да играе с различните позиции и анимации. Щракваме върху бутона за търсене и се появява пълното чекмедже за въвеждане на думите. Много актуално и силно препоръчително за това колко е лесно.

Няма въпроси

Няма въпроси

Няма въпрос es проста форма с текстово поле и опцията за избор на някои отговори за потребителя, за да ги избере. Страхотна работа визуално, за да бъдеш един от най-добрите.

Изскачащ формуляр за абонамент

Запиши се

с тази изскачащ формуляр за абонамент, щракваме върху плаващия бутон и той ще ни отведе до форма с много забавен тон и поле, където да въведете имейла. Перфектен за имейл маркетинг.

Потребителски интерфейс на абонаментната кутия

Абонамент

а абонаментна кутия със звънец за аларма и малко повече от плоски цветове В дизайна.

CSS абонаментна кутия

Абонамент

а интелигентна абонаментна кутия за факта на използвайте градиенти за бутона за абониране точно като лилавия оттенък на полето.

Абонаментна кутия

Абонаментна кутия

а проста кутия за абонамент но с голям ефект от дизайна.

Формуляр за валидиране на EMOJI

EMOJI

В чист CSS това формуляр за валидиране за да създадете ключа или парола. Докато пишем, емоджито ще измерва нивото на сигурност на формуляра. Смешно и любопитно без съмнение.

Не пропускайте това списък от 23 анимирани стрелки в CSS.


Съдържанието на статията се придържа към нашите принципи на редакторска етика. За да съобщите за грешка, щракнете върху тук.

Коментар, оставете своя

Оставете вашия коментар

Вашият имейл адрес няма да бъде публикуван. Задължителните полета са отбелязани с *

*

*

  1. Отговорен за данните: Мигел Анхел Гатон
  2. Предназначение на данните: Контрол на СПАМ, управление на коментари.
  3. Легитимация: Вашето съгласие
  4. Съобщаване на данните: Данните няма да бъдат съобщени на трети страни, освен по законово задължение.
  5. Съхранение на данни: База данни, хоствана от Occentus Networks (ЕС)
  6. Права: По всяко време можете да ограничите, възстановите и изтриете информацията си.

  1.   Хуан Хосе Перес каза той

    Отлична извадка от примери, представени тук. Разнообразието и адаптацията към различни контексти и най-хубавото е, че връзката към всяко заглавие включва демонстрацията и изходния код, въпреки че трябва да го подчертаете с бутон «Вижте демонстрацията», защото от любопитство го открих в заглавието . Благодаря за приноса. Поздрави от Каракас.