Красивая форма обратной связи в стиле Metro UI

Категория: Веб-программирование| Интересное| Разработка сайтов

28 Авг 2013

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

Задача была поставлена как – разработка красивой формы обратной связи с использованием javascript и php. Таким образом, был разработан jQuery плагин позволяющий использовать красивую форму обратной связи у Вас на сайте.

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

  feedback_metroui_by_blogzor.rar (12,9 KiB, 1 845 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. Надеюсь она будет красиво и практично смотреться на Вашем сайте. Удачного использования!

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

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

Комментариев к записи: 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 документ, как следовало бы =)

Дмитрий Глущенко Ответил:

Не знаешь, не болтай глупости! Все нормально и в HTML устанавливается.

Алексей Ответил:

Сам интерфейс работает как и HTML, так и в PHP документе. А вот обработк отправки сообщений, конечно только в PHP документе :)

alex

30 Август 2014 в 3:41 пп

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

alex

30 Август 2014 в 3:42 пп

Сорри, в опере 12.16 работает

Павел

2 Сентябрь 2014 в 10:41 пп

Спасибо за форму, она отличная!
Но есть одно «НО»!
При нажатии Enter форма сразу отправляет письмо. Можно это как-то отменить? Очень неудобно писать в несколько строк из-за этого.
Очень рассчитываю на подробный ответ, ибо пока не спец… :)

Алексей Ответил:

Павел, Вам необходимо вместо

$(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;
}
});
});

думаю поможет. Удачи!

http://bilderbox.cc/images/141014/sitemap.html

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’: ‘http://sat-oskol.ru/scripts/sendmail.php'});
});

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

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

О блоге

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

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

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

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