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


Содержание материала:

Форма обратной связи на сайте: что это и как ее создать

6 ноября 2020 года. Опубликовано в разделах: Азбука терминов. 11565

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

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

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

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

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

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

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

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

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

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

Структура

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Специалисты студии SEMANTICA проведут комплексный анализ сайта по следующему плану:

– Технический аудит.
– Оптимизация.
– Коммерческие факторы.
– Внешние факторы.

Мы не просто говорим, в чем проблемы. Мы помогаем их решить

Форма обратной связи для сайта: PHP-обработчик + Ajax + Валидация

Привет ребята. На связи Серёга. Знаю, что давно не писал — дела, дела. Да и сейчас, если честно, времени совсем нету. И форму будем делать не по моему уроку, а по урокам моего знакомого — Кротова Романа.

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

В первом видео — мы просто заведём её в HTML и создадим PHP-обработчик для отправки писем. Всё будет последовательно, с нуля и до результата. Так, что бы вы всё поняли, и смогли самостоятельно встроить нужные поля.

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

Ну и в третьей (урок готовится — позже здесь будет ссылка), мы встроим проверку на валидацию. Не средствами браузера, а при помощи специальных скриптов.

Видео 1. Создание формы обратной связи для сайта.

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

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

Код из урока по созданию формы обратной связи

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

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

Содержимое файла submit.php:

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

Ну а саму страницу уведомление не вижу смысла здесь размещать. Там базовая структура HTML-документа и всего одна строчка текста.

Видео 2. Ajax — отправка письма без перезагрузки страницы.

Для прохождения второго урока, нам понадобится библиотека jQuery. Мы её подключали с официального сайта jquery.com (ссылка ведет на страницу загрузки).

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

Видео 3. Валидация — проверка формы на правильность заполнения.

Как сделать чтобы отправляло два письма — тому, кто пишет (он вводит свой мейл) и администратору системы (магазина). Еще добавление файлов к форме отправки

