Отправка формы – это обычное взаимодействие в веб-разработке, позволяющее пользователям отправлять данные на серверы. Тем не менее, важно предоставить пользователям четкое сообщение с подтверждением после отправки формы. Это подтверждение убеждает их в том, что их действие было успешным, и улучшает общий пользовательский опыт. В этой статье мы рассмотрим несколько методов реализации подтверждения отправки формы с использованием разговорного языка и предоставим практические примеры кода.

Метод 1: отображение простого окна оповещения

Один из самых простых способов подтверждения отправки формы — отображение окна с предупреждением. Вот фрагмент кода на JavaScript, который позволяет это сделать:

document.querySelector('form').addEventListener('submit', function (event) {
  event.preventDefault(); // Prevents the form from submitting
  alert('Form submitted successfully!');
});

Метод 2: отображение сообщения об успехе на странице

Вместо использования окна оповещения вы можете отображать сообщение об успехе прямо на странице. Такой подход обеспечивает более удобный пользовательский опыт. Вот пример использования HTML, CSS и JavaScript:

<form>
  <!-- Your form fields here -->
  <button type="submit">Submit</button>
</form>
<div id="confirmation-message" >
  Form submitted successfully!
</div>
<script>
  document.querySelector('form').addEventListener('submit', function (event) {
    event.preventDefault();
    document.getElementById('confirmation-message').style.display = 'block';
  });
</script>

Метод 3: перенаправление на страницу благодарности

Еще один эффективный метод — перенаправить пользователей на отдельную страницу «Спасибо» после отправки формы. Это дает им четкое указание на то, что их представление было успешным. Вот пример:

document.querySelector('form').addEventListener('submit', function (event) {
  event.preventDefault();
  window.location.href = 'thank-you.html';
});

Метод 4: модальные окна или всплывающие окна

Использование модальных окон или всплывающих окон также может обеспечить визуально привлекательное и интерактивное подтверждение отправки формы. Вот пример использования популярной библиотеки JavaScript под названием Bootstrap:

<form>
  <!-- Your form fields here -->
  <button type="submit">Submit</button>
</form>
<div class="modal" tabindex="-1" role="dialog" id="confirmation-modal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        Form submitted successfully!
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
<script>
  document.querySelector('form').addEventListener('submit', function (event) {
    event.preventDefault();
    $('#confirmation-modal').modal('show');
  });
</script>

Внедрив подтверждение отправки формы, вы можете улучшить взаимодействие с пользователем на своем веб-сайте. Мы исследовали несколько методов, включая отображение окон предупреждений, отображение сообщений об успехе на странице, перенаправление на страницу благодарности и использование модальных окон или всплывающих окон. Выберите метод, который лучше всего подходит для вашего проекта и обеспечивает удобство подтверждения для ваших пользователей.