Создание формы обратной связи

создание формы обратной связи Привет, друзья. Сегодня хочу рассказать вам о том, как сейчас я создаю формы обратной связи для получения контактных данных пользователя.

Статья давно на сайте, но пришло время актуализировать ее, ведь с момента написания прошло более 5 лет, что-то устарело, за некоторые моменты откровенно стыдно, а что-то не так доходчиво разжевано.

С этого момента обновления статей буду делать максимально полными и подробными, чтобы вам не приходилось ничего искать на других ресурсах. Это статья, изначально, была ориентирована на форму с перебросом на страницу благодарности после нажатия кнопки «отправить».

Мы реализуем как такой вариант, так и возможность вывода сообщения об успешной отправке без перезагрузки страницы.

Создание формы обратной связи – HTML разметка

Обычно? мне хватает двух-трех полей, так как нет смысла требовать от посетителя большего и раздражать его. Продажа, обычно, случается после разговора с консультантом или менеджером, а значит все детали можно узнать по телефону.

Больше на эту тему можно почитать в статье с вредными советами, которые помогут испортить ваш landing page.

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

В большинстве случаев, для создания формы обратной связи я использую такую разметку:

<form class="contact-form" id="contact-form_1" method="POST" enctype="multipart/form-data">
  <p class="contact-form__title">Оставьте заявку на расчет стоимости</p>
  <p class="contact-form__description"></p>
  <div class="contact-form__input-wrapper">
    <input name="name" type="text" class="contact-form__input contact-form__input_name" placeholder="Введите ваше имя">
    <div class="contact-form__error contact-form__error_name"></div>
  </div>
            
  <div class="contact-form__input-wrapper">
    <input name="tel" type="tel" class="contact-form__input contact-form__input_tel" placeholder="Введите ваш телефон">
    <div class="contact-form__error contact-form__error_tel"></div>
  </div>

  <div class="contact-form__input-wrapper"> 
     <input name="email" type="email" class="contact-form__input contact-form__input_email" placeholder="Введите ваш email">
     <div class="contact-form__error contact-form__error_email"></div>
  </div>

  <button class="contact-form__button" type="submit"> Узнать стоимость </button>
</form>

Пример формы обратной связи

Знаю, что заголовок формы не согласован с кнопкой, но лень переделывать все скриншоты. Суть же не в этом совсем. Правда?

Давайте, кратко объясню, что тут к чему. В теге 'form' я размещаю два параграфа. В одном будет заголовок формы, а второй послужит для вывода сообщений и уведомлений, возникающих при отправке формы. Например, о том, что сообщение успешно отправлено в варианте, когда все происходит без перезагрузки.

Под каждым полем создаю 'div' для вывода уведомлений об ошибках при валидации '.contact-form__error'.

Параметр 'enctype' в теге 'form' нужен для того, чтобы отправлять файл. Пока можете его не писать, но, если планируете сделать так, чтобы пользователь мог прикрепить вложение к письму, то нужно оставить все как есть.

Далее, для простоты работы с js воспользуемся jQuery. Подключаем его, как обычно, перед всеми скриптами, которые зависят от него. Я, обычно, делаю это ближе к закрывающему тегу 'body', чтобы основной контент грузился быстрее.

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="/mail/js/mail.js"></script>

Скрипт 'mail.js' - это файл формы, который помогает в отправке и обработке ответа сервера. О нем чуть позже. Сейчас нужно познакомить вас со структурой всех файлов, отвечающих за отправку.

Структура проекта

Скрипт для отправки формы на почту

Здесь нас интересует папка 'mail'. Именно тут и происходит вся магия.

Обратите внимание, что она лежит в корне сайта.

В первую очередь давайте разберем файл 'config.php'. Тут задаются основные настройки формы.

Основные настройки формы

<?
	// *** Настройка обязательности полей, в случае если они присутствуют в вашей форме

	// Имя
	const NAMEISREQUIRED = true;
	const MSGSNAMEERROR = "Поле обязательно для заполнения";

	// Телефон
	const TELISREQUIRED = false;
	const MSGSTELERROR = "Поле обязательно для заполнения";

	// Email
	const EMAILISREQUIRED = false;
	const MSGSEMAILERROR = "Поле обязательно для заполнения";
	const MSGSEMAILINCORRECT = "Некорректный почтовый адрес";

	// Текстовое поле
	const TEXTISREQUIRED = false;
	const MSGSTEXTERROR = "Поле обязательно для заполнения";

	// Файл
	const FILEISREQUIRED = false;
	const MSGSFILEERROR = "Поле обязательно для заполнения";

	// Соглашение
	const AGGREMENTISREQUIRED = false;
	const MSGSAGGREMENTERROR = "Поле обязательно для заполнения"; 

	// Сообщение об успешной отправке
	const MSGSSUCCESS = "Сообщение успешно отправлено";

	// *** SMTP *** //

		require_once($_SERVER['DOCUMENT_ROOT'] . '/mail/phpmailer/smtp.php');
		const HOST = 'ssl://smtp.yandex.ru';
		const LOGIN = 'sender@yandex.ru';
		const PASS = 'senderPass';
		const PORT = '465';

	// *** /SMTP *** //

        // Почта с которой будет приходить письмо
	const SENDER = 'sender@yandex.ru';
	
	// Почта на которую будет приходить письмо
	const CATCHER = 'catcher@mail.ru';
	
	// Тема письма
	const SUBJECT = 'Заявка с сайта';
	
	// Кодировка
  const CHARSET = 'UTF-8';

В принципе я объясняю комментариями в коде что и зачем, константы имеют интуитивно понятные имена, но давайте для новичков объясню все еще подробнее.

В начале идут константы, которые отвечают за проверку обязательно ли поле или нет и какое сообщение будет выводится в случае ошибки. Например, константы для имени

const NAMEISREQUIRED = true;
const MSGSNAMEERROR = "Поле обязательно для заполнения";
  • 'const NAMEISREQUIRED = true;' - означает, что поле обязательно для заполнения. Если в вашем случае его можно не заполнять, то поставьте 'false'.
  • 'const MSGSNAMEERROR = "Поле обязательно для заполнения";' - это сообщение, которое будет выводится пол полем, в случае если заполнение его обязательно, но по каким-то причинам пользователь этого не сделал.

То есть если имя обязательно, но не было заполнено, появиться сообщение 'Поле обязательно для заполнения'. Вот так:
Валидация формы

Далее идет константа с сообщением, которое увидит пользователь при успешной отправке, давайте, пока, реализуем такой функционал, а потом с перебросом на страницу благодарности.

 // Сообщение об успешной отправке
 const MSGSSUCCESS = "Сообщение успешно отправлено";

Можете вывести любое сообщение, которое подходит в вашем случае.

Теперь самое главное. Если прошлые вещи можно было оставить по умолчанию, то теперь нужно настроить отправку на почту. Так как в скрипте используется SMTP протокол передачи почты, то нужно узнать несколько параметров у вашего почтового сервиса. Это:

  • Адрес сервера - ( константа HOST )
  • Логин (адрес электронной почты) - ( константа LOGIN )
  • Пароль - ( константа PASS )
  • Порт - ( константа PORT )

пароль и логин у каждого свои, а 'HOST' и 'PORT' для популярных почтовых сервисов я приведу в списке.

Сервис HOST PORT
Яндекс ssl://smtp.yandex.ru 465
Gmail smtp.gmail.com 465
Mail.ru ssl://smtp.mail.ru 465

Будьте внимательны с этими параметрами, так как тут легко сделать ошибку и ничего приходить не будет.

С остальным все проще, объяснять по сути и нечего:

// Почта с которой будет приходить письмо
const SENDER = 'sender@yandex.ru';
	
// Почта на которую будет приходить письмо
const CATCHER = 'catcher@mail.ru';
	
// Тема письма
const SUBJECT = 'Заявка с сайта';
	
// Кодировка
const CHARSET = 'UTF-8';

Обратите внимание, что почта, указанная в 'const SENDER' должна совпадать с почтой, которую указали в 'LOGIN'.

Валидация формы перед отправкой

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

Все вам понадобится дополнительная валидация, все это реализовано в файле 'valid.php'.

<?php
$msgs = [];
	if (isset($_POST['name']) ) {
        if(empty($_POST['name']) && NAMEISREQUIRED) {
            $msgs['name'] = MSGSNAMEERROR;
        } else {
            if (!empty($_POST['name'])) {
                $name = "<b>Имя: </b>" . trim(strip_tags($_POST['name'])) . "<br>";
            }
            
        }
    }

    if (isset($_POST['tel']) ) {
        if(empty($_POST['tel']) && TELISREQUIRED) {
            $msgs['tel'] = MSGSTELERROR;
        } else {
            if (!empty($_POST['tel'])) {
                $tel = "<b>Телефон: </b> " . trim(strip_tags($_POST['tel'])) . "<br>";
            }
        }
    }

    if (isset($_POST['email']) ) {
        if(empty($_POST['email']) && EMAILISREQUIRED) {
            $msgs['email'] = MSGSEMAILERROR;
        } else {
            if(!empty($_POST['email'])) {
                if (filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
                    $email = "<b>Почта: </b> " . trim(strip_tags($_POST['email'])) . "<br>";
                } else {
                    $msgs['email'] = MSGSEMAILINCORRECT;
                }
            }
        } 
    }
    
    if((empty($_POST['email']) && empty($_POST['tel'])) && (!EMAILISREQUIRED && !TELISREQUIRED)) {
        $msgs['attantion'] = 'Заполните хотя бы одно контактное поле для связи с вами';
    }

    if ($msgs) {
      echo json_encode($msgs);
      die;
    } else {
      $msgs['success'] = MSGSSUCCESS;
    }

Еще, я подумал, что было бы полезно сделать так, чтобы скрипт не отправлял данные, если не заполнено хотя бы одно из контактных полей. То есть телефон или email. Вот так я это реализовал.

if((empty($_POST['email']) && empty($_POST['tel'])) && (!EMAILISREQUIRED && !TELISREQUIRED)) {
 $msgs['attantion'] = 'Заполните хотя бы одно контактное поле для связи с вами';
}

Если вам это не нужно или у вас какой-то другой способ связи, поменяйте под свои нужды или удалите. Вот как это выглядит сейчас:

Форма обратной связи для лендинга

Отправка формы

Отправка формы осуществляется в файле mail.php, там нечего менять и настраивать. Оставьте как есть, если плохо разбираетесь в php. Если соберетесь добавить свои поля и, по какой-то причине не захотите скачать файл, предложенный мной ниже, где мы будем добавлять обещанный ранее функционал, то в тело письма, после валидации, необходимо передать переменные с данными полученными из формы. Делается это в 34 строке.

<?php

// mb_internal_encoding("UTF-8");
// ini_set('error_reporting', E_ALL);
// ini_set('display_errors', 1);
// ini_set('display_startup_errors', 1);

	use PHPMailer\PHPMailer\PHPMailer;
	if ($_SERVER["REQUEST_METHOD"] == "POST") {

		require_once($_SERVER['DOCUMENT_ROOT'] . '/mail/phpmailer/phpmailer.php');
		require_once($_SERVER['DOCUMENT_ROOT'] . '/mail/php/config.php');
		require_once($_SERVER['DOCUMENT_ROOT'] . '/mail/php/valid.php');

		if(defined('HOST') && HOST != '') {
			$mail = new PHPMailer;
			$mail->isSMTP();
			$mail->Host = HOST;
			$mail->SMTPAuth = true;
			$mail->Username = LOGIN;
			$mail->Password = PASS;
			$mail->SMTPSecure = 'ssl';
			$mail->Port = PORT;
			$mail->AddReplyTo(SENDER);
		} else {
			$mail = new PHPMailer;
		}

		$mail->setFrom(SENDER);
    $mail->addAddress(CATCHER);
    $mail->CharSet = CHARSET;
    $mail->isHTML(true);
		$mail->Subject = SUBJECT;
		$mail->Body = "$name $tel $email"; 
		if(!$mail->send()) {
    } else {
      echo json_encode($msgs);
    }
	
	} else{
          header ("Location: /"); // главная страница вашего лендинга
	}

Но еще раз напомню, что чуть ниже мы будем добавлять в форму и другие поля, а там изменяться и все эти файлы. Файлы phpmailer - это вспомогательная библиотека для правильной отправки данных на почту. Там ничего трогать нельзя.

Также, в отправке формы и валидацие участвует файл 'mail.js'. Именно он помогает реализовать отправку без перезагрузки страницы. Тут тоже ничего менять не нужно, если вы не планируете использовать страницу благодарности, а вам достаточно того, что уведомление об успешной отправке выводится в форме.

(function ($) {
$(".contact-form").submit(function (event) {
event.preventDefault();

	// Сохраняем в переменную form id текущей формы, на которой сработало событие submit
	let form = $('#' + $(this).attr('id'))[0];

	// Сохраняем в переменные дивы, в которые будем выводить текст ошибки
	let inpNameError = $(this).find('.contact-form__error_name');
	let inpEmailError = $(this).find('.contact-form__error_email');
	let inpTelError = $(this).find('.contact-form__error_tel');

	// Сохраняем в переменную див, в который будем выводить сообщение формы
	let formDescription = $(this).find('.contact-form__description');

	let fd = new FormData(form);
	$.ajax({
		url: "/mail/php/mail.php",
		type: "POST",
		data: fd,
		processData: false,
		contentType: false,
		success: function success(res) {
			let respond = $.parseJSON(res);

			if (respond.name) {
			 inpNameError.text(respond.name);
			} else {
			 inpNameError.text('');
			}

			if (respond.tel) {
				inpTelError.text(respond.tel);
			} else {
				inpTelError.text('');
			}

			if (respond.email) {
				inpEmailError.text(respond.email);
			} else {
				inpEmailError.text('');
			}

			if (respond.attantion) {
				formDescription.text(respond.attantion).css('color', '#e84a66').fadeIn();
			} else {
				formDescription.text('');
			}

			if (respond.success) {
				formDescription.text(respond.success).fadeIn();
				setTimeout(() => {
					formDescription.fadeOut("slow");
				}, 4000);
				setTimeout(() => {
					formDescription.text('');
				}, 5000);
			}
		},
	});
});
}(jQuery));

