Полезные статьи о разработке сайтов от вебмастера
Категория:
Часто бывает, что появляется необходимость в размещении формы обратной связи на странице контактов, так как она позволяет отправлять пользователю информацию прямо с сайта.
В данной статье я постараюсь рассказать, как в течении 5 минут, быстро и просто, можно создать отличную форму обратной связи и разместить её у себя на сайте.
Рассмотрим два этапа создания формы:
1. Создание 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, 4 101 hits)
Архив содержит :
UPD 28.08.2013
Написал новую статью про jQuery плагин формы обратной связи в стиле Windows 8
Кстати, очень интересно:
Данный блог создан с целью помочь, как начинающему вебмастеру, так и опытному разработчику, в решении проблем возникающих при разработке сайтов. Здесь Вы прочитаете полезные статьи о том, как грамотно произвести SEO оптимизацию своего сайта, и найдёте важные исследования в сфере интернет-маркетинга. Научитесь писать собственные компоненты и модули для известных CMS, а также узнаете интересные методы работы с Фреймворками, CSS, HTML, jQuery и PHP. Из записей блога вы поймёте как грамотно разрабатывать макеты сайтов и что такое валидная вёрстка. БЛОГZOR – поможет Вам стать web-Гуру и понять тонкости веб-мастеринга.
Комментариев к записи: 23
30 Ноябрь 2011 в 1:08 пп
Пробовала подключать форму обратной связи на html по разному, но по вашей схеме получилось лучше всего. Спасибо.
23 Февраль 2012 в 1:23 пп
Пытался вставить на простую html страницу – не хочет работать.
blogz0r Ответил:
23 Февраль 2012 в 1:37 пп
А что конкретно не работает? Если вы вставили только форму и используете обработчик сhttp://ip-whois.net/ и получаете сообщение «Для сайта *** услуга не доступна ,то перейдите http://ip-whois.net/forma-obratnoj-svyazi/ и пройдите все три шага, а в особенности третий! – «Шаг третий — введите адрес страницы с установленной формой, и адрес электронной почты на который должны приходить сообщения:»
Владимир Ответил:
23 Март 2012 в 11:23 дп
прохожу 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 копейки(?
катя Ответил:
15 Август 2012 в 5:16 пп
Пардон. Нашла, где проверка полей. Но форма всё-равно не работает.
Максим
14 Ноябрь 2012 в 6:35 дп
Спасибо, отличная форма! Что-то не могу добавить доп. поля? Как-то реализовать можно?
Ольга
28 Март 2013 в 6:05 пп
Добрый день,
вставила форму на сайт, попробовала, после отправки возвращает на страницу, где расположена форма, но письмо на почту не приходит.
В чем может быть причина?
Mike
17 Май 2013 в 6:33 пп
У меня проблема с кодировкой сообщения, присылаемого на почту. Кто-нибудь сталкивался?
Mike Ответил:
17 Май 2013 в 6:45 пп
Все решил, убрал из sendmail.php упоминание про кодировку
никита
2 Июнь 2013 в 12:38 пп
добрый день, подскажите почему письма не приходят? Но при отправке пишет что сообщение отправлено?
Дмитрий
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
1 Май 2015 в 4:49 пп
Попробуйте новый сервис knopkazakaza.ru – форма обратной связи за 5 минут на вашем сайте
21 Январь 2017 в 9:29 дп
форма появилась на сайте, но письмо не приходит на почту. почему