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

Question

Evgeniy @Zheleznov

#/ Front / Back / DevOps /#

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

Добрый день всем

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

<form action="" autocomplete="off" method="post">

<input placeholder="Введите ваше имя" name="name" type="text">
<input placeholder="Введите ваш телефон" name="phone" type="text">

<!--  Скрытое поле в которое помещаем значение тега h1 -->
<input hidden id="zagolovok_str" name="zagolovok" type="text"  val=""> 
		
<button type="submit">Заказать звонок</button>
		
</form>

В скрытое поле zagolovok , добавляем h1

const zagolovokH1 = $('h1').text(); // получили со страницы
$('#zagolovok_str').val(zagolovokH1); // добавили

В console.log проверял, поле содержит заголовок

форма обрабатывается через ajax так

$(document).on("click", '.form input[type="submit"], .form button[type="submit"]', function(e) {
    console.log('form submit');
    e.preventDefault();
    if (!isValid($(this).closest("form"))) {
        console.log('Есть ошибки');
        showMsg('Пожалуйста заполните все поля.', false);
        return false;
    } else {
        console.log('Ошибок нет');
        var data = {};
		var f = $(this).closest('form');
		data.name = f.find('[name=name]').val();
		data.tel = f.find('[name=tel]').val() ? f.find('[name=tel]').val() : f.find('[name=phone]').val();
		data.email = f.find('[name=email]').val();
////////////////////////// выделил место
		data.title = f.find('[name=zagolovok]').val();
		console.log('Передался заголовок страницы: ' + data.title);
//////////////////////////
		data.url = window.location.href;
        let processData = true;
        let contentType = 'application/x-www-form-urlencoded'
        if($('#order-form').length > 0) {
            data = new FormData(document.getElementById("order-form"));
            data.append("title", "Расчет_стоимости_заказов");
            processData = false;
            contentType = false;
        }

		$.ajax({
				url: 'https://site.ru/mail',
				type: 'POST',
				data: data,
                cache: false,
                contentType: contentType,
                processData: processData,
				success: function (json) {
					console.log(json);
					showMsg('Наш специалист свяжется с вами в ближайшее время!', true);
					jQuery.fancybox.close()
					f.trigger('reset');
				}
			});
    }
        
});

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

в php скрипт отправки

<?php 

require_once('inc/PHPMailer/PHPMailer.php');
require_once('inc/PHPMailer/Exception.php');
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;

$files = false;
$subject =  'Новая заявка в форме обратной связи'; 
    
$message .= 'Имя: <b>' . $_POST['name'] . '</b><br>';
$message .= 'Телефон: <b>' . $_POST['tel'] . '</b><br>';
$message .= 'Заголовок: <b>' . $_POST['zagolovok'] . '</b><br>';
 

$headers  = "Content-type: text/html; charset=utf8 \r\n";


$email = new PHPMailer();
$email->setFrom('order@mail.ru', 'Тема');
$email->Subject   = $subject;
$email->Body      = $message;
$email->addAddress('order@mail.ru');
$email->isHTML(true);
$email->CharSet = 'UTF-8';
$email->Encoding = 'base64';
if(!empty($_FILES)) {
	foreach($_FILES['userfile']['name'] as $index => $fileName) {
		if($fileName) {
			$extension = explode('.', $fileName);
			$target_path = 'tmp/' . md5(microtime(true)) . '.' . $extension[1]; 
			move_uploaded_file($_FILES['userfile']['tmp_name'][$index], $target_path);
			$email->AddAttachment($target_path, $fileName);
		}
	}
}

if ($email->Send()) {
	echo json_encode('success');
} else {
	echo json_encode('error');
}

?>

Подскажите пожалуйста в чем может быть проблема?