На этом, в принципе, с основной формой можно заканчивать. Дальше будут только «навороты».

Успешная отправка формы

Если что-то упустил или что-то непонятно - пишите в комментариях, попробую объяснить подробнее или дополнить статью.

Форма обратной связи с основными полями

Размер: 1.4 Мб

Стили специально не добавлял в статью, так как статья и так очень большая. В исходнике все есть.

Переброс на страницу благодарности

Как и говорил в начале статьи данная форма может работать как без перезагрузки, так и с перебросом на страницу благодарности. Давайте реализуем это. Нам понадобится немного подправить код в файле 'mail.js' и сама страница благодарности. На скриншоте со структурой проекта вы видели файл 'thank-you-page.php' - это и есть страница благодарности, которую я буду использовать. Как вы могли заметить, он лежит в корне. У вас она может быть где угодно, главное правильно указать к ней путь.

Итак, открываем файл 'mail.js', находим участок кода:

if (respond.success) {
   formDescription.text(respond.success).fadeIn();
   setTimeout(() => {
	formDescription.fadeOut("slow");
   }, 4000);
   setTimeout(() => {
	formDescription.text('');
   }, 5000);
}

И заменяем на:

if (respond.success) {
  window.location.replace("/thank-you-page.php?status=success"); 
}

Внимательный читатель мог заметить, что мы передаем GET-параметр, когда указываем страницу для перехода и это не случайно, вы же не хотите, чтобы случайные посетители вашей страницы благодарности появлялись в статистике, если у вас будут настроены цели на посещение этой страницы, поэтому мы реализуем простейший механизм для переброса на главную, если они зашли на страницу без этого параметра в адресной строке. Конечно, шанс что пользователь все равно попадет сюда есть, но он гораздо меньше.

Делать мы это будем при помощи php, поэтому убедитесь, что страница благодарности у вас сохранена именно в этом формате.

Если у вас уже страница в 'html', просто измените расширение. Это никак не повлияет на работоспособность.

Итак, давайте как обычно начнем с разметки. В принципе, это обычная html страница, которую вы вольны оформлять как душе угодно, но, чтобы сработал наш механизм, при котором случайному человеку не будет показываться страничка нам нужно обернуть ее в небольшой php-код.

<? if ($_GET['status'] == 'success') { ?>
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>Страница благодарности формы обратной связи</title>
	<link rel="stylesheet" href="./css/style.css">
	<!-- <meta http-equiv="Refresh" content="4; URL=/"> -->
</head>

<body>
	<div class="thank-you-page">

		<h1 class="thank-you-page__title">Страница благодарности</h1>
		<p class="thank-you-page__descriptor">Оформляйте как вам будет угодно</p>
		<a class="thank-you-page__button" href="/">Вернуться на главную</a>

	</div>

</body>

</html>

<? } else {
    header ("Location: /"); // главная страница вашего лендинга
} ?>

В первой строке мы отлавливаем наш GET-параметр, и, если он совпадает с заданным, то показываем страницу, если нет, то перебрасываем пользователя на главную.

Кроме того, я закомментировал строку, при помощи которой можно автоматически возвращать посетителя на главную через заданный промежуток времени.

<meta http-equiv="Refresh" content="4; URL=/">

То есть это строка говорит, что через 4 секунды после открытия этой страницы, перекинь автоматически посетителя на главную страницу. За это время, человек успеет прочитать ваше сообщение и его благополучно вернет на главную.

Если вам важен такой функционал, то раскомментируйте ее и настройте приемлемое время.

Маска ввода номера телефона

Конечно же вам может понадобиться маска для ввода номера телефона. Я уже делал пару статей на эту тему, поэтому не буду слишком подробно описывать как это делается, просто покажу код.

Для маски ввода номера телефона нам понадобиться сторонний скрипт. Я предлагаю взять 'jQuery Mask Plugin' из статьи, ссылку на которую дал выше.

Подключаем после jQuery. Я делаю это так:

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- jQuery Mask Plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>

<script src="/mail/js/mail.js"></script>

Теперь необходимо инициализировать скрипт.

<!-- jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- jQuery Mask Plugin -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script

<script src="/mail/js/mail.js"></script>
<script>
 $(function() {
  $('.contact-form__input_tel').mask('+3(000)000-00-00');
 });
</script>

После этого маска успешно появилась в поле телефона:

Маска ввода номера телефона

С этим, думаю, более-менее понятно. Теперь давайте потихоньку добавлять поля для ввода сообщения, чекбокс с принятием пользовательского соглашения и файла.

Совсем подробно расписывать не буду, просто покажу что и куда добавляю, а в конце дам ссылку на исходник. Если какое-то из полей вам не понадобится, то просто не используйте его в разметке, а в файле 'config' - установите значение 'false' там, где задаем обязательность заполнения.

Область для ввода сообщения

Конечно же многим из вас может понадобится поле для ввода сообщения. Для того, чтобы получить его мы воспользуемся тегом 'textarea'. Добавьте следующую разметку в форму:

<div class="contact-form__input-wrapper">
 <textarea name="text" class="contact-form__input contact-form__text" placeholder="Введите ваше сообщение"></textarea>
 <div class="contact-form__error contact-form__error_text"></div>
</div>

Стили я уже добавил в 'style.css', так что теперь наша форма выглядит так:

Добавление текстового поля

Теперь необходимо передать данные в файл валидации 'valid.php' и проверить все ли в порядке. Как уже говорил выше, у нас простейший случай с проверкой не пустое ли поле. Прежде чем перейти к реализации валидации давайте предположим, что поле для ввода текста обязательно для заполнения.

Для этого перейдем в файл 'config.php' и укажем 'true' в константе, отвечающей за это текстовое поле.

	// Текстовое поле
	const TEXTISREQUIRED = true;
	const MSGSTEXTERROR = "Поле обязательно для заполнения";

Теперь наше текстовое поле стало обязательно для заполнения. В файле 'valid.php', по аналогии с другими полями напишем такую проверку:

if (isset($_POST['text']) ) {
        if(empty($_POST['text']) && TEXTISREQUIRED) {
            $msgs['text'] = MSGSTEXTERROR;
        } else {
            if (!empty($_POST['text'])) {
                $text = "<b>Сообщение: </b> " . trim(strip_tags($_POST['text'])) . "<br>";
            }
        }
    }

Обратите внимание на 'text' в проверке POST запроса. Этот то самое значение, которое указывали в параметре 'name' у тега 'textarea'.

<textarea name="text" class="contact-form__input contact-form__text" placeholder="Введите ваше сообщение"></textarea>

В файле 'mail.js' сохраним 'div' в который будем выводить ошибку, если валидатор ее вернет для текстового поля:

// Сохраняем в переменные дивы, в которые будем выводить текст ошибки
let inpNameError = $(this).find('.contact-form__error_name');
let inpEmailError = $(this).find('.contact-form__error_email');
let inpTelError = $(this).find('.contact-form__error_tel');
let inpTextError = $(this).find('.contact-form__error_text');

А затем, ниже, напишем проверку:

if (respond.text) {
 inpTextError.text(respond.text);
} else {
 inpTelError.text('');
}

По аналогии вы можете добавлять любые другие поля. Но прежде нужно передать нашу переменную '$text' в тело письма. Делается это в файле 'mail.php' в 34 строке, той самой, о которой я уже упоминал выше.

