How to display a beautiful message after submitting a php form?

Question

PHP

Good health to all!
Friends, help with advice on how to beautifully display a message after sending the form to the mail.
I did, but only the text is displayed in the browser window, and even with an additional inscription:

html

<div class="form">
            <div class="title">Заказать консультацию</div>
            <form  action="#" id="mainorder-form" method="post">
                <input type="hidden" name="type" value="Заказ на обратный звонок" />
                <div class="form_item">
                    <input type="text" name="name" required="required" placeholder="Ваше имя"/>
                </div>
                <div class="form_item">
                    <input type="text" name="phone" required="required" placeholder="Телефон"/>
                </div>
                <img alt="" border="0" src="servis/files/img/arrow.png" style="position: absolute; margin: -8px 0px 0px -48px;"/>
                <input class="btn" type="submit" value="Отправить заказ"/>
            </form>
        </div>

js

//обработка формы
    var forms = document.querySelectorAll('form');
    for (var i = 0; i < forms.length; ++i) {
        var form = forms[i];  
        form.addEventListener('submit', function(e){
            var title = this.previousElementSibling.innerText;
            var data = [$(this).serialize(),$.param({title: title})].join('&')

            sendEmail(data);

            e.preventDefault();
            this.reset();

        });
    }




//функция отправки письма
  function sendEmail(data) {
    $.ajax({
      type: 'POST',
      url: '/send.php',
      async: false,
      data: data,
      success: function (result) {
        alert(result);
      },
      error: function (xhr, str) {
        alert("Возникла ошибка!");
      }
    });
  }

});

php

<?php

$post = (!empty($_POST)) ? true : false;

if($post) {
$phone = trim($_POST['phone']);
$name = trim($_POST['name']);
$title = trim($_POST['title']);

$subject ="Новая заявка с сайта eurozabor.rotacon.by";


$message ="<b>Имя:</b> ".$name."<br><b>Телефон:</b> " .$phone. "<br><b>Наименование формы:</b> " .$title;

$header = "Content-type: text/html; charset=utf-8\n";

$header .= "From: eurozabor.rotacon.by <[email protected]>";	

$mail = mail("[email protected]", $subject, $message, $header);

if($mail)
{
echo 'Ваша заявка отправлена успешно!';
} else {
echo 'Ошибка отправки, попробуйте еще раз!';
}

} else {
echo 'Не заполнены поля все поля!';
}
?>

Thank you! Don't swear too hard, but I'm such a self-taught dropout))

Answer 1

Can be rendered with jQuery

Answer 2

Guys. Can you be a little more detailed? What to put where...

Answer 3

First, create a box with the desired design using HTML and CSS at the end of the document, just hide it with display: none in the CSS
. Then, instead of your alert(result); do $("your window selector").show();
But you will also need to create a "close" button or a cross, for this create this button using HTML and CSS and create an event in JS: $("button selector").on("click", e => $("window selector ").hide());
alert(); this is a native JS function, it brings up a window that is not editable and looks different in different browsers. Instead, you can create your own function that will do this.
My answer assumes that you have a little knowledge of HTML + CSS,