Как получить адрес страницы с которой отправлена форма

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

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

Мой подход

Так как я, чаще всего, работаю с landing page не на конструкторах, то всегда имею возможность добавить неограниченное количество полей в форму с любым типом. В данном случае нам понадобится поле с типом "hidden".

<input class="some-class" type="hidden" name="url">

Далее в js-файле, где хранятся все кастомные скрипты пишу код, который получит текущий URL из адресной строки и помещаю его в значение value скрытого поля.

При помощи jQuery

$(function ($) {
 $('.some-class').val(window.location.href);
});

При помощи чистого javascript

document.addEventListener("DOMContentLoaded", () => { 
 let urlInput = document.querySelector('.some-class');
 urlInput.value = window.location.href;
});

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

Знаю, что многие уже в курсе как это реализовывать, но я буквально сегодня столкнулся с очередным вопросом на эту тему и решил быстренько оформить статью, раз спрос на этот контент существует. По аналогии, кстати, получают и UTM-метки, или как их еще называют: "реферальные хвосты".