Что нужно включить в серверную часть PHP для формы обратной связи (JS, Ajax)?

Question

[SpeakLive91]

Добрый день!
На сайте fooug2hd.plp7.ru -лендинге есть у них своя Ajax форма (вы там её сразу заметите - имя, телефон и отправить заявку).
Ну так вот, я хотел бы себе такую же форму сделать. Что имеется на этом сайте - js(ниже), html(код формы). Недостающий элемент - обработчик PHP.

Кусман JS функции формы обратной связи (валидация данных) - https://pastebin.com/UeXtHCre
В этом куске кода есть Ajax запрос на отправку данных из формы на серверную части:

$.ajax("/app/c", {
type: "POST",
data: JSON.stringify(v),
dataType: "json",
contentType: "application/json",
processData: !1,
success: y,
error: y
}

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

Answer 1

[edward_freedom]

Этого будет достаточно, чтобы решить твой вопрос
php.net/manual/ru/function.mail.php
php.net/manual/ru/reserved.variables.post.php

Comments

[SpeakLive91]

До этого я итак додумался, но в этом коде я не понял с каких переменных нужно брать данные?

[edward_freedom]

SpeakLive91, вроде отсюда

$data = json_decode(file_get_contents('php://input'));

Answer 2

[sorokinfil]

На стороне клиента данные преобразуются в Json-объект и отправляются по адресу что_за_домен/app/c.
Значит, на стороне сервера должен находиться обработчик, который вызывается при обращении к этому адресу. Если слишком сложно, то просто создаём ajax.php и кидаем в корень сайта. Обращаемся из js так:
$.ajax("/ajax.php", { //...

А вот примерный код в ajax.php

<?
	// Email владельца лендинга, на который придёт форма
	$admin_email = '[e-mail]';
	
	// Сразу объявляем массив ответа клиенту
	$response = [];
	$response['status'] = 'during';
	
	// Если передан необходимый Json-объект
	if (isset ($_POST['data']))
	{
		// Преобразуем Json-объект в привычный массив
		$data = json_decode ($_POST['data']);
		
		// Проверяем, есть ли в массиве нужные нам значения
		if
		(
			(isset ($data['name'])) && ($data['name']) &&
			(isset ($data['email'])) && ($data['email']) &&
			(isset ($data['phone'])) && ($data['phone'])
		)
		{
			// Сбор и отправка письма владельцу лендинга (переменная с email'ом задана в начале листинга)
			// Рекомендую установить и использовать PHPMailer вместо стандартной функции mail
			$mail_subject = "Форма обратной связи";
			$mail_message = "Имя: " . $data['name'] . "\r\n";
			$mail_message .= "Email: " . $data['email'] . "\r\n";
			$mail_message .= "Телефон: " . $data['phone'];
			mail ($admin_email, $mail_subject, $mail_message);
			
			// Установка статуса ответа ок и текста для того, чтобы вывести сообщение
			$response['status'] = 'ok';
			$response['message'] = 'Спасибо! Ваша заявка принята.';
		}
		// Если не все поля формы были заполнены или не все дошли до сервера
		else
		{
			$response['status'] = 'error_data_is_not_complete';
		}
	}
	// Если ничего не пришло в переменной $_POST['data']
	else
	{
		$response['status'] = 'error_no_data';
	}
	
	// Вывод (отправка обратно) Json-представления ответа, который легко можно распарсить на стороне клиента
	// Если что-то пошло не так, то в объекте ответа будет status с ошибкой, иначе будет status: ok.
	echo (json_encode ($response));
	exit;
?>

На клиенте строчку с
success: y,
замените на

success: function (data)
{
	try
	{
		// Пробуем распарсить Json-ответ от сервера
		data = $.parseJSON (data);
		if (data['status'] == 'ok')
			alert (data['message']);
		else
			alert (data['status']);
	}
	catch (e)
	{
		// Если ответ не Json, то через alert должна вывестись ошибка, которую вернул php
		alert (data);
	}
},

Как только убедитесь, что ответ приходит и всё ок, возвращайте обратно на клиентской части
success: y,
Чувствую, что y - это какая-то шаблонная функция.

Я код накидал, но не тестировал. Могут встречаться опечатки.

Comments

[SpeakLive91]

сделал всё как вы сказали, но при попытке отправить данные с формы вот что вылазит

[SpeakLive91]

Ругань идёт на функцию из success, где вы говорили заменить

[sorokinfil]

Попробуйте убрать
data = $.parseJSON (data);
из клиентского кода. Похоже, что оно автоматом преобразуется.

[SpeakLive91]

Вот что теперь получилось

[SpeakLive91]

При положительном результате должно выводится это

[sorokinfil]

Хм, теперь какая-то хрень с обработчиком на php.
В данный момент при положительном результате должно вывестись "Спасибо! Ваша заявка принята." через стандартный алерт. Как только убеждаемся, что выводятся "Спасибо! ...", меняем success обратно на код ниже, чтобы выводилась уже форма с Вашим дизайном.
success: y,
На сервере переменная $_POST['data'] почему-то не существует, хотя должна. Сейчас попробую запустить у себя код.

[SpeakLive91]

Филипп Сорокин, не срабатывает

[sorokinfil]

SpeakLive91, в вашем коде отправляется объект "v". Что в него пишется? Также success и error ссылаются на одну функцию "y", что странно. Можно код этой функции тоже?

[SpeakLive91]

Вот код всей функции формы - https://pastebin.com/UeXtHCre
А вот кусок кода - https://pastebin.com/s9eUDWMt где используются и функция v, и функция y

[sorokinfil]

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

$.ajax
({
	url: '/ajax.php',
	data:
	{
		name: 'Ваня',
		email: '[e-mail]',
		phone: '8 800 5553535'
	},
	success: function (data)
	{
		try
		{
			data = $.parseJSON (data);
			if (data['status'] == 'ok')
				alert (data['message']);
			else
			  alert (data['status']);
		}
		catch (e)
		{
			alert (data);
		}
	}
});

А на стороне сервера в ajax.php сделайте так:

<?
// Email владельца лендинга, на который придёт форма
$admin_email = '[e-mail]';

// Сразу объявляем массив ответа клиенту
$response = [];
$response['status'] = 'during';
$data = $_GET;

// Проверяем, есть ли в массиве нужные нам значения
if
(
(isset ($data['name'])) && ($data['name']) &&
(isset ($data['email'])) && ($data['email']) &&
(isset ($data['phone'])) && ($data['phone'])
)
{
	// Сбор и отправка письма владельцу лендинга (переменная с email'ом задана в начале листинга)
	// Рекомендую установить и использовать PHPMailer вместо стандартной функции mail
	$mail_subject = "Форма обратной связи";
	$mail_message = "Имя: " . $data['name'] . "\r\n";
	$mail_message .= "Email: " . $data['email'] . "\r\n";
	$mail_message .= "Телефон: " . $data['phone'];
	mail ($admin_email, $mail_subject, $mail_message);

	// Установка статуса ответа ок и текста для того, чтобы вывести сообщение
	$response['status'] = 'ok';
	$response['message'] = 'Спасибо! Ваша заявка принята.';
}
// Если не все поля формы были заполнены или не все дошли до сервера
else
{
	$response['status'] = 'error_data_is_not_complete';
}

// Вывод (отправка обратно) Json-представления ответа, который легко можно распарсить на стороне клиента
// Если что-то пошло не так, то в объекте ответа будет status с ошибкой, иначе будет status: ok.
echo (json_encode ($response));
exit;
?>

Я заменил POST запрос на GET и убрал преобразование в Json при отправке на сервер. Проверьте, что всплывает "Спасибо..." через стандартный алерт, потом отпишите.

[SpeakyLlve91]

Филипп Сорокин, Вот что получилось!

[SpeakyLlve91]

Филипп Сорокин, по-моему мы не те данные смотрим. Я попробовал сделать var_dump($data) и вот какие данные показались

[sorokinfil]

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

Клиентская часть.

1. Поменяйте

data:
  {
    name: 'Ваня',
    email: '[e-mail]',
    phone: '8 800 5553535'
  },

на
data: v,

2. Поменяйте

success: function (data)
  {
    try
    {
      data = $.parseJSON (data);
      if (data['status'] == 'ok')
        alert (data['message']);
      else
        alert (data['status']);
    }
    catch (e)
    {
      alert (data);
    }
  }

на
success: y

Серверная часть

1. В строчке поменяйте эмейл в кавычках
$admin_email = '[e-mail]';
на тот эмейл, на который должны приходить письма.

2. В следующем куске кода придётся описать все те переменные, которые приходят с объектом v.

// Проверяем, есть ли в массиве нужные нам значения
if
(
(isset ($data['name'])) && ($data['name']) &&
(isset ($data['email'])) && ($data['email']) &&
(isset ($data['phone'])) && ($data['phone'])
)
{
	// Сбор и отправка письма владельцу лендинга (переменная с email'ом задана в начале листинга)
	// Рекомендую установить и использовать PHPMailer вместо стандартной функции mail
	$mail_subject = "Форма обратной связи";
	$mail_message = "Имя: " . $data['name'] . "\r\n";
	$mail_message .= "Email: " . $data['email'] . "\r\n";
	$mail_message .= "Телефон: " . $data['phone'];
	mail ($admin_email, $mail_subject, $mail_message);

Например, на вашем скриншоте на сайте не вижу поля с эмейлом. Значит, везде, где $data['email'], стираем. Если возникнут какие-то ошибки, то, вероятно, поля, передаваемые с объектом v, могут иметь другие имена, отличные от тех, что в скрипте. Это вам нужно проконтролировать самостоятельно. Справитесь?

[SpeakyLlve91]

Филипп Сорокин, поменял всё что вы сказали, но теперь в консоли вообще значения полей не показываются мной заполненные.

[sorokinfil]

Не очень ясно, зачем им быть в консоли, и где происходит вывод в консоль тоже не ясно. У меня с абстрактным Ваней всё окей, прикладываю скриншот с var_dump ($data). Если какая-то жесть приходит на ajax.php, значит, этот шаблонный скрипт и отправляет жесть в любом случае. Главное, что достаются данные и отправляется эмейл. Я не уверен, но, кажется, дело в том, что этот скрипт ожидает, что php обработчик вернёт все те же самые данные, которые только что были отправлены. Если так, то на сервере попробуйте в конце, где
echo (json_encode ($response));
написать
echo (json_encode ($data));
И ещё. Пробовал найти по этому скрипту https://pastebin.com/raw/UeXtHCre фразы "Спасибо", "в ближайшее время" и т.д., как на вашем скриншоте с дизайном. Ничего подобного там нет, только титры с ошибками. Похоже, что нужно к массиву $data до того, как он будет преобразован через json_encode, добавить элемент с ответом. Какой - не знаю, но наверняка тот, который ожидает скрипт. Если совсем туго будет, то просто переопределите функцию y, чтобы она вызывала нужный экран, т.к., ещё раз повторюсь, на стороне сервера всё выглядит ок.

[SpeakyLlve91]

Филипп Сорокин, Да уж, странный какой-то шаблон, не спорю. Это шаблон из https://platformalp.ru/ - у них конструктор лендингов.

[sorokinfil]

SpeakyLlve91, у них должна быть документация или готовый обработчик, который настроен на приём форм с ajax.