Форма обратной связи на сайте: как сделать и настроить форму обратной связи — примеры для WordPress, HTML и Битрикс

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

За свежими мануалами, гайдами, кейсами и мнениями экспертов заглядывайте в Телеграм-канал Партнеркин, мы ежедневно публикуем полезные материалы для арбитражников и манимейкеров.

Как запустить форму обратной связи на HTML и PHP?

Этот вариант — базовая классика для простых и легких сайтов. Выделяется надежностью и простотой разработки без привлечения дополнительных инструментов или конструкторов. Для создания формы потребуется только текстовый редактор для кода и готовый сайт на хостинге с поддержкой PHP.

Начните с подготовки фронтенда, то есть визуальной части формы, для этого используется HTML и тег form. Внутри этого тега c помощью тега-абзаца p необходимо разместить поля для ввода и кнопку отправки данных. Короткое поле для ввода текста в одну строку размещается тегом input, крупное поле для длинных сообщений устанавливается тегом textarea, а для кнопки используют тег button. Также можно использовать тег label, чтобы разместить подписи рядом со строкой ввода.

Вот, как выглядит простой код формы обратной связи, его нужно поместить в файл index.html:

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Форма обратной связи</title>

</head>

<body>

    <h2>Напишите нам</h2>

    <!-- Начало формы -->

    <form action="send.php" method="POST">

        <p>

            <label for="name">Ваше имя:</label><br>

            <input type="text" id="name" name="user_name" required>

        </p>

        <p>

            <label for="email">Ваш Email:</label><br>

            <input type="email" id="email" name="user_email" required>

        </p>

        <p>

            <label for="message">Сообщение:</label><br>

            <textarea id="message" name="user_message" rows="5" required></textarea>

        </p>

        <button type="submit">Отправить сообщение</button>

    </form>

    <!-- Конец формы -->

</body>

</html>

Обратите внимание на параметры внутри тегов form, input и textarea, их можно менять:

• Action. Он показывает, какому файлу на сервере нужно передать данные после заполнения и отправки формы. Для примера мы назвали его send.php;
• For для label и id для input или textarea. Связывает подпись и поле для ввода данных, при клике по подписи курсор автоматически начнет заполнение поля;
• Type. Определяет тип вводимого контента в выбранное поле. Text позволяет вводить любые символы, а email не позволит отправить форму без знака собачки. Также мы использовали параметр submit — он при нажатии кнопки запускает параметр action, размещенный в теге формы, и отправляет данные на сервер;
• Name. Названия, по которым сервер будет различать тип отправленных ему данных;
• Required. Помечает поле как обязательное, пользователь не сможет отправить форму, если не заполнит поля с этим параметром.

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

Следующий этап — настройка бекенда, то есть серверной части. Для корректной обработки сообщений потребуется создать файл send.php, на который уже ссылается HTML-код, разместите его в той же директории, где и файл index.html. В скрипте потребуется разместить код, который будет отправлять сообщение на указанную почту каждый раз, когда пользователь заполняет и отправляет форму:

<?php

// Фрагмент для определения того, что форма была отправлена

if ($_SERVER["REQUEST_METHOD"] == "POST") {

    // Получаем данные и упаковываем их в переменные

    $name = htmlspecialchars($_POST['user_name']);

Вакансии

✅Account Manager / Partner Hunter (Ad Network)

RiverTraffic

После собеседования

Удаленно

Media Buyer (Facebook/Gambling)

RDT Traffic

После собеседования

Удаленно

🔥Senior Native Ads Media Buyer (Taboola / Outbrain)

AlphaDevs

После собеседования

Удаленно

Все объявления

Разместить

JetTon Partners 0

Норм партнерка, рекомендую

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

Удалось как то налить им, 900~ фтд где-то вышло. До сих пор даже капает. Может чуть позже еще вернусь снова по ревшаре полить, а то в кейсах у коллег уж больно сладкие RD, надо проверить.

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

GorilaZZ

17 августа

    $email = htmlspecialchars($_POST['user_email']);

    $message = htmlspecialchars($_POST['user_message']);

    // Настройки письма

    $to = "ваш_email";

    $subject = "Новое сообщение с вашего сайта";

    // Тело письма

    $body = "К вам поступило новое обращение! ";

    $body .= "Имя отправителя: $name ";

    $body .= "Email для связи: $email ";

    $body .= "Текст сообщения: $message";

    // Заголовки и отображение

    $headers = "From: no-reply@yoursite.ru "; // Желательно указать домен вашего сайта

    $headers .= "Reply-To: $email ";

    $headers .= "Content-type: text/plain; charset=utf-8 ";

    // Отправка письма и уведомления для пользователя

    if (mail($to, $subject, $body, $headers)) {

        echo "Спасибо! Ваше сообщение успешно отправлено.";

    } else {

        echo "Упс! Произошла ошибка при отправке.";

    }

} else {

    echo "Ошибка: неверный метод запроса.";

}

