Довольно приятная, универсальная форма, можно сделать много разных полей input, плюс textarea.
Большой набор бесплатных fa иконок, минимум кода на сайте, подгрузка файла иконок через известное облачное хранилище, что надёжно и быстро.
Применение и демо
Её можно успешно использовать для множества задач:
- Подписка на рассылку;
- Форма обратной связи;
- Заказы и заказы обратного звонка;
- Регистрация и вход;
- Загрузка файлов и многое другое.
Форма полностью адаптивна и занимает всё отданное ей пространство в контейнере. Можете посмотреть в Демо по кнопке ниже, изменяя размер окна браузера:
Установка на сайт
Файл с иконками подгружается с облачного хранилища cloudflare, соответственно в хедере добавляем:
CSS:
* {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. Это лишь один вариант, остальные в демо по ссылке выше (открыть файл в режиме просмотра кода).
<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>
Настройка
Наиболее важной настройкой отображения является цвет заливки иконок и кнопки отправки. В примере использован серый цвет #282828, измените на наиболее подходящий для дизайна Вашего сайта.
Иконки для каждого инпут поля прописываются в теге i: <i class=”fa fa-user icon”>. Вместо “user” ставим другое название, которое найдём на сайте https://fontawesome.com/icons?d=gallery .
Выбираем из бесплатных иконок, которые светятся ярко, платные работать не будут через этот файл их подгрузки.
Конечно, в action тега form вписываем адрес файла-обработчика, например, на php.
Подсказки
Можно ещё добавить всплывающие подсказки в форму.
/* ——— Всплывающие подсказки ———- */
.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 могут редактировать внешний вид всплывающих блоков!
Подпишись на рассылку и получай свежие кейсы первым: