Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <button id="contact-button">Contact me!</button>
<div id="contact-form" class="form-container">
  <form id="form">
    <h1>Contact me</h1>
    <div class="form-items">
      <div class="form-control">
        <div class="button-holders">Name</div>
        <input type="text" name="name" autocomplete="off"/>
      </div>
      <div class="form-control">
        <div class="button-holders">Email</div>
        <input type="text" name="email" autocomplete="off"/>
      </div>
      <div class="form-control">
        <div class="button-holders">Message</div>
        <input type="text" name="message" autocomplete="off"/>
      </div>
    </div>
    <button id="submit" type="submit">Send</button>
  </form>
  <h1 id="success-msg">Thank you for your message! We'll get back to you soon.</h1>
</div>
              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Baloo');
@import url('https://fonts.googleapis.com/css?family=Montserrat');
@import url('https://fonts.googleapis.com/css?family=Indie+Flower');

/* scss variables */

$base-color: #C0B283;
$base-color-border: #A7996A;
$second-color: #373737;
$second-color-border: #272727;
$third-color: #C0B283;

/* Lazy reset */

*,
*:after,
*:before {
  box-sizing: border-box;
  border: 0;
  border-radius: 0;
  margin: 0;
  padding: 0;
}

body,
html {
  max-width: 100%;
  height: 100%;
}

body {
  align-items: center;
  background-color: $base-color;
  display: flex;
  flex-direction: column;
  font-family: 'Montserrat', sans-serif;
  justify-content: center;
}

button {
  cursor: pointer;
  font-family: 'Indie Flower', cursive;
  font-size: 18px;
  font-weight: 600;
  padding: 10px 20px;
  letter-spacing: 2px;
  transition: all 0.1s ease-in;
}

#contact-button {
  background-color: $second-color;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.4);
  border-bottom: 4px solid $second-color-border;
  color: white;
  height: 55px;
  width: 180px;
  transition: transform 0.5s ease-in;
}

#contact-button:active,
#submit:active {
  border-bottom-width: 0px;
  margin-top: 4px;
}

#contact-button:focus,
#submit:focus {
  outline: 0;
}

#contact-button.grow {
  border: 0;
  transform: scale(3, 8);
}

#contact-form {
  background-color: $second-color;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.4);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  height: 430px;
  width: 540px;
  max-width: 100%;
}

#contact-form h1 {
  color: white;
  margin-bottom: 30px;
  text-align: center;
}

#contact-form .form-control {
  margin: 10px 0;
  width: 300px;
}

#contact-form .form-items {
  height: 150px;
}

#contact-form .button-holders {
  text-align: center;
  transition: width 0.3s ease-in-out;
  z-index: 2;
}

#contact-form .button-holders,
#contact-form input {
  background-color: $third-color;
  color: white;
  cursor: text;
  display: block;
  font-size: 14px;
  font-family: inherit;
  padding: 10px;
  position: relative;
  top: 0;
  width: 100%;
  height: 40px;
}

#contact-form input {
  padding-left: 0;
  padding-right: 0;
  margin-left: 80px;
  margin-bottom: -40px;
  width: calc(100% - 80px);
  top: -40px;
}

#contact-form input:focus {
  outline: 0;
}

#contact-form #success-msg {
  display: flex;
  background-color: $second-color;
  padding: 20px;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transform: scale(0);
  transition: transform 1s ease-in-out;
  z-index: 5;
}

#contact-form #success-msg.grow {
  transform: scale(1);
}

#submit {
  background-color: $base-color;
  border-bottom: 4px solid $base-color-border;
  color: white;
  margin-top: 15px;
  width: 100%;
}

#submit:active {
  margin-top: 19px;
}

#contact-form .loader {
  background-color: $base-color;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  position: relative;
}


/* First loader */

#contact-form .form-control:nth-of-type(1) .loader {
  top: 50px;
  left: calc(50% - 20px - 40px - 10px);
  animation: shrink 1.5s ease-in-out, moveToPosition1 1s ease-in-out 1.5s, loading1 1s ease-in-out 2.5s infinite;
}


