Tạo contact form 7 sau khi submit hiện thông báo cảm ơn

<div class="contact-wrap">
   <div class="step-1 grid">
      <div class="grid-2col">
         <ul class="list-address">
            <li>
               <span class="material-icons-outlined">home</span>Address: 123 lorem ipsum, TPHCM
            </li>
            <li>
               <span class="material-icons-outlined">phone</span>Phone: 0123 456 789
            </li>
            <li>
               <span class="material-icons-outlined">facebook</span>Facebook: <a href="#" target="_blank">HuynhThaiHung</a>
            </li>
         </ul>
         <img src="http://localhost/wp_site/wp-content/uploads/2021/07/contact-us.jpg" alt="">
      </div>
      <div class="grid-2col">
         <div class="form-control">
            <div class="label">
               <label for="">Họ và Tên</label>
            </div>
            <div class="action">
               [text* fullname]
            </div>
         </div>
         <div class="form-control__half">
            <div class="label">
               <label for="">Địa chỉ Email</label>
            </div>
            <div class="action">
               [email* email]
            </div>
         </div>
         <div class="form-control__half">
            <div class="label">
               <label for="">Số điện thoại</label>
            </div>
            <div class="action">
               [text* phone]
            </div>
         </div>
         <div class="form-control">
            <div class="label">
               <label for="">Nội dung</label>
            </div>
            <div class="action">
               [textarea message]
            </div>
         </div>
         <div class="form-control">
            [submit "Gửi liên hệ"]
         </div>
      </div>
   </div>
   <div class="step-2">
      <p>Cảm ơn bạn đã liên hệ</p>
      <p>Chúng tôi sẽ liên lạc với bạn ngay sau khi nhận được thông tin này.</p>
   </div>
</div>

.page-contact .grid {
  display: flex; 
}
.page-contact .grid .grid-2col {
  flex-basis: calc( 50% - 15px);
  margin-left: 7.5px;
  margin-right: 7.5px; 
}
.page-contact .grid .grid-2col:first-child {
  margin-left: 0; 
}
.page-contact .grid .grid-2col:not(:first-child) {
  margin-right: 0; 
}

.page-contact .form-control {
  margin: 0 7.5px;
  margin-bottom: 15px; 
}
.page-contact .form-control__half {
  margin: 0 7.5px;
  margin-bottom: 15px;
  width: calc( 50% - 15px);
  float: left; 
}

.page-contact input,
.page-contact select,
.page-contact textarea {
  width: 100%;
  border: solid 1px #cdcdcd;
  padding-left: 10px;
  padding-right: 10px; 
}

.page-contact textarea {
  height: 117px; 
}

.page-contact label {
  font-weight: 700;
  color: #164172; 
}

.page-contact [type="submit"] {
  width: auto;
  padding: 10px 50px;
  background-color: #164172;
  position: relative;
  border: none;
  color: #fff;
  text-transform: uppercase; 
}
.page-contact [type="submit"]:hover {
  cursor: pointer; 
}

.page-contact .list-address {
  list-style: none;
  padding-left: 0; 
}
.page-contact .list-address li {
  display: flex;
  margin-bottom: 10px; 
}
.page-contact .list-address li span {
  margin-right: 25px;
  color: #164172; 
}

.page-contact .step-2 {
  display: none; }

.page-contact .wpcf7-response-output {
  display: none; 
}

@media screen and (max-width: 768px) {
  .page-contact .grid {
    display: block; 
  }
  .page-contact .grid .grid-2col {
    flex-basis: 100%; 
  } 
}

( function( $ ) {
	var wpcf7Elm = document.querySelector( '.wpcf7-form' );
 
  wpcf7Elm.addEventListener( 'wpcf7mailsent', function( event ) {
    alert( "Fire!" );
    $(".step-1").hide();
    $(".step-2").show();
  }, false );


}( jQuery ) );

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">