Делаем хорошую форму обратной связи

Категория: Веб-программирование| Полезные заметки

10 Авг 2011

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

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

Рассмотрим два этапа создания формы:

1. Создание html кода формы

Есть неплохой сервис, созданий формы обратной связи, предоставляющий возможность создания и размещения. Ну что же, приступим! Переходим по ссылке, и начинаем создавать html форму, указываю необходимы цвета и параметры, а также размеры формы. Чтобы указать размеры, просто потащите за правый нижний угол блока формы и раздвиньте её на необходимую вам ширину и высоту. После чего необходимо нажать на кнопку «Настроил!». После чего вам будет предложено вставить код вашей формы у себя на сайте.

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

НО, в коде который вам предложат будет два скрытых блога с рекламой. Первый невидимый блок после кнопки «Отправить»:

</pre>
<div id="show_ipwhois" style="display: none; margin-left: 10px; margin-right: 10px; margin-bottom: 10px; margin-top: 4px;"><a href="http://ip-whois.net/test-speed-internet/"><small>скорость интернета</small></a></div>
<pre>

и второй – ссылка на картинке с капчей:

<a title="тестирование интернет скорости" onclick="return show_ipwhois()" href="http://ip-whois.net/test-speed-internet/" target="_blank"><img style="float: left; border: none;" src="http://ip-whois.net/forma-obratnoj-svyazi/images/capcha.php" alt="" /></a>

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

Итак, удаляем блоки с рекламой, капчу, при этом не забудьте в javaScript’e удалить проверку на капчу, т.е находим:

res = res && (document.getElementById("name").value != "") && (document.getElementById("msg").value != "") && (re.exec(document.getElementById("email").value) != null) && (document.getElementById("capcha").value != "");

и заменяем на:

res = res && (document.getElementById("name").value != "") && (document.getElementById("msg").value != "") && (re.exec(document.getElementById("email").value) != null);

Далее находим  строку:

</pre>
<form id="callbackForm" action="http://ip-whois.net/forma-obratnoj-svyazi/?route=mail" method="post">

и меняем в ней action=»http://ip-whois.net/forma-obratnoj-svyazi/?route=mail» на action=»ваш_сайт/sendmail.php» , или другими словами вставляем адрес вашего обработчика отправки (ниже я расскажу как его создать, это будет второй этап) .

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

2. Создание обработчика для отправки сообщений с сайта

Продолжая пример, создаём в корне сайта файл sendmail.php и вставляем в него следующий код:


