Полезные статьи о разработке сайтов от вебмастера
Красивая форма обратной связи в стиле Metro UI
Категория: | |
28 Авг 2013В одной из прошлых статей я описывал, где взять и как сделать хорошую форму обратной связи используя данный сервис. Но с того момента прошло уже много времени и я решил, что форму обратной связи можно сделать еще лучше! А в связи с я посчитал, что сделать форму обратной связи в стиле будет очень интересно.
Задача была поставлена как – разработка красивой формы обратной связи с использованием javascript и php. Таким образом, был разработан jQuery плагин позволяющий использовать красивую форму обратной связи у Вас на сайте.
Для того, чтобы использовать форму у Вас на сайте, Вам необходимо скачать данный архив:
feedback_metroui_by_blogzor.rar (12,9 KiB, 2 626 hits)
Архив содержит:
/img/ – директория с картинками
/js/email.feedback.js – плагин
/js/email.feedback.min.js – сжатая версия плагина
/css/email.feedback.css – стили оформления формы
/css/email.feedback.min.css – сжатая версия стилей оформления формы
/php/ – директория с скриптом отсылки сообщения из формы
form.html – пример страницы с формой
Закачайте все файлы в директорию у себя на сайте. Далее на странице, где Вы хотите разместить форму, необходимо подключить в разделе <head></head> следующие строки:
<link type="text/css" rel="stylesheet" href="css/email.feedback.min.css"> <script type="text/javascript" src="js/email.feedback.min.js"></script>
После чего разместите в <body></body> саму форму обратной связи:
<!-- Форма обратной связи / BLOGZOR.RU --> <div id="feedback"> <div class="pushmessage" id="jdisabled">Для того, чтобы воспользоваться формой обратной связи, включите, пожалуйста, javascript в Вашем браузере</div> <div id="jenable" class="turnoff"> <div class="field" id="name"> <div class="field-container"> <div class="field-name nameicon"><label for="iname">Ваше имя</label></div> <div class="input-container"><input type="text" name="name" id="iname" placeholder="enter your name here" class="checkfield"></div> </div> </div> <div class="field" id="email"> <div class="field-container"> <div class="field-name emailicon"><label for="iemail">Ваша почта</label></div> <div class="input-container"><input type="text" name="email" id="iemail" placeholder="enter your email here" class="checkfield"></div> </div> </div> <div class="field" id="message"> <div class="message-container"> <div class="textarea-name messageicon"><label for="imessage">Сообщение</label></div> <div class="textarea-container"><textarea name="message" id="imessage" row="35" class="checkfield"></textarea></div> </div> </div> <div class="buttons"> <a class="button sendicon" id="send">Отправить</a> </div> </div> </div> <!-- -->
Осталось только подключить сам плагин к форме. В разделе добавляем следующие строки:
<script type="text/javascript">
$(window).load(function() {
$('#feedback').feedback({'theme':'classic'});
});
</script>
Подключаемая форма имеет настройки по умолчанию:
'theme' :'classic', // тема оформления (classic,grey,purple,sweety,peachpuff) 'minname': 4, // минимальное количество символов в поле «имя» 'minmessage': 5, // минимальное количество символов в поле «сообщение» 'sender': 'php/sendmail.php' // путь до файла с PHP обработчиком
Настройки можно изменять. Так, к примеру, подключим форму с темой оформления «Grey». Для этого в <head></head> вставляем код:
<script type="text/javascript">
$(window).load(function() {
$('#feedback').feedback({'theme':'grey'});
});
</script>
Также не забудьте поменять в файле /php/config.php настройки для примера на свой email и название сайта. В противном случае, Вам не будут приходить сообщения отправляемые с помощью данной формы обратной связи!
В результате у Вас должна получиться такая вот форма обратной связи:
А форма в классическом варианте выглядит так:
Данная форма обратной связи реализована с помощью javascript и PHP с использованием технологии ajax. Надеюсь она будет красиво и практично смотреться на Вашем сайте. Удачного использования!
- Метки: , , , , , ,
Кстати, очень интересно:
Написать комментарий
- Записи (RSS)
- Комментарии (RSS)
О блоге
Данный блог создан с целью помочь, как начинающему вебмастеру, так и опытному разработчику, в решении проблем возникающих при разработке сайтов. Здесь Вы прочитаете полезные статьи о том, как грамотно произвести SEO оптимизацию своего сайта, и найдёте важные исследования в сфере интернет-маркетинга. Научитесь писать собственные компоненты и модули для известных CMS, а также узнаете интересные методы работы с Фреймворками, CSS, HTML, jQuery и PHP. Из записей блога вы поймёте как грамотно разрабатывать макеты сайтов и что такое валидная вёрстка. БЛОГZOR – поможет Вам стать web-Гуру и понять тонкости веб-мастеринга.
Категории
- Bitrix (2)
- DLE (1)
- Joomla (2)
- SEO (2)
- WebAsyst (4)
- WordPress (1)
- Веб-программирование (16)
- Интересное (7)
- Полезные заметки (16)
- Разработка сайтов (3)
Комментариев к записи: 14
8 Ноябрь 2013 в 2:49 пп
Скачал архив, изменил почтовый адрес в конфиге, а письмо не приходит. Возможно, проблема в том, что отправлял я письма с компа (local host). Но затем поставил все на сайт, а форма не работает, хотя сайт находится на субдомене.
Аякс срабатывает, а php молчит – не отправляет ничего.
Спасайте или подскажте, где искать.
Димитрий
16 Декабрь 2013 в 11:59 дп
у меня такая же беда..нажимаю на отправить и ничего не отправляется( просто ничего не происходит
24 Январь 2014 в 2:13 пп
не могу разобраться в настройке ширены формы а так все ок работает
20 Март 2014 в 12:46 дп
Спасибо большое за форму!
Проблема с настройкой ширины textarea решается добавлением следующей строчки в CSS: textarea {resize: none;}
А у кого не отправляется, тот скорее всего вставил форму в HTML, а не в PHP документ, как следовало бы =)
Дмитрий Глущенко Ответил:
29 Март 2014 в 10:05 пп
Не знаешь, не болтай глупости! Все нормально и в HTML устанавливается.
Алексей Ответил:
7 Апрель 2014 в 6:01 пп
Сам интерфейс работает как и HTML, так и в PHP документе. А вот обработк отправки сообщений, конечно только в PHP документе
alex
30 Август 2014 в 3:41 пп
Пишет, что js не включены в браузере. Включение и тестирование в других браузерах успехом не завершилось.
alex
30 Август 2014 в 3:42 пп
Сорри, в опере 12.16 работает
Павел
2 Сентябрь 2014 в 10:41 пп
Спасибо за форму, она отличная!
Но есть одно «НО»!
При нажатии Enter форма сразу отправляет письмо. Можно это как-то отменить? Очень неудобно писать в несколько строк из-за этого.
Очень рассчитываю на подробный ответ, ибо пока не спец…
Алексей Ответил:
3 Сентябрь 2014 в 7:10 пп
Павел, Вам необходимо вместо
$(window).load(function() {
$(‘#feedback’).feedback({‘theme’:'grey’});
});
вставить
$(window).load(function() {
$(‘#feedback’).feedback({‘theme’:'grey’});
});
$(document).ready(function() {
$(window).keydown(function(event){
if( (event.keyCode == 13) && (validationFunction() == false) ) {
event.preventDefault();
return false;
}
});
});
думаю поможет. Удачи!
19 Октябрь 2014 в 12:35 пп
wholesale discount nfl throwback jerseys from china, 100% authentic quality promise, cheap replica throwback sports jerseys for sale free shipping.
[url=http://bilderbox.cc/images/141014/sitemap.html]http://bilderbox.cc/images/141014/sitemap.html[/url]
15 Декабрь 2014 в 7:44 дп
Спасибо,
Ваше сообщение успешно отправлено!
а письма не приходят
Евгений
12 Март 2015 в 5:33 пп
Подскажите пожалуйста, как сменить кодировку? На моем сайте иероглифы отображаются…
дмитрий
30 Апрель 2015 в 12:44 пп
подскажите плз правильно ли я в скрипте указал путь к php файлу ?
$(window).load(function() {
$(‘#feedback’).feedback({‘theme’:'grey’,'sender’: ‘});
});