Склероз

Форма обратной связи для сайта с отправкой на почту

Назначение формы обратной связи

Форма обратной связи (feedback form) — это одно из средств, с помощью которого можно вести диалог с пользователями сайта. Обычно её используют для сбора отзывов, идей, различных предложений или любой другой информации.

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

Как сделать форму обратной связи на сайте

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

Есть конечно и достойные ответы, но их очень мало. Я приведу простой пример, для которого много ума не нужно. Особых знаний в php не требуется, точнее они вообще не нужны. Что и где нужно изменить, я напишу подробно, когда это будет нужно. Форма работает нормально, без сбоев.

В данном примере, форма обратной связи для сайта состоит из html кода. Такой пример html кода вставляете абсолютно на любую страницу сайта, не важно, где и что вы используете. Этот же код можно вставить на страницу движка wordpress, все будет работать правильно и без сбоев.

Форма обратной связи для сайта с отправкой на почту

Для разработки необходимы знания php, html и javascript. На CMS существуют разные конструкторы, позволяющие сделать сервис обратной связи, также можно воспользоваться сервисами в интернете. Но все же предпочтительнее первый способ. Вы, как администратор сайта, должны точно знать, какие механизмы применяются для отправки сообщений.

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

Структура

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

Как правило, обязательными к заполнению являются поля: ФИО, телефон, e-mail, ваш вопрос. Самая простая страница коммуникации должна содержать эти поля.

Помимо текстовых полей, страница может содержать элементы выбора.

Пример сервиса обратного звонка

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

Пример усложненной формы обратной связи для заказа

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

Где размещать

Обычно применяют два вида размещения формы:

  • На отдельной странице в случае, если форма содержит много полей.
  • На странице «Контакты» под заголовком «Напишите нам».

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

Обращаю внимание! Что бы форма заработала — необходимо, что бы ваш хостинг поддерживал PHP.

Если у вас возникнут вопросы касательно непонятных моментов в написании обработчика формы для отправки писем — не стесняйтесь, задавайте их в комментариях.

Вот что получилось в итоге в файле index.php

Напоминаю, что в нём содержится простенькая форма обратной связи. Без оформления и прочих прибамбасов. Что бы не нагружать Вас лишней информацией.

Здесь осуществляется базовая проверка формы на заполненность, что бы не отправлять пустые сообщения. Если всё «гуд» — письмо отправляется. И идёт переадресация на страницу-уведомление об успешном отправлении письма.

Основные характеристики формы

Основные характеристики формы:

  • работа без перезагрузки страницы (ajax);
  • наличие защиты от спама (капчи);
  • возможность добавления файлов;
  • валидация (проверка) данных, которая выполняется как на стороне клиента (в браузере), так и на стороне сервера;
  • отправка данных на почту (добавленные файлы можно настроить так, чтобы они приходили как посредством вложений, так и в виде ссылок в теле письма);
  • сохранение результатов обработки формы в лог.

Исходные коды формы обратной связи

Проект формы обратной связи находится на GitHub по этому адресу. Распространяется форма под лицензией MIT.

Для работы серверных сценариев формы необходим php не ниже 5.6.

Текущая версия формы 2.0.2. Данная форма имеет дизайн, выполненный на базе фреймворка Bootstrap 4. Загрузить форму обратной связи можно по этой ссылке.

Вставка обратной связи в wordpress

Процесс установки формы в wordpress ничем не отличается, все действия делаются аналогично. Файл form.php желательно закачать в папку с вашей темой. Не забываем в html разметки указать полный и точный адрес к файлу обработчику. Кроме этого, нужно изменить адрес сайта на свой сайт и правильно написать адрес электронной почты.

В качестве примера, можно создать страницу «Связаться с автором» или «Автор» и закинуть туда вашу форму.  На некоторых блогах я замечал снизу каждой формы ряд из кнопок социальных сетей или дополнительные варианты связи с автором. Если есть желание, можно так же повторить.

Скриншоты формы обратной связи

Внешний вид формы обратной связи
Внешний вид формы обратной связи

Генератор формы обратной связи

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

  • formdesigner;
  • livetools.uiparade;
  • Google Forms;
  • iFormbuilder;
  • faary.

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

Строение формы обратной связи

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

Принцип работы AJAX формы обратной связи
Принцип работы AJAX формы обратной связи

Из схемы видно, что форма обратной связи состоит из 2 основных частей: клиентской и серверной.

Клиентская часть данной формы представлена посредством следующих файлов:

  • index.html — веб-страница, содержащая html5 форму обратной связи;
  • process-forms.js — JavaScript сценарий, выполняющий всю логику по обработке формы на стороне клиента;
  • main.js — JavaScript сценарий, выполняющий инициализацию логики, находящейся в process-forms.js для указанной формы;
  • bootstrap.css — CSS стили фреймворка Bootstrap (для оформления формы);
  • jquery.js — библиотека jQuery, необходимая для работы js-скриптов process-forms.js и main.js.

