Не секрет, что очень часто приходится как-то общаться с посетителями своего сайта. Разумеется, можно просто дать свой e-mail (как сделал я), а можно предложить и другой способ - это форма обратной связи . Разумеется, здесь потребуется знание PHP . Но чтобы Вам не надо было писать всё с нуля, я предоставляю Вам очень даже хороший скрипт формы обратной связи .
После скачивания извлекайте архив на Ваш сайт (смотрите, ничего не сотрите у себя). Теперь давайте его настроим. Для этого открываем файл "config.php ". И меняем значения следующих переменных:
Теперь Вы можете запустить файл index.php у скрипта. В результате, перед Вами возникнет форма. Можете её заполнить и отправить письмо.
Теперь встаёт вопрос: "Как вставить эту форму обратной связи на свой сайт? ". Чтобы это сделать, найдите файл, который отвечает у Вас за страницу обратной связи (пусть это будет "feedback.html "). Сразу измените расширение на php (то есть на "feedback.php "). Скопируйте код из index.php скрипта в файл со страницей обратной связи (feedback.php ). Теперь Вы можете делать всё, что пожелаете нужным между тегами и , только не стирайте то, что Вы вставили из index.php . То что между тегов тоже не трогайте, если точно не знаете, что делаете.
И, наконец, если Вам не нравится внешний вид формы, то Вы можете его подкорректировать в файле "styling.css ".
Если у Вас остались какие-либо вопросы, либо происходят какие-то глюки со скриптом (я его не тестировал), то пишите мне на e-mail , чтобы я исправил.
Чтобы не зависеть от работы чужих скриптов, научитесь их создавать самостоятельно. Этому Вас научит мой Видеокурс "PHP и MySQL с Нуля до Гуру ":
На этом уроке мы познакомимся с функцией mail () , на примере создания формы обратной связи на PHP с последующей отправкой полученных данных на почту.
Для этого создадим два файла - forma.php и mail.php . В первом файлике будет находиться только форма с полями для ввода пользователем данных. Внутри тега form - кнопка "Отправить" и атрибут action , который ссылается на обработчик - mail.php , именно к нему обращаются данные из формы при нажатии кнопки "Отправить" . В нашем примере данные формы отправляются на веб-страницу с названием «/mail.php» . На этой странице прописан скрипт на PHP , который обрабатывает данные формы:
Данные формы отправляются методом POST (обрабатывается как $ _POST ). $ _POST - это массив переменных, переданных текущему скрипту через метод POST .
Ниже вы видите содержимое файла forma.php , поля которой заполняет сам пользователь на каком-нибудь веб-сайте. Все поля для ввода данных обязательно должны иметь атрибут name , значения мы прописываем сами, исходя из логики.
Форма обратной связи на PHP с отправкой на почту
Форма обратной связи на PHP
Оставьте сообщение:
Ваше имя:
E-mail:
Номер телефона:
Сообщение:
Текстовая область может содержать неограниченное количество символов-->
Так форма визуально выглядет в браузере.
Далее пишем код для файла mail.php . Придумываем сами имена для переменных. В PHP переменная начинается со знака $ , а затем имя переменной. Текстовое значение переменной заключается в кавычки. С помощью переменных на емайл администратора передается содержимое формы, просто подставив в квадратные скобки имя элемента формы - значение name .
Таким образом данные из массива $_POST будут переданы соответствующим переменным и отправлены на почту при помощи функции mail . Давайте заполним нашу форму и нажмем кнопку отправить. Не забудьте указать ваш е-майл. Письмо пришло моментально.
Итак, продолжаем разговор. В прошлом посте я вам рассказала о том, зачем нам, собственно, нужен фидбек, и что это такое. В этом - познакомлю вас с правилами фидбека, и поговорю немного о том, как и где его применять.
9 принципов фидбека.
Итак, перед вами 9 принципов фидбека. Я их, конечно, не придумала, но собрала за годы работы, и сформулировала очень простым и понятным языком - я считаю, что такая полезная информация должна быть доступна и ясна всем, без лишних терминов и сложноподчинённых предложений.
К каждому из принципов я дам пример - тоже очень простой, но, я надеюсь, он сделает принципы более понятными. Кроме этого, разбавлю своими мыслями. Поехали!
1. Фидбек - это важнейший инструмент во всех сферах жизни, и тем более в общественной деятельности и в работе с людьми. Пользуйтесь им!
Про важность фидбека я писала в прошлом посте, здесь я хочу написать про его использование. Я считаю, что чем больше людей будут знакомы с фидбеком и его принципами, тем легче всем нам будет жить. Он применим в работе, в ежeдневном общении с людьми, в семье. Но! Очень важно с ним не переборщить. Моя преподавательница на курсах ведения групп раз сказала:"Я поняла, что мне нужно взять отпуск, когда я начала давать фидбек мужу и детям, чётко слeдуя его принципам." Мне очень запало в душу это её высказывание. Поймите меня правильно, я уверена, что фидбек мужу, детям, маме и тёще может идти только на пользу. Но не стоит забывать, что семья - это наше безопасное место, и там должно быть пространство для необъяснимых эмоций, глупых высказываний, бесцельных проявлений любви, странностям, наконец. В семье очень важно найти баланс между фидбеком и обычными человеческими эмоциями. Это важно везде, но в семье - особенно.
2. Фидбек даётся из желания помочь, улучшить, поддержать и направить человека.
Этот принцип крайне важен. Перед тем, как давать фидбек, остановитесь на секунду и подумайте, зачем вы хотите его сказать. Ваша подруга хочет идти на первое свидание в юбке, которая очень портит её прекрасную внешность, а вам хочется, чтобы её свидание прошло хорошо, вы за неё волнуетесь? Говорите. Вас раздражает запах духов вашей коллеги, и она сама, и у вас уже месяц чешется язык высказать ей всё, что вы думаете о её удушливом аромате? Это не фидбек, друзья. Тут, наверное, лучше промолчать.
3. В процессе фидбека ваша задача приводить конкретные примеры и факты, а не абстрактные и эмоциональные высказывания.
Тут всё просто. "Вася, блин, ты козёл, ну что за хрень ты тут мне написал!" - это не фидбек, и он вряд ли пойдёт кому-то на пользу. "Вася, ты не прав. Я тебя просил написать мне список всех клиентов с фамилиями из трёх букв, а ты мне написал список работников с фамилиями из четырёх букв. Мне будет гораздо легче, если ты будешь более внимательно слушать мои просьбы." Это фидбек. Вася, может, и козёл, но после первого предложения он козлом о останется. После фидбека же есть шанс, что в следующий раз вы получите от него то, что вам нужно.
4. Выбор правильных слов и формулировок крайне важен в процессе фидбека - помните, что перед вами сидит человек, который вам важен, или же вам важна интеракция с ним (это на работе, как правило)
.
Этот пункт напрямую вытекает из предыдущего. Перед тем, как давать фидбек, ПОДУМАЙТЕ, что именно вы хотите сказать, и чего им добиться. Существует так называемый "принцип сендвича", я к нему довольно равнодушна, но многие находят его полезным, почему нет. Он гласит о том, что в фидбеке нужно располагать аргументы, как хлеб и сыр в бутерброде. Начинаем с положительного (хлеб), продолжаем отрицательным (сыр), и заканчиваем снова положительным. Я думаю, это излишняя отточенность, но если вам нравится - берите и пользуйтесь.
5. Желательно не использовать слово "но" в фидбеке (всё мне понравилось, но...). Оно отменяет и перечёркивает то, что было сказано до него.
Если ваш фидбек содержит и положительные и отрицательные моменты, то просто разделите их, скажите их в разных предложениях. Ведь они не зависят друг от друга, и не отменяют друг друга. Ваша подруга, пришедшая к вам советоваться относительно новых одёжек, скорее расcтроится, если вы ей скажете "Юбка-то ничего, но туфли абсолютно дурацкие". Зато если вы скажете "Мне нравится эта юбка, она отлично на тебе сидит, стройнит и цвет твой. Туфли мне не нравятся, мне кажется, это не твой стиль, да и цвет неудачный". Это к слову о "правде в глаза". Фидбек позволяет нам говорить эту правду, не рискуя обидеть друзей, или рассориться с коллегами. Конечно, у меня есть подруги и члены семьи, с которыми прокатит и "дурацкая юбка" и даже "ноги кривые", но таких людей у нас всех мало, поэтому см. пункт 1.
6. Помните, что хороший фидбек это тот фидбек, который даст возможность человеку, его получающему, что-то улучшить. Помните также, что никто не обязан соглашаться с вашим фидбеком и его принимать - ведь вы всегда субъективны.
Вот это, друзья, крайне важный момент. Давайте не забывать, что подруга с дурацкими туфлями, скорее всего, продолжит в них ходить. И наше мнение - это не есть мнение в последней инстанции. В лучшем случае мы можем надеяться, что оно будет учтено в той или иной мере. В другом же случае - наше мнение может так и остаться только нашим, и это НОРМАЛЬНО. Ведь мы сами далеко не всегда принимаем мнение дающего нам фидбек, будь он трижды лауреат Нобелевской премии или родная мама. Так что оставляем решение - принимать или не принимать фидбек у офидбеченной стороны.
7. В фидбеке не должно быть осуждения, а должно быть отражение ТОЛЬКО ваших мыслей и ощущений по поводу получателя фидбека в конкретной ситуации.
Да-да, как только мы осуждаем, наш фидбек теряет свою ценность, мне кажется, тут даже пример не нужен, и так всё ясно.
8. Если вы являетесь получателем фидбека, не забудьте поблагодарить того, кто вам этот фидбек даёт. С полученными знаниями нужно проделать работу, отделить зёрна от плевел и постараться их применить. Фидбек - это ценный подарок!
Сложно, правда? Но уметь получать фидбек не менее важно, чем его давать, я думаю.
9. Очень важно в процессе фидбека не потерять фидбек положительный - он не менее важен, чем фидбек отрицательный!
Есть у многих из нас такая установочка - чтобы человек учился, нужно его ругать. Такой пережиток совка. Ну так вот - фигня это, знаете ли. Мы обязаны помнить, что фидбек это не только конструктивный и аккуратный перечень недочётов, но и непременное обозначение плюсов и поиски хорошего. Вы ведь говорите мужу не только "Дорогой, ты пересолил суп!", но и "Милый, какие вкусные булочки ты испёк!" :) Ведь если муж будет слышать всё время только про пригоревшие котлеты и про пересоленный суп, довольно быстро он перестанет готовить. Так и в других сферах - не забывайте хорошее, а лучше - начинайте именно с поисков его.
Я хочу привести вам пример очень важного фидбека, который я получила. Пример очень личный, но мне важно рассказать вам об этом опыте, что бы показать реальное действие этого инструмента не только на абстрактных Васях Пупкиных из моих примеров.
Примерно год назад моя ближайшая подруга позвала меня в кафе. Илану, моему сыну, было 3 месяца, я только-только начала вылезать в мир из подгузников и колясок. Я думала, мы будем болтать о нашей тёткинской фигне. А она сказала, что ей надо поговорить со мной о наболевшем. Она мне рассказала, что ей очень не хватает меня. Что в последние полгода я совершенно погрузилась в себя и в семью, что я нe говорю с ней по телефону, не рассказываю ей ничего ни про беременность, ни про сына, не слушаю её проблемы и радости. Она сказала, что очень по мне соскучилась, и не знает, что будет дальше с нашими отношениями, так как мы отдаляемся, и я абсолютно не в курсе её новостей. Она добавила, что у неё в жизни очень непростой период, и ей очень нужнa моя поддержка.
Это был настоящий фидбек. Она говорила о своих чувствах, приводя примеры конкретных ситуаций. Она не осуждала меня за моё погружение в семью, она говорила о том, чего бы ей хотелось от наших отношений, и как этого можно достичь. Было видно, что она говорит это не только для себя, но и для меня.
А для меня это было абсолютной новостью! Я настолько погрузилась в новорожденного сына, а до того - в беременность, что не заметила, как отдалила от себя самых близких и очень важных мне людей! Я до сегодняшнего дня в шоке от того, насколько я не осознавала своё поведение.
Что было бы, если бы она не поговорила тогда со мной? Скорее всего, череда обид: "почему ты мне не звонишь?" "сто лет опять не виделись" "тебя не интересует моя жизнь" и т.д.
Что было на самом деле? Я "проснулась". Я чётко сказала ей, что я никуда не хочу деваться, что люблю её, и что я возвращаюсь. Я взяла себя в руки, и мы назначили сразу несколько "свиданий" на ближайшие месяцы. Я стала чаще звонить, и стараться брать трубку, когда звонила она. А ещё - ещё я поехала в гости к другой подруге, которой сложнее давать такого рода фидбеки, и задала ей вопрос уже сама. И оказалось, что и она чувствует себя так, как первая - представляете? Представляете, как много хорошего вышло из одного фидбека? Я сохранила отношения с двумя очень важными мне людьми. И очень моей подруге благодарна за тот разговор.
В завершение я хочу сказать, что в жизни есть не только фидбек. В ней существуют ссоры, секс, глупости, споры, баловство, юмор, обиды, любовь, комплименты, смех и ещё много всего другого. И всё это имеет право на существование - как разные аспекты межличностного общения. А с фидбеком просто чуть легче жить.
При запуске нового веб-проекта, нет ничего приятнее, чем сразу получить положительные отзывы и благодарность от первых посетителей. К сожалению, владельцы многих веб-сайтов опускают из виду этот факт, и на их сайте достаточно сложно связаться с администрацией.
Сегодня мы расскажем вам о простеньком решении проблемы. Данная форма, используя jQuery, PHP и PHPMailer позволит получать отзывы от посетителей прямо на ваш электронный ящик.
HTML
Давайте начнем с разметки HTML. Таблица стилей включена в начале документа, а исходники javascript находятся в его конце. Это повышает скорость производительности, так как скрипты загружаются последними, в то время, как остальной веб-сайт уже загружен и отображен.
: feedback.html
Quick Feedback Form w/ PHP and jQuery | Tutorialzine Demo
В теле документа мы видим DIV «#feedback». Он фиксированным позиционированием приурочен к правому нижнему углу окошка, что вы сможете увидеть в следующем разделе статьи.
Внутри него находятся 5 цветных пролётов (span). Их ширина составляет по 20% от документа, и они выровнены по левой стороне. Таким образом, они заполонят всю ширину DIV’а #feedback.
И наконец, в контейнере.section, который содержит заголовок и шапку, находится кнопка и поле ввода текста.
CSS
Переходя к редактированию стилей формы, нам нужно сначала сказать кое-что о том, как структурирована таблица стилей. Как вы видите из определений CSS, расположенных ниже, каждое правило начинается с #feedback. Таким образом, мы достигаем CSS-эквивалент namespaces, что облегчает добавление кода в существующий сайт и помогает избежать возможных конфликтов.
: styles.css – Часть 1
#feedback{
background-color:#9db09f;
width:310px;
height:330px;
position:fixed;
bottom:0;
right:120px;
margin-bottom:-270px;
z-index:10000;
}
#feedback .section{
background:url("img/bg.png") repeat-x top left;
border:1px solid #808f81;
border-bottom:none;
padding:10px 25px 25px;
}
#feedback .color{
float:left;
height:4px;
width:20%;
overflow:hidden;
}
#feedback .color-1{ background-color:#d3b112;}
#feedback .color-2{ background-color:#12b6d3;}
#feedback .color-3{ background-color:#8fd317;}
#feedback .color-4{ background-color:#ca57df;}
#feedback .color-5{ background-color:#8ecbe7;}
#feedback h6{
background:url("img/feedback.png") no-repeat;
height:38px;
margin:5px 0 12px;
text-indent:-99999px;
cursor:pointer;
}
#feedback textarea{
background-color:#fff;
border:none;
color:#666666;
font:13px "Lucida Sans",Arial,sans-serif;
height:100px;
padding:10px;
width:236px;
Moz-box-shadow:4px 4px 0 #8a9b8c;
-webkit-box-shadow:4px 4px 0 #8a9b8c;
box-shadow:4px 4px 0 #8a9b8c;
}
Первый элемент, который нам нужно отформатировать – это DIV #feedback. Ему задан фиксированное позиционирование, и он приурочен к окну браузера. Далее идет определение DIV’а.section и пяти цветных пролётов. Эти пролеты (span) отличаются лишь цветом фона, заданным разными классами.
В самом конце у нас идут CSS-правила, которые определяют внешний вид поля ввода текста.
: styles.css – Часть 2
#feedback a.submit{
background:url("img/submit.png") no-repeat;
border:none;
display:block;
height:34px;
margin:20px auto 0;
text-decoration:none;
text-indent:-99999px;
width:91px;
}
#feedback a.submit:hover{
background-position:left bottom;
}
#feedback a.submit.working{
background-position:top right !important;
cursor:default;
}
#feedback .message{
font-family:Corbel,Arial,sans-serif;
color:#5a665b;
text-shadow:1px 1px 0 #b3c2b5;
margin-bottom:20px;
}
#feedback .arrow{
background:url("img/arrows.png") no-repeat;
float:right;
width:23px;
height:18px;
position:relative;
top:10px;
}
#feedback .arrow.down{ background-position:left top;}
#feedback h6:hover .down{ background-position:left bottom;}
#feedback .arrow.up{ background-position:right top;}
#feedback h6:hover .up{ background-position:right bottom;}
#feedback .response{
font-size:21px;
margin-top:70px;
text-align:center;
text-shadow:2px 2px 0 #889889;
color:#FCFCFC;
}
Во второй части таблицы стилей вы можете видеть определение кнопки подтверждения (отправки). Учтите, что у кнопки есть три положения, которые привязаны к одному и тому же фоновому изображению – submit.png, и оно отображено только когда это нужно. Положения: стандартное положение, положение при наведении курсора мыши, а также активное положение «работающее». Когда кнопка находится в рабочем положении, эффект при наведении курсора мыши отключен.
jQuery
У формы обратной связи есть два положения: скрытая и раскрытая. Когда она загружена, по стандарту ее положение установлено на скрытом. Но когда пользователь кликает по заголовку, она раскрывается посредством jQuery. Это реализовано посредством мониторинга событий и запуска простейшей анимации, как вы можете наглядно посмотреть это ниже.
: script.js – Часть 1
$(document).ready(function(){
// The relative URL of the submit.php script.
// You will probably have to change it.
var submitURL = "submit.php";
// Caching the feedback object:
var feedback = $("#feedback");
$("#feedback h6").click(function(){
// We are storing the values of the animated
// properties in a separate object:
Var el = $(this).find(".arrow");
If(el.hasClass("down")){
anim = {
mb: -270,
pt: 10
};
}
// The first animation moves the form up or down, and the second one
// moves the "Feedback" heading, so it fits in the minimized version
Feedback.stop().animate({marginBottom: anim.mb});
Feedback.find(".section").stop().animate({paddingTop:anim.pt},function(){
el.toggleClass("down up");
});
});
Для того, чтобы наш код оставался опрятным, мы передвинули положения if в верх документа, и создали объект anim, который удерживает значения, отвечающие за анимацию. В зависимости от того, есть ли класс «down» на стрелке, мы скрываем или раскрываем форму.
Вторая часть script.js содержит в себе структуру взаимодействия AJAX с submit.php.
: script.js – Часть 2
$("#feedback a.submit").live("click",function(){
var button = $(this);
var textarea = feedback.find("textarea");
// We use the working class not only for styling the submit button,
// but also as kind of a "lock" to prevent multiple submissions.
If(button.hasClass("working") || textarea.val().length return false;
}
// Locking the form and changing the button style:
button.addClass("working");
$.ajax({
url: submitURL,
type: "post",
data: { message: textarea.val()},
complete: function(xhr){
Var text = xhr.responseText;
// This will help users troubleshoot their form:
if(xhr.status == 404){
text = "Your path to submit.php is incorrect.";
}
// Hiding the button and the textarea, after which
// we are showing the received response from submit.php
Button.fadeOut();
Textarea.fadeOut(function(){
var span = $("",{
className: "response",
html: text
})
.hide()
.appendTo(feedback.find(".section"))
.show();
}).val("");
}
});
Return false;
});
});
Здесь мы используем AJAX-метод нижнего уровня jQuery - $.ajax(), посредством которого реализовано взаимодействие с submit.php. Данный метод даёт нам немного больше контроля над соединением, нежели $.get() или $.post().
Одно большое преимущество данного метода заключается в «полноценном» обратном сообщении. Здесь мы определяем соответствие ответа и ошибки 404, которая вежливо сообщает пользователю о том, что следует проверить путь к submitURL.
Теперь давайте продолжим и перейдем к финальной части обучающей статьи – секции PHP
PHP
PHP содержит в себе информацию, пропущенную через AJAX, обрабатывает ее, и отсылает сообщение на ваш электронный ящик.
: submit.php
// Enter your email address below
$emailAddress = "[email protected]";
// Using session to prevent flooding:
session_name("quickFeedback");
session_start();
// If the last form submit was less than 10 seconds ago,
// or the user has already sent 10 messages in the last hour
if($_SESSION["lastSubmit"] && (time() - $_SESSION["lastSubmit"] 10)){
die("Please wait for a few minutes before sending again.");
}
$_SESSION["lastSubmit"] = time();
$_SESSION["submitsLastHour"]++;
require "phpmailer/class.phpmailer.php";
if(ini_get("magic_quotes_gpc")){
// If magic quotes are enabled, strip them
$_POST["message"] = stripslashes($_POST["message"]);
}
if(mb_strlen($_POST["message"],"utf-8") die("Your feedback body is too short.");
}
$msg = nl2br(strip_tags($_POST["message"]));
// Using the PHPMailer class
$mail = new PHPMailer();
$mail->IsMail();
// Adding the receiving email address
$mail->AddAddress($emailAddress);
$mail->Subject = "New Quick Feedback Form Submission";
$mail->MsgHTML($msg);
$mail->AddReplyTo("noreply@".$_SERVER["HTTP_HOST"], "Quick Feedback Form");
$mail->SetFrom("noreply@".$_SERVER["HTTP_HOST"], "Quick Feedback Form");
echo "Thank you!";
Для начала мы воспользуемся управлением сессиями PHP для того, чтобы вычислить, сколько раз пользователь использовал форму за прошедший час. Если пользователь пытается отправить сообщение менее чем через 10 секунд с момента отправки последнего сообщения или отправляет более 10 сообщений в течение часа, то ему будет отображена ошибка.
Сообщения посылаются при помощи класса PHPMailer. Он работает только с PHP5, поэтому нужно, чтобы на сервере была поддержка именно этой версии.
Число методов PHPMailer’а используется для конфигурации выходящих писем. Посредством IsMail() мы сообщаем классу, что следует использовать внутреннюю PHP-функцию mail(). AddAddress() добавляет получаталей (вы можете добавить туда более одного получателя). После добавления объекта в тело документа, мы указываем адрес ответа, и отправляем сообщение.
На этом мы заканчиваем разработку!
В завершение
Вы можете использовать данную форму для сбора отзывов от посетителей. Данной формой вы значительно облегчаете пользователям процесс написания отзывов, а многие пользователи просто не станут писать отзыв, если для этого надо еще куда-то щелкать и куда-то переходить. Вы также без труда можете оформить форму по собственному усмотрению или по шаблону веб-сайта.
Для развития веб проекта очень важно получать обратную связь от посетителей. К сожалению, на многих веб сайтах возможность отправить сообщение разработчикам либо вообще не предоставляется, либо связана с достаточно серьезными трудностями.
Сегодня мы сделаем простое решение данной задачи. Используя jQuery, PHP и класс PHPMailer форма посылает предложение пользователя прямо в ваш почтовый ящик.
HTMLНачнем с разметки HTML. Стили включаются вверху документа, а файлы JavaScript - внизу. Таким образом оптимизируется процесс загрузки страницы, так скрипты грузятся последними, позволяя пользователю увидеть содержание страницы.
demo.htmlФорма обратной связи с использованием PHP и jQuery | Демонстрация для сайта сайт Обратная связь
ОтправитьВнутри body находится div #feedback . Он размещен внизу справа в окне с помощью фиксированного позиционирования, что будет видно в разделе урока, посвященного CSS.
Внутри данного div размещаются пять цветных элементов span . Каждый из них имеет 20% ширины и смещается влево. Таким образом, они размещаются точно на по всей ширине div #feedback .
Затем следует контейнер .section, который содержит заголовок, область текста и кнопку.
Перейдем к заданию стилей для формы. Для начала скажем несколько слов о том, из чего состоит структура таблицы стилей. Если взглянуть на определения CSS, представленные ниже, то можно заметить что каждое правило начинается с #feedback . Таким образом организуется подобие пространства имен в CSS, что облегчает добавление кода к существующему веб-сайту без конфликтов.
styles.css - Часть 1#feedback{ background-color:#9db09f; width:310px; height:330px; position:fixed; bottom:0; right:120px; margin-bottom:-270px; z-index:10000; } #feedback .section{ background:url("img/bg.png") repeat-x top left; border:1px solid #808f81; border-bottom:none; padding:10px 25px 25px; } #feedback .color{ float:left; height:4px; width:20%; overflow:hidden; } #feedback .color-1{ background-color:#d3b112;} #feedback .color-2{ background-color:#12b6d3;} #feedback .color-3{ background-color:#8fd317;} #feedback .color-4{ background-color:#ca57df;} #feedback .color-5{ background-color:#8ecbe7;} #feedback h6{ background:url("img/feedback.png") no-repeat; height:38px; margin:5px 0 12px; text-indent:-99999px; cursor:pointer; } #feedback textarea{ background-color:#fff; border:none; color:#666666; font:13px "Lucida Sans",Arial,sans-serif; height:100px; padding:10px; width:236px; resize:none; outline:none; overflow:auto; -moz-box-shadow:4px 4px 0 #8a9b8c; -webkit-box-shadow:4px 4px 0 #8a9b8c; box-shadow:4px 4px 0 #8a9b8c; }
Первый элемент, для которого задается стиль - это div #feedback . Ему назначается фиксированная позиция и привязка к окну браузера. После него идет определение для div .section и пяти цветных элементов span . Данные элементы отличаются только цветом фона, который назначается отдельно для каждого класса.
В самом низу представленной части CSS файла определяются правила для вывода области текста.
styles.css - Часть 2#feedback a.submit{ background:url("img/submit.png") no-repeat; border:none; display:block; height:34px; margin:20px auto 0; text-decoration:none; text-indent:-99999px; width:91px; } #feedback a.submit:hover{ background-position:left bottom; } #feedback a.submit.working{ background-position:top right !important; cursor:default; } #feedback .message{ font-family:Corbel,Arial,sans-serif; color:#5a665b; text-shadow:1px 1px 0 #b3c2b5; margin-bottom:20px; } #feedback .arrow{ background:url("img/arrows.png") no-repeat; float:right; width:23px; height:18px; position:relative; top:10px; } #feedback .arrow.down{ background-position:left top;} #feedback h6:hover .down{ background-position:left bottom;} #feedback .arrow.up{ background-position:right top;} #feedback h6:hover .up{ background-position:right bottom;} #feedback .response{ font-size:21px; margin-top:70px; text-align:center; text-shadow:2px 2px 0 #889889; color:#FCFCFC; display:block; }
Во второй части таблицы стилей определяется вид кнопки отправки. Отметим, что существует три состояния кнопки, изображения для которых содержатся в одном файле для фонового рисунка - submit.png . Они выводятся только когда необходимо.
Форма обратной связи имеет два состояния - минимизированной и максимальное. При загрузке по умолчанию устанавливается минимизированное состояние внизу справа на экране. А jQuery переводит форму в максимальное состояние, когда пользователь нажимает кнопку мыши на заголовке. Данная функция выполняется с помощью привязки события и выполнения простых анимаций.
script.js - Часть 1$(document).ready(function(){ // Относительный URL скрипта submit.php. // Вероятно, вам нужно будет его поменять. var submitURL = "submit.php"; // Кэшируем объект feedback: var feedback = $("#feedback"); $("#feedback h6").click(function(){ // Значения свойств анимации хранятся // в отдельном объекте: var anim = { mb: 0, // Поле снизу pt: 25 // Отступ сверху }; var el = $(this).find(".arrow"); if(el.hasClass("down")){ anim = { mb: -270, pt: 10 }; } // Первая анимация перемещает вверх или вниз форму, а вторая перемещает // заголовок, так что он выравнивается по минимизированной версии feedback.stop().animate({marginBottom: anim.mb}); feedback.find(".section").stop().animate({paddingTop:anim.pt},function(){ el.toggleClass("down up"); }); });
Для того, чтобы код был простым и понятным, вверху создается объект anim , который содержит значения для анимации, и размещается оператор if . В зависимости ото существования класса ‘down ‘ на стрелке, мы разворачиваем или сворачиваем форму.
Вторая часть script.js обрабатывает работу с AJAX с submit.php .
script.js - Часть 2$("#feedback a.submit").live("click",function(){ var button = $(this); var textarea = feedback.find("textarea"); // Мы используем класс working не только для задания стилей для кнопки отправки данных, // но и как своеобразный замок для предотвращения множественных генераций формы. if(button.hasClass("working") || textarea.val().length < 5){ return false; } // Запираем форму и изменяем стиль кнопки: button.addClass("working"); $.ajax({ url: submitURL, type: "post", data: { message: textarea.val()}, complete: function(xhr){ var text = xhr.responseText; // Данная операция помогает пользователю определить ошибку: if(xhr.status == 404){ text = "Путь к скрипту submit.php неверный."; } // Прячем кнопку и область текста, после которой // мы показывали полученный ответ из submit.php button.fadeOut(); textarea.fadeOut(function(){ var span = $("",{ className: "response", html: text }) .hide() .appendTo(feedback.find(".section")) .show(); }).val(""); } }); return false; }); });
Мы используем метод jQuery для AJAX $.ajax() для взаимодействия с submit.php . Данный метод дает немного больше контроля над соединением, чем $.get() и $.post() .
Одним из преимуществ метода является видимость свойств объекта во "всей" возвратной функции. Здесь мы проверяем статус ответа на соответствие ошибке 404 (не найдена страница) , и выводим сообщение пользователю с просьбой проверить путь submitURL .
Теперь пора перейти к завершающей части - PHP.
PHPPHP обрабатывает данные, переданные с AJAX, проверяет их и посылает e-mail сообщение по заданному адресу.
submit.php// Здесь нужно ввести свой адрес $emailAddress = "[email protected]"; // Используем сессию, чтобы предотвратить флудинг: session_name("quickFeedback"); session_start(); // Если последняя форма была отправлена меньше 10 секунд назад, // или пользователь уже послал 10 сообщений за последний час if($_SESSION["lastSubmit"] && (time() - $_SESSION["lastSubmit"] < 10 || $_SESSION["submitsLastHour"] > 10)){ die("Пожалуста, подождите несколько минут, прежде чем отправить сообщение снова."); } $_SESSION["lastSubmit"] = time(); $_SESSION["submitsLastHour"]++; require "phpmailer/class.phpmailer.php"; if(ini_get("magic_quotes_gpc")){ $_POST["message"] = stripslashes($_POST["message"]); } if(mb_strlen($_POST["message"],"utf-8") < 5){ die("Ваше сообщение слишком короткое."); } $msg = nl2br(strip_tags($_POST["message"])); // Используем класс PHPMailer $mail = new PHPMailer(); $mail->IsMail(); // Добавляем адрес получателя $mail->AddAddress($emailAddress); $mail->Subject = "Новое письмо из формы обратной связи"; $mail->MsgHTML($msg); $mail->AddReplyTo("noreply@".$_SERVER["HTTP_HOST"], "Форма обратной связи на демо странице"); $mail->SetFrom("noreply@".$_SERVER["HTTP_HOST"], "Форма обратной связи на демо странице"); $mail->Send(); echo "Спасибо!";
Сначала мы используем управление сессиями, чтобы определить, как часто использует пользователь отправку формы в течение последнего часа, а также определяем время, прошедшее с последней отправки. Если с момента последней отправки прошло менее 10 секунд, или пользователь уже посылал более 10 сообщений в течение последнего часа, выводится сообщение об ошибке.
E-mail отправляется с помощью класса PHPMailer . Внимание! Он работает только с PHP5.
Несколько методов PHPMailer используется для конфигурации исходящего e-mail. Метод IsMail() указывает классу использовать внутреннюю функцию PHP mail() . Метод AddAddress() добавляет адрес получателя (вы можете добавить более одного получателя с помощью дополнительных вызовов данного метода). После добавления темы письма и текста указывается адрес для ответов и производится отправка сообщения.
Готово!
ЗаключениеВы можете использовать данную форму для организации быстрой обратной связи с посетителем вашего сайта. Очень низкий барьер перед отправкой - нужно просто заполнить текстовове поле и нажать кнопку - создаст отличные условия для того, чтобы посетители ваших страниц начали делиться своими идеями. Скрипт также хорошо структурирован и прост в настройке, что поможет вам с минимальными усилиями использовать его на своем сайте.