$mail->Body = "$name $tel $email $text";

Теперь, если все сделали правильно, в письме будут приходить данные и из этого поля.

Проверка работоспособности формы

Еще раз повторюсь, если добавление этого поля показалось слишком сложным, то в конце статьи будет исходник, где можно просто в форме удалить лишнее инпуты, и все будет прекрасно работать.

Checkbox

Настало время добавить 'checkbox' с соглашением на обработку персональных данных. Вы можете делать и другие чекбоксы или радиокнопки. Принцип один и тот же для всех полей.

Создаем разметку в форме, определяем в 'config.php' обязательно ли поле, проверяем в валидаторе и формируем ошибку если она есть и выводим при помощи mail.js ее обратно в форму. Если нет, то передаем в mail.php и отправляем.

Итак, checkbox. Добавим разметку:

<div class="contact-form__input-wrapper">
<input type="checkbox" name="agreement" class="contact-form__input contact-form__checkbox" id="agreement" checked>
<label for="agreement" class="contact-form__checkbox-label">Я принимаю условия <a href="#">пользовательского соглашения</a></label>
<div class="contact-form__error contact-form__error_agreement"></div>
</div>

Не забудьте указать ссылку на соглашение. Стили уже добавлены в исходник.

Форма с чекбоксом

Идем в файл 'config.php' и делаем поле обязательным.

// Соглашение
const AGGREMENTISREQUIRED = true;
const MSGSAGGREMENTERROR = "Примите пользовательское соглашение";

Далее открываем файл 'valid.php' и добавляем следующий код:

    if(empty($_POST['agreement']) && AGGREMENTISREQUIRED) {
        $msgs['agreement'] = MSGSAGGREMENTERROR;
    } else {
        if (!empty($_POST['agreement'])) {
            $agreement = "<b>Соглашение: </b> Пользовательское соглашение принято " . "<br>";
        }
    }

Теперь переходим в файл 'mail.js' добавляем 'div' в который будет выводится ошибка, если она есть, и обработчик ошибки:

// Сохраняем в переменные дивы, в которые будем выводить текст ошибки
let inpNameError = $(this).find('.contact-form__error_name');
let inpEmailError = $(this).find('.contact-form__error_email');
let inpTelError = $(this).find('.contact-form__error_tel');
let inpTextError = $(this).find('.contact-form__error_text');

let inpAgreementError = $(this).find('.contact-form__error_agreement');

Обработчик ошибки:

if (respond.agreement) {
  inpAgreementError.text(respond.agreement);
} else {
  inpAgreementError.text('');
}

Осталось в тему письма добавить переменную с текстом о принятии соглашения.

$mail->Body = "$name $tel $email $text $agreement"; 

В принципе, если поле обязательно модно было этого и не делать, но пусть лучше будет.

Добавление файла

Многим может понадобиться возможность отправки файла, давайте реализуем и этот функционал. Я уже подготовил все, вам остается только добавить разметку и выбрать обязательное ли поле для заполнения.

Разметка:

<div class="contact-form__input-wrapper">
  <input class="contact-form__input contact-form__file" type="file" name="files[]">
  <div class="contact-form__error contact-form__error_file"></div>
</div>

Настройки в файле 'config.php':

	// Файл
	const FILEISREQUIRED = false;
	const MSGSFILEERROR = "&#x26a0; Забыли добавить файл";

Вот так теперь выглядит форма.

Рабочая форма для сайта

А вот так выглядят пришедшие данные.

Данные из формы пришедшие на почту

Вот такая большая статья о создании формы обратной связи получилась.

Форма обратной связи с дополнительными полями

Размер: 1.4 Мб

Постарался ответить на многие вопросы, которые вы задавали в комментариях и подать материал так, чтобы у вас было как можно меньше проблем, чтобы сделать другие поля по аналогии.

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

Для того, чтобы очистить форму обратной связи после успешной отправки, нужно добавить несколько строк кода в файл "mail.js". Давайте сделаем это. В первую очередь сохраним в переменную класс формы на которой сработало событие "submit".

Чуть ниже, там где получали "id", добавим переменную "formClass" и передадим класс формы:

.
.
let form = $('#' + $(this).attr('id'))[0];

// Сохраняем в переменную класс формы
let formClass = $(this).attr('class');

// Сохраняем в переменные дивы, в которые будем выводить текст ошибки
let inpNameError = $(this).find('.contact-form__error_name');
.
.

А когда срабатывает событие success, при успешном ответе сервера, добавим саму очистку полей. Заменим это:

if (respond.success) {
  formDescription.text(respond.success).fadeIn();
  setTimeout(() => {
    formDescription.fadeOut("slow");
  }, 4000);
  setTimeout(() => {
    formDescription.text('');
  }, 5000);
}

На это:

if (respond.success) {
  formDescription.text(respond.success).fadeIn();
  $('.'+formClass).find('input').val('');
  $('.'+formClass).find('input').prop('checked', false);
  $('.'+formClass).find('textarea').val('');
    setTimeout(() => {
      formDescription.fadeOut("slow");
    }, 4000);
    setTimeout(() => {
      formDescription.text('');
    }, 5000);
}

Теперь, при успешной отправке, очистятся чекбоксы, обычные поля и textarea.

Автоматическое скачивание файла

Многие просили, чтобы я рассказал как в эту форму добавить возможность скачивания файла после отправки данных формы. Несмотря на то, что статья уже есть на блоге, просили добавить и в эту статью такую возможность. Давайте сделаем это.

Будем отталкиваться от того, что файл, который автоматически будет скачиваться после отправки формы, лежит в папке "files", которая, в свою очередь находится в корне вашего проекта.

Теперь, после успешной отправки нам необходимо добавить "Window.location" со ссылкой на расположение файла. Я предпочитаю делать это с небольшой задержкой, чтобы пользователь успел понять, что произошло, а именно увидеть сообщение об успешной отправке. Можно, конечно, и прелоадер "прикрутить", но это уже дело вкуса.

Напоминаю, что сигналом о том, что сообщение успешно отправлено у нас является строка пришедшая в файле "mail.js". Вот тут:

if (respond.success) {
//.
// some code
//.
}

Сюда и будем добавлять ссылку на файл. Поставим задержку в 1 секунду при помощи "setTimeout".

if (respond.success) {
 setTimeout(() => {
  window.location = '/files/test-file.docx';
 }, 1000);
}

Если вы работаете со страницей благодарности, то можно на нее поместить тот же код, например, просто в футере.

<script>
 window.onload = function() {
    setTimeout(() => {
     window.location = '/files/test-file.docx';
    }, 1000);
 };
</script>

Важно

Для корректной работы потребуется:

  • PHP > 7.
  • Сам сервер
  • Jquery 3 версии
  • Если тестируете на хостинге, то должен быть не тестовый период, не бесплатный домен и у хостера не отключена функция mail. Во всех этих случая хостер может накладывать ограничение на работоспособность под предлогом борьбы со спамом. Кроме того, некоторые хостеры не позволяют отправлять сообщения с почтовых адресов не привязанных к сайту.
  • Перед тем как задать вопрос, посмотрите нет ли ошибок в консоли и попробуйте вывести ошибки php.
  • Если не приходят сообщения, проверьте не попали ли письма в спам.
  • Если вам лень разбираться и самостоятельно делать форму, то рекомендую обратить внимание на конструкторы форм обратной связи

