Каждый владелец бизнеса и разработчик сталкивался с такой ситуацией: на сайте есть кнопки «Заказать звонок», «Получить консультацию», «Скачать прайс» или «Обсудить проект». Сделать под каждую свою форму обратной связи — значит обречь себя на адский труд по поддержке. А поставить одну общую форму на все случаи жизни — значит получать заявки с пометкой «Входная дверь» и гадать, что именно хотел клиент.
Но есть элегантное решение, которое позволяет оставить на сайте одну универсальную форму, но при этом видеть в каждой заявке точную причину обращения. Я расскажу, как это реализовать на примере простого JavaScript-кода.
Весь секрет — в передаче значения из клика по кнопке в скрытое поле формы. Звучит сложно, но на деле это буквально пара строк кода.
Что нам понадобится?
- Одна модальная форма обратной связи, которая висит в подвале сайта или вызывается как попап.
- Немного терпения и базовое понимание HTML.
Шаг 1: Добавляем «невидимого помощника» в форму
Первым делом залезаем в HTML-код нашей формы. Нам нужно добавить туда скрытое поле. Пользователь его не увидит, но именно оно унесет с собой на сервер ценную информацию.
Внутри тега <form> вставляем вот такую конструкцию:
html
<input type="hidden" name="btn_click_name" class="btn-click-name" value="">
Здесь btn_click_name — это имя параметра, которое придет к вам в письмо или CRM. А класс btn-click-name нужен, чтобы наш скрипт легко нашел это поле.
Шаг 2: Пишем «мозги» для кнопок
Теперь нам нужна функция, которая при клике на любую кнопку будет:
- Понимать, какая именно кнопка нажата.
- Записывать нужный текст в наше скрытое поле.
- Открывать форму.
Добавьте этот код на сайт, например, перед закрывающим тегом </body>:
javascript
<script>
function openModal(button) {
// Находим наше модальное окно (допустим, у него id="modal")
const modal = document.getElementById('modal');
// Ищем внутри модалки наш скрытый инпут по классу
const input = modal.querySelector('.btn-click-name');
// Берем текст из атрибута data-btn-name кнопки и записываем его в поле
input.value = button.dataset.btnName;
// Показываем модальное окно (тут логика вашего попапа)
modal.classList.remove('hidden');
}
</script>
Шаг 3: Оживляем кнопки на сайте
Теперь самый приятный момент. Идем на любую кнопку вашего сайта: будь то «Хочу скидку» в карточке товара или «Заказать звонок» в подвале. Добавляем к ней два маленьких атрибута:
html
<button onclick="openModal(this)" data-btn-name="Обсудить задачу" class="main-btn">
Обсудить задачу
</button>
Если кнопка представляет собой ссылку <a>, делаем так:
html
<a href="#" onclick="openModal(this); return false;" data-btn-name="Скачать прайс-лист" class="link">
Скачать прайс
</a>
Что здесь происходит?
- onclick="openModal(this)" — говорит браузеру: «Когда кликнут по мне, запусти функцию openModal и передай туда информацию обо мне».
- data-btn-name="..." — это и есть та самая метка. Вместо ... вы пишете тот текст, который хотите видеть в заявке.
Как это работает в реальной жизни?
Представьте: приходит пользователь на ваш сайт. Ему интересен раздел «Веб-разработка». Он нажимает на кнопку «Рассчитать проект». Открывается форма, он заполняет имя и телефон, отправляет заявку.
Вы получаете письмо: «Имя: Иван, Телефон: +7..., btn_click_name: Рассчитать проект». Вы сразу понимаете, какой именно сервис клиента заинтересовал. Маркетинговая ценность таких данных колоссальна: вы узнаете, какие офферы «залетают», а на какие никто не кликает.
И главное — вы не плодите десятки одинаковых попапов. Вся магия завязана на одной форме. Это легко в поддержке, быстро грузится и не бесит посетителей.
А что, если нужно больше, чем просто форма?
Понимание того, почему клиент нажал на кнопку — это первый шаг к системному бизнесу в интернете. Но гораздо важнее, чтобы ваш сайт в принципе был настроен на получение заявок, а не просто висел в интернете как красивая витрина.
И если вы хотите, чтобы ваш проект приносил не просто красивые отчеты «Кнопка нажата», а реальные деньги и продажи — обратите внимание на комплексный подход. Гораздо эффективнее, когда сайт изначально создается как инструмент продаж: с правильной структурой, продуманными форматами кнопок и встроенной аналитикой. Хорошо, когда есть команда, которая может взять на себя и разработку такой системы, и её последующее продвижение.
Например, на сайте https://artitron-web.ru/ вы можете найти примеры того, как строятся сайты, которые решают реальные задачи бизнеса, а не просто радуют глаз анимацией.
Вместо заключения
Этот метод — классика «серого кардинала» веб-разработки. Вы делаете сайт удобнее для себя (одна форма вместо 20) и информативнее для бизнеса (понимание потребностей клиента). Внедрите его сегодня, и уже завтра вы сможете точно сказать, какая фраза на кнопке приносит вам больше всего клиентов.