?>

Когда пользователь заполнит форму обратной связи и нажмет на кнопку, скрипт считает данные и подставит их в переменные $name, $email и $message. Последующие блоки — это оформление письма, в строке $to потребуется указать вашу почту, в $body само тело письма и уже созданные переменные, а с помощью $header можно создать заголовки и настроить отображение русского языка. В конце скрипта выполняется команда mail, которая отправляет уже подготовленные данные и выдает пользователю всплывающее уведомление об успешной или неудачной отправке. Также в коде есть встроенная функция htmlspecialchars, она защищает от спама и вредоносного кода, которые пользователи могли указать в переменных.

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

Настройка и запуск формы обратной связи на Wordpress

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

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

1. Перейдите в раздел с плагинами;

2. Нажмите на кнопку для добавления дополнительного плагина;

3. Найдите плагин WPForms с помощью поисковой строки и установите его;

4. После установки активируйте плагин;

5. Страница перезагрузится, а в левом меню появится новый пункт с плагином, перейдите в него и начните создание формы;

6. Выберите готовый шаблон или пустую форму, которую можно кастомизировать с нуля;

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

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

9. Последующие вкладки нужны для интеграции с платежными системами и инструментами учета, настройте их при необходимости и нажмите на кнопку для сохранения в верхнем правом углу;

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

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

Эксперты отвечают

Подготавливаем, публикуем и тестируем форму обратной связи на Битриксе

У Битрикса есть предустановленная функция для создания веб-форм. Чтобы ей воспользоваться, перейдите в админ-панель на вкладку с сервисами и выберите в левом меню пункт для настройки форм. Не забудьте заранее подготовить страницы и пространство для размещения будущей формы.

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

Нажмите на +, чтобы добавить вопросы — так называются поля для заполнения в Битриксе.

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

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

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

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

Откройте компонент с помощью двойного клика в этом же окне. Укажите ID уже созданной формы в выпадающем списке и сохраните изменения, после этого форма появится на сайте. Также в этом окне можно установить уведомления для заполнившего форму пользователя.

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

Юридический аспект и Политика Конфиденциальности

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

Политика Конфиденциальности — стандартизированный документ, который поясняет, какие данные собирает сайт и как он их использует. Можно сгенерировать его нейросетями или специальными сервисами, либо написать самостоятельно по примеру конкурентов. В документе для России потребуется указать данные сайта и его владельца, конкретный список собираемых данных, цели сбора, способы и хранения данных, регламент передачи данных третьим лицам, контакты и способы отозвать согласие для пользователя.

Также в форму потребуется вставить чекбокс, который подтверждает, что пользователь согласен с обработкой данных и ознакомлен с Политикой Конфиденциальности. Подпись к чекбоксу должна включать в себя ссылку на Политику Конфиденциальности, а галочку должен поставить сам пользователь. Чтобы вставить чекбокс, воспользуйтесь следующим кодом:<div class="checkbox-wrapper">

  <input type="checkbox" id="privacy_consent" name="privacy_consent" required>

  <label for="privacy_consent">

    Я даю согласие на обработку моих персональных данных и соглашаюсь с

    <a href="/privacy-policy.html" target="_blank">Политикой конфиденциальности</a>.

  </label>

</div>

Просто вставьте этот фрагмет кода перед кнопкой внутри формы и замените ссылку /privacy-policy.html на страницу с Политикой Конфиденциальности.

Какие данные стоит собирать с помощью формы обратной связи и когда ее использовать?

Формы обратной связи — гибкий инструмент, который позволяет получить от пользователя любую информацию, которой он готов поделиться. Использовать формы можно для разных задач, например:

• Для оформления заказов. Пользователь может указать товар, адрес и контакт для связи, чтобы менеджер мог перезвонить, подтвердить и оформить покупку. Частый вариант использования при продаже товаров через лендинги;
• Для записи. Если пользователь укажет свое имя, номер телефона и нужное время, специалист сможет его комфортно записать на прием. Формат лучше всего подходит под сферу услуг;
• Для сбора отзывов и предложений. Разместите поле для имени и крупную текстовую зону, чтобы собрать обратную связь, вопросы и идеи пользователей;
• Для подписок на рассылки. Если зритель самостоятельно оставит свой контакт, вы сможете использовать его для рассылок и поддержания стабильного контакта с аудиторией;
• Для приватной регистрации. Если перед регистрацией вы модерируете пользователей, можно использовать форму обратной связи для регистрации. Просто соберите данные, свяжитесь с пользователем и в случае успеха заведите аккаунт вручную — этот способ часто используют приватные проекты по типу партнерских программ.

Эксперты отвечают

Вывод

Форма обратной связи — гибкий и простой способ выйти на контакт с аудиторией вашего сайта. Теперь вы знаете, как подготовить подобные формы на HTML, Вордпрессе и Битриксе, пользуйтесь инструкцией и кастомизируйте формы под ваши задачи.