/* Second loader */

#contact-form .form-control:nth-of-type(2) .loader {
  left: calc(50% - 20px);
  animation: shrink 1.5s ease-in-out, moveToPosition2 1s ease-in-out 1.5s, loading2 1s ease-in-out 2.8s infinite;
}


/* Third loader */

#contact-form .form-control:nth-of-type(3) .loader {
  top: -50px;
  left: calc(50% - 20px + 40px + 10px);
  animation: shrink 1.5s ease-in-out, moveToPosition3 1s ease-in-out 1.5s, loading3 1s ease-in-out 3.1s infinite;
}

@keyframes shrink {
  0% {
    border-radius: 0;
    top: 0;
    left: 0;
    width: 100%; // change this to 100px
  }
  50% {
    border-radius: 0;
    left: 0;
    width: 40px;
  }
  100% {
    top: 0;
    border-radius: 50%;
    left: calc(50% - 20px);
  }
}

@keyframes moveToPosition1 {
  0% {
    left: calc(50% - 20px);
    top: 0;
  }
  100% {
    top: 50px;
    left: calc(50% - 20px - 40px - 10px);
  }
}

@keyframes loading1 {
  0% {
    top: 50px;
  }
  50% {
    top: 10px;
  }
  100% {
    top: 50px;
  }
}

@keyframes moveToPosition2 {
  0% {
    left: calc(50% - 20px);
  }
  100% {
    left: calc(50% - 20px);
  }
}

@keyframes loading2 {
  0% {
    top: 0px;
  }
  50% {
    top: -40px;
  }
  100% {
    top: 0px;
  }
}

@keyframes moveToPosition3 {
  0% {
    left: calc(50% - 20px);
    top: 0;
  }
  100% {
    top: -50px;
    left: calc(50% - 20px + 40px + 10px);
  }
}

@keyframes loading3 {
  0% {
    top: -50px;
  }
  50% {
    top: -90px;
  }
  100% {
    top: -50px;
  }
}
              
            
!

JS

              
                /* Contact button, form, submit button */
var ct_btn = document.getElementById('contact-button');

var ct_form = document.getElementById('contact-form');

/* Button holders */
var btn_holders = document.querySelectorAll('#contact-form .button-holders');

/* The inputs */
var inputs = document.querySelectorAll('#contact-form .form-control input');

/* The form */
var form = document.getElementById('form');

/* Success message */
var success_msg = document.getElementById('success-msg');

/* h1 and submit button of the form */
var h1 = document.querySelectorAll('#form h1')[0];
var submit = document.getElementById('submit');

/* start animation on ct_btn click by adding the grow class */

ct_btn.onclick = function() {
  this.innerHTML = '';
  this.className = 'grow';
}

/* add transitionend event for the button to show form */
ct_btn.addEventListener('transitionend', function(){
  this.style.display = 'none';
  ct_form.style.display = 'flex';
});

/* Shrink the button holders on click and reveal the input behind it */
btn_holders.forEach(btn => {
  btn.addEventListener('click', function(){
    btn.innerHTML += ':';
    btn.style.width = '80px';
    btn.parentNode.childNodes[3].focus();
  })
});

/* Submit form */
form.addEventListener('submit', function(e){
  e.preventDefault();
  
  var allRight = true;
  
  // Go through all inputs
  inputs.forEach(input => {
    
    // If an input is empty, don't allow to continue
    if(input.value === ''){
      allRight = false;
    }
  });
  
  
  // Only continue if every input is filled
  if(allRight) {
    
    // hide title and button
    h1.style.display = 'none';
    submit.style.display = 'none';
    
    inputs.forEach(input => {
      input.style.display = 'none';
    });
    
    btn_holders.forEach(btn => {
      btn.innerHTML = '';
      btn.style.width = '40px';
      btn.className = 'loader';
    });
    
    // after 6 seconds show to complete message
    setTimeout(function(){
      success_msg.className = 'grow';
      form.style.display = 'none';
    }, 6000);
    
  } else {
    alert('Please make sure to fill all the inputs!');
  }
});
              
            
!
999px

Console