JSFiddle - React, Tailwind, and code Playground

by Aleksandr Seryakov

HTML

<div id="svyaz" class="popup_form" tabindex="-1" role="dialog">

  <div class="popup_form_inner animated flipInY">
    <button class="close" type="button" data-dismiss="modal"><img src="/portfolio/img/krest.png" alt=""></button>
    <div class="popup_form_title">Связаться с нами</div>
    <form method="post">
      <div class="form1">
        <div class="field">
          <div class="field_title">Введите Имя</div>
          <div class="field_description"></div>
          <div class="field_input">
            <input type="text" name="svyazfio" pattern="\D{1,128}" title="Формат: Имя" required>
          </div>
        </div>

        <div class="field">
          <div class="field_title">Введите E-mail</div>
          <div class="field_description"></div>
          <div class="field_input">
            <input type="text" name="svyazemail" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" title="Пример почты: example@exam.ple" required>
          </div>
        </div>

        <div class="field">
          <div class="field_title">Комментарий</div>
          <div class="field_description"></div>
          <div class="field_input">
            <textarea name="svyazcomment" required></textarea>
          </div>
        </div>

        <div class="field">
          <div class="field_input">
            <div class="kg">
              <input type="submit" value="Отправить" style="background-color:#8d81ac;" name="svyazknopka">
            </div>
          </div>
        </div>
      </div>
    </form>
    <div class="popup_form_text">Мы не передаем Вашу персональную информацию третьим лицам.</div>
  </div>
</div>

<div id="sps" class='popup_thanks'>
    <div class='popup_thanks_innersps animated flipInY'>
        <button class='close' type='button' data-dismiss='modal'><img src="/portfolio/img/krest.png" alt=""></button>
        <div class='popup_thanks_title'>Спасибо за заказ!</div>
        <div class='popup_thanks_text'>В течении некоторого времени с вами...

CSS

.popup_thanks {
  display: none;
}

JavaScript

$('form').submit(function(e) {

  e.preventDefault();
	$('.popup_thanks').fadeIn();

});