How to make a "Thank you for submitting" window after submitting form data using Magnific Popup?

Question

css

There is a form that pops up using Magnific Popup.

<!-- Форма -->
  <div id="form-wrapper" class="form-wrapper">
    <form id="form" class="form" name="form">
      <input required type="text" class="form__input" name="name" placeholder="ИМЯ">
      <input required type="email" class="form__input" name="email" placeholder="E-MAIL">
      <input required type="text" class="form__input" name="phone" placeholder="ТЕЛЕФОН">
      <button class="form__button">ЗАКАЗАТЬ КОНСУЛЬТАЦИЮ</button>
    </form>
  </div>

// Форма в модальном окне 
$('#popup-form').magnificPopup({
   type: 'inline'
});

The code that is responsible for Ajax and passing fields to the handler:

// Отправка заявки 
$(document).ready(function() {
    $('#form').submit(function() { // проверка на пустоту заполненных полей. Атрибут html5 — required не подходит (не поддерживается Safari)
        if (document.form.name.value == '' || document.form.phone.value == '' || document.form.email.value == '' ) {
            valid = false;
            return valid;
        }
        $.ajax({
            type: 'POST',
            url: 'mail.php',
            data: $(this).serialize()
        }).done(function() {
            $(this).find('input').val('');
            $('#form').trigger('reset');
        });
        return false;
    });
});

How can I make the form disappear and another window appear ("thanks for the application") after successfully filling in the fields and submitting the data?

Answer 1

.done(function() {
$(this).find('input').val('');
$('#form').trigger('reset');
//insert info block here like this
$ ('.block').fadeIn().delay(2000).fadeOut();
});
make up the block, style it, write the text you need there, and in css display: none; make a block. delay(2000) will show the block for 2s and hide it,