CodePen Embed - Contact form with feedback animation

<section id="contact" class="contact">
    <div class="row-container">
        <h1>Get in touch!</h1>
        <div class="contact-container">
            <form role="form" id="contact-form">
                <label for="name">Name or email</label>
                <input autocomplete="off" type="text" name="name" id="name" required aria-required="true" autocorrect="off">
                <label for="message">Message</label>
                <textarea type="text" name="contenido" id="message" required autocorrect="off"></textarea>
                <button class="button btn-send" id="sendBtn">
                    <svg id="sendMessage" xmlns="http://www.w3.org/2000/svg" class="send-message" viewBox="0 0 32.8 22">
                        <style type="text/css">.st60{fill:none;stroke:#FFF;stroke-width:2;stroke-miterlimit:10;}</style>
                        <polyline class="st60" points="31.4 7.3 16.4 13.7 1.4 7.3 "/>
                        <rect x="1" y="1" fill="none" class="st60" width="30" height="20" rx="2" ry="2" />
                    </svg>
                    <input id="submitBtn" type="submit" value="Send">
                </button>
                <svg id="mailbox" viewBox="0 0 68 69.4">
                  <style type="text/css">.st0{fill:#193849;} .st2{fill:#052733;} </style>
                  <path class="st0" d="M19.6 21.2h32.1c0 0 15.1-1.5 16.3 13.5v24.3H29.9V34.7C29.9 34.7 30 21.2 19.6 21.2z"/>
                  <line fill="none" stroke="#11425C" stroke-width="5" stroke-miterlimit="10" x1="43.2" y1="58" x2="43.2" y2="69.1"/>
                  <path class="st2" d="M31.5 36.7c0-8.6-3.1-15.7-12.2-15.7 -4.5 0-10.3 4.7-10.3 12.5v22.4l22.4 3.2V36.7z"/>
<path class="st0" d="M31.5 59l-7.3 10.4c0 0-7.7 0.2-24.2-0.2L9.1 56 31.5 59z"/>
                  <g class="flag">
                    <line class="st60" x1="38.5" y1="30" x2="38.5" y2="3.2"/>
                    <polygon fill="#E62326" points="47.6 6 37.5 6 37.5 0 47.6 0 45.6 3 "/>
                    <circle class="st2" cx="38.5" cy="29.1" r="2.8"/>
                  </g>
                </svg>
            </form>
        </div>
    </div>
</section>

$border-irregular: 0 0.3em;
$red: #e62326;
$yellow: #eebe5b;
$lightgreen: #abedd8;
$blue: #193849;
$lightblue: #30aab3;
* {
  box-sizing: border-box;
  &:before,
  &:after {
    box-sizing: inherit;
  }
}
body { background-color: #052733; color: white; font-family: 'Source Sans Pro', sans-serif; margin: 0 auto; }
:focus { outline: auto 5px $lightblue; }
h1 { font-size: 3rem; font-weight: 400; line-height: 1; margin-top: 0; }
.contact {
  position: relative;
  padding-top: 0;
  margin: 20px auto;
  max-width: 500px;
}
input { border: 3px solid white; min-height: 40px; }
textarea {
  border: 3px solid white;
  min-height: 130px;
  resize: none;
}
input:focus,
textarea:focus {
  border: 3px solid $yellow;
  outline: 0;
}
input#name:valid,
textarea:valid {
  background: white url('data:image/svg+xml,\
        <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26">\
        <circle cx="13" cy="13" r="13" fill="%23abedd8"/>\
        <path fill="none" stroke="white" stroke-width="2" d="M5 15.2l5 5 10-12"/>\
        </svg>') no-repeat 98% 5px;
  border: 3px solid $lightgreen;
  transition: background ease 0.2s;
}
#contact-form {
  position: relative;
  input,
  textarea {
    -webkit-appearance: none;
    border-radius: 0;
    border-top-right-radius: 0.3em;
    border-bottom-left-radius: 0.3em;
    box-shadow: none;
    display: block;
    font-family: inherit;
    font-size: 1rem;
    margin-bottom: 15px;
    margin-top: 0;
    padding: 10px;
    width: 100%;
  }
  label {
    background: white;
    box-shadow: none;
    border-top-right-radius: 0.3em;
    display: inline-block;
    color: $blue;
    padding: 5px 10px;
    width: auto;
    font-weight: bold;
    margin-bottom: 0;
  }
}
.send-message {
  position: absolute;
  bottom: 18px;
  left: 12px;
  width: 32px;
  z-index: 1;
  &.active {
    animation: sendMessage 1s;
  }
  &.not-active {
    transform-origin: 50px;
    opacity: 1;
    animation: sendMessageNot 1s;
  }
}
@keyframes sendMessage {
  to {
    transform: translateX(500px);
    opacity: 0;
  }
}
@keyframes sendMessageNot {
  to {
    transform: rotate(360deg) translateY(120%);
    opacity: 0;
  }
}
@keyframes shake {
  from {
    transform: translateX(-10px);
  }
  to {
    transform: translateX(10px);
  }
}
#contact-form.active {
  animation: shake 0.05s alternate 5;
}
#mailbox {
  position: absolute;
  bottom: -1px;
  right: -10px;
  width: 66px;
  z-index: 1;
}
.flag {
  transform: rotate(130deg);
  transform-origin: 40px 30px;
}
#mailbox.active .flag {
  transform: rotate(0deg);
  transition: transform 0.2s;
}
.button {
  background-color: $red;
  border-radius: $border-irregular;
  color: white;
  cursor: pointer;
  display: inline-block;
  padding: 0.5rem 1rem;
  position: relative;
  overflow: hidden;
  z-index: 1;
  &:hover {
    color: white;
  }
  &:before {
    content: "";
    position: absolute;
    background-color: $lightblue;
    height: 101%;
    left: -30%;
    top: 0;
    transform: skew(40deg);
    transition-duration: 0.6s;
    transform-origin: top left;
    transition: all 0.3s;
    width: 0;
    z-index: -1;
  }
  &:hover:before {
    width: 135%;
  }
}

#contact-form .btn-send {
  border: 0;
  position: relative;
  width: 100%;
  input {
    background-color: transparent;
    border: 0;
    color: white;
    cursor: pointer;
    font-size: 1.2rem;
    margin: 0;
    padding: 0;
  }
}

View Compiled

    var message = document.getElementById('sendMessage');
    var submitName = document.querySelectorAll('#name');
    var submitText = document.querySelectorAll('#message');
    var formshake = document.getElementById('contact-form');
    var mailbox = document.getElementById('mailbox');
   
document.getElementById('sendBtn').addEventListener('click', function (e) {   
        if (submitName['0'].validity.valid && submitText['0'].validity.valid) {
            e.preventDefault();
            message.classList.remove('not-active');
            message.classList.add('active');
            mailbox.classList.add('active');
        }
        else {
            message.classList.add('not-active');
            formshake.classList.add('active');
        }
    });
    document.getElementById('name').addEventListener('click', function () {
        message.classList.remove('not-active');
        formshake.classList.remove('active');
    });
    document.getElementById('message').addEventListener('click', function () {
        message.classList.remove('not-active');
        formshake.classList.remove('active');
    });

This Pen is owned by Mariana Beldi on CodePen.

See more by @marianab on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.