Cacher is the code snippet organizer for pro developers

/* ==========================================================================
   Plugin Overrides
   ========================================================================== */

/* Contact Form 7 */

::-webkit-input-placeholder {
   color: #333;
}
:-moz-placeholder { /* Firefox 18- */
   color: #333;
}
::-moz-placeholder {  /* Firefox 19+ */
   color: #333;
}
:-ms-input-placeholder {  
   color: #333;
}
select { color: #333; }

.wpcf7 fieldset {
    padding: 0 20px;
    font-size: .875rem;
    border: 1px solid #333;
    margin-top: 0
}

.wpcf7 fieldset legend {
    color: #171717;
    margin-bottom: 0;
    background: none;
    text-align: center
}

.wpcf7 fieldset span {
    font-size: .875rem
}

.wpcf7 form br {
    display: none
}

.wpcf7 select,
.wpcf7 input,
.wpcf7 input[type="text"],
.wpcf7 input[type="password"],
.wpcf7 input[type="date"],
.wpcf7 input[type="datetime"],
.wpcf7 input[type="datetime-local"],
.wpcf7 input[type="month"],
.wpcf7 input[type="week"],
.wpcf7 input[type="email"],
.wpcf7 input[type="number"],
.wpcf7 input[type="search"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="time"],
.wpcf7 input[type="url"],
.wpcf7 input[type="color"],
.wpcf7 textarea {
  margin: 10px 0; padding: 10px 10px 10px 0; color: #A9A9A9; 
  box-shadow: none; border-radius: 0; font-style: italic;
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="password"]:focus,
.wpcf7 input[type="date"]:focus,
.wpcf7 input[type="datetime"]:focus,
.wpcf7 input[type="datetime-local"]:focus,
.wpcf7 input[type="month"]:focus,
.wpcf7 input[type="week"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="number"]:focus,
.wpcf7 input[type="search"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 input[type="time"]:focus,
.wpcf7 input[type="url"]:focus,
.wpcf7 input[type="color"]:focus,
.wpcf7 textarea:focus {
    outline: 0; color: #333;
}

.wpcf7 input,
.wpcf7 select,
.wpcf7 textarea {
    font-size: 12px; 
    color: #A9A9A9; border-radius: 0;
    background-color: #fff
}

.wpcf7 input[type="submit"] {
    float: none; display: block; width: 50%; height: 42px; margin: 0 auto; padding: 10px 20px; border: 1px solid transparent; 
    background: #760808;  border-radius: 0; color: #121212; font-size: 1.2rem; text-align: center; text-transform: uppercase; text-shadow: none;
    cursor: pointer; font-size: 14px; font-style: normal; font-weight: 600; color: #fff;
    -webkit-transition: all 0.45s ease-in-out;
    -moz-transition: all 0.45s ease-in-out;
    transition: all 0.45s ease-in-out
}
.wpcf7 input[type="submit"]:hover {
    background: #fff;
    color: #121212;
    border: 1px solid #121212
}

.wpcf7 textarea { width: 100%; padding: 10px; }

.small-type { float: left; width: 100%; margin-bottom: 10px; padding-bottom: 10px; font-size: 12px; clear: both; }

/* Validation */
span.wpcf7-not-valid-tip { }

/* ==========================================================================
   Google Material Design Input Boxes Contact Form 7 Integration
   ========================================================================== */

.wpcf7-form-control-wrap textarea { margin-bottom: 0; padding-bottom: 0; }

.wpcf7-form .group { 
  position: relative; margin-bottom: 25px; 
}
.wpcf7-form input {
  display: block; width: 100%; padding: 10px 10px 10px 0;
  border: none; border-bottom:1px solid #757575;
}
.wpcf7-form input:focus { outline:none; }

/* BOTTOM BARS ================================= */
.wpcf7-form .bar 	{ position: relative; top: -8px; display: block; width: 100%; }
.wpcf7-form .the-message .bar { top: 0; }
.wpcf7-form .bar:before, 
.wpcf7-form .bar:after 	{
  content:'';
  height:2px; 
  width:0;
  bottom:1px; 
  position:absolute;
  background: #760808; 
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
.wpcf7-form .bar:before {
  left:50%;
}
.wpcf7-form .bar:after {
  right:50%; 
}

/* active state */
.wpcf7-form input:focus ~ .bar:before,
.wpcf7-form input:focus ~ .bar:after,
.wpcf7-form textarea:focus ~ .bar:before,
.wpcf7-form textarea:focus ~ .bar:after  {
  width:50%;
}

input:-webkit-autofill, 
textarea:-webkit-autofill, 
select:-webkit-autofill {
 background: rgba(118,8,8,.75)!important;
}

/* HIGHLIGHTER ================================== */

.wpcf7-form .highlight {
  position:absolute;
  height:60%; 
  width:100px; 
  top:25%; 
  left:0;
  pointer-events:none;
  opacity:0.5;
}

/* active state */
.wpcf7-form input:focus ~ .highlight,
.wpcf7-form textarea:focus ~ .highlight {
  animation:inputHighlighter 0.3s ease;
}

/* ANIMATIONS ================ */

@-webkit-keyframes inputHighlighter {
	from { background: #760808; }
  to 	{ width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
	from { background: #760808; }
  to 	{ width:0; background:transparent; }
}
@keyframes inputHighlighter {
	from { background: #760808; }
  to 	{ width:0; background:transparent; }
}

/* Material Design input fields */
$(".wpcf7 input").prop('required',true);	
$(".wpcf7 .wpcf7-form-control-wrap").append( '<span class="highlight"></span><span class="bar"></span>' );

<div class="col6">
  <div class="group">[text* full-name placeholder "*Insert Full Name"]</div>
  <div class="group">[email* the-email placeholder "*Insert Email"]</div>
</div>

<div class="col6">
  <div class="group">[textarea* the-message placeholder "*Write your message here"]</div>
</div>

<div class="col12">
  <span class="small-type">* required fields</span>[submit "Send"]
</div>