Приветствую! Я натянул верстку свою на cms wordpress, далее хотел подключить работу с формами, но плагин использовать не хочу никакой, потому как мне показалось, они сильно нагружают сайт и плюс там гемор со своими стилями. Нашел на ютубе видос по которому написал коды ниже, закинул все на хостинг, и мне выдает такую ошибку: POST multi-faced.tw1.ru/sendmail.php 404 (Not Found). Я как понимаю он не видит данного файла, а значит в js, где FETCH задает путь, надо его как то правильно указать, но как я не понимаю. Спасите, я впервые это все делаю((
Код JS:
function submitForm() {
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);
// formData.append('image', formImage.files[0]);
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);
// formPreview.innerHTML = '';
form.reset();
form.classList.remove('_sending');
} else {
alert('Ошибка!');
form.classList.remove('_sending');
}
} else {
alert('Сначала заполните поле')
}
}
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.getAttribute('type') === 'checkbox' && input.checked === false) {
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);
}
// const formImage = document.getElementById('formImage');
// const formPreview = document.getElementById('formPreview');
// formImage.addEventListener('change', () => {
// uploadFile(formImage.files[0]);
// });
// function uploadFile(file) {
// if (!['image/jpeg', 'image/png', 'image/gif'].includes(file.type)) {
// alert('Разрешены только изображения');
// formImage.value = '';
// return;
// }
// if (file.size > 2 * 1024 * 1024) {
// alert('Файл должен быть менее 2 МБ.');
// return;
// }
// let reader = new FileReader();
// reader.onload = function (e) {
// formPreview.innerHTML = `<img src="${e.target.result}" alt="Фото">`;
// };
// reader.onerror = function (e) {
// alert('Ошибка');
// };
// reader.readAsDataURL(file);
// }
});
}
submitForm();
Код HTML:
<form action="#" id="form" class="subscribe__form">
<div class="subscribe__input-wrap">
<input id="formEmail" placeholder="Type Your Email Address" class="subscribe__input _req _email" type="text" name="email">
<div class="subscribe__button-wrap">
<button class="subscribe__btn btn" type="submit">Send now</button>
</div>
</div>
</form>
Код sendmail.php:
<?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->setForm('info@fls.guru', 'Фрилансер по жизни');
//Кому отправить
$mail->addAddress('code@fls.guru');
//Тема письма
$mail->Subject = 'Привет! Это "Фрилансер по жизни"';
//Тело письма
$body = '<h1>Встречайте супер письмо!<h1>';
if (trim(!empty($_POST['email']))) {
$body.='<p><strong>E-mail:</strong> '.$_POST['email'].'</p>';
}
$mail->Body = $body;
//Отправляем
if (!$mail->send()) {
$message = 'Ошибка';
} else {
$message = 'Данные отправлены';
}
$response = ['mesaage' => $message];
header('Content-type: application/json');
echo json_encode($response);
?>
