Скрипт обратной связи для сайта – Готовая форма обратной связи на HTML для сайта — как вставить скрипт

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

Приветствую вас всех мои друзья! Сегодня я хочу поделиться с вами уроком. На какую тему? Думаю, вы и сами прекрасно догадались!

Форма обратной связи для сайта, которую я вам покажу – основана на использовании технологии 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.

master-css.com

Блок обратной связи — Технологии Яндекса

Чтобы разместить блок обратной связи, используйте вложенную структуру тегов <div>:

<div data-block="widget-feedback" ...>
    <div data-type="..." ...>
    ...
</div>

<div data-block="widget-feedback" data-title="Обратная связь" data-stick="right">
    <div data-type="call" data-url="+7 012 345-67-89"></div>
    <div data-type="telegram" data-url="https://t.me/example"></div>
    <div data-type="mail" data-url="mailto:[email protected]"></div>
    <div data-type="chat"></div>
</div> 

Возможные атрибуты внешнего <div data-block="widget-feedback">:

Атрибут	Описание
data-title	Принимает произвольное текстовое значение. Например, «Обратная связь». Отображается на Турбо‑странице, если вы передаете атрибут data-stick со значением false.
data-stick	Позволяет выравнивать блок. Возможные значения: left — выравнивание по левому краю страницы. При таком расположении вы можете разместить до четырех кнопок. Кнопки будут расположены вертикально. right — выравнивание по правому краю страницы. При таком расположении вы можете разместить до четырех кнопок. Кнопки будут расположены вертикально. false — блок будет расположен в том месте страницы, где он указан в RSS-канале. В этом случае количество кнопок не ограничено — пользователь сможет прокрутить блок до нужной кнопки.

Возможные атрибуты вложенного <div data-type="...">:

Атрибут	Описание
data-type	Позволяет передать тип связи. Возможные значения: call — позволяет указать номер телефона; chat — позволяет добавить чат для бизнеса; mail — позволяет указать адрес электронной почты; callback — позволяет добавить форму обратной связи, которая при нажатии кнопки откроется поверх содержимого страницы. Следующие значения определяют мессенджер или социальную сеть:

yandex.ru

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

Вы здесь: Главная — PHP — PHP Скрипты — Скрипт формы обратной связи

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

e-mail (как сделал я), а можно предложить и другой способ — это форма обратной связи. Разумеется, здесь потребуется знание PHP. Но чтобы Вам не надо было писать всё с нуля, я предоставляю Вам очень даже хороший скрипт формы обратной связи.

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

После скачивания извлекайте архив на Ваш сайт (смотрите, ничего не сотрите у себя). Теперь давайте его настроим. Для этого открываем файл «config.php«. И меняем значения следующих переменных:

1. «mailto» — поставьте вместо «[email protected]» адрес своего почтового ящика.
2. «charset» — поставьте кодировку, хотя если Ваш сайт русскоязычный, то можете оставить « windows-1251«.
3. «content» — советую оставить «text/plain«, так как вряд ли Ваши посетители будут отправлять Вам сообщения в HTML-формате.

Теперь Вы можете запустить файл index.php у скрипта. В результате, перед Вами возникнет форма. Можете её заполнить и отправить письмо.

Теперь встаёт вопрос: «Как вставить эту форму обратной связи на свой сайт?«. Чтобы это сделать, найдите файл, который отвечает у Вас за страницу обратной связи (пусть это будет «feedback.html«). Сразу измените расширение на php (то есть на «feedback.php«). Скопируйте код из index.php скрипта в файл со страницей обратной связи

(feedback.php). Теперь Вы можете делать всё, что пожелаете нужным между тегами <html> и </html>, только не стирайте то, что Вы вставили из index.php. То что между тегов <?php и ?> тоже не трогайте, если точно не знаете, что делаете.

И, наконец, если Вам не нравится внешний вид формы, то Вы можете его подкорректировать в файле «styling.css«.

Если у Вас остались какие-либо вопросы, либо происходят какие-то глюки со скриптом (я его не тестировал), то пишите мне на e-mail, чтобы я исправил.

Чтобы не зависеть от работы чужих скриптов, научитесь их создавать самостоятельно. Этому Вас научит мой Видеокурс «

PHP и MySQL с Нуля до Гуру«: http://srs.myrusakov.ru/php

• Создано 02.12.2010 18:18:01
• Михаил Русаков

Следующая статья

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   <a href=»https://myrusakov.ru» target=»_blank»><img src=»https://myrusakov.ru/images/button.gif» alt=»Как создать свой сайт» /></a>

   Она выглядит вот так:

2. Текстовая ссылка:
   <a href=»https://myrusakov.ru» target=»_blank»>Как создать свой сайт</a>

   Она выглядит вот так: Как создать свой сайт

3. BB-код ссылки для форумов (например, можете поставить её в подписи):
   [URL=»https://myrusakov.ru»]Как создать свой сайт[/URL]

myrusakov.ru

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

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

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

• Отправитель (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.

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

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

madeas.ru