Друзья помогите пожалуйста мне нужна форма данные с которой буду отправлять на почту, но у меня не выссылаются данные
<div class="wrapper">
<div class="form">
<form action="#" id="form" class="form__body">
<h1 class="form__title">Регистрация</h1>
<div class="form__item">
<label for="formName" class="form__label">Имя*:</label>
<input id="formName" type="text" name="name" class="form__input _req">
</div>
<div class="form__item">
<label for="formNumber" class="form__label">Номер телефона*:</label>
<input id="formNumber" type="Number" name="phone" class="form__input _req ">
</div>
<div class="form__item">
<label for="formEmail" class="form__label">E-mail*:</label>
<input id="formEmail" type="text" name="email" class="form__input _req _email">
</div>
<div class="form__item">
<div class="checkbox">
<input id="formAgreement" checked type="checkbox" name="agreement" class="checkbox__input _req">
<label for="formAgreement" class="checkbox__label"><span>Я даю свое согласие на обработку персональных данных в соответствии с <a href="/policy.html">Условиями</a>*</span></label>
</div>
</div>
<button type="submit" class="form__button">Отправить</button>
</form>
</div>
</div>
"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);
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');
}
//Функция теста email
function emailTest(input) {
return !/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,8})+$/.test(input.value);
}
//Получаем инпут file в переменную
const formImage = document.getElementById('formImage');
//Получаем див для превью в переменную
const formPreview = document.getElementById('formPreview');
//Слушаем изменения в инпуте file
formImage.addEventListener('change', () => {
uploadFile(formImage.files[0]);
});
function uploadFile(file) {
// провераяем тип файла
if (!['image/jpeg', 'image/png', 'image/gif'].includes(file.type)) {
alert('Разрешены только изображения.');
formImage.value = '';
return;
}
// проверим размер файла (<2 Мб)
if (file.size > 2 * 1024 * 1024) {
alert('Файл должен быть менее 2 МБ.');
return;
}
var reader = new FileReader();
reader.onload = function (e) {
formPreview.innerHTML = `<img src="${e.target.result}" alt="Фото">`;
};
reader.onerror = function (e) {
alert('Ошибка');
};
reader.readAsDataURL(file);
}
});
//Select
let selects = document.getElementsByTagName('select');
if (selects.length > 0) {
selects_init();
}
function selects_init() {
for (let index = 0; index < selects.length; index++) {
const select = selects[index];
select_init(select);
}
//select_callback();
document.addEventListener('click', function (e) {
selects_close(e);
});
document.addEventListener('keydown', function (e) {
if (e.which == 27) {
selects_close(e);
}
});
}
function selects_close(e) {
const selects = document.querySelectorAll('.select');
if (!e.target.closest('.select')) {
for (let index = 0; index < selects.length; index++) {
const select = selects[index];
const select_body_options = select.querySelector('.select__options');
select.classList.remove('_active');
_slideUp(select_body_options, 100);
}
}
}
function select_init(select) {
const select_parent = select.parentElement;
const select_modifikator = select.getAttribute('class');
const select_selected_option = select.querySelector('option:checked');
select.setAttribute('data-default', select_selected_option.value);
select.style.display = 'none';
select_parent.insertAdjacentHTML('beforeend', '<div class="select select_' + select_modifikator + '"></div>');
let new_select = select.parentElement.querySelector('.select');
new_select.appendChild(select);
select_item(select);
}
function select_item(select) {
const select_parent = select.parentElement;
const select_items = select_parent.querySelector('.select__item');
const select_options = select.querySelectorAll('option');
const select_selected_option = select.querySelector('option:checked');
const select_selected_text = select_selected_option.text;
const select_type = select.getAttribute('data-type');
if (select_items) {
select_items.remove();
}
let select_type_content = '';
if (select_type == 'input') {
select_type_content = '<div class="select__value"><input autocomplete="off" type="text" name="form[]" value="' + select_selected_text + '" data-error="Ошибка" data-value="' + select_selected_text + '" class="select__input"></div>';
} else {
select_type_content = '<div class="select__value"><span>' + select_selected_text + '</span></div>';
}
select_parent.insertAdjacentHTML('beforeend',
'<div class="select__item">' +
'<div class="select__title">' + select_type_content + '</div>' +
'<div class="select__options">' + select_get_options(select_options) + '</div>' +
'</div></div>');
select_actions(select, select_parent);
}
function select_actions(original, select) {
const select_item = select.querySelector('.select__item');
const select_body_options = select.querySelector('.select__options');
const select_options = select.querySelectorAll('.select__option');
const select_type = original.getAttribute('data-type');
const select_input = select.querySelector('.select__input');
select_item.addEventListener('click', function () {
let selects = document.querySelectorAll('.select');
for (let index = 0; index < selects.length; index++) {
const select = selects[index];
const select_body_options = select.querySelector('.select__options');
if (select != select_item.closest('.select')) {
select.classList.remove('_active');
_slideUp(select_body_options, 100);
}
}
_slideToggle(select_body_options, 100);
select.classList.toggle('_active');
});
for (let index = 0; index < select_options.length; index++) {
const select_option = select_options[index];
const select_option_value = select_option.getAttribute('data-value');
const select_option_text = select_option.innerHTML;
if (select_type == 'input') {
select_input.addEventListener('keyup', select_search);
} else {
if (select_option.getAttribute('data-value') == original.value) {
select_option.style.display = 'none';
}
}
select_option.addEventListener('click', function () {
for (let index = 0; index < select_options.length; index++) {
const el = select_options[index];
el.style.display = 'block';
}
if (select_type == 'input') {
select_input.value = select_option_text;
original.value = select_option_value;
} else {
select.querySelector('.select__value').innerHTML = '<span>' + select_option_text + '</span>';
original.value = select_option_value;
select_option.style.display = 'none';
}
});
}
}
function select_get_options(select_options) {
if (select_options) {
let select_options_content = '';
for (let index = 0; index < select_options.length; index++) {
const select_option = select_options[index];
const select_option_value = select_option.value;
if (select_option_value != '') {
const select_option_text = select_option.text;
select_options_content = select_options_content + '<div data-value="' + select_option_value + '" class="select__option">' + select_option_text + '</div>';
}
}
return select_options_content;
}
}
function select_search(e) {
let select_block = e.target.closest('.select ').querySelector('.select__options');
let select_options = e.target.closest('.select ').querySelectorAll('.select__option');
let select_search_text = e.target.value.toUpperCase();
for (let i = 0; i < select_options.length; i++) {
let select_option = select_options[i];
let select_txt_value = select_option.textContent || select_option.innerText;
if (select_txt_value.toUpperCase().indexOf(select_search_text) > -1) {
select_option.style.display = "";
} else {
select_option.style.display = "none";
}
}
}
function selects_update_all() {
let selects = document.querySelectorAll('select');
if (selects) {
for (let index = 0; index < selects.length; index++) {
const select = selects[index];
select_item(select);
}
}
}
let _slideUp = (target, duration = 500) => {
target.style.transitionProperty = 'height, margin, padding';
target.style.transitionDuration = duration + 'ms';
target.style.height = target.offsetHeight + 'px';
target.offsetHeight;
target.style.overflow = 'hidden';
target.style.height = 0;
target.style.paddingTop = 0;
target.style.paddingBottom = 0;
target.style.marginTop = 0;
target.style.marginBottom = 0;
window.setTimeout(() => {
target.style.display = 'none';
target.style.removeProperty('height');
target.style.removeProperty('padding-top');
target.style.removeProperty('padding-bottom');
target.style.removeProperty('margin-top');
target.style.removeProperty('margin-bottom');
target.style.removeProperty('overflow');
target.style.removeProperty('transition-duration');
target.style.removeProperty('transition-property');
target.classList.remove('_slide');
}, duration);
}
let _slideDown = (target, duration = 500) => {
target.style.removeProperty('display');
let display = window.getComputedStyle(target).display;
if (display === 'none')
display = 'block';
target.style.display = display;
let height = target.offsetHeight;
target.style.overflow = 'hidden';
target.style.height = 0;
target.style.paddingTop = 0;
target.style.paddingBottom = 0;
target.style.marginTop = 0;
target.style.marginBottom = 0;
target.offsetHeight;
target.style.transitionProperty = "height, margin, padding";
target.style.transitionDuration = duration + 'ms';
target.style.height = height + 'px';
target.style.removeProperty('padding-top');
target.style.removeProperty('padding-bottom');
target.style.removeProperty('margin-top');
target.style.removeProperty('margin-bottom');
window.setTimeout(() => {
target.style.removeProperty('height');
target.style.removeProperty('overflow');
target.style.removeProperty('transition-duration');
target.style.removeProperty('transition-property');
target.classList.remove('_slide');
}, duration);
}
let _slideToggle = (target, duration = 500) => {
if (!target.classList.contains('_slide')) {
target.classList.add('_slide');
if (window.getComputedStyle(target).display === 'none') {
return _slideDown(target, duration);
} else {
return _slideUp(target, duration);
}
}
}
<?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('r8yagubets@gmail.com', 'Фрилансер по жизни');
//Кому отправить
$mail->addAddress('r8yagubets@gmail.com');
//Тема письма
$mail->Subject = 'Привет! Это "Фрилансер по жизни"';
//Тело письма
$body = '<h1>Встречайте супер письмо!</h1>';
if(trim(!empty($_POST['name']))){
$body.='<p><strong>Имя:</strong> '.$_POST['name'].'</p>';
}
if(trim(!empty($_POST['email']))){
$body.='<p><strong>E-mail:</strong> '.$_POST['email'].'</p>';
}if(trim(!empty($_POST['number']))){
$body.='<p><strong>number:</strong> '.$_POST['number'].'</p>';
}
$mail->Body = $body;
//Отправляем
if (!$mail->send()) {
$message = 'Ошибка';
} else {
$message = 'Данные отправлены!';
}
$response = ['message' => $message];
header('Content-type: application/json');
echo json_encode($response);
?>