How to create a popup contact form without plugins?

Question

HTML

Hello. I'm trying to create a popup contact form. Everywhere the dominance of creating such forms using plugins, every blogger needs to describe how to create a form through a plugin. Tell me where can I see how to do it?
From the form you need:
- so that it pops up when you click on something;
- darkened the background;
- when you click on "send" it displays "sent" or "error" and closes by clicking on the cross of the message
. Ideally, I want to do it like here (button "Sign up"), but it is implemented on cms ucoz, through the built-in mail form. Now I did something like this

<a href="javascript:void(0)" onclick="document.getElementById('parent_popup_click').style.display='block';">Текст ссылки</a>
<div id="parent_popup_click">
 
 
 
<div id="popup_click">
 
<form method="post" action="javascript:void(0);" onsubmit="send_form();" id="forma">
<input type="text" name="fio" placeholder="Ф.И.О" />
<input type="text" name="phone" placeholder="Телефон" />
<input type="text" name="email" placeholder="E-Mail" />
<input type="text" name="adres" placeholder="Адрес доставки" />
<br/>
<input type="submit" value="отправить" />
</form> 
 
<a class="close" title="Закрыть" onclick="document.getElementById('parent_popup_click').style.display='none';">X</a>
</div>

in head

<script>
function send_form() { 
var msg = $("#forma").serialize();
$.ajax({
type: "POST",
url: "/send.php",
data: msg,
success: function(data) {
alert("Сообщение отправлено");
setTimeout(function () {
$(".feedback_form_bg").fadeOut();}, 1000);
},
error:  function(xhr, str){
alert("Возникла ошибка!");
setTimeout(function () {$(".feedback_form_bg").fadeOut();}, 1000);
}
});
}
</script>

css

/* Всплывающее окно */  
 
#parent_popup, #parent_popup_click {
  background-color: rgba(0, 0, 0, 0.8);
  display: none;
  position: fixed;
  z-index: 99999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
#popup, #popup_click { 
  background: #fff;
    max-width: 600px;
    width:70%;
    margin: 10% auto;
    padding: 5px 20px 13px 20px;
    border: 10px solid #ddd;
    position: relative;
    /*--CSS3 CSS3 Тени для Блока--*/
    -webkit-box-shadow: 0px 0px 20px #000;
    -moz-box-shadow: 0px 0px 20px #000;
    box-shadow: 0px 0px 20px #000;
    /*--CSS3 Закругленные углы--*/
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
 
 
#popup h2, #popup_click h2 {
    font:28px Monotype Corsiva, Arial;
    font-weight: bold;
    text-align: center;
    color: #008000;
    text-shadow: 0 1px 3px rgba(0,0,0,.3);
    }
#popup h3, #popup_click h3 {
    font:24px Monotype Corsiva, Arial;      
    color: #008000;
    text-align: left;
    text-shadow: 0 1px 3px rgba(0,0,0,.3);
    }
/* кнопка закрытия */
.close {
    background-color: rgba(0, 0, 0, 0.8);
    border: 2px solid #ccc;
    height: 24px;
    line-height: 24px;
    position: absolute;
    right: -24px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-family: helvetica, arial;
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
    top: -24px;
    width: 24px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
    -moz-box-shadow: 1px 1px 3px #000;
    -webkit-box-shadow: 1px 1px 3px #000;
    box-shadow: 1px 1px 3px #000;
}
.close:hover {
    background-color: rgba(255, 69, 0, 0.8);
}
 
#popup_click {
    background: #fff;
    max-width: 400px;}

how it works can be seen here (where "form test started"), or on the codepen

Answer 1

For the forms themselves, always use the contact form 7 plugin. A very convenient, functional plugin that can be customized for any of your needs, including specific hosting software. At first I wrote all my scripts myself, but constant Wishlist from clients took a lot of time. Using the plugin, I have reduced the cost of this time at times. This is about how forms work.
Creating modal windows (popups) is an elementary thing for a coder. If you have no knowledge of layout, then again refer to ready-made plugins, in which you don’t need anything other than clicking the mouse. You can find them by googling for "wordpress popup plugins". Try a few and choose the right one.

Answer 2

Where and how do you want to submit the form?
You have a form tag, it has an action attribute, write in it the address that should receive the form data. Or send ajax:

function AjaxFormRequest(result_id,form_id,url) {
                $.ajax({
                    url:     url, //куда отправить
                    type:     "POST", //Как отправить
                    dataType: "html", //Тип данных
                    data: $("#"+form_id).serialize(), //получаем данные формы
                    success: function(response) { //что делаем если сервер ответил
                    //видимо закрытие модалки
                },
                error: function(response) { //Что делаем если сервер вернул ошибку
               //видимо вывод ошибки
                }
             });