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

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

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

Содержание

Применение и демо
Установка на сайт
Настройка
Подсказки

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

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

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

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

Демо

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

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

Добавить этот код в HEAD выше стилей

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 - вставить в то место шаблона или темы, где будет сам блок на сайте

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

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

Настройка

Наиболее важной настройкой отображения является цвет заливки иконок и кнопки отправки. В примере использован серый цвет #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 соответствующих полей формы. Вместе с прежними стилями должно выглядеть так:

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

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

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

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

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

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