Hello, I need your help. I am trying to make a form like here https://codepen.io/uplusion23/pen/xOJkjE . This is what I could achieve https://linway.com.ua/190-2/ this style suits me. But the form does not work as it should. I cannot add the "textarea" and "tel" fields and make them required! Here is the code I used

<div class="group">      
            <input type="text" required>
            <span class="highlight"></span>
            <label>Your name</label>
          </div>
          <div class="group">      
            <input type="text" required>
            <span class="highlight"></span>
            <label>Your email</label>
          </div>
          <div class="group">      
            <input type="text" required>
            <span class="highlight"></span>
            <label>Your email</label>
          </div>
[submit "Отправить"]

.group { 
  position: relative; 
  margin-bottom: 2px; 
}

input {

}

input:focus {
  outline: none;
  opacity: 1;
}

label {
  color: #B1B1B1; 
  font-size: 13px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  left: 5px;
  top: 2px;
  opacity: 0.5;
  transition: 0.2s ease all; 
  -moz-transition: 0.2s ease all; 
  -webkit-transition: 0.2s ease all;
}

/* active state */
input:focus ~ label, input:valid ~ label {
  top: -20px;
  font-size: 12px;
  color: #B1B1B1;
  opacity: 1;
}

I solved my problem by installing the Material Design CF7 plug-in.