<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.page-header {
position: relative;
}
.contact_form {
position: absolute;
top: 80px;
right: 150px;
width: 520px;
padding: 15px 0;
background-color: #fff;
border-radius: 10px;
box-shadow: 1px 1px 9px rgba(0,0,0, .5);
visibility: hidden;
}
.visible {
visibility: visible;
}
</style>
</head>
<body>
<header class="page-header">
<form class="contact_form" action="contact-form.php" method="post">
<p>
<label for="name">Имя:</label>
<input type="text" name="name" placeholder="Введите ваше имя" required />
</p>
<p>
<label for="email">Email:</label>
<input type="email" name="email" placeholder="Введите электронный адрес" required />
<span class="form_hint">Правильный формат "name@something.com"</span>
</p>
<p>
<label for="message">Текст сообщения:</label>
<textarea name="message" cols="40" rows="6" required ></textarea>
</p>
<input name="bezspama" type="text" style="display:none" value="" />
<p>
<button class="contact_form-submit" type="submit">Отправить сообщение</button>
</p>
</form>
<div class="page-header__top">
<div class="page-header__contacts">
<a class="page-header__question" href="#">
<i class="fa fa-comments"></i>Задать вопрос
</a>
</div>
</div>
</header>
<script>
var question = document.querySelector(".page-header__question");
var contactForm = document.querySelector(".contact_form");
question.addEventListener("click", function(event) {
event.preventDefault();
event.stopPropagation();
contactForm.classList.add("visible");
document.addEventListener("click", hide);
});
function hide(event) {
if ( contactForm.contains(event.target) )
return;
contactForm.classList.remove("visible");
document.removeEventListener("click", hide);
}
</script>
</body>
</html>