JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.css">
<script src="//cdn.jsdelivr.net/npm/[email protected]/slick/slick.min.js"></script>
<form id="form">
 
  <div class="slider">
  
    <div><input type="text" name="Имя" placeholder="Введите ваше имя"></div>
    
    <div>
      <input type="text" name="Телефон" placeholder="Введите ваш телефон">      
      <button>Отправить</button>
    </div>
    
  </div>
  
</form>

CSS

.slick-slide {
  height: 200px;
  width: 100%;
  background-color: tomato;
  color: #fff;
  text-align: center;
  padding-top: 50px;
}

input {
  height: 50px;
  width: 250px;
  padding: 0 15px;
}

.slider div button {
  display: block;
  margin: 30px auto;
  width: 250px;
  height: 50px;
}

JavaScript

$(document).ready(function(){

  $('.slider').slick();
  
  $("form").submit(function () { //Change
		var th = $(this);
		$.ajax({
			type: "POST",
			url: "/mail.php", //Change
			data: th.serialize()
		}).done(function () {
			th.find(".success").addClass("active");
			setTimeout(function () {
				// Done Functions
				th.find(".success").removeClass("active");
				th.trigger("reset");
				$.magnificPopup.close();
			}, 3000);
		});
		return false;
	});
  
});