<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h1>Contact Form</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime repellat asperiores natus unde quos consequuntur aliquid temporibus doloremque nihil nulla quidem, expedita hic nobis ipsam quia fugiat. Sunt, maxime, fugit!</p>
<div class="popup-overlay"><!-- //оверлей - отображение формы на затемненном фоне -->
<div class="popWindow subscribe_window"><!-- //основное окно формы Подписки -->
<p class="subcsribe-text">Subscribe to receive news and information</p>
<form class="subscribe-form" autocomplete="off">
<div>
<input type="text" id="name-subscribe" name="Name" placeholder=" " required>
<label for="name-subscribe">Name <span>*</span></label>
</div>
<div>
<input type="email" id="email-subscribe" name="E-mail" placeholder=" " required>
<label for="email-subscribe">Email <span>*</span></label>
</div>
<div class="aligncenter">
<button type="submit" class="btn"><i class="fa fa-check" aria-hidden="true"></i> Subscribe</button>
</div>
<div class="req-fields"><sup>*</sup> required fields</div>
</form>
<div class="close-btn">×</div>
</div><!-- /subscribe_window -->
<div class="popWindow thank_you_window"><!-- //благодарственное окно после успешной отправки формы -->
<p class="thank_you_title">Thank you for subscribing!</p>
<p class="thank_you_body">We've sent some useful tips to your email. Go ahead and check them now!</p>
<div class="close-btn">×</div>
</div><!-- /thank_you_window -->
</div><!-- /popup-overlay -->
</div>
</div>
</div>
/* Стили для затемнения фона */
.popup-overlay {
display: none;
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(255, 186, 0, 0.7);
z-index: 100;
}
/* Основные стили для всплывающего окна */
.popWindow{
display: none;
background-color: #161613;
color: #fff;
width: 90%;
max-width: 720px;
padding: 40px 30px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -360px;
margin-top: -185px;
text-align: center;
box-shadow: 0 0 30px rgba(18, 17, 12, 0.5);
}
/* Стили для адаптивности всплывающего окна */
@media only screen and (max-width : 800px) {
.popWindow {
margin-left: -45%;
}
}
/* Кнопка закрыть всплывающее окно */
.close-btn {
position: absolute;
top: 0;
right: 0;
font-size: 40px;
line-height: 20px;
cursor: pointer;
color: #999;
padding: 10px;
}
/* Просто текст */
.subscribe_window .subcsribe-text {
font-size: 18px;
text-align: center;
text-transform: uppercase;
color: #fff;
margin: 0 0 40px;
position: relative;
padding: 0 50px;
z-index: 10;
}
/* Текст */
.subscribe_window .req-fields {
color: #676767;
text-align: left;
}
/* Стили формы */
.subscribe-form {
width: 100%;
max-width: 300px;
margin: 0 auto;
}
.subscribe-form div {
position: relative;
}
.subscribe-form input {
border: 1px solid #3d3d3d;
width: 100%;
font-family: "Lato", sans-serif;
font-size: 16px;
line-height: 32px;
padding: 5px 20px;
margin-bottom: 20px;
outline: none;
background: #2e2e2b;
color: #fff;
border-radius: 4px;
}
.btn {
color: #161613;
background-color: #ffba00;
padding: 10px 50px;
text-align: center;
font-size: 13px;
border: 1px solid #ffba00;
box-shadow: none;
display: inline-block;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
-webkit-transition: 0.4s;
transition: 0.4s;
}
.btn:hover, .btn:focus {
background-color: #ffba00;
color: #fff;
text-decoration: none;
}
.subscribe-form .btn {
font-size: 24px;
line-height: 54px;
border: none;
width: 100%;
padding: 10px;
font-weight: 700;
text-align: center;
outline: none;
border-radius: 4px;
}
.subscribe-form .btn:hover {
background-color: #e6a700;
}
.subscribe-form .btn i {
font-size: 28px;
margin-right: 7px;
}
.subscribe-form label {
color: #fff;
position: absolute;
top: 12px;
left: 20px;
-webkit-transition: 0.28s;
transition: 0.28s;
}
.subscribe-form label span {
color: #ffba00;
}
.subscribe-form input:focus + label {
left: -62px;
font-size: 12px;
}
.subscribe-form input:invalid {
box-shadow: none;
}
.subscribe-form input:valid {
border: 1px solid #161613;
}
.subscribe-form input:valid + label {
left: -62px;
font-size: 12px;
}
.subscribe-form input:invalid:not(:focus):not(:placeholder-shown) {
border: 1px solid #d3362a;
}
.subscribe-form input:invalid:not(:focus):not(:placeholder-shown) + label {
left: -62px;
font-size: 12px;
}
@media only screen and (max-width : 480px) {
.subscribe_window{
top: 5%;
margin-top: 0;
}
.subscribe_window .subcsribe-text{
padding: 0;
}
.subscribe-form input:focus + label{
left: 20px;
top: -18px;
}
.subscribe-form input:valid + label{
left: 20px;
top: -18px;
}
.subscribe-form input:invalid:not(:focus):not(:placeholder-shown) + label{
left: 20px;
top: -18px;
}
}
/* Стили для текста внутри благодарственного окна после успешной отправки */
.thank_you_window .thank_you_title {
font-family: "Titillium Web", sans-serif;
color: #fff;
font-size: 32px;
line-height: 50px;
font-weight: 700;
margin-bottom: 10px;
}
.thank_you_window .thank_you_body {
font-family: "Titillium Web", sans-serif;
color: #fff;
font-size: 24px;
font-weight: 400;
}
// PopUp Form and thank you popup after sending message
var $popOverlay = $(".popup-overlay");
var $popWindow = $(".popWindow");
var $subscribeWindow = $(".subscribe_window");
var $popThankYouWindow = $(".thank_you_window");
var $popClose = $(".close-btn");
$(function() {
// Close Pop-Up after clicking on the button "Close"
$popClose.on("click", function() {
$popOverlay.fadeOut();
$popWindow.fadeOut();
});
// Close Pop-Up after clicking on the Overlay
$(document).on("click", function(event) {
if ($(event.target).closest($popWindow).length) return;
$popOverlay.fadeOut();
$popWindow.fadeOut();
event.stopPropagation();
});
// Form Subscribe
$(".subscribe-form").submit(function() {
var th = $(this);
$.ajax({
type: "POST",
url: "mail.php",
data: th.serialize()
}).done(function() {
// после успешной отправки скрываем форму подписки и выводим окно с благодарностью за заполнение формы
$subscribeWindow.fadeOut();
$popThankYouWindow.fadeIn();
// используем куки на 30 дней, если человек заполнил форму
// для куки обязательно должен быть подключен jquery.cookie.min.js
//$.cookie('hideTheModal', 'true', { expires: 30 });
// очищаем форму
setTimeout(function() {
th.trigger("reset");
}, 1000);
});
return false;
});
});
// используйте этот код, если нужно появление формы без куки
$(window).load(function() {
setTimeout(function() {
$popOverlay.fadeIn();
$subscribeWindow.fadeIn();
}, 2000);
});
This Pen doesn't use any external CSS resources.