HTML Pop-up Contact Form

html-pop-up-contact-form.markdown

HTML Pop-up Contact Form

A Pen by Denis on CodePen.

License.

index.html

<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">&times;</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">&times;</div>
        </div><!-- /thank_you_window -->
 
      </div><!-- /popup-overlay -->
 
    </div>
  </div>
</div>

script.js

// 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);
});

scripts

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.denis-creative.com/jquery.cookie.min/jquery.cookie.min.js"></script>

style.css

/* Стили для затемнения фона */
.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;
}