Mail-master

Отправка почты на удаленный сервер

Читать:

Сегодня мы рассмотрим Ajax отправку сообщений на почту с возможность прикреплять несколько вложений благодаря PHPMailer. Так же подключим ReCAPTCHA от Google.

Приятным бонусом будет то, что ответ от формы будет ввиде всплывающего окна. А так же красивые иконки.

Готовый вариант с возможность скачать: перейти

Ниже преведен HTML код страницы с формой:

<head>
	<meta charset="utf-8">
	<title>Ajax PHPmailer Форма с recaptcha и magnificPopup</title>
	<link rel="stylesheet" href="css/app.min.css">
</head>
<body>
	<div class="container-form">
		<div class="box-form">
			<form class="form" id="form" action="libs/mail.php" method="post" enctype="multipart/form-data">
				<div class="form-input">
					<i class="fas fa-user"></i>
					<input type="text" name="Имя" id="name">
				</div>
				<div class="form-input">
					<i class="fas fa-envelope"></i>
					<input type="email" name="Email" id="email">
				</div>
				<div class="form-input-file form-input">
					<input type="file" id="file-1" name="attachment[]" multiple="multiple">
					<label for="file-1"><i class="fas fa-file-alt"></i><span>Выбрано файлов: 0</span></label>
				</div>
				<div class="form-input">
				<!-- В data-sitekey="КЛЮЧ" вставляется публичный ключ от ReCAPTCHA -->
					<input type="submit" class="g-recaptcha" data-sitekey="sitekey" data-callback="onSubmit">
				</div>
			</form>
		</div>
	</div>
	<!-- Hidden popup-response from form -->
	<div id="popup-response" class="popup-response zoom-anim-dialog mfp-hide">
		<h1 class="response-title"></h1>
		<p class="response-text"></p>
	</div>
	<!-- End Hidden popup-response from form -->
	<script src='https://www.google.com/recaptcha/api.js'></script>
	<script src='js/app.min.js'></script>
</body>

Разберем 2 главные строчки кода:

<form class="form" id="form" action="libs/mail.php" method="post" enctype="multipart/form-data"></form>

Атрибут action указывает обработчик формы, к которому обращаются данные, после нажатия кнопки отправить.

Атрибут enctype с значением multipart/form-data требуется при отправке файлов через форму.

<input type="submit" class="g-recaptcha" data-sitekey="sitekey" data-callback="onSubmit">

В поле атрибута data-sitekey нужно указать публичный ключ ReCAPTCHA Google, а в поле атрибута data-callback указывается название функции отвечающей за проверку ReCAPTCHA'чей в файле js.

Ниже приведен html код кнопки отвечающую за выбор файлов:

<div class="form-input-file form-input">
	<input type="file" id="file-1" name="attachment[]" multiple="multiple">
	<label for="file-1"><i class="fas fa-file-alt"></i><span>Выбрано файлов: 0</span ></label>
</div>

Благодаря этому коду и стилям CSS получится красивая кнопка прикрепления файлов вместо стандартной.

Работает это так: с помощью CSS скрывается сам input, а label присвается атрибут for с значением id input'а. Таким образом нажимая на label, мы как бы нажимаем на input.

Пример кнопки: перейти

Ниже код файла mail.php. Вам необходимо будет вписать туда ваш секретный ключ от ReCAPTCHA Google. А так же указать: Host, Username, Password, setFrom, addAddress

<?
	function post_captcha($user_response) {
		$fields_string = '';
		$fields = array(
			'secret' => 'your secret key',
			'response' => $user_response
		);
		foreach($fields as $key=>$value)
		$fields_string .= $key . '=' . $value . '&';
		$fields_string = rtrim($fields_string, '&');
		$ch = curl_init();
		curl_setopt($ch, CURLOPT_URL, 'https://www.google.com/recaptcha/api/siteverify');
		curl_setopt($ch, CURLOPT_POST, count($fields));
		curl_setopt($ch, CURLOPT_POSTFIELDS, $fields_string);
		curl_setopt($ch, CURLOPT_RETURNTRANSFER, True);
		$result = curl_exec($ch);
		curl_close($ch);
		return json_decode($result, true);
	}
	$res = post_captcha($_POST['g-recaptcha-response']);
	if (!$res['success']) {
		$response = 'errorcaptcha';
	} else {
		$email = $_POST['Email'];
		$c = true;
		require 'phpmailer/PHPMailerAutoload.php';
		$mail = new PHPMailer;
		$mail->isSMTP();
		$mail->Host = ''; //Host, example smtp.beget.com
		$mail->SMTPAuth = true;
		$mail->Username = 'your mail'; // example mail@site.ru
		$mail->Password = 'password'; // email password
		$mail->SMTPSecure = 'ssl';
		$mail->Port = '465';
		$mail->CharSet = 'UTF-8';
		$mail->setFrom('from'); // example mail@site.ru
		$mail->addAddress('your mail'); // example mail@site.ru
		$mail->addReplyTo($email);
		foreach ($_FILES["attachment"]["name"] as $k => $v)
		{
			$mail->AddAttachment( $_FILES["attachment"]["tmp_name"][$k], $_FILES["attachment"]["name"][$k] );
		}
		$mail->isHTML(true);
		$mail->Subject = '[Mail-master] Обращение из формы обратной связи';
		foreach ( $_POST as $key => $value ) {
			if ( $key != "g-recaptcha-response" ) {
				$message .= "
				" . ( ($c = !$c) ? '<tr style="background-color: #f8f8f8;">':'<tr style="background-color: #f8f8f8;">' ) . "
					<td style='padding: 10px; border: #e9e9e9 1px solid;'><b>$key</b></td>
					<td style='padding: 10px; border: #e9e9e9 1px solid;'>$value</td>
				</tr>
				";
			}
		}
		$mail->Body = '<table style="width: 100%;">'.$message.'</table>';
		if( $mail->send() )
		{
			$response = 'success';
		}
		else
		{
			$response = 'error';
		}
	}
	die ($response);
