10 фрагментов кода для создания красивых форм

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

Крайне важно убедиться, что ваши формы работают, поэтому удобство использования — это №1. Но эстетика также важна, поскольку заслуживающий доверия дизайн всегда более привлекателен.

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

Кроме того, все они размещены бесплатно, поэтому вы можете копировать и играть с кодом по своему вкусу.

1. Материальный дизайн

Все знают о языке материального дизайна Google за последние несколько лет, когда он стал известен. Концепции материального дизайна были нацелены на приложения для Android, но быстро распространились в Интернете.

Если вам нравится минималистский стиль материального пользовательского интерфейса Google, ознакомьтесь с этой материальной формой, созданной Джоном Ульманном.

Он работает на Sass и Pug для предварительной обработки CSS/HTML. Это также довольно легкая форма, и элементы дизайна материалов должны отображаться одинаково во всех браузерах.

Поистине вдохновение для всех дизайнеров материалов.

2. Под водой

Совершите путешествие в океан в этой уникальной контактной форме, выполненной в водном стиле.

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

Кроме того, всякий раз, когда вы выбираете поле ввода, для приветствия появляется дружелюбный осьминог. Как странно!

3. Форма начальной загрузки 3

Стили Bootstrap по умолчанию довольно скучны, и на данный момент они действительно используются до смерти. Всякий раз, когда я вижу сайт Bootstrap с теми же общими стилями, я могу только представить, что дизайнер был слишком ленив для настройки или слишком сосредоточен на опыте, чтобы заботиться.

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

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

4. Элегантный контакт

Благодаря иконкам Font Awesome и базовому адаптивному стилю эта контактная форма действительно уникальна.

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

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

И если вы ищете что-то немного уникальное, попробуйте добавить в смесь другой значок.

5. Крошечный логин

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

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

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

6. Комбинация входа и регистрации

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

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

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

7. Контакт на доске

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

Кроме того, деревянная рамка помогает продавать эту вещь как настоящую.

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

8. Оплата кредитной картой

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

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

9. Пользовательская регистрация

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

Но поля ввода сильно настраиваются, включая пространство, необходимое для добавления этих значков к каждому из них.

Всякий раз, когда вы выделяете поле, граница становится ярко-зеленой. Вы заметите, что значок тоже меняет цвет! Даже отдельные меню для кредитных карт имеют свой собственный стиль.

Это довольно сложный эффект, чтобы сделать его исключительно в CSS, но разработчик Хосе Карнейро сделал это возможным.

10. Плавающие метки

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

Взгляните на эту форму с плавающей меткой, работающую на CSS3 и Compass.

Создатель Антон Симанов использует jQuery для надписей, но все они написаны на заказ без каких-либо плагинов. Не говоря уже о том, что его решение работает для всех типичных стилей ввода, включая текстовые области и меню выбора.

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

Чем больше вы изучаете шаблоны проектирования, тем больше идей вам придется использовать для своих собственных проектов. И CodePen — отличный сайт для сбора этих идей.