@STig225

Визуализация формы обратной связи в модальном окне без перезагрузки — как при отправке письма изменить вид окна?

Всем здравствуйте!
Есть форма обратной связи 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 иконок или еще как -либо)

Как это реализовать? Что и куда нужно прописать для этого?

После отправки письма, форма отчищается и всплывает базовое окно без стилей: "Сообщение отправлено" или " Ошибка".

Как это заменить на модификацию всей формы?

(Например исчезание Формы и на ее месте появление сообщения: "Сообщение отправлено" и "Закрыть окно" или "Написать еще одно сообщение" и чтобы тогда появлялась форма заново. Взамен всплывающего окна)

Либо еще какую то визуализацию применить....

Посоветуйте как лучше и что куда дописать?
Спасибо.
  • Вопрос задан
  • 163 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы