Как сделать форму обратной связи?

Question

Всем привет! Помогите, пожалуйста, я ни разу не делала форму обратной связи. И не могу понять причину не работы.

Покажу весь код, что написан. Дело в коде или дело в хостинге(TimeWeb), мне нужно что-то сделать, чтобы заработало? В общем, помогите, пожалуйста, не знающему человеку)

Пользовалась phpmailer. И я не понимаю, почему должно быть две почты, кому отправить, я понимаю

<?php 
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;

require 'phpmailer/src/Exception.php';
require 'phpmailer/src/PHPMailer.php';

$mail = new PHPMailer(true);
$mail->CharSet = 'UTF-8';
$mail->setLanguage('ru', 'phpmailer/language/');
$mail->IsHTML(true);

// От кого письмо 
$mail->setFrom('[email protected]', 'Julie Visotski');
// Кому отправить 
$mail->addAddress('[email protected]');
// Тема письма 
$mail->Subject = 'Hello! I`m Julie Visotski';

//Тело письма 
$body = '<h1>Meet the letter</h1>';

if(trim(!empty($_POST['name']))){
    $body.='<p><strong>Name:</strong> '.$_POST['name'].'</p>';
}
if(trim(!empty($_POST['email']))){
    $body.='<p><strong>E-mail:</strong> '.$_POST['email'].'</p>';
}

$mail->Body = $body; 

//Отправляем
if (!$mail->send()) {
    $massage = 'Error';
} else {
    $message = 'Data sent!';
}

$response = ['message' => $message];

header('Content-type: application/json');
echo json_encode($response);
?>

"use strict"

document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('form');
  form.addEventListener('submit', formSend);

  async function formSend(e) {
    e.preventDefault();

    let error = formValidate(form);

    let formData = new FormData(form);

    if (error === 0) {
      form.classList.add('_sending');
      let response = await fetch('sendmail.php', {
        method: 'POST',
        body: formData
      });
      if (response.ok) {
        let result = await response.json();
        alert(result.message);
        form.reset();
        form.classList.remove('_sending');
      } else {
        alert("Error");
        form.classList.remove('_sending');
      }
    } else {
      alert('Fill in required fields');
    }
  }

  function formValidate(form) {
    let error = 0;
    let formReq = document.querySelectorAll('._req');

    for (let index = 0; index < formReq.length; index++) {
      const input = formReq[index];
      formRemoveError(input);

      if (input.classList.contains('_email')) {
        if (emailTest(input)) {
          formAddError(input);
          error++;
        }
      } else {
        if (input.value === '') {
          formAddError(input);
          error++;
        }
      }
    }
    return error;
  }

  function formAddError(input) {
    input.parentElement.classList.add('_error');
    input.classList.add('_error');
  }

  function formRemoveError(input) {
    input.parentElement.classList.remove('_error');
    input.classList.remove('_error');
  }

  function emailTest(input) {
    return !/^\w+([\.-]?\w+)*@\w([\.-]?\w+)*(\.\w{2,8})+$/.test(input.value);
  }
});

.form__body {
  position: relative;
}

.form__body::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(51, 51, 51, 0.9) url('../img/loading.gif') center / 50px no-repeat;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease 0s;
}

.form__body._sending::after {
  opacity: 1;
  visibility: visible;
}

.form__body_input {
  width: 400px;
  margin-bottom: 25px;
}

.form__body_input._error {
  box-shadow: 0 0 15px red;
}

.form__btn {
  width: 180px;
  height: 40px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="form">
    <form action="#" id="form" class="form__body d-flex flex-column">
      <h2 class="form__title_two">
        Subscribe to my newsletter
      </h2>
      <p class="form__text">
        Get my announcements about coming workshops & services direct to your inbox.
      </p>
      <div class="form__item">
        <input type="text" name="name" class="form__body_input _req" placeholder="First name">
      </div>
      <div class="form__item">
        <input type="text" name="email" class="form__body_input _req _email" placeholder="Email">
      </div>
      <button type="submit" class="form__btn subscribe btn">
                                    Subscribe
                                </button>
    </form>
  </div>
</div>

БЛОГ НА HUSL

Как сделать форму обратной связи?

Ответы (0 шт):