Подробности: Категория: HTML - при создании сайтов; Просмотров: 584

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

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

Итак будет 3 звена:

1. html каркас

2. css стили для создания красоты

3. js - для интерактивности.

Можно поместить все в один файл или разложить на 3. Как удобно.

HTML каркас

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Всплывающая форма обратной связи для создания подписки</title> <link rel="stylesheet" href="/css/styles.css"> <body> <button class="open-button" onclick="openForm()">Подпишитесь</button> <div class="form-popup" id="myForm"> <form action="#" class="form-container"> <h1>Подписаться</h1> <label for="name"><b>Имя</b></label> <input type="text" placeholder="Ваше имя" name="name" required> <label for="email"><b>Е-мейл</b></label> <input type="text" placeholder="Ваш е-мейл" name="email" required> <button type="submit" class="btn">Отправить</button> <button type="button" class="btn cancel" onclick="closeForm()">Закрыть</button> </form> </div> </body> </html>

CSS составляющая

<style>

body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}

.open-button {
background-color: #2196F3;
color: white;
font-size: 15px;
font-weight: bold;
padding: 16px 20px;
border: none;
cursor: pointer;
opacity: 0.8;
position: fixed;
bottom: 23px;
right: 28px;
width: 280px;
}

.form-popup {
display: none;
position: fixed;
bottom: 0;
right: 15px;
border: 3px solid #f1f1f1;
z-index: 9;

}

.form-container {
max-width: 300px;
padding: 10px;
background-color: white;

}

.form-container input[type=text], .form-container input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
}

.form-container input[type=text]:focus, .form-container input[type=password]:focus {
background-color: #ddd;
outline: none;
}

.form-container .btn {
background-color: #1976D2;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width: 100%;
margin-bottom:10px;
opacity: 0.8;
font-size: 15px;
font-weight: bold;
}

.form-container .cancel {
background-color: #448AFF;
}

.form-container .btn:hover, .open-button:hover {
opacity: 1;
}
</style>