mail(«[email protected], [email protected]», $theme .

Здравствуйте, Сергей и Роман!

Спасибо за Ваши уроки!

Но . — большая просьба: покажите как поставить капчу и как пристегнуть картинку, видео ??

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

По вложению файлов и капче — надо отдельное видео записывать.

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

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

Есть полный курс у меня Мастер PHP PRO.

Напишите мне в личку, я скину: https://vk.me/krotovromanpublic

Спасибо за урок. Ждем новых уроков. Просмотрел урок бегло. Так как не закончил ещё изучение «верстаем на 5 с плюсом». Урок впринципе понятен. Так как сам программирую на языке мкл5. Тема Ваша интересна. После изучения буду изучать Ваш курс «Видеокурс «Мастер PHP»».

Хорошо. Всегда рад видеть!

Посмотрел уроки, возникло пару вопросов:

1. Зачем назначать документу расширение .php, если там чистый html?


2. Почему нет закрытия кода в файле submit.php?

Здравствуйте Кирилл. Спасибо за вопросы!

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

Топ-пост этого месяца:  Google One теперь открыт для всех - тарифы и пакеты

2. Тега закрытия в конце файла submit.php нет, потому что он не требуется там. Там чистый PHP без примеси HTML. Если комбинировать в файле HTML код со вставками PHP, то PHP теги надо закрывать. Если будете дальше смотреть мои уроки по этой теме, возможно, увидите такие примеры.

С уважением, Кротов Роман.

Здравствуйте! Как сделать, чтобы сообщение об отравке исчезало через несколько секунд?

Добрый день. Прошу простить, но скачала форму , установила на локальный сервер. И ничего не работает. помогите разобраться почему. пожалуйста

Сделайте все точно так же как в видеоуроке и всё получится.

В крайнем случае создайте тему на моем форуме: https://support.krotovroman.ru/

И со скриншотами покажите по порядку что вы делали и какие ошибки появляются.

Добрый день. Установил форму на сайт и в консоли появилась ошибка Uncaught TypeError: $.validate is not a function Подскажите, с чем она связана и как ее устранить?

Разобрался. Нужно добавлять скрипты именно в таком порядке

Ошибка исчезла, но форма все равно не реагирует. Не проверяет заполнение поля и не отправляет.

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

А проблема в следующем.

У нас только один почтовый ящик и в его настройках, на сервере хостинга, указана переадресация на почту Яндекса на [email protected]

Но пересылается на Яндекс только примерно половина писем, остальные нет. Т.е. я ВСЕ входящие письма вижу в ящике на хостинге, а на почте Яндекса — только половину.

В службе поддержки хоста написали (вкратце):

ВСЕ письма поставлены в очередь почтовой службы Яндекс, однако по части из них получены отказы в доставке, поскольку форма обратной связи сайта установила в письме в качестве заголовка отправителя email посетителя сайта, например ниже «[email protected]», «[email protected]», или пустое.

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

Рекомендуем пересмотреть исходный код формы обратной связи и изменить его таким образом, чтобы электронный адрес посетителя сайта добавлялся, например, в заголовок «Reply-to:».

Вот часть кода обработчика на РНР:

$mail_addr = array («[email protected]»); // сюда необходимо подставить СУЩЕСТВУЮЩИЙ на сервере email, с него будет рассылка

#header («Location: sm_success.htm»);

header («Location: sm_failed.htm»);

$mail_subj = «Вопрос к Фанат Гусятник — «.$p[«Subject»];

$sender_mail = array («E_mail» => «E-mail»);

foreach ($sender_mail as $key => $item)

if (isset($p[$key]) && chop($p[$key]))

$mail_head = «From: «.»\n»;

$mail_head .= «Content-Type: multipart/mixed; boundary=»».$mail_bond.»»».»\n»;

$mail_body = «—«.$mail_bond.»\n».»Content-Type: text/plain; charset=Windows-1251″.»\n»;

$mail_body .= «Content-Transfer-Encoding: 8bit».»\n\n»;

$mail_body .= ‘== Новое письмо с сайта Фанат-Гусятник ==’.»\n»;

Подскажите пожалуйста куда и что прописать в «Reply-to:».

Доброго времени суток. У меня проблема со скриптом. установил полностью скаченный скрипт на локальный сервер всё сработало. установил на сервер где расположен сайт выдаёт «ошибка при отправке сообщения», при этом я для проверки создал отдельную директорию и ничего не менял кроме e-mail адреса. дал права всем файлам 777. но всё тщетно. в чём может быть проблема?

1. При открытии письма не работают переносы строк. Вся информация идет в одну строку http://joxi.ru/xAeNPoLup7K3vr. Как можно исправить такое.

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

Вы прекрасно показали и рассказали, как сделать одну форму на странице. А если надо несколько, тогда что получается необходимо делать несколько index.php и submit.php. что ли дублировать форму несколько раз в корне сайта. Или есть возможность как-то объединить эти формы в одном файле?

Большая просьба помочь в этом вопросе.

Подскажите как сделать чтобы на почту приходило название объекта которому направляется письмо, чтобы я тоже мог видеть кому именно пришло письмо.

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

Подскажите как прописать путь от js к submit.php если они находятся в разных папках на сервере?

Здравствуйте! Спасибо за Ваш урок! Все получилось, но не могу сообразить только одно.

Есть форма и при нажатии на кнопку выполняется скрипт JS:

var vz = «f»;// это так для примера

// само исполнение при нажатии на кнопку

$(this).val(«Отправляется. » ); // Перед отправкой меняем название кнопки. Это работает

$.post( // три параметра метода Post

«submit.php», // 1-ый параметр — путь до файла submit.php

// Как написать код , я думаю что здесь, что бы результат передавался в переменную

// в переменную vz и далее название кнопки изменилось . .

$(this).val(vz) ; // Текст кнопки

Вопрос в следующем.Как из функции function (vozvrat) результат присвоить переменной VZ , что бы на кнопке отображались соответствующие надписи из файла submit.php ( видеоурок 2), как у Вас?

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

Warning: mail(): Failed to connect to mailserver at «localhost» port 25, verify your «SMTP» and «smtp_port» setting in php.ini or use ini_set() in D:\xampp\htdocs\testform\submit.php on line 17

Я свою почту указал. На локальном сервере xampp такая ошибка

Заметки Веб-разработчика

Полезная информация для исполнителей и заказчиков

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

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

Мы с вами сделаем небольшую форму с полями для имени, телефона и сообщения. Также, мы добавим AJAX запрос для того, чтобы избавить пользователя от неудобного переадресовывания на другую страницу после отправки письма. То есть, после отправки, выскочит сообщение под формой: «Ваше сообщение успешно отправлено».

ШАГ 1. Добавление формы в HTML файл

Для начала нам необходимо в html файл добавить нашу форму. Вставьте вот такой код:

Появляется несколько вопросов:
«Что за блок erconts?»
«Почему мы оставили action пустым?»
«Почему блок erconts имеет display: none?»

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

Action мы оставили пустым, чтобы небыло переадресации на другую страницу после отправки письма, ведь мы используем ajax метод и переадресация нам уже просто не к чему.

Блок erconts будет анимировано появляться с сообщением об успешной отправке сообщения. Анимация будет прописана в коде следующего шага.

ПРИМЕЧАНИЕ! Советую не убирать id callbacks и id submit у елемента form и input соответственно. По этим id мы сможем напрямую обращатся к ним в ajax запросе.

ШАГ 2. Добавление AJAX запроса в javascript файл

Далее, создаем javascript файл, подключаем его в наш html файл. Затем помещаем в javascript файл код ниже:

Как вы видите, мы отлавливаем событие нажатия кнопки с id submit и начинаем вызывать ajax функцию. В строке url: «send.php» вызывается php файл с обработчиком формы, который мы создадим в следующем шаге. В строке data: «$(«#callbacks»).serialize()» собираются данные для обработки, которые ввел пользователь в форму. В функции error выводится сообщение при ошибке отправки. Такое сообщение будет выводится, если вдруг у человека не будет работать интернет или если не был подключен обработчик о котором я писал ранее. В функции beforeSend выводится сообщение перед отправкой. Это сообщение часто даже не видно при отправке, потому что оно мелькает буквально на пару сотен долисекунд из-за быстрой обработки письма. Функция success выводит сообщение при удачной отправки данных письма обработчику.

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


ШАГ 3. Создание обработчика формы в PHP файле

Вам нужно в папке вашего сайта создать файл send.php и вставить в него этот код:

Кратко опишу, что делает этот код.

Первая часть кода заносит данные, которые ему передал ajax в свои переменные под названием name, phone и body. Затем, эти переменные проверяются на их содержание. Если хоть одна из них будет пустая, обработчик вернет сообщение об ошибке: «Пожалуйста, заполните все поля». Далее, если эти переменные содержат какие-то данные, то есть, пользователь ввел свои данные, обработчик начинает прорабатывать письмо. Наш обработчик начинает вычислять ip пользователя и его браузер. Далее он конструирует письмо с темой, которую мы можем указать в этом обработчике. Он вставляет переменные с данными в это письмо и проводит отправку на почту, которую вы должны указать в переменной $to в коде этого обработчика. В моем случае я написал свою почту, а вы должны написать свою или ту на которую должно прийти письмо.

Конец кода с помощью функции mail() определяет, получилось ли отправить письмо или нет. Если обработчик смог отправить письмо, он пишет одно сообщение, а если нет, другое.

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

ВСЕ ГОТОВО! Теперь на вашем сайте есть абсолютно работающая форма обратной связи в Ajax исполнении.

Форма обратной связи html + css + php + jQuery + js

by Andrej — Category Веб-дизайнеру on 27/11/2020

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

Топ-пост этого месяца:  Что такое макет OpenCart шаблоны для страниц, как добавить и настроить новый

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

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

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

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

Особенности и возможности

  • блокировка кнопки «отправить» до выполнения необходиых условий
  • простой селектор для проверки и защиты от роботов
  • дополнительная кнопка «очистить все поля»

Что входит в форму обратной связи?

  • HTML разметка (создание макета)
  • Стилизация полей формы на CSS/SCSS
  • jQuery + js
  • PHP обработчик

Создание HTML разметки

И так, давайте посмотрим на разметку формы:

  1. Здесь есть три первых поля, у которых указан id и некое js-событие onkeyup=»checkParams()» (они понадобятся нам позднее). Для них будет проводиться обязательная проверка правильности ввода данных. За это отвечает атрибут required . Если вам необходимо убрать или сделать обязательным другое поле, просто удалите/добавьте этот атрибут.
  2. Несколько дополнительных полей, не являющихся обязательными.
  3. Селектор выбора предоставляемых услуг select .
  4. Поле дополнительной информации textarea .
  5. Селектор для проверки на «человечность» — Я работ | Я человек.
  6. Две кнопки: Отправить и Стереть информацию в заполненных полях.
  7. По-хорошему, здесь еще не хватает поля с галочкой, для подтверждения согласия на обработку данных, но ее добавлению, надеюсь, не вызовет у вас трудностей.

Вроде все. Едем дальше.

Оформление формы CSS/SCSS

Все поля формы стилизованы при помощи CSS flexbox (Flexible Box Layout Module) и разбиты на группы дополнительными классами. Разумеется, вы можете создать свои собственные стили. Если вы владеете CSS, то задать оформление для всех элементов формы сможете без проблем, тут даже не потребуется моя помощь.

Настройка PHP кода

Теперь переходим к обработчику формы, где все действия начинаются с зависимости от выбранного селектора — Бот/Человек.

Что здесь есть?

  • header(‘Refresh: 5; URL=https://www.site.ru’); — после заполнения формы ботом, отправляет на страничку с уведомлением и через 5 секунд возвращает на указанную в поле.
  • mail, name, phone, . — настройка соответствия html полей. Здесь вам необходимо указать все соответствующие имена name=»» в форме обратной связи. Таким образом, в поле services вам необходимо указать точно такой же порядок опций, что и в html разметке.
  • $mess — это тело сообщения, которое будет приходить в письме. Вы можете поменять их местами, изменить названия или просто удалить/закомментировать не нужные.
  • $headers — обязательная строка, указывающая кодировку письма. Если вы случайно сотрете или измените charset=utf-8 , то все ваши слова превратятся в иероглифы.
  • header — после успешного нажатия на кнопку, посетитель будет отправлен на страничку уведомления и через 5 секунд произойдет перенаправление на указанную страничку. Или же else < он получит увдомление об ошибке.

Здесь все. Едем дальше.

Дополнительные плюшки на js и jQuery

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

Посмотрите на js-код. Это блокиратор кнопки, который при disabled не дает посетителю нажать ее, прежде чем необходимые вам поля будут заполнены.

Мы вставляем id в необходимые поля и disabled в кнопку для того, чтобы привязать их к данному скрипту. Вы можете изменить их названия и количество, добавив/убрав нужные var-строки. Но, если вы добавите или уберете их, не забудьте изменить условия в строке if (name.length != 0 && email.length >= 6 && phone.length >= 10) < .

Как работает эта строка?

Все завязано на количестве символов в указанном поле, т.е. ее длине length .

  • if (name.length != 0 — указывает на то, что поле не должно быть пустым. Читается как — «если в поле число символов не равно нулю, то…»
  • && — объединяет условия (и)
  • email.length >= 6 — кол-во символов должно быть больше или равно 6. Почему шесть? Я указал это число потому, что минимальный почтовый адрес состоит из 6 символов. Проверим? @bk.ru — 6 символов.
  • phone.length >= 10 — больше или равно десяти символам. Почему 10, а не 11 ? При заполнении этого поля, посетитель может указать свой телефон как с +7, так и через 8. Поэтому лучше указывать 10.

На этом все. Подключайте форму, тестируйте и пользуйтесь.

Если у вас остались вопросы, пишите в комментариях и не поскупитесь на оценку статьи. Заранее спасибо ��

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

Добавлено в закладки: 0

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

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

Начало формы

Конец формы

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

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


Очевидно, что вся обратная связь формируется при помощи тега

Форма обратной связи без плагинов

Здравствуйте! Сегодня я поделюсь с Вами как можно легко и быстро создать простую в установке и удобную в использовании форму обратной связи на WordPress без плагинов, используя простые средствами HTML, CSS и PHP.

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

Отправка сообщений происходит без перезагрузки страницы! По порядку следуя инструкции в итоге мы должны получить такой результат:

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

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

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

В первой строке Вам придется немного подкорректировать и указать свой путь к файлу-обработчику (mail.php), о котором расскажу ниже. Содержание тега label (текстовая метка поля ввода) и атрибута placeholder (подсказка внутри текстового поля, исчезающая при вводе) измените при желании.

Для того чтобы заменить текстовое поле с темой сообщения на раскрывающийся список необходимо заменить строку 7, применяя тег select с вариантами выбора option :

Атрибут required появился в HTML5 и указывает браузеру, что поле является обязательным для заполнения. Таким образом на стороне пользователя проводится проверка полей до отправки запроса на сервер. Атрибут работает не во всех браузерах, поэтому добавим в обработчике свою проверку.

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

Файл-обработчик с именем mail.php я поместил в папку с темой шаблона, в таком случае он будет доступен для редактирования прямо из админки блога, в меню Внешний вид — Редактор. Создаем файл, открываем его и вставляем туда следующий код:

Здесь мы повторно проводим проверку заполненности полей перед отправкой на почту. Если одно или несколько полей останутся пустыми — появится сообщение об ошибке, текст этого сообщения Вы можете изменить в параметре $error для каждого поля.

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

Подключение необходимых библиотек и скриптов

Отправка сообщений происходит на AJAX без перезагрузки страницы, поэтому в первую очередь нам необходимо подключить библиотеку jQuery. Большинство современных тем и шаблонов уже используют библиотеку jQuery и подключать ее повторно не требуется. В противном случае она подключается в functions.php следующим образом:

Есть еще один способ подключить jQuery на WordPress с помощью файла functions.php:

В первом случае будет загружена библиотека, идущая в составе WordPress. Преимущество второго способа заключается в том, что загрузка происходит с CDN Google и таким образом можно подключить любую версию.

Теперь нам необходимо подключить свой скрипт, который будет работать в паре с обработчиком mail.php и отправлять сообщения, а также выводить информационные сообщения без перезагрузки страницы. Для этого создаем файл contact.js со следующим содержимым:

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

Основная работа завершена и наша форма на данном этапе уже полностью работоспособна, остался последний штрих — придать ей форму.

Оформление внешнего вида с помощью CSS

В этом примере я приведу фрагмент своего CSS файла, который отвечает за внешний вид формы обратной связи:

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

Топ-пост этого месяца:  Как сделать кнопку со ссылкой на сайт в товарах ВКонтакте

— появляется в поле input при валидации формы;
— появляется в поле input когда форма не заполнена или заполнена неверно.

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

Подключение Google ReCaptcha для защиты от спама

По многочисленным просьбам дополняю статью. Для тех, кому требуется защита формы связи от спама, рекомендую подключить Google ReCaptcha. Для этого нужно вернуться к HTML основе формы и после строки с тегом textarea добавить новую, которая содержит ключ ReCaptcha:

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

Переходим к обработчику mail.php и дополним файл сразу после такими строками:

Обратите внимание на 2 строку — она содержит секретный ключ. Замените секретный ключ на свой, который получите вместе с публичным ключом. Файл recaptcha.php Вы найдете в архиве, загрузите его в папку с темой WordPress.

А также после 8 строки первоначального кода нужно добавить новую, которая будет проверять заполненность поля ReCaptcha:

На завершающем этапе подключаем API — скрипт ReCaptcha в секции head своего сайта:

Те, кому защита от спама не нужна, могут пропустить шаги, описанные в этом разделе.

Есть конечно и более функциональные плагины для CMS, например Contact Form 7 для WP, но зачем загружать блог? Данный код успешно справляется с возложенными на него функциями, к тому же не все плагины идеально работают и порой конфликтуют с шаблоном. На своей странице с контактами я использую именно эту форму)

Хочу заметить, что это один из самых простейших способов создать форму обратной связи без плагинов, ничего сверхъестественного, простой незамысловатый код, в котором разберется каждый, кто хоть раз редактировал свои шаблоны или записи в HTML режиме.

А у Вас есть форма обратной связи на сайте или предпочитаете использовать электронную почту, Skype и прочие средства коммуникации с пользователями?

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

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

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

Основные принципы организации обратной связи

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

Схема организации обратной связи на сайте.

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

Форма

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

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

Однако принцип один — мы отправляем некие данные на сервер.

Какие данные должны быть обязательными?

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

Обработка запроса на сервере

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

Ответ с сервера

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

Непосредственный разбор кода на HTML и PHP смотрите здесь.

Простая обратная связь на сайт

В первом примере рассмотрим простую Форму обратной связи, но и в тоже время имеющую довольно хорошую защиту.
В этом скрипте стоит защита на корректность ввода абсолютно всех данных, которые вводит пользователь, как и у большинства скриптов — все вводимые данные преобразуются в HTML-сущности ( защищаемся от разных умников ), и наконец это всем известная Капча — защита от спаммеров.

Здесь по каждой ошибке выводятся довольно интересные и красивые сообщения, которые так же можно изменить под свой дизайн ( фото ниже ).

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

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

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

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

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

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

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

PROG-TIME

Простая форма обратной связи на PHP. Отправка данных из формы на почту

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

Для того чтобы ваша форма работала, необходимо:

  1. Писать код в php файле (название.php)
  2. Наличие локального сервера Open Server, Denwer. Или можно загрузить файл на хостинг.

Здесь стандартный базовый шаблон.
В body, мы пишем вывод сообщений и форму, которая будет состоять из нескольких полей, в нашем случае это email, имя и сообщение. Для каждого поля нужно задать уникальный атрибут name.

В атрибут value, мы пишем , этот скрипт, сохраняет введённые данные, после обновления страницы. В теге textarea нет значение value, поэтому мы пишем этот скрипт в сам тег.

Теперь перейдём в PHP:

У нас есть 2 варианта добавления скрипта, либо в отдельный файл, либо в файл с формой. Если добавить файл в отдельный файл, то в форме необходимо изменить атрибут action и записать в него путь к файлу со скриптом. Если добавлять скрипт в файл с формой, то скрипт необходимо заключить внутри тега , а сам код разместить до HTML.

Скрип читается так…

В переменной $msg_box будут выводится все сообщения работы формы.

Если кнопка btn_submit нажата, то создается массив errors в который мы будем записывать ошибки.

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

Далее если массив ошибок пуст, то мы запускаем обработчик. В переменную message мы записываем данные которые будут отправлять вам на почту.

После этого мы записываем функцию отправки формы send_mail($message). Функцию я записал чуть ниже. Отправляется сообщение и выводится текст об успешной отправке.

Функция обработки выглядит, следующим образом…

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

В переменную subject записывается название письма.

Далее идут правила обработки формы. Здесь же мы пишем от кого письмо и вводим адрес почты.

И в конце мы отправляем форму через функцию mail.

На этом все. Вот так выглядит полный код формы обратной связи.

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

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

Особенности конструктора:

  • Позволяет визуально видеть все внесенные изменения.
  • Работа со всеми основными элементами формы: чекбоксы, радиокнопки, выпадающие списки, файлы, подписи к полям и т.д.
  • Может включать/отключать ненужные поля, менять их порядок (методом перетаскивания), подписи, вид и делать их обязательными к заполнению.
  • Возможность открытия формы во всплывающем окне.

Скриншоты:

Инструкция по использованию:

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

Радиокнопки выполнены в виде уникальных наборов. Чтобы сделать несколько наборов, нажмите на кнопку дубля.

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

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

Чтобы форма работала во всплывающем окне, нажмите на последнюю галочку и настройте дополнительные параметры.

Теперь, чтобы построить форму, нажмите на кнопку «Получить код» и скопируйте результат, например, в блокнот.

Как установить полученный код на своем сайте

Данный конструктор идеально подходит на сайтах с поддержкой PHP, например, для Joomla или WordPress.

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

Добавить комментарий