По умолчанию HTML форма, представленная в проекте, состоит из:

  • текстового поля для ввода имени;
  • текстового поля для ввода email-адреса;
  • textarea поля для ввода текста сообщения;
  • элементов input с type="file" (для добавления файлов);
  • капчи (для защита от спама);
  • чекбокса, посредством которого пользователь соглашается с условиями по обработке представленной им в форме информации;
  • кнопки, посредством которой пользователь может осуществить отправку данных формы на сервер.

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

Сценарий JavaScript, находящийся в файле process-forms.js выполняет всю логику по обработке формы на клиенте.

А именно, он используется:

  • для проверки (валидации) данных формы перед отправкой их на сервер; не корректные данные обводятся в красную рамку и снабжаются подсказкой; выполнение проверки осуществляется с использованием HTML5 функции checkValidity;
  • для добавления input с type=»file», посредством которых пользователь может добавить в форму некоторое количество файлов;
  • для обновления кода капчи и получения нового изображения с сервера;
  • для отправки данных формы на сервер посредством метода POST без перезагрузки страницы;
  • для обработки и отображения ответа от сервера пользователю.

Форма обратной связи для сайта с отправкой на почту

Сбор данных с формы, подлежащих отправки на сервер выполняется в этом проекте с помощью HTML5 FormData.

Серверная часть формы обратной связи состоит из:

  • captcha.php (скрипта для генерации капчи);
  • oswald.ttf (шрифта, посредством которого код капчи пишется на изображении);
  • background.png (изображения (фона), на которое накладывается текст капчи);
  • process.php (скрипта, выполняющего обработку данных формы на сервере; при их успешной проверке осуществляет отправку этих данных на email; результат своего выполнения возвращает в формате JSON);
  • файлов, находящихся в каталоге PHPMailer (php библиотеки, позволяющей более просто и безопасно отправлять электронные письма).
Файловая структура серверной части формы обратной связи
Серверная часть формы обратной связи

PHP скрипт process.php выполняет следующие функции:

  • проверяет метод запроса, а также как он послан (с помощью AJAX или нет);
  • выполняет очистку (фильтрацию) данных (для защиты от XSS);
  • выполняет проверку (валидацию) полей формы;
  • проверяет правильность введённого пользователем кода капчи;
  • проверяет, соответствуют ли полученные файлы установленным характеристикам;
  • перемещает файлы, отправленные пользователем, под уникальными именами в заданную директорию на сервере;
  • в случае успешного выполнения всех вышеприведённых действий отправляет письмо (email) с вложениями по указанному адресу. Кроме отправки письма он также сохраняет данные формы в текстовый файл;
  • отправляет клиенту (браузеру пользователя) результат (ответ) в формате JSON, содержащий сведения об успехе или возникшие при обработке формы ошибки.

Файлы формы обратной связи имеют кодировку UTF-8 без BOM.

Для проверки работоспособности формы в Денвере необходимо в корне сайта создать файл .htaccess и добавить в него строчку: AddDefaultCharset UTF-8.

Форма обратного звонка

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

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

  1. Живое общение с клиентом.
  2. Генераторы лидов.
  3. Различные виджеты для обратного звонка.
  4. Онлайн статистика.
  5. Онлайн мониторинг.

Если у вас остались вопросы как устанавливать обратную связь на сайт, задавайте их в комментариях. Не стесняйтесь, поделитесь статьей в социальных сетях.

Евгений Несмелов

Установка и настройка формы обратной связи

Форма обратной связи

Установка формы обратной связи на сервер осуществляется путём копирования папки feedback в корневую директорию сайта.

При необходимости на страницу можно добавить несколько форм обратной связи.

Осуществляется это посредством выполнения следующих шагов.

В HTML файле (index.html) нужно:

  • скопировать имеющийся фрагмент формы обратной связи и расположить его в нужном месте страницы;
  • установить форме новый идентификатор, т.е. значение атрибута id (например, feedback-form-2);
  • указать атрибуту action формы путь к php-сценарию, который будет обрабатывать её на стороне сервера (например, /feedback/process/process-2.php);
  • установить капче (элементу img) в атрибуте src и data-src get-параметр; его значение будет являться ключом, с которым будет связан её код на сервере (например, /feedback/captcha/captcha.php?id=captcha-2);
  • изменить у формы значения атрибутов id и for так, чтобы они были уникальными на странице;
  • установить ссылке с помощью которой перезапускается форма значение атрибута data-reloadform (например, #feedback-form-2).

var form2 = new ProcessForm({
  selector: '#feedback-form-2'
});
form2.init();

Последнее действие – это выполнить создание копии файла process.php. В новом файле (например, process-2.php) необходимо изменить код, посредством которого эта форма должна будет обрабатываться на сервере.

Если в форме не изменяется количество полей, то достаточно будет изменить только фрагмент кода, в котором проверяется код капчи. А именно изменить ключ в суперглобальном массиве $_SESSION с captcha на тот, который мы установили (в данном случае на captcha-2).

Adblock
detector