?>

Ниже код файла app.js. Для работы необходим jQuery и Magnific Popup.

var response = {
	successTitle: 'Успешно',
	successIcon: '<i class="response-icon fas fa-check-circle"></i>',
	successText: 'Ваша заявка отправлена, ожидайте ответа',
	 
	errorcaptchaTitle: 'Вы не прошли проверку recaptcha',
	errorcaptchaIcon: '<i class="response-icon fas fa-times"></i>',
	errorcaptchaText: 'Обновите пожалуйста страницу и попробуйте еще раз',
	 
	errorTitle: 'Ошибка отправки заявки',
	errorIcon: '<i class="response-icon fas fa-times"></i>',
	errorText: 'Возможно у Вас плохая связь с интернетом'
}

// Выше настройка вывода сообщений

function onSubmit(token) {
	$.ajax({
		type: "POST",
		url: "libs/mail.php",
		data: new FormData($('#form')[0]),
		processData: false,
		contentType: false,
		success: function (res) {
			if (res == 'success') { // Если получен ответ
				$('.popup-response .response-title').html(response.successTitle)
				$('.popup-response .response-title').after(response.successIcon)
				$('.popup-response .response-text').html(response.successText)
			}
			if (res == 'errorcaptcha') { // Если не пройдена ReCAPTCHA
				$('.popup-response .response-title').html(response.errorcaptchaTitle)
				$('.popup-response .response-title').after(response.errorcaptchaIcon)
				$('.popup-response .response-text').html(response.errorcaptchaText)
			}
			if (res == 'error') { // Ошибка отправки
				$('.popup-response .response-title').html(response.errorTitle)
				$('.popup-response .response-title').after(response.errorIcon)
				$('.popup-response .response-text').html(response.errorText)
			}
		},
		error: function () { // Нет связи с файлом mail.php
			$('.popup-response .response-title').html(response.errorTitle)
			$('.popup-response .response-title').after(response.errorIcon)
			$('.popup-response .response-text').html(response.errorText)
		}
	})
	
	$(function () {
		$('.box-form').addClass('sending')
		$('input[type="submit"]').val('Отправляется')
		 
		setTimeout(function () {
			$('.box-form').removeClass('sending')
			$('input[type="submit"]').val('Отправить')
			 
			$.magnificPopup.open({
				items: { src: '#popup-response', },
				type: 'inline',
				fixedContentPos: false,
				fixedBgPos: true,
				overflowY: 'auto',
				closeBtnInside: true,
				preloader: false,
				midClick: true,
				removalDelay: 300,
				mainClass: 'my-mfp-zoom-in'
			})
		}, 3000)
			 
		setTimeout(function () {
			$.magnificPopup.close()
		}, 5000)
			 
		setTimeout(function () {
			$('.response-icon').remove()
			grecaptcha.reset()
			$('#form').trigger('reset')
			$('.form-input-file').find('label span').text('Выбрано файлов: 0')
		}, 6000)
	})
}

$(function () { // Функция расчета количества выбранных файлов или вывод названия файла, если выбран один
	$('input[type=file]').change(function (e) {
		if (this.files.length > 1) {
			$(this).parents('.form-input-file').find('label span').text('Выбрано файлов: ' + e.target.files.length)
		}
		else {
			$(this).parents('.form-input-file').find('label span').text('Выбранный файл: ' + e.target.files[0].name)
		}
	})
})

Стили смотрите в файле mail-master/sass/main.sass

Теперь у вас есть Ajax отправка сообщений с возможностью прикреплять сколько угодно вложений! Спасибо за внимание!

bag?

Oooops!

Если Вы нашли какую-то ошибку, неполадку, неверно что-то загрузилось, поплыло и т.д. Я буду вам очень благодарен, если вы сообщите мне об этом.

Пишите на мою почту mail@ingvarzharov.ru Спасибо!