Есть рабочая форма отправки сообщений на email.
<form enctype="multipart/form-data" role="form" id="form" method="post" action="handler.php">
<div class="form-row">
<div class="form-group col-sm-6">
<label for="name" class="nameForInput">Имя:</label>
<input type="text" name="name" class="form-control" id="name" placeholder="Enter name" >
</div>
<div class="form-group col-sm-6">
<label for="email" class="nameForInput">Email:</label>
<input type="mail" name="email" class="form-control" id="email" placeholder="Enter email" >
</div>
</div>
<div class="form-group">
<label for="phone" class="nameForInput">Телефон:</label>
<input class="form-control phone" name="phone" type="text" placeholder="+7 (800) 000-00-00" >
</div>
<div class="form-group">
<label for="message" class="nameForInput">Сообщение:</label>
<textarea id="message" class="form-control" name="message" rows="5"placeholder="Enter your message" ></textarea>
</div>
<div class="form-group">
<label for="myfile" class="file-label left">
<img src="img/upload.svg" alt="">
<p class="amount">Прикрепить файлы</p>
</label>
<input type="file" class="my" id="myfile" name="myfile[]" multiple>
</div>
<div class="form-group">
<input id="check" name="check" checked type="checkbox">
<span class="check-text">Подтверждаю согласие на обработку персональных данных</span>
</div>
<button type="submit" class="btn btn-success btn-lg">Отправить</button>
<div class="result">
<span id="answer"></span>
<span id="loader"><img src="img/loader.gif" alt=""></span>
</div>
</form>
ajax:
$(function() {
$('#form').on('submit', function(e) {
e.preventDefault();
var form = $('#form'),
button = $('.btn'),
answer = $('#answer'),
loader = $('#loader');
$.ajax({
url: 'handler.php',
type: 'POST',
contentType: false,
processData: false,
data: new FormData(this),
beforeSend: function() {
answer.empty();
button.attr('disabled', true).css('margin-bottom', '20px');
loader.fadeIn();
},
success: function(result) {
loader.fadeOut(300, function() {
answer.text(result);
});
form[0].reset();
button.attr('disabled', false);
},
error: function() {
loader.fadeOut(300, function() {
answer.text('Произошла ошибка! Попробуйте позже.');
});
button.attr('disabled', false);
}
});
});
});
ContactMailer.php:
<?php
class ContactMailer
{
/**
* E-mail отправителя
* @var string
*/
private static $emailFrom = '[email protected]';
/**
* E-mail получателя
* @var string
*/
private static $emailTo = '[email protected]';
/**
* Отправляет письмо, если письмо отправлено,
* возвращает TRUE, в противном случае FALSE.
* @param string $name
* @param string $email
* @param string $phone
* @param string $message
* @return boolean
*/
public static function send($name, $email, $phone, $message)
{
// Формируем тело письма
$body = "Имя: " . $name . "\nE-mail: " . $email . "\nТелефон: " . $phone . "\n\nСообщение:\n" . $message;
// Создаем объект PHPMailer
$mailer = new PHPMailer(true);
// Настройки подключения
$mailer->isSMTP();
// Устанавливает хост почтового сервера (Mail.ru: smtp.mail.ru, Google: smtp.gmail.com)
$mailer->Host = 'smtp.mail.com';
// Включает SMTP-авторизацию
$mailer->SMTPAuth = true;
// Логин или E-mail целиком
$mailer->Username = self::$emailFrom;
// Пароль от почтового ящика
$mailer->Password = '';
// Протокол соединения
$mailer->SMTPSecure = '';
// Порт для исходящей почты
$mailer->Port = '';
// Устанавливает кодировку
$mailer->CharSet = 'UTF-8';
// Устанавливает E-mail и имя отправителя
$mailer->setFrom(self::$emailFrom, $name);
// Добавляет E-mail получателя
$mailer->addAddress(self::$emailTo);
// Настройка HTML-формата
$mailer->isHTML(false);
// Тема письма
$mailer->Subject = 'Заполнена форма обратной связи';
// Основное тело письма
$mailer->Body = $body;
// Отправляем письмо
if ($mailer->send()) {
return true;
}
return false;
}
}
handler.php:
<?php
require_once __DIR__ . '/mailer/Validator.php';
require_once __DIR__ . '/mailer/ContactMailer.php';
if (!Validator::isAjax() || !Validator::isPost()) {
echo 'Доступ запрещен!';
exit;
}
$name = isset($_POST['name']) ? trim(strip_tags($_POST['name'])) : null;
$email = isset($_POST['email']) ? trim(strip_tags($_POST['email'])) : null;
$phone = isset($_POST['phone']) ? trim(strip_tags($_POST['phone'])) : null;
$message = isset($_POST['message']) ? trim(strip_tags($_POST['message'])) : null;
//защита от XSS
filter_var($_POST['name'], FILTER_SANITIZE_STRING);
filter_var($_POST['email'], FILTER_SANITIZE_EMAIL);
filter_var($_POST['phone'], FILTER_SANITIZE_NUMBER_INT);
filter_var($_POST['message'], FILTER_SANITIZE_STRING);
//Выдает ошибку, если размер загружаемых файлов превышает лимит установленный сервером
if($_SERVER['REQUEST_METHOD'] == 'POST' && empty($_POST) && empty($_FILES) && $_SERVER['CONTENT_LENGTH'] > 0)
{ echo "CONTENT SIZE EXCEEDS THE LIMIT";
exit;}
if (empty($name) || empty($email) || empty($phone) || empty($message)) {
echo 'Все поля обязательны для заполнения.';
exit;
}
if (!Validator::isValidEmail($email)) {
echo 'E-mail не соответствует формату.';
exit;
}
if (!Validator::isValidPhone($phone)) {
echo 'Телефон не соответствует формату.';
exit;
}
if (ContactMailer::send($name, $email, $phone, $message)) {
echo htmlspecialchars($name) . ', ваше сообщение успешно отправлено.';
} else {
echo ' Произошла ошибка! Не удалось отправить сообщение.';
}
exit;
?>
css:
#answer {
color: #ff5b5b;
}
Все работает, но все сообщения выводятся красным, т.к. в стилях красный цвет для #answer и задан. Но надо чтоб при успешной отправке формы сообщения выводились зеленым цветом, а при ошибках - красным. Пробовал добавить это:
success: function(result) {
loader.fadeOut(300, function() {
if (result === 'ok') {
answer.text(result).addClass('success');
} else {
answer.text(result).addClass('error');
}
});
form[0].reset();
button.attr('disabled', false);
},
css:
.success {
color: #218838;
}
.error {
color: #ff5b5b;
}
, но всегда добавляется только класс 'error', и при успешной отправке также. Еще пробовал в файле handler.php просто прилепить стили к сообщению:
if (ContactMailer::send($name, $email, $phone, $message)) {
echo htmlspecialchars($name) . '<span style="color: #218838;">, ваше сообщение успешно отправлено.</span>';
} else {
echo 'Произошла ошибка! Не удалось отправить сообщение.';
}
exit;
, но ничего не применяется, выдает просто сообщение вместе с тегами:
'<span style="color: #218838;">, ваше сообщение успешно отправлено.</span>'
, хотя, если создать просто какой-то отдельный php файл, там сообщение в echo выводится зеленым цветом, не работает именно в этом handler.php файле.
Кто-нибудь может подсказать как правильно сделать переключатель в Ajax, чтоб сообщение при успешной отправке выводилось зеленым и почему не применяются css стили в handler.php (просто интересно).