Java, UX, HTML, CSS, WEB-design

10 бесплатных форм оплаты на CSS3 с открытым исходным кодом


Формы оформления корзины покупок — самая важная часть пути пользователя. Они означают завершение покупки и обычно максимально оптимизированы для увеличения конверсии.

Но если вы не знаете, с чего начать, возможно, вам помогут эти бесплатные формы. Я отобрал 10 самых крутых форм оформления заказа на CodePen, все с открытым исходным кодом, и все их легко клонировать для ваших собственных веб-сайтов.

Пончик Оплата

Эта уникальная форма оформления заказа действительно выводит дизайн на совершенно новый уровень. Этот пользовательский интерфейс для оплаты пончиков является частью ежедневной задачи пользовательского интерфейса, и этот интерфейс Натаниэля Уотсона заслуживает награды академии.

Он использует градиенты CSS для фона и повторяющийся узор, разделяющий две стороны. Поле ввода CC также разделяет числа на пакеты по 4, что делает его невероятно простым в использовании.

Типографика, цвет, пробелы и форма объединяются в этой невероятно уникальной форме оформления заказа. Я не могу представить, что это будет полезно на слишком многих сайтах, но это служит примером того, как много вы можете сделать с дизайном.

Простая проверка

Для гораздо более практичного взгляда на поля проверки, эта простая проверка предлагает все, что вам нужно. Он довольно маленький, но отлично использует пространство благодаря четким шрифтам и подсветке поля ввода.

Весь код представляет собой чистый CSS, и вы можете скопировать/вставить его прямо на свой сайт для быстрого решения. Конечно, это довольно маленькая форма, поэтому вам может понадобиться расширить ее, но общий стиль очень чистый и должен хорошо сочетаться с любым макетом.

Торговый прототип

Чистые прототипы удаляют эстетику, оставляя только пользовательский опыт. Это именно то, что вы получаете с этим прототипом покупок, и он предлагает много вдохновения для дальнейшего развития.

В полях количества используются «числовые» входные данные, и они автоматически обновляют промежуточные итоги в каждой строке. Этот эффект довольно просто создать с помощью JavaScript, и еще проще перенести его на ваш собственный веб-сайт.

Также попробуйте нажать на кнопку «оформить заказ» и просмотреть все остальные страницы. Создатель этой ручки Джеймс Мехиа добавил страницы для регистрации гостей, доставки, оплаты и пару других форм в процессе оформления заказа.

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

Эта забавная и простая форма использует тему кафе с тонкой бумажной формой проверки чека. Интернет-магазинам может потребоваться больше места, но это идеально подходит для любого небольшого ресторана или производителя кофе в Интернете.

Динамическое поле кредитной карты Visa — самая крутая особенность всей этой формы. Он полностью динамичен с метками, которые автоматически уменьшаются, когда вы начинаете вводить содержимое. Выпадающие поля для месяца/даты настраиваются, а также придают ощущение жизни процессу оформления заказа.

Оплата покупки

Вот еще один приятный ежедневный проект пользовательского интерфейса, созданный разработчиком Maycon Luiz.

Он использует карточный дизайн с продуктами, перечисленными слева, и деталями оформления заказа справа.

Больше всего мне нравится автоматическое обновление карты. Когда вы вводите числа в поля оплаты, они автоматически появляются на графике кредитной карты вверху. Это дает пользователю некоторую уверенность в том, что он правильно ввел числа.

Фургоны Checkout

Еще один ежедневный пользовательский интерфейс с другим подходом — это касса Vans, написанная Томмазо Полетти. У него есть несколько динамических эффектов страницы, которые скрывают все элементы корзины за формой.

Если вы нажмете на значок корзины, вы заметите, что все эти предметы вылетают в сторону. Это классная идея, но, вероятно, она работала бы лучше, если бы они были видны постоянно. Мне действительно нравится дизайн поля, в котором фирменный логотип находится вверху, чтобы сохранить авторитет.

Прогресс оформления заказа

Хлебные крошки и индикаторы выполнения очень распространены в формах оформления заказа. Они сообщают пользователю, как далеко он продвинулся и сколько времени потребуется, прежде чем он завершит покупку.

В этой форме оформления заказа индикатор выполнения размещается спереди и по центру прямо в поле зрения пользователя. Он использует четкий текст метки, чтобы точно показать, где они находятся и сколько еще им нужно пройти. Все остальные поля формы используют тот же четкий стиль дизайна, поэтому типографика просто звездная.

Я определенно думаю, что это поле оформления заказа может легко вписаться в любой веб-сайт.

Детали CC

Разработчик Момчило Попов создал это первозданное кассовое поле с большой долей минимализма. В пользовательском поле кредитной карты для безопасности используются символы точек, а номер CC по умолчанию разделяется на пакеты по 4.

Фотография собаки может надежно работать для приложения для покупок домашних животных, но вы также можете легко заменить ее чем угодно. Поле проверки невероятно надежное, и с ним должно быть достаточно легко работать, если вы хотите воспроизвести его в другом месте.

Встроенная проверка

При поиске форм оформления заказа я наткнулся на эту встроенную форму, которая действительно привлекла мое внимание. Это хороший пример того, как вы можете создавать настраиваемые поля для оформления заказа, которые выглядят великолепно, не беспокоясь о безопасности или платежных продавцах.

Это действительно зависит от сторонней платформы, но также встраивает форму, обрабатывает платежи и предлагает индивидуальную квитанцию ​​​​для загрузки. Это, безусловно, предлагает некоторое вдохновение для пользовательского интерфейса, но это также фантастический выбор для разработчиков, которые хотят сократить время своего проектного цикла.

Анимация кредитных карт

И последнее, но не менее важное: эта удивительная анимированная форма CC с использованием полностью визуализированной кредитной карты. По мере заполнения формы каждое поле на карточке обновляется в режиме реального времени.

Лучше всего он использует пользовательскую анимацию перелистывания для поворота между передней и задней частью. Поэтому, когда вы фокусируетесь на поле CCV, карта автоматически поворачивается, чтобы показать заднюю область. Действительно классный эффект и определенно уникальный для этой формы.

Итак, эта коллекция охватывает 10 самых крутых кассовых форм, которые я смог найти, но я уверен, что есть десятки других. Если вы построили его самостоятельно или знаете о других, не стесняйтесь поделиться ими в разделе для обсуждения ниже.

Этот пост может содержать партнерские ссылки. Смотрите нашу информацию о партнерских ссылках здесь.


Source: 1stwebdisigner

Заключение

Вы ознакомились с статьей — 10 бесплатных форм оплаты на CSS3 с открытым исходным кодом

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Краткое описание по статье 10 бесплатных форм оплаты на CSS3 с открытым исходным кодом

Название: 10 бесплатных форм оплаты на CSS3 с открытым исходным кодом . Краткое описание: ⭐ Формы оформления корзины покупок — самая важн . Дата публикации: 16.01.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

Кнопка «Наверх»