cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

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

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console