/* Проверка на заполнение полей */
if (isset($_POST['name']) && isset($_POST['email']) && isset($_POST['msg'])) {
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['msg'];

/* Убираем все лишние пробелы и переносы строк  и преобразуем все теги html в символы*/
$name = htmlspecialchars(trim($name));
$email = htmlspecialchars(trim($email));
$message = htmlspecialchars(trim($message));

/* Формируем сообщение */
$yourmail = "ВАША_ПОЧТА"; // вставьте сюда ваш email на который будут приходить письма пользователей
$sub = "Сообщение с сайта ВАШ_САЙТ"; //вставьте название вашего сайта
$messsage = "Пользователь: $name \nс email адресом E-mail: $email \nОтправил сообщение: \n$message";

/* Отправка */
$sendmail = mail ($yourmail,$sub,$messsage,"Content-type:text/plain; charset = utf-8\r\nFrom:$email");
if ($sendmail == 'true'){
echo '<script type="text/javascript">// <![CDATA[
alert(\'Сообщение отправлено!\');
// ]]></script>';
}
else {
echo '<script type="text/javascript">// <![CDATA[
alert(\'Ошибка! Сообщение не отправлено.\');d
// ]]></script>';
}
}
echo '<script type="text/javascript">// <![CDATA[
document.location.href="http://ВАШ_САЙТ/СТРАНИЦА_С_ФОРМОЙ_ОБРАТНОЙ СВЯЗИ";
// ]]></script>';
?>

При этом заменяем все необходимые параметры в файле (такие как ВАША_ПОЧТА, ВАШ_САЙТ и т.д.). Собственно всё! Теперь у вас на сайте есть, красивая форма обратной связи.

Также можно скачать скрипт формы обратной связи с blogzor.ru. Форма будет выглядеть так:

Скачать:

  feedback_by_blogzor.zip (2,6 KiB, 3 478 hits)

Архив содержит :

  • feedbackform.css – стили оформления
  • feedbackform.js – ява скрипты проверки полей ввода
  • sendmail.php – обработчик для отправки сообщений
  • mailform – форма для отправки сообщений

UPD 28.08.2013

Написал новую статью про jQuery плагин формы обратной связи в стиле Windows 8

Кстати, очень интересно:

Опубликовать в twitter.com Опубликовать в своем блоге livejournal.com Поделится ссылкой на yandex.ru

Комментариев к записи: 23

Bingan

30 Ноябрь 2011 в 1:08 пп

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

Евгений

23 Февраль 2012 в 1:23 пп

Пытался вставить на простую html страницу – не хочет работать.

blogz0r Ответил:

А что конкретно не работает? Если вы вставили только форму и используете обработчик с http://ip-whois.net/ и получаете сообщение «Для сайта *** услуга не доступна ,то перейдите http://ip-whois.net/forma-obratnoj-svyazi/ и пройдите все три шага, а в особенности третий! – «Шаг третий — введите адрес страницы с установленной формой, и адрес электронной почты на который должны приходить сообщения:»

Владимир Ответил:

прохожу 2 шага нормально а на третьем ввел адрес страницы где установлен код и почту, жму (ввел!) и ничего не происходит я уже раз 5 пробовал все с начало делать не получается просто ничего не происходит когда жму на ввел!

Павел

16 Март 2012 в 12:57 пп

Большое спасибо.
Хороший, простой пример и главное все работает..

Алексей

21 Март 2012 в 12:51 пп

Здравствуйте! Мне нужно отправлять письма с html страницы с сервера, где нет пхп и БД.
Форма

form method=»post» action=»mailto:xxxxxx@yandex.ru»

вызывает почтовый клиент для отправки.
С таким же успехом достаточно просто написать xxxxxx@yandex.ru в тексте и сделать ссылку активной.
Есть ли возможность отправлять с html-страницы без привлечения почтового клиента? А чтобы еще добавлял subject? (Или subject прописывается сразу за адресом?)

Алексей

8 Апрель 2012 в 11:21 дп

Добрый день.
Вставил ваш вариант формы на сайт все работает но после нажатия на кнопку отправить всплывает окно ,, остановить сценарий выполнения ,, после чего переходит на страницу –
Not Found

The requested URL /stranica_animacij was not found on this server.
Apache/2.2.17 (Unix) Server at stranarazvlechenij.ru Port 80

подскажите как это исправить.

Алексей

8 Апрель 2012 в 11:23 дп

Подскажите что надо прописать в обработчике если форма вставлена не на одной странице а на нескольких

Светоч

7 Июнь 2012 в 4:39 пп

Спасибо! Все работает на ура!

Ираклий

22 Июнь 2012 в 11:26 пп

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

катя

15 Август 2012 в 5:14 пп

Доброго времени суток.
А можно ли узнать.. Почему-то формочка не работает на сайте. Делала по инструкции с созданием сендмэйла. Откуда-то проявляется «заполните все поля правильно». тут вроде в коде этой фразы как минимум не было. откуда он ёе вводит, и, соответственно, почему форма не работает( вроде просто, как 2 копейки(?

катя Ответил:

Пардон. Нашла, где проверка полей. Но форма всё-равно не работает.

Максим

14 Ноябрь 2012 в 6:35 дп

Спасибо, отличная форма! Что-то не могу добавить доп. поля? Как-то реализовать можно?

Ольга

28 Март 2013 в 6:05 пп

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

В чем может быть причина?

Mike

17 Май 2013 в 6:33 пп

У меня проблема с кодировкой сообщения, присылаемого на почту. Кто-нибудь сталкивался?

Mike Ответил:

Все решил, убрал из sendmail.php упоминание про кодировку

никита

2 Июнь 2013 в 12:38 пп

добрый день, подскажите почему письма не приходят? Но при отправке пишет что сообщение отправлено?

http://video-dostup.ru/about/contacts.html вот тут форма

Дмитрий

8 Август 2013 в 12:47 пп

Спасибо! Работает, очень помогли!!!

Alexey

28 Август 2013 в 7:50 пп

Написал новую статью про jQuery плагин формы обратной связи в стиле Windows 8

Серго

11 Февраль 2014 в 11:19 пп

Сделал всё по инструкции как и все предыдущие 100 раз с предыдущими 100 формами обратной связи с других 100 разных сайтов – результат….как всегда. Хостинг Мастерхост, пересылка на @mail.ru, цмс Вордпресс. Форму вставил в сайдбар, файл обработчик php в папку с темой, все нужные поля как всегда заменил. Результат 0. Но у меня терпения много, пойду на 101 сайт…

Алексей

8 Март 2014 в 4:31 пп

Добрый день, сделал как у вас написано, все просто супер, вот тока у меня она загвоздка, я создал несколько полей name и форма перестала работать, точнее мои кривые руки не могут ее запустить, php и js я не знаю, пытаюсь методом тыка их переделать и не выходит, помогите пожалуйста, вот пример формы http://terem-n.ru/formirovanie-tseny

Dmitriy

1 Май 2015 в 4:49 пп

Попробуйте новый сервис knopkazakaza.ru – форма обратной связи за 5 минут на вашем сайте

Амир

21 Январь 2017 в 9:29 дп

форма появилась на сайте, но письмо не приходит на почту. почему

Написать комментарий

Вы должны Войти, чтобы оставить комментарий.

О блоге

Данный блог создан с целью помочь, как начинающему вебмастеру, так и опытному разработчику, в решении проблем возникающих при разработке сайтов. Здесь Вы прочитаете полезные статьи о том, как грамотно произвести SEO оптимизацию своего сайта, и найдёте важные исследования в сфере интернет-маркетинга. Научитесь писать собственные компоненты и модули для известных CMS, а также узнаете интересные методы работы с Фреймворками, CSS, HTML, jQuery и PHP. Из записей блога вы поймёте как грамотно разрабатывать макеты сайтов и что такое валидная вёрстка. БЛОГZOR – поможет Вам стать web-Гуру и понять тонкости веб-мастеринга.

Последние комментарии

  • Амир: форма появилась на сайте, но письмо не приходит на [...]
  • Ян: Все нравится, единственное, раскрывающийся блок мо [...]
  • СПАСИБО!: Спасибо тебе! Замечательная функция. очень помогла [...]
  • Алексей: Подскажите, а как заставить этот скрипт отработать [...]
  • Дмитрий: Заработало, надо было малость поменять путь в conf [...]

Можно Скачать