Обратная связь для сайта для html сайта – Обратная связь для сайта с помощью скриптов форм на html и php, а так же онлайн конструкторов и генераторов

Больше видео на нашем канале — изучайте интернет-маркетинг с SEMANTICA

Для чего нужна обратная связь

• Ответы на вопросы посетителей.
• Анкетирование.
• Прием заказов посредством сайта.
• Прием заявок на обратные звонки.

Два вида коммуникации с посетителем

• Отправка на email. После заполнения предложенных полей форма отправляется на e-mail администратора сайта. Все дальнейшее общение происходит посредством обмена электронными письмами или выходом в офф-лайн (телефон и т.п.).
• Отправка в систему управления сайтом. После заполнения администратор сайта видит запрос в списке заполненных данных в CMS, и там же может его обработать. К примеру, таким образом может быть реализована гостевая книга или система «Вопрос-ответ». Покупка товаров в интернет-магазине работает подобным образом.

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

Для эффективной и быстрой обработки заявок рекомендуется комбинировать оба вида отправки.

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

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

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

Структура

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

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

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

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

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

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

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

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

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

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

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

Правила хорошего тона

После заполнения полей и отправки сообщения посетитель должен получить на экране ответ типа «Спасибо за ваш вопрос. Мы ответим вам в течение 1 часа». Если посетитель не получает ответ в течение установленного времени, его расположение к вам резко падает. Факт игнорирования очень неприятен и говорит о том, что сайт не ценит своих клиентов. Обратная связь должна работать, а не собирать мертвые грузы из неотвеченных вопросов посетителей.

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

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

Форма обратной связи для сайта, которую я вам покажу – основана на использовании технологии Ajax. Но не волнуйтесь, знать этого вам не надо, все уже готово, останется только установить эту форму и настроить под себя!

Ребята — скрипт очень давно устарел. У кого-то работает, у кого то нет. А мне разбираться и уж тем более обновлять — лень. Поэтому тестируйте на своё усмотрение.

Демо

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

Эта форма обратной связи на сайт очень функциональна сама по себе, к ней подключено несколько плагинов, которые создают привлекательный внешний вид и проверяют валидность (читай правильность) введенных вами данных. Эти плагины работают на великом и могучем JavaScript! А называются так:

1. JQTransform – плагин который позволяет сделать нашу форму обратной связи красивой!

2. formValidator – а этот плагин проверяет форму контактов на правильность введенной информации и в случае чего выводит всплывающие подсказки!

Для полноценной работы этой формы будет использован класс – PHPMailer. Считается одним из лучших!

Форму обратной связи для сайта можно сделать на HTML! Но работать она начнет только при помощи PHP! И никак иначе!

Это я для тех, кто ищет форму обратной связи только на HTML. Сделать сделаете, но работать она не будет!

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

Эту форму обратной связи я откопал на сайте www.tutorialzine.com ссылка ведет непосредственно на страницу оригинала, т.е. сайт автора данной формы!

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

Признаюсь честно, мы с этой «формочкой» провозились два дня, так как начинали всплывать различные косяки, а недоделанную до конца форму обратной связи, тем более такую красивую, выкладывать не хотелось! Так что если вы любитель все сделать сами, и в вашу светлейшую голову влезет мысль – самому русифицировать данную форму, дам пару советов, так как просто переводом фраз не ограничишься:

1. Эта форма обратной связи заточена под буржуев, от туда же и скачена, поэтому она будет присылать вам вместо нормальных русских символов – кракозяблы. Разберитесь с кодировкой. Да и вообще все «тюлени» будут связаны с этим!

2. Скрипт валидации изначально не понимает наши букв, поэтому их там надо будет прописать!

3. Даже после этих действий если указать тему письма на русском, письмо приходит с темой – No subject (надеюсь правильно написал), это лечится если указать кодировку в файле класса PHPMailer.

4. В оригинальной форме текст в полях ввода прижимался к низу, а не по середине. Это глюк плагина JQTransform.

Ну, вроде все расписал и предупредил. Поехали дальше!

Для тех кто хочет получить уже готовую форму обратной связи:

1. Скачиваем скрипт формы обратной связи для сайта (под видео).

2. Смотрим видео ниже. В нем я рассказал где необходимо менять настройки, что бы форма работала на вас.

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

И так, смотрите видео по установке формы, там все рассказано. Если возникнут какие либо вопросы – задаем их или на форуме, или здесь в комментах. Если вопрос сугубо технического характера, то лучше на форуме.

ЗЫ: кстати, забыл добавить, что эта форма обратной связи для сайта, работает, даже если у вашего посетителя отключен JavaScript.

Форма обратной связи для сайта – Андрей Шарапов

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

• Отправитель (name)
• Адрес отправителя (e-mail)
• Телефон (phone)
• Сообщение (message)

И в виде бонуса — вывод названия формы при получении письма.

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

Давайте рассмотрим на примере простой bootstrap формы. Уберем из нее все лишнее и получим маленькую, но чудную форму.

Вы можете создавать бесконечное количество копий этой формы, но каждой из них вам необходимо присвоить свой уникальный id. Например, form-1, form-2, form-3 и т.д.. Кроме того, для формирования темы письма добавьте скрытый input type="hidden", в котором будет отображаться заголовок обращения. Для стилизации формы вы можете применить свои классы css или оставить стили bootstrap.

В результате должны получиться вот такие формы.

Для отображения подсказки включите атрибуты placeholder.

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

Рабочий пример:

Здесь же вы можете сделать поле обязательным для заполнения, добавив в каждый необходимый input атрибут required="required". А для облегчения заполнения данных в будущем, вы можете добавить атрибут autocomplete="on", который помогает заполнять поля форм текстом, введенным ранее.

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

