Универсальные адаптивные HTML формы с иконками fa у полей

 

Довольно приятная, универсальная форма, можно сделать много разных полей input, плюс textarea.

Большой набор бесплатных fa иконок, минимум кода на сайте, подгрузка файла иконок через известное облачное хранилище, что надёжно и быстро.

Применение и демо

Универсальные адаптивные HTML формы с иконками fa у полей

Её можно успешно использовать для множества задач:

  • Подписка на рассылку;
  • Форма обратной связи;
  • Заказы и заказы обратного звонка;
  • Регистрация и вход;
  • Загрузка файлов и многое другое.

Форма полностью адаптивна и занимает всё отданное ей пространство в контейнере. Можете посмотреть в Демо по кнопке ниже, изменяя размер окна браузера:

Установка на сайт

Универсальные адаптивные HTML формы с иконками fa у полей

Файл с иконками подгружается с облачного хранилища cloudflare, соответственно в хедере добавляем:

Добавить этот код в HEAD выше стилей
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

CSS:

В файл CSS или в HEAD, обернув тегом стилей

* {box-sizing: border-box;}

/* Стили всего контейнера */
.input-container {
display: flex;
width: 100%;
margin-bottom: 14px;
}

/* Стили иконок fa fa */
.icon {
padding: 10px;
background: #282828;
color: #E6E6E6;
min-width: 50px;
text-align: center;
}

/* Стили полей ввода*/
.input-field {
width: 100%;
padding: 12px;
outline: none;
}

.input-field:focus {
border: 2px solid #282828;
}

/* Стили кнопки */
.btn {
background-color: #282828;
color: white;
padding: 15px 20px;
border: none;
cursor: pointer;
width: 100%;
opacity: 0.85;
}

.btn:hover {
opacity: 1;
}

Сама форма, код HTML. Это лишь один вариант, остальные в демо по ссылке выше (открыть файл в режиме просмотра кода).

HTML - вставить в то место шаблона или темы, где будет сам блок на сайте

<form action="https://code66.ru">

<h2>Форма подписки на рассылку</h2>
<div class="input-container">
<i class="fa fa-user icon"></i>
<input class="input-field" type="text" placeholder="Имя" name="input_name">
</div>

<div class="input-container">
<i class="fa fa-envelope icon"></i>
<input class="input-field" type="text" placeholder="Почта" name="input_email">
</div>

<button type="submit" class="btn">Получать рассылку</button>
</form>


Настройка

Универсальные адаптивные HTML формы с иконками fa у полей

Наиболее важной настройкой отображения является цвет заливки иконок и кнопки отправки. В примере использован серый цвет #282828, измените на наиболее подходящий для дизайна Вашего сайта.

Иконки для каждого инпут поля прописываются в теге i: <i class="fa fa-user icon">. Вместо «user» ставим другое название, которое найдём на сайте https://fontawesome.com/icons?d=gallery .

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

Конечно, в action тега form вписываем адрес файла-обработчика, например, на php.

Подсказки

Можно ещё добавить всплывающие подсказки в форму.


Добавит в CSS

/* --------- Всплывающие подсказки ---------- */

.tooltip {
position: relative;
display: inline-block;
}

/* Текст подсказки */
.tooltip .tooltiptext {
visibility: hidden;
width: 150px;
background-color: red;
color: #fff;
text-align: center;
padding: 12px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
}

/* Показывать подсказу, когда мышка над блоком */
.tooltip:hover .tooltiptext {
visibility: visible;
}

Далее нужно добавить этот класс «tooltip» в тег div соответствующих полей формы. Вместе с прежними стилями должно выглядеть так:

Универсальные адаптивные HTML формы с иконками fa у полей

Отмечу, что дописывается без запятой и до закрытия кавычек!

Всё готово! Сами подсказки дописываются к элементам input вот таким кодом:

<span class="tooltiptext">Можно с фамилией</span>

Вот так будет выглядеть строка поля со всплывающей подсказкой:

<input class="input-field" type="text" placeholder="Имя" name="input_name"><span class="tooltiptext">Текст подсказки</span>

Знающие CSS могут редактировать внешний вид всплывающих блоков!


Подпишись на рассылку и получай свежие кейсы первым:

✔ Нажимая кнопку ниже я даю согласие на обработку персональных данных.

Понравилась статья? Поделиться с друзьями:
Заработок в интернете - блог
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:
Нажимая на кнопку "Отправить комментарий", я даю согласие на обработку персональных данных и принимаю политику конфиденциальности.