Как вам такой формат статей? Нужно ли делать настолько большие?

Похожие публикации

377 комментариев

  1. giorgi

    а можно форму под мобильную версию адаптировать?

  2. андрей

    подскажите пожалуйста почему не приходят письма. пишет что отправлено но не ничего нет.

  3. Артём

    Во первых автору спасибо, огромное человеческое спасибо.
    Во вторых вопрос... Хочу уже до конца въехать в эту тему, и для меня не понятно... за что отвечает - "id="applicationEmail"" И почему - "id="zayavkaName"" а не "id="applicationName""
    За что этот id отвечает

  4. artur

    Дима, всё работает и даже русские буквы передает нормуль. Но вот вопрос как сделать такое: надо чтобы пользователь имел возможность в форме прикрепить 1 или более файлов. В html-файле я ставлю: , а как прописать это в php-файле, чтобы на почту приходили не только заполненные текстовые поля, но и вложенные (прикрепленные) файлы?

  5. artur

    Не прикрепилось, в хтмл-файле:

    <input type="file" multiple name="files" class="file">
  6. Надежда

    Добрый день, Дмитрий!
    Может быть, Вы сможете мне помочь? ранее форма обратной связи работала как часы, но с сегодняшнего дня заявки падать перестали, т.е. код остался тот же, рабочий, уведомление об отправке заявки всплывает, а письма не доходят... Может быть, Вы сталкивались с такой проблемой?

  7. Эдуард

    Здравствуйте!
    Не приходят почему-то письма после отправки через форму.
    Вот код, который у меня в html файле:

    <span style="position: absolute; top: 290px; left: 230px;">
    <form id="application" action=" application.php" method="POST" name=" application ">
       <input name="name" id="zayavkaName" maxlength="20" placeholder="Введите ваше имя" required />
       <input name="email" type="email" id="applicationEmail" maxlength="20" placeholder="Введите вашу почту" required />
       <input name="telephone" type="Tel" id="applicationTelephone" maxlength="20" placeholder="Введите ваш телефон" required/>
       <button style="background: #FFCC00;" class="applicationButton" type="submit" form="application">Отправить</button>
    </form>
    </span>
    

    А вот код в php файле:

    <?php 
    
    $sendto   = "enb1963@mail.ru"; // почта, на которую будет приходить письмо
    $username = $_POST['name'];   // сохраняем в переменную данные полученные из поля c именем
    $usertel = $_POST['telephone']; // сохраняем в переменную данные полученные из поля c телефонным номером
    $usermail = $_POST['email']; // сохраняем в переменную данные полученные из поля c адресом электронной почты
     
    // Формирование заголовка письма
    $subject  = "Новое сообщение";
    $headers  = "From: " . strip_tags($usermail) . "\r\n";
    $headers .= "Reply-To: ". strip_tags($usermail) . "\r\n";
    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: text/html;charset=utf-8 \r\n";
     
    // Формирование тела письма
    $msg  = "<html><body style='font-family:Arial,sans-serif;'>";
    $msg .= "<h2 style='font-weight:bold;border-bottom:1px dotted #ccc;'>Cообщение с сайта</h2>\r\n";
    $msg .= "<p><strong>От кого:</strong> ".$username."</p>\r\n";
    $msg .= "<p><strong>Почта:</strong> ".$usermail."</p>\r\n";
    $msg .= "<p><strong>Сайт:</strong> ".$usertel."</p>\r\n";
    $msg .= "</body></html>";
     
    if($_POST)
    {
    $to = "enb1963@mail.ru";
    $from = 'enb1963@mail.ru';
    $subject = "Ваше сообщение"; 
     
    $message = 'Имя: '.$_POST['name'].'; Телефон: '.$_POST['telephone'].'; Email: '.$_POST['email'].';';
     
    $headers  = "Content-type: text/html; charset=UTF-8 \r\n"; 
    $headers .= "From: <enb1963@mail.ru>\r\n"; 
     
    $result = mail($to, $subject, $message, $headers);
    
    if(@mail($sendto, $subject, $msg, $headers)) {
        echo "<center>Ваше сообщение отправлено!</center>";
    } else {
        echo "<center>Ошибка! Ваше сообщение НЕ отправлено!</center>";
    }
    
    }
     
    ?>
    
  8. Антонина

    Подскажите пожалуйста, где меняется надпись - "необходимо заполнить это поле" которая всплывает если не заполнил поля. Мне нужно перевести на англ. язык, а в файле я не нашла где это меняется

  9. Александр

    /*Стили полей для ввода*/
    #applicationName, #applicationEmail, #applicationTelephone {
    width: 100%;
    height: 73px;
    background: none;
    margin-top: 25px;
    border: 1px solid #fff;
    border-radius: 40px;
    text-align: center;
    color: #fff;
    font-size: 24px;
    }
    Добавляю сюда margin-bottom, но расстояние между полями не уменьшается, а увеличить можно, в чем может быть проблема?

  10. rodimir

    3дравстBуйтe Yважаемый кoллeга
    Наш сайт предлагает Вам следующие услуги:

    1: Рассылка 10 000 сообщений на форумы с рекламой Вашего сайта или Ваших услуг - 1 тыс. рублей
    2: Размещение более 2000 входящих ссылок для Одного Вашего сайта, на различных профилях и топиках - 500 рублей
    3: Оптовое размещение входящих ссылок (до 8 сайтов) - 1000 рублей

    Также
    Mы поможеM ВаM, Быcтрo и Выгодно продаTь автоMобиль или Дом и участок земли

    Пoдробности Ha сaйте: PROPISUN.RU

  11. Андрей

    В форме предусмотрен только 1 адрес на который отправляются заявки, а как сделать если нужно на 2 адреса или на 3?
    Пробовал через запятую и точку с запятой - не отправляются.

  12. Руслан

    При нажатии на кнопку "получить прайс" Страница перезагружается и возникает надпись: Не удается найти DNS-адрес сервера....
    Что делать? Я так понял дело в хостинге? У меня nic.ru чего там надо включить?

  13. Александр

    А я с кодом не стал заморачиваться. На ucalc форму себе сделал простую.

  14. Сергей

    Воспользовался примером статьи, но палка о двух концах - если ставлю в "формирование тела письма" $message, то приодят письма с приведенным форматированием, но заполненны все поля, крома текста сообщения; если ставлю $msg, то приходят письма с текстом сообщения, но без остальных полей и форматирования.

    Код php:

    <?php
    require('email_config.php');

    // sender information
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];
    $error = "";

    $subject = "Новое сообщение";
    $headers = "From: " . strip_tags($email) . "\r\n";
    $headers .= "Reply-To: ". strip_tags($email) . "\r\n";
    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: text/html;charset=utf-8 \r\n";
    // Формирование тела письма
    $message = "";
    $message .= "Cообщение с сайта\r\n";
    $message .= "От кого: ".$name."\r\n";
    $message .= "Почта: ".$email."\r\n";
    $message .= "Сообщение: ".$message."\r\n";
    $message .= "";

    // check sender information
    $pattern = "^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$^";
    if(!preg_match_all($pattern, $email, $out)) {
    $error = $invalid_email; // for invalid email
    }
    if(!$email) {
    $error = $invalid_email; // for empty email field
    }
    if(!$message) {
    $error = $invalid_message; // for empty message field
    }
    if (!$name) {
    $error = $invalid_name; // for empty name field
    }

    if (!$error){

    // sending email
    $sent = mail($to_email,$subject,$message,$headers);

    if ($sent) {
    // if message sent successfully
    echo "Ваше сообщение отправлено!";
    } else {
    // error message
    echo $sending_error;
    }
    } else {
    echo $error; // error message
    }
    ?>

    Подскажите - где ошибка?

    1. Сергей

      Сорри, на самом деле все прекрасно работает в этом виде. Осталось поколдовать над сообщением о доставке, т.к. в моем случае оно просто открывается на весь экран, а если использовать предложенную автором строку с перезагрузкой через 4 секунды, то после загрузки сайта каждые 4 сек. сайт просто перезагружается. Попробую либо с выводом модального окна с этим сообщением, либо со скриптами.

  15. Андрей

    Спасибо большое! Все работает, круто!

  16. Алексей

    Как защитить данную форму от спама? Ведь заспамить ее очень просто

    1. dimadv7

      Например, вот так))

  17. Вячеслав

    Здраствуйте, подскажите пожалуйста, можно ли как то прикрепить к форме в теле письма от куда отправляется заказ, точнее с какой странички адреса, каждая страничка это один товар. К примеру чтоб в тексте письма приходила ссылка от куда был сделан заказ

    1. Виктор

      Вячелав, доброго дня. Если решили эту задачу, пожалуйста посоветуйте, что предпринять. Спасибо

  18. Денис

    А можно что бы пол человека указывался?

  19. DAniil12312

    Письма не приходят на майл почту, но приходят на гугл почту, помогите, что сделать чтобы на майл приходили письма?
    В папке спам нет ничего тоже

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Создание формы обратной связи</title>
    <meta http-equiv="Refresh" content="4; URL=http://ten-miass.ru/Dan/calc/forma/"> 
    </head>
    <body>
    
    <?php 
    
    
    
    $sendto   = 'pany@mail.ru'; // почта, на которую будет приходить письмо
    $username = $_POST['name'];   // сохраняем в переменную данные полученные из поля c именем
    $usertel = $_POST['telephone']; // сохраняем в переменную данные полученные из поля c телефонным номером
    $usermail = $_POST['email']; // сохраняем в переменную данные полученные из поля c адресом электронной почты
    
    // Формирование заголовка письма
    $subject  = "Новое сообщение";
    $headers  = "From: " . strip_tags($usermail) . "\r\n";
    $headers .= "Reply-To: ". strip_tags($usermail) . "\r\n";
    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: text/html;charset=utf-8 \r\n";
    
    // Формирование тела письма
    $msg  = "<html><body style='font-family:Arial,sans-serif;'>";
    $msg .= "<h2 style='font-weight:bold;border-bottom:1px dotted #ccc;'>Заявка на просчёт со скидкой! Калькулятор</h2>\r\n";
    $msg .= "<p><strong></strong> ".$username."</p>\r\n";
    $msg .= "<p><strong></strong> ".$usermail."</p>\r\n";
    $msg .= "<p><strong>Телефон:</strong> ".$usertel."</p>\r\n";
    $msg .= "</body></html>";
    
    // отправка сообщения
    if(@mail($sendto, $subject, $msg, $headers)) {
    	echo "<center><img src='images/spasibo.png' width='100%'></center>";
    } else {
    	echo "<center><img src='images/ne-otpravleno.png' width='100%'></center>";
    }
    
    ?>
    
    </body>
    </html>
    
    1. dimadv7

      Пользователи mail.ru - должны страдать. А если серьезно то воспользуйтесь Phpmailer

  20. Виктор

    Доброго времени суток. Сделал сайт на joomla для сайта недвижимости: casacosta.ru - при этом использовал готовый компонент JUX. Проблема следующая, когда клиент пишет со страницы интересующего обьекта, приходят только данные: имя, меил, текст сообщения. А нужно. что бы к письму автоматически линьковался url страницы, с которой пишет клиент. Разработчик к сожалению не собирается дорабатывать эту функцию. Насколько сложна задача и возможно ли ее выполнить добавив какую то строку в код почтового обработчика? Заранее большое человеческое спасибо

  21. Виталик

    Подскажите пожалуйста, как форму сделать на всю ширину и высоту экрана, для мобильных устройств? Ширину получается увеличить, высоту нет(

    1. dimadv7

      Попробуйте так:

      display:flex;
      height: 100%;
      
  22. Виталий

    Привет всем! Подскажите мне пожалуйста.
    Не меня форму в коде ничего не менял, но не отправляет.
    Поместил на платный хостинг и домен. __https://webhost1.ru
    Куда копать?

    1. dimadv7

      Что пишет форма, отправлено или нет? Не __mail.ru ли используете?

  23. Илья

    Приветствую!
    Как сделать так, чтоб при отправке формы, появлялся алерт с одним текстом, а в случае неотправки - с другим?

    1. dimadv7

      воспользоваться формой без перезагрузки страницы. И в случае успешной отправки, вызвать соответствующий алерт. Примерно такой формой. А вызывать вот тут:

      success: function (data) {
        //вызов
      }
      
  24. Дима

    Добрый день. А как сделать что бы в одну строку шли строки телефон и отправить. эмейл строчку удалить, это понятно. подправить надо в хтмл или цсс?

  25. Дима

    У вас ошибка в строчке
    Должно быть так:
    [html]
    а написано:
    [html]

  26. Дима

    так... заново

    а должно быть так

    иначе стили "Имя" стороной обойдут

  27. Дима

    да блин!! короче
    в хтмл строчка написано id="zayavkaName" а должно быть application name

    1. dimadv7

      Да, да. Спасибо. понял вас и поправил. Тесть на внимательность))

  28. Руслан

    Здравствуйте! Проблема заключается в том, что сообщение отправляется только со второго раза)) То есть без обновления страницы index.html

  29. Sasha

    [css] ::-moz-placeholder  для чего это и надо ли его обозначать как то в html?

    1. dimadv7

      Стили у placeholdera в браузере Mozilla (подсказка, что вводить в поле)

  30. Елена

    Доброго времени суток!! Скопировала Ваш код, теперь при нажатии на кнопку, перекидывает на application.php и всё на этом(( что может быть не так?? Я php не знаю воооообще. Но без этой формы не обойтись.
    У меня немного больше полей для ввода, это может играть какую-то роль?

     <form id="cooperation-form" class="form ajax-form" action=" application.php" method="POST" name=" application ">
        	<button class=" button close-form"></button>
      <h2 class="no-line">Начать сотрудничество</h2>
                <div class="line-box">
                    <div class="field-col">
                        <div class="field field-cooperationform-name required">
    <label class="field-name" for="cooperationform-name">Имя</label>
    <input type="text" id="cooperationform-name" class="form-control" name="name" required valid>
    <div class="field-error"></div>
    </div>                </div>
                    <div class="field-col">
                        <div class="field field-cooperationform-company required">
    <label class="field-name" for="cooperationform-company">Компания</label>
    <input type="text" id="cooperationform-company" class="form-control" name="CooperationForm[company]" required valid>
    <div class="field-error"></div>
    </div>                </div>
                    <div class="field-col">
                        <div class="field field-cooperationform-phone required">
    <label class="field-name" for="cooperationform-phone">Телефон</label>
    <input type="text" id="cooperationform-phone" class="form-control" name="telephone" required valid>
    
    <div class="field-error"></div>
    </div>                </div>
                    <div class="field-col">
                        <div class="field field-cooperationform-email required">
    <label class="field-name" for="cooperationform-email">Email</label>
    <input type="text" id="cooperationform-email" class="form-control" name="email" required pattern="^(?:[-a-z\d\+\*\/\?!{}`~_%&'=^$#]+(?:\.[-a-z\d\+\*\/\?!{}`~_%&'=^$#]+)*)@(?:[-a-z\d_]+\.){1,60}[a-z]{2,6}$" valid>
    <div class="field-error"></div>
    </div>                </div>
                    <div class="special-field field-cooperationform-subject">
    <label class="field-name" for="cooperationform-subject">Тема</label>
    <input type="text" id="cooperationform-subject" class="form-control" name="CooperationForm[subject]">
    
    <div class="field-error"></div>
    </div>                <div class="field field-cooperationform-message required">
    <label class="field-name" for="cooperationform-message">Сообщение</label>
    <textarea id="cooperationform-message" class="form-control" name="CooperationForm[message]" rows="6" cols="10" required></textarea>
    
    <div class="field-error"></div>
    </div>            </div>
    
                <button type="submit" class="btn full-width-mob rght">Отправить</button>
                <div class="result-message"></div>
    
                </form>
    
    <?php 
     
    $sendto   = "shayanskaya.bel@gmail.com"; // почта, на которую будет приходить письмо
    $username = $_POST['name'];   // сохраняем в переменную данные полученные из поля c именем
    $usertel = $_POST['telephone']; // сохраняем в переменную данные полученные из поля c телефонным номером
    $usermail = $_POST['email']; // сохраняем в переменную данные полученные из поля c адресом электронной почты
     
    // Формирование заголовка письма
    $subject  = "Новое сообщение";
    $headers  = "From: " . strip_tags($usermail) . "\r\n";
    $headers .= "Reply-To: ". strip_tags($usermail) . "\r\n";
    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: text/html;charset=utf-8 \r\n";
     
    // Формирование тела письма
    $msg  = "<html><body style='font-family:Arial,sans-serif;'>";
    $msg .= "<h2 style='font-weight:bold;border-bottom:1px dotted #ccc;'>Cообщение с сайта</h2>\r\n";
    $msg .= "<p><strong>От кого:</strong> ".$username."</p>\r\n";
    $msg .= "<p><strong>Почта:</strong> ".$usermail."</p>\r\n";
    $msg .= "<p><strong>Сайт:</strong> ".$usertel."</p>\r\n";
    $msg .= "</body></html>";
     
    // отправка сообщения
    if(@mail($sendto, $subject, $msg, $headers)) {
        echo "<center><img src='images/spasibo.png'></center>";
    } else {
        echo "<center><img src='images/ne-tpravleno.png'></center>";
    } 
    ?>
    

    Собственно у Вас php скопировала.. Помогите пожалуйста

    1. dimadv7

      Елена, включите вывод ошибок. Скорее всего где-то они есть. В самом начале файла application.php, вот тут добавьте следующий код:

      <?php 
      
      ini_set('error_reporting', E_ALL);
      ini_set('display_errors', 1);
      ini_set('display_startup_errors', 1);
      
      $sendto   = "shayanskaya.bel@gmail.com"; // почта, на которую будет приходить письмо
      

      Это должно вывести все ошибки и предупреждения, которые возникают в вашем случае. По тексту ошибок, загуглив их, можно определить в чем дело.

  31. Елена

    dimadv7, попробовала включить вывод ошибок, ничего не показывает((

    1. dimadv7

      А путь к файлу application.php правильно прописан?

    2. Елена

      dimadv7, да, правильно.. На него осуществляется переход, появляется код файла application.php.
      Тут предположили, что не настроен apache ..Может такое быть?

    3. dimadv7

      Да, если сам код отображается, то конечно может быть. К хостеру нужно обратиться и спросить.

  32. Иван

    При отправке формы выходит текст с php в блокнтоте, картинка не выводится

    1. dimadv7

      Проверьте работает ли вообще php на сервере.

  33. Роман

    Большое спасибо за форму!!!! Отличная статья, все разложено по полочкам. Заработало с первого раза. Удачи в будущих проектах

    1. dimadv7

      Спасибо за отзыв и теплые слова)

  34. Денис

    Здравствуйте!
    Поставил Вашу форму, но там есть ограничение какое-то, на количество символов, что можно ввести в форму "Введите ваш E-mail". Максимально длинный вводится: moya.pocht@gmail.com - а это всего 20 символов. На сегодняшний день - это очень мало, да и нет смысла в таком ограничении, нужно раза в 3 больше иногда.
    Как-то можно устранить проблему?

    1. Денис

      Вопрос снят.
      Поправил значение в строке: " "

      А вы обещали еще в 2015 это поправить :-)

  35. Владимир

    Здравствуйте! Огромная благодарность за форму обратной связи. Все работает прекрасно но почему то на почту приходят вместо русских букв значки вопросительный знак в ромба. Проверено на укр нет и джмаил. В кодировке ставлю utf-8 и без результата. Строка $headers .= "Content-Type: text/html;charset=utf-8 \r\n"; присутствует.
    Благодарю за ответ и помощь!

    1. dimadv7

      Владимир, здравствуйте, сохраните и все файлы непосредственно в utf-8 и должно быть все ок.

    2. Владимир

      dimadv7, Спасибо, помогло!

    3. dimadv7

      Владимир, отлично)

  36. Александр

    Подскажите плиз как настроить отправку сообщений с формы, если сайт расположен на локальном сервере. Использую Open Server. Спасибо.

    1. dimadv7

      Сообщения складываются в одну из папок сервера в виде текстового файла. Не помню точно какую, в документации точно должно быть об этом.

    2. Адександр

      dimadv7, Если Вы отвечали на мой вопрос, то суть вопроса была не в этом. Папку я и так знаю. Мне нужно чтобы письма на почту приходили.

    3. dimadv7

      Александр, ясно. Тогда я не в курсе, но там же есть возможность настроить smtp отправку, вы пробовали?

    4. Александр

      dimadv7, Пробовал в настройках Open Server настроить отправку через SMTP. Не помогло. Письма с формы не приходят.

    5. dimadv7

      Тогда я не в курсе, лучше у них на сайте и спросить. Если разберетесь в чем была проблема, напишите как решили.

  37. Игнат

    Спасибо за урок. Но на почту ничего не приходит.. Нашел сервис (formfor.site) через который можно получить ссылку и просто добавить в html. При это улетает и в мессенджеры, очень удобно.

    1. dimadv7

      Игнат, да. А те, кто не хочет платить за сервисы, делают сами, и все прекрасно приходит. А связь с мессенджером, и даже, с CRM, например, с битрикс24, все это есть на блоге. Только платить не нужно. Вообще, похоже просто на спамный комментарий, чтобы пропиарить сервис...

  38. Юрий

    Отличная форма получилась, хоть и простая но по внешнему виду красивая. Решил попробовать поизменять ее и неплохо получается :) Но все-таки, знаний моих хватает только цвета поменять да поля добавить))) До этого лишь на uCalc через визуалку делал, в кнопочки и поля тыкал.

  39. Сергей

    Добрый вечер !
    Форма отлично работает, за это отдельное спасибо !
    Прошу помочь, требуется, чтобы она отправляла письма сразу на 2 адреса, как это реализовать ?
    Заранее спасибо

    1. dimadv7

      Сергей, здравствуйте, попробуйте вызвать еще раз функцию mail и передать параметр со вторым адресом.

  40. Сергей

    Большое спасибо за наглядный урок! Подскажите пожалуйста, а каким образом можно прикрутить данный функционал на сайт, созданный на Joomla? Заранее спасибо!

    1. dimadv7

      Здравствуйте, вообще не имеет значения, на какой CMS сайт. По аналогии все и делайте, главное в корень папку с файлами поместите.

      А что, плагины на Joomla не устраивают?

  41. Диляра

    Дмитрий, здравствуйте! можно узнать , я делаю лэндинг через Тильду и хочу поставить форму обратной связи (телефон,имя) , но не знаю куда они будут падать .. что мне для этого использовать ? помогите пожалуйста ))

    1. dimadv7

      Диляра, у тильды же должны быть свои формы в конструкторе. Если там есть админка, то в админке поискать нужно, а так, в любом случае еще и на почту приходить должны. Напишите лучше в техподдержку Тильды, они подскажут точнее.

  42. Дмитрий

    Большое спасибо за урок. Но у меня почему-то появляется ошибка в файле mail.js. Редактор brackets выдает - Parsing error: Unexpected token form. Ругается на эту строчку let form = $('#' + $(this).attr('id'))[0]; но думаю, что не в ней проблема.

  43. Дмитрий

    Дмитрий, здравствуйте! Подсажите, а как сделать так, чтоб форма полностью очищалась от данных во время отправки и выдаче сообщения об успешной отправке данных? Это б уменьшило количество повторных отправок. Спасибо.

    1. dimadv7

      Дмитрий, здравствуйте, на днях добавлю код в статью. для очистки формы.

    2. dimadv7

      Дмитрий, готово, добавил код в статью.

  44. Вячеслав

    Здравствуйте. Установил вроди все как нужно, но при нажатии на кнопку отправить ничего не происходит. Об ошибке сообщение появляется, когда не заполнено ни имя ни почта, но если все заполнено, ничего не происходит. В чем может быть проблема?

    1. dimadv7

      Вячеслав, откройте инструменты разработчика в браузере (f12) проверьте консоль, есть ли там ошибки при отправке. Убедитесь, что php > 7 версии, а jquery > 3. Также у вас должен быть не тестовый период хостинга, а тариф должен быть оплачен, так как могут быть ограничения на стороне хостера при бесплатном тарифе. Если ошибок нет, и все требования, описанные вше, выполнены, то нужно обратиться к хостеру с вопросом.

  45. Алексей

    Добрый день!
    А как вызывать эту форму в модальном окне при клике на кнопку?

    1. dimadv7

      Алексей, очень обескураживающий вопрос. А как вы пробовали? Что не получилось? В чем сложности возникли? Какие ошибки в консоли появились? Как пытались их решить?

    2. dimadv7

      Если говорим по существу, то модальное окно это обычный div, например с классом modal. помещаем в него форму и в стилях скрываем, посредством visibility, opacity и position. Далее при помощи onclick в js обрабатываем событие клика по интересующей вас кнопки и добавляем классу модального окна еще один класс modal_active. У modal_active меняем visibility, opacity и position. Вуаля, модальное окно готово.

  46. wip

    А как устойчива форма к спам атакам?

    1. dimadv7

      wip, ох, я не эксперт по безопасности, базовые проверки сделал, а там, можно за 10 минут рекаптчу подключить, в случае чего, или сделать скрытое поле, которое должно быть пустым и, в случае, если оно заполниться спамом не отправлять форму.

      Можно отправку запускать по событию клика, а не по submit. Насколько я понимаю, спам-боты кликать не умеют.

  47. Егор

    Добрый день! Сообщения на почту приходят, но нет вложенного файла. Подскажите пожалуйста в чем может быть проблема?

    1. dimadv7

      Егор, у поля отвечающее за вложение, в атрибут name передано files[] ?

  48. Владимир

    Добрый день.
    Подскажите следующее.
    Мне дали ссылку вебхука и попросили добавить ее в момент отправки формы.
    Разработчик сайта морозится и отписывается что это не реально.
    Нашел файлы где происходит заполнение формы и отправка на email.
    Что нужно добавить, что бы отправлялись данные в CRM по средством вебхук?

    1. dimadv7

      Владимир, здравствуйте. На самом деле я не работал с webhooks никогда, поэтому не могу помочь в этом вопросе.

  49. Роман

    Доброго времени суток.
    Спасибо за хорошую статью и весьма полезную форму.
    Появилась проблемка. На одной странице нужно разместить две формы обратной связи. Раскидал разметку, запихал формы по модалкам, дописал нужные мне инпуты и .... сообщение из первой формы приходит прекрасно, а из второй нет. Как побороть?

    1. dimadv7

      Роман, доброе утро. Укажите разный id у форм.

    2. Роман

      dimadv7, спасибо. Это я поленился да и вечером устал уже сильно и написал за пять минут до т ого, как таки разобрался )) Перечитал внимательно комментарии в js )))
      Но вот чего не могу побороть, так это выведения сообщения при успешной отправке и очистку формы. Вроде уже не один раз все по шагам повторил - а оно не желает работать и все. "сообщение отправлено" не появляется и форма не очищается после submit.
      Я так понимаю, что первоначального исходника Вы не выкладывали или уже заменили его, а в текущем архиве уже прописан переход на страничку благодарности. Что менять в mail.js для перехода в статье описано - вернул к тому, что менялось..... и все равно не работает. :( Что и где я мог пропустить?

    3. dimadv7

      да нет, там же 2 исходника, в статье. Второй без переброса на страницу благодарности. Загляните в консоль, нет ли там ошибок и посмотрите эту статью.

    4. Роман

      dimadv7, скачал все и все исходники одинаковые. С перебросом на страницу благодарности. В обоих архивах в mail.js указано if (respond.success) {
      window.location.replace("/thank-you-page.php?status=success")
      А страница с формой должна быть именно php или должна работать и в html ?

    5. dimadv7

      В архиве forma-v2.zip, в файле mail.js без переброса. Там только условия что скрыть, что показать. Форма может находиться как в php-файле, так и в html.

  50. Евгений

    Подскажите что нужно сделать что бы форма отправлялась из модального окна?

    1. dimadv7

      Здравствуйте, Евгений. В смысле как? Как вы уже пробовали, что не получилось, с чем возникли сложности? Как пытались решить их? Дайте больше информации.

Добавить комментарий