Обработка php

За пересылку письма с введенными в форму данными отвечает PHP обработчик. Для передачи данных в обработчик используется кнопка с типом submit. В случае использования нескольких форм связи с одним php обработчиком Вы должны передать в него данные именно той формы, в которой была нажата кнопка «Отправить». Это можно сделать через if/else, с учетом разных имен атрибутов, наплодив одинаковых кусков кода, можно создать кучу обработчиков с разными именами, но одинаковым кодом, а можно использовать скрипт jQuery с помощью которого данные в обработчик будут отправляться из той формы где было произведено нажатие на кнопку «Отправить».

Большинство форм для передачи данных используют метод POST, это позволяет «спрятать» данные формы и не загромождать URL в адресной строке. Поэтому в каждой форме необходимо прописать method="POST".

Теперь переносим все наши поля и данные в обработчик и готово!

Давайте подробнее разберем некоторые пункты.

    if (isset($_POST['formData'])) {$formData = $_POST['formData'];} // заголовок обращения в скрытом input
    if (isset($_POST['email'])) {$email = $_POST['email'];} // email/адрес отправителя
    if (isset($_POST['name'])) {$name = $_POST['name'];} // имя/отправитель
    if (isset($_POST['phone'])) {$phone = $_POST['phone'];} // телефон
    if (isset($_POST['message'])) {$message = $_POST['message'];} // комментарий к заказу/обращение

$message = "$formData\n\nОткуда: $email \n\nОтправитель: $name \n\nТелефон: $phone \n\nСообщение: $message";

Строчка выше отвечает за последовательность отображения полей в письме получателя, где каждый пункт соответствует своему полю, например \n\nОтправитель: $name.

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

Возможно Вас также заинтересует…

Простая обратная связь на сайт, как сделать обратную связь

Как сделать простую обратную связь на сайте

Я подготовил все файлы для успешной работы обратной связи и упаковал их в архив ( ссылка в самом низу ).

Внимание! Форма обратной связи будет работать на локальном компьютере, если только из под Denwer ( или подобных ), либо на хостинге.

Описание файлов в архиве

• index.html — открываете в браузере и проверяете работоспособность, затем открываете в блокноте и редактируете внешний вид.
• send.php — обработчик отправки писем. Здесь изменяем ваша@почта.ru на свой адрес почты, и так же редактируете сообщения с ошибкой под свой дизайн.
• Папка img — картинки для каптчи, и заменив, можете использовать свои.
• .htaccess — обязательно нужен, если вы устанавливаете обратную связь на html страницы.
• Все файлы — написаны под кодировку UTF-8.

Скачать простую форму обратной связи на сайт

Похожие статьи

Влад

24 июля 2018 18:15

Уважаемый.
Подскажите, где я запутался.
Скрипт установился и письма доходят, но прочесть не могу…
Я сразу решил переделать в кодировку Windows-1251 и теперь одни не понятные знаки прописываются.

Admin

24 июля 2018 22:52

Очень советую посмотреть и изучить: как правильно делать кодировку

Александр

25 июля 2018 16:56

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

Admin

25 июля 2018 18:21

Добрый день, Александр!
Он поэтому и называется: простой скрипт обратной связи!
Для ваших целей используйте более сложнее скрипт, которые предоставлены на моём сайте, где используется ajax технология ( вывод ошибок без перезагрузки страницы и без повторного ввода данных ).

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

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

Кому-то просто лень, у кого-то не получается сделать красиво, а кому-то просто нет необходимости тратить на это время. Легче нанять кого-то или сделать форму на конструкторе. Именно для таких людей и написана эта статья.

Лучший конструктор форм для сайта

По моему мнению, лучшим конструктором форм для сайта является FormDesigner, когда-то давно, еще в 2016 году я писал об этом сервисе и с тех пор он стал еще лучше. На самом деле, за статью с подборкой конструкторов форм я брался уже несколько раз, находил около 5 штук, изучал, начинал писать, но до ума так и не довел. И знаете, каждый раз возвращаясь к статье я обнаруживал, что 2 — 3 сервиса уже были недоступны. То есть проект «умер» и сейчас на этом домене либо пустая страница, либо что-то другое.

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

• FormDesigner — конструктор прошел проверку временем и полюбился многим пользователям. Периодически обновляется функционал и облагораживается дизайн. Например, недавно добавили возможность создавать квизы. Достаточно низкая стоимость, всего от 5.45$ в месяц или 52$ в год за базовый тариф. Есть интеграция со множеством популярных CRM- систем, сервисами почтовых рассылок и т.д.
• QForm — классный вариант конструктора форм, который, на момент написания статьи, является бесплатным. Кроме того, разработчики обещают развивать сервис и добавить еще много интересных фич, таких как квизы, мини-сайты и многое другое.
• Ucalc — еще один хороший конструктор форм, с достаточно низкой стоимостью. От 4$ в месяц и 20% скидкой, при оплате на год. Немного меньше возможностей в плане интеграций, чем у предыдущего но не менее хороший сам калькулятор. Если не нужна интеграция со сторонними сервисами, то отличный вариант.
• Elfsight — это не просто конструктор форм, тут целый «комбайн» виджетов, но сервис на английском языке. Если это не смущает, то обязательно попробуйте.
• Payformix — совсем упрощенный конструктор, как в плане функционала, так и дизайна, зато, практически, бесплатный. Для кого-то это может стать определяющим фактором. Но, если 55$ в год для вас не большая сумма, то лучше выберите предыдущие сервисы.
• Jotform — также достаточно простой конструктор для создания форм с частичной поддержкой русского языка. В целом лучше чем Payformix, есть бесплатная ограниченная версия, но базовая от 19$ месяц или 16, при оплате на год.

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