Всем здравствуйте!
Есть
форма обратной связи c отправкой без перезагрузки страницы. Она у меня открывается в модальном окне.
Форма
HTML такая:
<form action="letter.php" method="post" id="contact">
<label for="name">Имя:</label>
<input type="text" name="name" id="name" placeholder="Введите имя" required>
<label for="nomer">Телефон:</label>
<input type="text" name="nomer" id="nomer" placeholder="Ваш телефон" required>
<label for="email">Email:</label>
<input type="text" name="email" id="email" placeholder="Ваш e-mail" required>
<label for="body">Сообщение:</label>
<textarea name="body" id="body" placeholder="Наберите сообщение" required></textarea>
<label for="check"><input type="checkbox" id="check">...</label>
<input type="hidden" name="validac" class="validac" value="validac_disabled">
<input id="submit" type="submit" name="submit" value="Отправить" disabled>
</form>
Обработчик
php - letter.php :
<?php
if( $_POST){
require 'phpmailer.php';
require 'smtp.php';
$mail = new PHPMailer;
$mail->isSMTP();
// Настройки
$mail->Host = 'smtp.server.ru';
$mail->SMTPAuth = true;
$mail->CharSet = 'UTF-8';
$mail->Username = 'info@domain.ru'; // логин от вашей почты
$mail->Password = 'Password'; // пароль от почтового ящика
$mail->SMTPSecure = 'ssl';
$mail->Port = '465';
$mail->From = 'info@domain.ru'; // адрес почты, с которой идет отправка
$mail->FromName = 'Сообщение с domain.ru'; // имя отправителя
$mail->addAddress('info@domain.ru');
// Письмо
$mail->isHTML(true);
$mail->Body = "Имя: {$_POST['name']}<br> Телефон: {$_POST['nomer']}<br> Email: {$_POST['email']}<br> Сообщение: " . nl2br($_POST['body']);
$mail->AltBody = "Имя: {$_POST['name']}\r\n Телефон: {$_POST['nomer']}\r\n Email: {$_POST['email']}\r\n Сообщение: {$_POST['body']}";
// $mail->SMTPDebug = 0;
if( $mail->send() ){
$answer = '1';
}else{
$answer = '0';
echo 'Письмо не может быть отправлено. ';
echo 'Ошибка: ' . $mail->ErrorInfo;
}
die( $answer );
}
?>
Подключаю библиотеку
jquery, и внизу встраницы пишу скрипт для отправки письма без перезагрузки страницы:
/*message*/
$(function(){
$('#contact').submit(function(){
var errors = false;
$(this).find('span').empty();
$(this).find('input, textarea').each(function(){
if( $.trim( $(this).val() ) == '' ) {
errors = true;
$(this).next().text( 'Не заполнено поле ' + $(this).prev().text() );
}
});
if( !errors ){
var data = $('#contact').serialize();
$.ajax({
url: 'letter.php',
type: 'POST',
data: data,
beforeSend: function(){
$('#submit').next().text('Отправляю...');
},
success: function(res){
if( res == 1 ){
$('#contact').find('input:not(#submit), textarea').val('');
$('#submit').next().empty();
alert('Письмо отправлено');
}else{
$('#submit').next().empty();
alert('Ошибка отправки');
}
},
error: function(){
alert('Ошибка!');
}
});
}
return false;
});
});
Вопрос в следующем:
При отправке письма -
нет прогресса отправки сообщения. (Например при помощи svg иконок или еще как -либо)
Как это реализовать? Что и куда нужно прописать для этого?
После отправки письма, форма отчищается и всплывает базовое окно без стилей: "Сообщение отправлено" или " Ошибка".
Как это заменить на модификацию всей формы?
(Например исчезание Формы и на ее месте появление сообщения: "Сообщение отправлено" и "Закрыть окно" или "Написать еще одно сообщение" и чтобы тогда появлялась форма заново.
Взамен всплывающего окна)
Либо еще какую то визуализацию применить....
Посоветуйте как лучше и что куда дописать?
Спасибо.
Простой
Средний
