webdonsk.ruКак сделать обратную связь на сайте
Добавил пользователь Валентин П. Обновлено: 10.09.2024
Для многих web-сайтов, создаваемых с целью привлечения покупателей, а также повышения степени лояльности посетителей для блога или форума, используется форма обратной связи. Сегодня размещения только одного телефона для контакта уже не достаточно, поскольку по статистике свыше 70% посетителей в возрасте до 25 лет предпочитают использовать переписку (чат). Именно поэтому любой сайт с обратной связью в такой форме имеет более высокие конкурентные преимущества в сравнении с тем, где она отсутствует.
Структура формы обратной связи для электронной странички
Любой посетитель, который заходит на сетевой ресурс, должен иметь возможность задать интересующий его вопрос, чтобы узнать дополнительную информацию, а также уточнить те или иные моменты. Удобная кнопка обратной связи на сайт – это отличная возможность обеспечить коммуникацию для каждого посетителя, причем с максимальным комфортом. Для этой цели лучше всего использовать проверенный скрипт чата для сайта, на встраивание и настройку которого уходит минимум времени.
Чаще всего web-разработчикам удобнее использовать готовые скрипты, которые отлично подходят как статическим сайтам на HTML, так и динамическим, созданным при помощи CMS-программ. Обычно при создании обратной связи на сайте в конфигурационном файле предусматривается форма, содержащая следующие поля для пользователя:
Где разместить форму обратной связи с посетителем, и как ее правильно оформить?
Планируя создание сайта с обратной связью , следует учесть, что чаще всего виджет размещается в нижнем правом углу, однако при желании место может быть иным. С самого начала важно сделать так, чтобы скрипт не грузил сайт, то есть чтобы его установка не повлияла негативно на скорость сетевого ресурса. Для этого следует отдавать предпочтение только проверенным скриптам, прошедшим тестирование и сумевшим на практике доказать свою функциональность и полезность.
Современный виджет для сайта с обратной связью имеет широкие возможности, обусловленные:
Код для скрипта обычно прописывается на PHP с использованием библиотеки jQuery. Алгоритм действий в ходе создания сайта с обратной связью состоит из 2-х этапов:
- Написание кода HTML, который вставляется на страницу, а также использование CSS стилей для его дизайнерского оформления.
- Использование PHP-файла, предназначенного для отправки писем или иных действий при регистрации запроса.
Инструкция по созданию формы через наш скрипт
Компания Verbox предлагает универсальную форму обратной связи на сайт бесплатно , которая позволяет наладить общение между вами и клиентом. Созданный нашими квалифицированными специалистами модуль онлайн-консультанта предоставляет уникальную возможность быть на связи с любого устройства: Mac, Windows, iPhone или Android, на ПК или в мобильном приложении на смартфоне. Таким образом, с нашей помощью ваш сайт с обратной связью будет эффективно монетизирован и сможет приносить прибыль.
Если вам требуется бесплатная обратная связь для сайта , с самого начала советуем обращаться в нашу компанию, которая разработала модуль с широкими пользовательскими возможностями. Вот несколько особенностей, свидетельствующих в пользу нашего скрипта:
Предлагаемая нами бесплатная обратная связь для сайта позволяет выбрать форму виджета онлайн-консультанта с учетом дизайна конкретного web-сайта. При этом виджет может быть оформлен как в виде кнопки, так и в виде всплывающего окна, что обуславливается гибкими настройками.
От автора: приветствую вас, друзья. Данная статья будет продолжением статьи, в которой мы реализовывали отправку данных формы на сервер без перезагрузки страницы. Здесь мы продолжим данную тему и узнаем, как принять данные на сервере и реализовать отправку формы на электронную почту (email). Итак, давайте настроим форму обратной связи и добавим возможность ее отправки на email.
Исходные файлы текущей статьи вы можете скачать по ссылке.
В этом уроке мы сделаем все максимально просто и своими силами. В частности, для отправки писем мы воспользуемся специальной функцией PHP под названием mail(), которая раньше часто использовалась для отправки писем.
Начнем с синтаксиса функции mail. Данная функция имеет три обязательных параметра и два опциональных (не обязательных). Обязательные параметры:
to — email получателя (также можно указать несколько адресов, перечислив их через запятую);
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
subject — тема письма;
message — текст письма.
Из опциональных параметров практически всегда используется только первый, который отвечает за заголовки письма: кодировка, отправитель, тип письма и др.
Привет, друзья. Сегодня хочу рассказать вам о том, как сейчас я создаю формы обратной связи для получения контактных данных пользователя.
Статья давно на сайте, но пришло время актуализировать ее, ведь с момента написания прошло более 5 лет, что-то устарело, за некоторые моменты откровенно стыдно, а что-то не так доходчиво разжевано.
Создание формы обратной связи – HTML разметка
Обычно? мне хватает двух-трех полей, так как нет смысла требовать от посетителя большего и раздражать его. Продажа, обычно, случается после разговора с консультантом или менеджером, а значит все детали можно узнать по телефону.
Больше на эту тему можно почитать в статье с вредными советами, которые помогут испортить ваш landing page.
Но, как и обещал, в этой статье мы сделаем практически все возможные варианты полей. Сначала просто получим имя, телефон и почту, а потом будем постепенно усложнять, добавляя текстовую область, чекбокс и прикрепление файла.
В большинстве случаев, для создания формы обратной связи я использую такую разметку:
Знаю, что заголовок формы не согласован с кнопкой, но лень переделывать все скриншоты. Суть же не в этом совсем. Правда?
Под каждым полем создаю 'div' для вывода уведомлений об ошибках при валидации '.contact-form__error'.
Параметр 'enctype' в теге 'form' нужен для того, чтобы отправлять файл. Пока можете его не писать, но, если планируете сделать так, чтобы пользователь мог прикрепить вложение к письму, то нужно оставить все как есть.
Далее, для простоты работы с js воспользуемся jQuery. Подключаем его, как обычно, перед всеми скриптами, которые зависят от него. Я, обычно, делаю это ближе к закрывающему тегу 'body', чтобы основной контент грузился быстрее.
Скрипт 'mail.js' - это файл формы, который помогает в отправке и обработке ответа сервера. О нем чуть позже. Сейчас нужно познакомить вас со структурой всех файлов, отвечающих за отправку.
Структура проекта
Здесь нас интересует папка 'mail'. Именно тут и происходит вся магия.
Обратите внимание, что она лежит в корне сайта.
В первую очередь давайте разберем файл 'config.php'. Тут задаются основные настройки формы.
Основные настройки формы
В принципе я объясняю комментариями в коде что и зачем, константы имеют интуитивно понятные имена, но давайте для новичков объясню все еще подробнее.
Теперь самое главное. Если прошлые вещи можно было оставить по умолчанию, то теперь нужно настроить отправку на почту. Так как в скрипте используется SMTP протокол передачи почты, то нужно узнать несколько параметров у вашего почтового сервиса. Это:
- Адрес сервера - ( константа HOST )
- Логин (адрес электронной почты) - ( константа LOGIN )
- Пароль - ( константа PASS )
- Порт - ( константа PORT )
пароль и логин у каждого свои, а 'HOST' и 'PORT' для популярных почтовых сервисов я приведу в списке.
Будьте внимательны с этими параметрами, так как тут легко сделать ошибку и ничего приходить не будет.
С остальным все проще, объяснять по сути и нечего:
Обратите внимание, что почта, указанная в 'const SENDER' должна совпадать с почтой, которую указали в 'LOGIN'.
Валидация формы перед отправкой
Я не стал очень сильно заморачиваться с валидацией, потому как всем, все равно, не угодишь и сделал валидацию на обязательность заполнения полей, а в случае с полем для ввода электронной почты то еще и на корректность ввода адреса.
Все вам понадобится дополнительная валидация, все это реализовано в файле 'valid.php'.
Еще, я подумал, что было бы полезно сделать так, чтобы скрипт не отправлял данные, если не заполнено хотя бы одно из контактных полей. То есть телефон или email. Вот так я это реализовал.
Если вам это не нужно или у вас какой-то другой способ связи, поменяйте под свои нужды или удалите. Вот как это выглядит сейчас:
Отправка формы
Отправка формы осуществляется в файле mail.php, там нечего менять и настраивать. Оставьте как есть, если плохо разбираетесь в php. Если соберетесь добавить свои поля и, по какой-то причине не захотите скачать файл, предложенный мной ниже, где мы будем добавлять обещанный ранее функционал, то в тело письма, после валидации, необходимо передать переменные с данными полученными из формы. Делается это в 34 строке.
Но еще раз напомню, что чуть ниже мы будем добавлять в форму и другие поля, а там изменяться и все эти файлы. Файлы phpmailer - это вспомогательная библиотека для правильной отправки данных на почту. Там ничего трогать нельзя.
Также, в отправке формы и валидацие участвует файл 'mail.js'. Именно он помогает реализовать отправку без перезагрузки страницы. Тут тоже ничего менять не нужно, если вы не планируете использовать страницу благодарности, а вам достаточно того, что уведомление об успешной отправке выводится в форме.
Если что-то упустил или что-то непонятно - пишите в комментариях, попробую объяснить подробнее или дополнить статью.
Форма обратной связи с основными полями
Стили специально не добавлял в статью, так как статья и так очень большая. В исходнике все есть.
Переброс на страницу благодарности
Итак, открываем файл 'mail.js', находим участок кода:
Внимательный читатель мог заметить, что мы передаем GET-параметр, когда указываем страницу для перехода и это не случайно, вы же не хотите, чтобы случайные посетители вашей страницы благодарности появлялись в статистике, если у вас будут настроены цели на посещение этой страницы, поэтому мы реализуем простейший механизм для переброса на главную, если они зашли на страницу без этого параметра в адресной строке. Конечно, шанс что пользователь все равно попадет сюда есть, но он гораздо меньше.
Делать мы это будем при помощи php, поэтому убедитесь, что страница благодарности у вас сохранена именно в этом формате.
Если у вас уже страница в 'html', просто измените расширение. Это никак не повлияет на работоспособность.
Итак, давайте как обычно начнем с разметки. В принципе, это обычная html страница, которую вы вольны оформлять как душе угодно, но, чтобы сработал наш механизм, при котором случайному человеку не будет показываться страничка нам нужно обернуть ее в небольшой php-код.
В первой строке мы отлавливаем наш GET-параметр, и, если он совпадает с заданным, то показываем страницу, если нет, то перебрасываем пользователя на главную.
Кроме того, я закомментировал строку, при помощи которой можно автоматически возвращать посетителя на главную через заданный промежуток времени.
Если вам важен такой функционал, то раскомментируйте ее и настройте приемлемое время.
Маска ввода номера телефона
Конечно же вам может понадобиться маска для ввода номера телефона. Я уже делал пару статей на эту тему, поэтому не буду слишком подробно описывать как это делается, просто покажу код.
Для маски ввода номера телефона нам понадобиться сторонний скрипт. Я предлагаю взять 'jQuery Mask Plugin' из статьи, ссылку на которую дал выше.
Подключаем после jQuery. Я делаю это так:
Теперь необходимо инициализировать скрипт.
После этого маска успешно появилась в поле телефона:
Совсем подробно расписывать не буду, просто покажу что и куда добавляю, а в конце дам ссылку на исходник. Если какое-то из полей вам не понадобится, то просто не используйте его в разметке, а в файле 'config' - установите значение 'false' там, где задаем обязательность заполнения.
Стили я уже добавил в 'style.css', так что теперь наша форма выглядит так:
Теперь необходимо передать данные в файл валидации 'valid.php' и проверить все ли в порядке. Как уже говорил выше, у нас простейший случай с проверкой не пустое ли поле. Прежде чем перейти к реализации валидации давайте предположим, что поле для ввода текста обязательно для заполнения.
Для этого перейдем в файл 'config.php' и укажем 'true' в константе, отвечающей за это текстовое поле.
Теперь наше текстовое поле стало обязательно для заполнения. В файле 'valid.php', по аналогии с другими полями напишем такую проверку:
Обратите внимание на 'text' в проверке POST запроса. Этот то самое значение, которое указывали в параметре 'name' у тега 'textarea'.
В файле 'mail.js' сохраним 'div' в который будем выводить ошибку, если валидатор ее вернет для текстового поля:
А затем, ниже, напишем проверку:
По аналогии вы можете добавлять любые другие поля. Но прежде нужно передать нашу переменную '$text' в тело письма. Делается это в файле 'mail.php' в 34 строке, той самой, о которой я уже упоминал выше.
Теперь, если все сделали правильно, в письме будут приходить данные и из этого поля.
Еще раз повторюсь, если добавление этого поля показалось слишком сложным, то в конце статьи будет исходник, где можно просто в форме удалить лишнее инпуты, и все будет прекрасно работать.
Checkbox
Настало время добавить 'checkbox' с соглашением на обработку персональных данных. Вы можете делать и другие чекбоксы или радиокнопки. Принцип один и тот же для всех полей.
Создаем разметку в форме, определяем в 'config.php' обязательно ли поле, проверяем в валидаторе и формируем ошибку если она есть и выводим при помощи mail.js ее обратно в форму. Если нет, то передаем в mail.php и отправляем.
Итак, checkbox. Добавим разметку:
Не забудьте указать ссылку на соглашение. Стили уже добавлены в исходник.
Идем в файл 'config.php' и делаем поле обязательным.
Далее открываем файл 'valid.php' и добавляем следующий код:
Теперь переходим в файл 'mail.js' добавляем 'div' в который будет выводится ошибка, если она есть, и обработчик ошибки:
Осталось в тему письма добавить переменную с текстом о принятии соглашения.
В принципе, если поле обязательно модно было этого и не делать, но пусть лучше будет.
Добавление файла
Многим может понадобиться возможность отправки файла, давайте реализуем и этот функционал. Я уже подготовил все, вам остается только добавить разметку и выбрать обязательное ли поле для заполнения.
Часто возникает вопрос у посетителей как облегчить общение с клиентами, но чтобы это происходило не в рамках комментариев. Способ есть это форма обратной связи WordPress, которая настраивается быстро и работает эффективнее.
По умолчанию в WP нет такого функционала, но на помощь приходят плагины и специально разработанные конфигурации для движка.
Форма обратной связи WordPress плагином Contact Form 7
Разберу бесплатный Contact Form 7, который переведен на русский язык. В стандартном исполнении она включает в себя:
Не люблю капчу, но добавил ее после того, как на один из клиентских сайтов начал сыпаться спам.
Добавить капчу reCaptcha
Устанавливаем плагин стандартно через админку WordPress, так выглядит в панели.
CF7 в поиске
Ссылка на рекапчу
Привязка captcha к сайту
Копируем данные для капчи, оба ключа.
Ключи доступа
Переходим обратно в плагин WordPress и нажимаем кнопку Настройки интеграции.
Интеграция
Вводим ключи скопированные на сервисе reCaptcha, записываем в соответствующие разделы и сохраняем.
Сохранение настроек
Создание формы
Заходим в настройки и создаем новую форму. Стираем стандартную разметку.
Стираем стандартные надписи
Вводим название нового проекта и нажимаем кнопку Текст, потому что имя будут вводить текстом без правил.
Поле текст
Появиться всплывающее окно, настраиваем по потребностям.
- Тип определяет обязательно ли посетителю заполнять поле, я поставил да
- Имя не меняем это уникальный идентификатор
- Значение по умолчанию, ввел фразу, которую увижу внутри
- Использовать вместо заполнителя, то есть пока ничего не будет введено надпись будет отображаться
- Не советую пользоваться полем Akismet
- Для добавления стилей вводим class или id, сделал pole-imya
- Вставляем тег в общее поле
Аналогично нажимаем кнопку e-mail, видим тот же интерфейс.
Генератор почты
Ввод почты можно сделать через текст, но тогда потеряете функцию проверки правильности. Плагин проверит есть ли знак @.
Добавляем раздел текстовой области и телефона (по желанию), принцип одинаковый.
Кнопки телефон и текстовая область
Ранее настраивали интеграцию капчи в WordPress, в базовой версии CF7 нет кнопки для вставки captcha, для этого создан шорткод [recaptcha] помещаем под остальными элементами.
Осталось добавить кнопку отправки, выбираем из списка и настраиваем ее вывод.
В результате получился такой код.
Финальный код CF7
Настройка отправки письма
Нажимаем сохранить, переходим во вкладку Письмо, теперь настраиваем отправку на почту.
Изменение параметров письма
- Теги полей созданные ранее
- Адрес почты куда будут приходить письма
- От кого и тема, заполняйте по желанию
- Дополнительные заголовки, полностью очищаем
- Прописываем в теле письма, что желаем получать на почту после отправки. Например, набрал Почта и вставил, соответствующий тег напротив этого слова.
- Внизу нажимаем Сохранить
Сохранение
Протестируйте остальные вкладки уведомлений и настроек, можно поменять текст, выводящийся в разных ситуациях.
Вставка формы на сайт
Вверху страницы сформировался шорт код, копируем его.
Шорткод
Идем в любую запись и вставляем.
Помещаем shortecode в страницу
После нажатия кнопки Посмотреть, перекинет на сайт с отображением проделанной работы.
Финальный вариант
Хорошая черта у разработчиков тем на WordPress – заранее делать продукт, поддерживающий CF7, что облегчает жизнь и не нужно прописывать CSS стили в код сайта. Моя тема поддерживает плагин и выводит вполне красивую картинку. Если не устраивает, то к каждому полю прописывали class, используйте его для изменения оформления. Проверил работу темы, письма приходят быстро. Про остальные способы вставить шорткод в WordPress, читайте по ссылке.
Ко всему материалу приложу видео инструкцию, показываю не только процесс создания, но и как сделать красивое оформление формы, потому что текстом весь процесс не описать.
Сделать поля горизонтально в строчку
Посмотрел в интернет и ужаснулся, сколько манипуляций делают. Настроить полностью оформление не покажу, это тема ни одного большого мануала. Заходим в редактирование формы и оборачиваем поля, которые хотим выстроить горизонтально в div с классом, смотрим код.
Поле Имя, Почта и Телефон хочу выстроить в строчку. Не забываем сохранять изменения.
Оборачиваем в div
Заходим в админке WordPress Внешний вид > Редактор тем > style.css прописываем стили для обратной связи WordPress в конец файла.
Прописываем стили
Из стилей видно, что div с классом flex-form присвоили свойство display:flex оно задает расположение элементов в строку, без дополнительных параметров пространство делится поровну.
Вторая запись показывает когда разрешение экрана достигло 655 пикселей, форма меняет свойство с flex на block и форма начнет отображаться как раньше с полями друг под другом. Этот предел в 655 меняется индивидуально, стиль сделан чтобы на мобильных устройствах обратная связь выглядела нормально.
Всплывающая форма обратной связи
Положительно на приеме заявок действуют всплывающие окна с обратной связью от CF7. Плагин для вывода всплывающего окна будет Popup Maker. Описывать не буду, ссылка на материал расположена в этом абзаце. В дополнение приложу видео из той статьи.
Как добавить в elementor
Для вставки формы в elementor нужно использовать раздел shortcode. Форма создана по инструкции выше, значит шорткод от CF7 есть. Переходим в создание страницы в элементоре и в поиске по элементам ищем шорткод.
Поиск элемента в elementor
Далее перетаскиваем модуль в активную область, в параметрах блока вставляем код формы. Функция сработала и вывела на экран результат в виде формы обратной связи.
Элементор обработал запрос
Используем настройку темы
В большинстве шаблонов WordPress нет инструментов для создания в автоматическом режиме обратной связи. Но наши темплейты от WPShop имеют встроенную функцию, которая выводится с помощью шорткода. Разберем на примере Root . Перехожу в создание страницы, далее смотрим на снимок.
Надстройка в ROOT
- Прописываем текст [ contactform ] (без пробелов внутри скобок)
- Жмем предпросмотр
Откроется страница с уже адаптированной, размеченной и сверстанной формой, по которой посетитель может получить обратную связь с администратором.
ROOT работа встроенной функции
Feedback через виджеты
Вставить feedback в виджеты просто. Поможет виджет текст, переносим его в активную зону и прописываем шорткод в него.
Используем виджет текст
Задаем заголовок, заносим конфигурацию в текстовую область, переходим на блог и смотрим, как обрабатывается обратная связь.
Форма в виджете
Обратная связь без плагина
Если предпочитаете способы без плагина, то есть отличная инструкция, нашел на просторах интернета, если хозяин кода объявится, то с удовольствием поставлю ссылку.
Открываем файл function.php для редактирования, прописываем в самый низ код, как пользоваться FTP и изменять PHP разбирали тут.
Создали форму в HTML разметке WordPress и подвязываем ее на шорткод. Думаю такой подход будет удобен, потому что вывести блок можно будет в любом месте.
Заходим в создание страницы в панели WordPress, пишем [art_feedback] , нажимаем на просмотреть.
В гутенберге в любой текстовый блок вставляете строку.
Вносим вывод в запись
Перейдя на сайт увидим не сформированную форму, поля работают, но письмо отправляться не будет, потому что не привязан PHP обработчик.
Плохой внешний вид
Теперь настроим внешний вид, вставляем данный код в файл style.css активной темы.
Обновляем style.css на сервере и смотрим как преобразилась обратная связь на странице.
Сверстанный блок
Создаем файл feedback.js и помещаем в него код. Загружаем на хостинг в папку js активной темы.
Теперь загружаем вторую часть кода в function.php.
Проверяем форму на работоспособность. Проблема может возникнуть если вы не правильно загрузили файл js в тему WordPress, и путь до него прописан не корректно, а именно во втором коде в разделе // Подключаем файл скрипта.
Заполняем и отправляем письмо
Такое письмо приходит на почту с обратной связи.
Что приходит после отправки
Отлично, справились, смогли сделать форму обратной связи в WordPress, тремя разными методами, если будут вопросы то задавайте, будем разбираться. Успехов!
Читайте также: