HTMLJavaScript

Как отправить данные с веб-формы HTML на сервер - универсальный скрипт

В данной статье будет рассмотрено:

  • Минимальные параметры формы
  • Универсальный скрипт отправки данных формы на сервер

Ниже предоставлен простой код формы без стилей, просто структура:

<form 
	class="form"
	data-mail="/wp-json/mail/v1/send"
	data-subject="Запрос обратного звонка с сайта" 
	data-loading=".form__loading"
	data-success=".form__success"
	data-success-time="1.5"
  >

  <input type="text" data-name="Имя клиента" />

  <input type="phone" data-name="Телефон клиента" />

  <input type="submit" value="Отправить" />
  
	<div class="form__loading a-fadein-up"></div>

	<div class="form__success a-fadein-up"></div>
</form>

Обязательные данные формы:

data-mail - указывает на скрипт который будет обрабатывать данные формы и отправлять их.
Если мы создали mail.php в корне своего сайта то указываем адрес сайта https://artemsites.ru и сразу путь к скрипту /mail.php итого https://artemsites.ru/mail.php

data-subject - указывает тему письма

data-name - у каждого input формы будет отправляться как заголовок введённого поля пользователем

<input type="submit" value="Отправить" /> - чтобы форма отправлялась

Необязательные данные формы

data-loading - Селектор внутри формы в которой будет лоадер (к этому элементу добавится класс _active при активации)
data-success - Селектор внутри формы в которой будет анимация или сообщение об успехе (к этому элементу добавится класс _active при активации)
data-success-time - Таймер показа сообщения об успехе, по умолчанию 1s

Код скрипта отправки формы на JavaScript из браузера на сервер

(в наш https://artemsites.ru/mail.php)

!!! Скрипт универсален и не требует вмешательства.

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

В комментария пояснения к коду скрипта:

document.addEventListener("DOMContentLoaded", function () {
  try {
    let forms = document.querySelectorAll("form");

    for (let form of forms) {
      const mailServerScript = form.dataset.mail;
      const formLoading = form.querySelector(form.dataset.loading);
      const formSuccess = form.querySelector(form.dataset.success);
      const formSuccessTime = form.dataset.successTime || 1;

      form.addEventListener("submit", async function (e) {
        e.preventDefault();

        if (formLoading) formLoading.classList.add("_active");

        let formData = new FormData();

        if (form.dataset.subject)
          formData.append("subject", form.dataset.subject);

        let inputs = form.querySelectorAll("[data-name]");

        for (let input of inputs) {
          if (input.dataset.name)
            formData.append(input.dataset.name, input.value);
        }

        let response = await fetch(mailServerScript, {
          method: "POST",
          body: formData,
        });

        let res = await response.json();

        if (res.success === 1) {
          if (formLoading) formLoading.classList.remove("_active");
          form.reset();

          if (formSuccess) {
            formSuccess.classList.add("_active");
            setTimeout(function () {
              formSuccess.classList.remove("_active");
            }, formSuccessTime * 1000);
          }
        }
      });
    }
  } catch (err) {
    console.error("TRY-CATCH ERROR: ", err);
  } finally {
  }
});

Пример кода оформления элементов loader и success

.form {
  position: relative;
}
.form__loading,
.form__success {
  display: none;

  position: absolute;
  width: 5rem;
  height: 5rem;
  left: 1rem;
  top: 1rem;
}
.form__success._active,
.form__loading._active {
  display: block;
}



.a-fadein-up {
  animation-name: fadein-up;
  animation-duration: 500ms;
}

@keyframes fadein-up {
  0%{
    transform: translateY(1.5rem);
    opacity: 0;
  }
  100%{
    transform: translateY(0);
    opacity: 1;
  }
}

Как подключить отправку письма с формы обратной связи на веб-сайт (phpmailer + yandex почта)

https://gist.github.com/artemsites/4d80ebdc60940ae239953664034d2b2a

null
play