<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="reset.css" />
<link rel="stylesheet" href="style.css" />
<title>ИП Попков Ю.В.</title>
<link type="image/x-icon" href="../img/logo.png" rel="icon">
</head>
<body>
<div class="container">
<div class="content">
<div class="right-side">
<div class="topic-text">Отправьте нам сообщение</div>
<p>
Если у вас есть какие-то вопросы или предложения по сотрудничеству - заполните форму ниже
</p>
<form action="send_mail.php" name="form" method="POST">
<div class="input-box">
<input type="text" placeholder="Ваше имя" name="name" id="name" data-reg="^[А-ЯЁ][а-яё]*$" />
<label for="name">Только русские буквы</label>
</div>
<div class="input-box">
<input type="text" placeholder="Введите email" name="email" id="email" data-reg="^[-\w.]+@([A-z0-9][-A-z0-9]+\.)+[A-z]{2,4}$" />
<label for="email">В формате: name@mail.com</label>
</div>
<div class="input-box">
<input type="text" placeholder="Введите телефон" name="phone" id="phone" data-reg="^((\+7|7|8)+([0-9]){10})$" />
<label for="phone">В формате: 88000000000 или 78000000000</label>
</div>
<div class="input-box message-box">
<textarea placeholder="Сообщение"></textarea>
</div>
<div class="button">
<input type="submit" id="button" value="Отправить" />
</div>
</form>
</div>
</div>
</div>
<script src="https://kit.fontawesome.com/fce9a50d02.js" crossorigin="anonymous"></script>
<script src="app.js"></script>
</body>
</html>const form = document.forms["form"];
const formArr = Array.from(form);
const validFormArr = [];
const button = form.elements["button"];
formArr.forEach((el) => {
if (el.hasAttribute("data-reg")) {
el.setAttribute("is-valid", "0");
validFormArr.push(el);
}
});
form.addEventListener("input", inputHandler);
form.addEventListener("submit", formCheck);
function inputHandler({ target }) {
if (target.hasAttribute("data-reg")) {
inputCheck(target);
}
}
function inputCheck(el) {
const inputValue = el.value;
const inputReg = el.getAttribute("data-reg");
const reg = new RegExp(inputReg);
if (reg.test(inputValue)) {
el.setAttribute("is-valid", "1");
el.style.border = "2px solid rgb(0, 196, 0)";
} else {
el.setAttribute("is-valid", "0");
el.style.border = "2px solid rgb(255, 0, 0)";
}
}
function formCheck(e) {
e.preventDefault();
const allValid = [];
validFormArr.forEach((el) => {
allValid.push(el.getAttribute("is-valid"));
});
const isAllValid = allValid.reduce((acc, current) => {
return acc && current;
});
if (!Boolean(Number(isAllValid))) {
alert("Заполните поля правильно");
return;
}
formSubmit();
}
async function formSubmit() {
const data = serializeForm(form);
const response = await sendData(data);
if (response.ok) {
let result = await response.json();
alert(result.message);
formReset();
} else {
alert("Код ошибки: " + response.status);
}
}
function serializeForm(formNode) {
return new FormData(form);
}
async function sendData(data) {
return await fetch("send_mail.php", {
method: "POST",
body: data,
})
}
function formReset() {
form.reset();
validFormArr.forEach((el) => {
el.setAttribute("is-valid", 0);
el.style.border = "none";
})
}<?php
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;
require "PHPMailer/src/PHPMailer.php";
require "PHPMailer/src/Exception.php";
$mail = new PHPMailer(true);
$mail->CharSet = "UTF-8";
$mail->isHTML(true);
$name = $_POST["name"];
$email = $_POST["email"];
$phone = $_POST["phone"];
$message = $_POST["message"];
$email_template = "template_mail.html";
$body = file_get_contents($email_template);
$body = str_replace('%name%', $name, $body );
$body = str_replace('%email%', $email, $body );
$body = str_replace('%phone%', $phone, $body );
$body = str_replace('%message%', $message, $body );
$theme = "[Заявка с формы]";
$mail->addAddress("akimpismenny@gmail.com");
$mail->Subject = $theme;
$mail->msgHTML($body);
if(!$mail->send()){
$message = "Сообщение не отправлено";
}
else{
$message = "Данные отправлены";
}
$response = ["message" => $message];
header("Content-type: application/json");
echo json_encode($response);
?>
Простой
Средний
