modal contact form

  <button data-modal="call_back" class="modalPopUp">заказать звонок</button>
  <div id="modal_overlay" class="hidden" role="dialog" aria-labelledby="modal_title">
    <div class="modal_content" role="document">
      <h1 class="modal_title">Заказать обратный звонок</h1>
      <form action="contact.php" method="post" class="modal_form" data-modal="call_back_form">
        <input type="text" id="f-name" class="modal_form-input" name="contact-name" required placeholder="Ваше имя">
        <input type="tel" id="f-tel" class="modal_form-input" name="contact-phone" required placeholder="Номер телефона">
        <input type="submit" value="Отправить" class="send">
        <input type="button" name="cancel" value="X" aria-label="Close">
      </form>
    </div>
  </div>
  
// #### SCSS Start ####  
  
 body {
  overflow-x: hidden;
  background-color: #F3F3F3;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

p {
  margin: 0;
}

a {
  text-decoration: none;
}

input,
select,
textarea,
button {
  outline: none;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

.hidden {
  display: none;
}

.tabs_container {
  .tab {
    button {
      display: flex;
      flex-direction: row;
      max-width: 500px;
      width: 100%;
      background-color: #FF5607;
      border: 2px solid #fff;
      color: #fff;
      font-size: 18px;
      padding: 15px 30px;
      border-radius: 5px;
      span {
        margin-right: 30px;
        font-size: 20px;
        margin-top: auto;
        margin-bottom: auto;
        &.animate_icon_down {
          transform: rotate(90deg);
          transition: 0.5s;
        }
        &.animate_icon_up {
          transform: rotate(0deg);
          transition: 0.5s;
        }
      }
    }
    .tab_content {
      max-width: 500px;
      width: 100%;
      max-height: 200px;
      height: 0;
      overflow-y: scroll;
      background-color: #fff;
      padding: 0;
      .content_inner_wrapper {
        padding: 20px;
        p {
          font-size: 18px;
        }
      }
    }
  }
}

 // #### SCSS End #### 
  
 // #### JS Start ####

'use strict';

function documentReady() {

  function clickEvent(event) {
    var target = event.target;

    /* begin Modal window */
    var modalOverlay = document.querySelector('#modal_overlay');
    var modalContent = document.querySelector('.modal_content');
    var modalForm = document.querySelector('.modal_form');

    if (target.getAttribute('data-modal')) {
      showModal();
    }
    if (target.getAttribute('id') == 'modal_overlay') {
      modalClose();
    }

    function showModal() {
      modalOverlay.classList.remove('hidden');

      // setTimeout(function() { modalContent.style.transform = 'scale(1)'; }, 40);

      setTimeout(function() { modalContent.classList.add('modal_content-animate'); }, 40);

      modalCentering();

      modalForm.elements['contact-name'].focus();

      var closeBtn = modalOverlay.querySelector('input[type="button"]');
      closeBtn.addEventListener('click', modalClose);

      modalForm.addEventListener('submit', modalSubmit);
      modalOverlay.addEventListener('keydown', modalTabCheck);
    }

    /* begin Modal Centering */
    function modalCentering() {
      var modal = modalContent;
      modal.style.top = document.documentElement.clientHeight / 2 - modal.offsetHeight / 2 + 'px';
      modal.style.left = document.documentElement.clientWidth / 2 - modal.offsetWidth / 2 + 'px';
      if (modal.getBoundingClientRect().top < 0) modal.style.top = 0;

      window.addEventListener('resize', function() {
        modal.style.top = document.documentElement.clientHeight / 2 - modal.offsetHeight / 2 + 'px';
        modal.style.left = document.documentElement.clientWidth / 2 - modal.offsetWidth / 2 + 'px';
        if (modal.getBoundingClientRect().top < 0) modal.style.top = 0;
      });
    }
    /* end Modal Centering */

    /* begin Modal Tab Check */
    function modalTabCheck(event) {
      var form = modalOverlay.querySelector('form');
      var formFirstElem = form.elements[0];
      var formLastElem = form.elements[form.elements.length - 1];

      if (event.keyCode === 27) {
        modalContent.classList.remove('modal_content-animate');
        modalOverlay.classList.add('hidden');
      }

      formFirstElem.addEventListener('keydown', function() {
        if (event.keyCode == 9 && event.shiftKey) {
          formLastElem.focus();
          event.preventDefault();
        }
      });

      formLastElem.addEventListener('keydown', function() {
        if (event.keyCode == 9 && !event.shiftKey) {
          formFirstElem.focus();
          event.preventDefault();
        }
      });
    }
    /* end Modal Tab Check */

    function modalSubmit() {
      modalContent.classList.remove('modal_content-animate');
      modalOverlay.classList.add('hidden');
    }

    function modalClose() {
      modalContent.classList.remove('modal_content-animate');
      modalOverlay.classList.add('hidden');
    }

    /* end Modal window */
  }
  document.body.addEventListener('click', clickEvent);
}

document.addEventListener('DOMContentLoaded', documentReady);

 // #### JS End #### 
  
  
  
  <?php
header('Content-Type: text/html; charset=utf-8');
$field_name = $_POST['contact-name'];
$field_tel = $_POST['contact-phone'];

$mail_to = '[email protected]';
$subject = 'Письмо с сайта erweb.ru, от посетителя: '.$field_name;  // change

$body_message = 'От кого: '.$field_name."\n";
$body_message .= 'Телефон отправителя: '.$field_tel."\n";

$headers = 'From: '.$field_tel."\r\n";
$headers .= 'Reply-To: '.$field_tel."\r\n";

$mail_status = mail($mail_to, $subject, $body_message, $headers);

if ($mail_status) { ?>
	<script language="javascript" type="text/javascript">
		window.alert('Сообщение отправлено');
		window.location = 'index.html'; // change page or window.reload(true)
	</script>
<?php
}
else { ?>
	<script language="javascript" type="text/javascript">
		window.alert('Сообщение отправлено не отправлено. Пожалуйста, напишите письмо на адрес [email protected]'); // change
		window.location = 'index.html'; // change page or window.reload(true)
	</script>
<?php
}
?>

<!-- https://www.templatemonster.com/help/ru/how-create-contact-form-html.html#gref -->