Создание формы обратной связи. Конструкторы и генераторы форм обратной связи
Приветствую дорогой читатель, сегодня приготовил для Вас вкусненькую форму обратной связи html, которая работает без перезагрузки страницы по технологии Ajax + мощный триггер, который будет мотивировать ваших посетителей воспользоваться формой. Читатели моего блога очень активно обсуждали мою предыдущую статью по на Landing Page, теперь оцениваем, смотрим на доработанную новую форму. Все необходимые исходники и демо прикрепил в статье , структуру работы и подключению так же разберем.
UPD: Устранена ошибка с кодировкой имени в теме письма. Теперь все отображается верно. Благодарим читательницу (Екатерину Карачеву)
Формат самой формы так же включает файл обработчик на языке php, дополнительно для работы понадобится библиотека jquery и скрипты, но обо всем по порядку, не буду долго грузить — переходим к обзору и разбору нашей обратной связи.
Форма обратной связи html — структура работы
Внешний вид нашей формы выглядит следующим образом
В чем здесь вся соль? Форма так таковая есть с правой стороны, а вот в левой части сделал специальный блок, который будет стимулировать вашего посетителя ввести свои контактные данные немедленно! Секрет прост: Видите дату и время в левом блоке? Дата будет выводиться сегодняшняя все время, со временем диапазон этих двух часов высчитывается от настоящего часа, допустим если у вас сейчас время 13:14 , то диапазоном часов будет: с 12 до 14. Посмотрите на как это работает)))
Посетитель будет видеть: ух ты скидка сегодня, да и по времени я как раз попал вовремя, тут еще и скидка! Надо брать незамедлительно! — Вот это и есть наш триггер.
Исходники формы обратной связи html скачали, демо посмотрели — наигрались думаю)) Теперь о само насущном, принцип работы:
Проверка полей в форме input происходит в файле обработчика contact.php ниже в листинге программного кода сможете посмотреть, сообщение об ошибках и успешной отправке письма появляется в самой форме, вот так это выглядит, после отправки:
Исходный код обработчика формы
Вставьте в строке 52 свою почту, таким образом все письма будут приходить на указанную почту.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | < 1) { $error .= "Введите ваше сообщение. <".$tel."> ".$error." ";
}
}
?>
|
";
}
// Проверка телефона
function ValidateTel($valueTel)
{
$regexTel = "/^{7,12}$/";
if($valueTel == "") {
return false;
} else {
$string = preg_replace($regexTel, "", $valueTel);
}
return empty($string) ? true: false;
}
if(!$tel)
{
$error .= "Пожалуйста введите телефон.
";
}
if($tel && !ValidateTel($tel))
{
$error .= "Введите корректный телефон.
";
}
if(!$error)
// Проверка сообщения (length)
if(!$message || strlen($message) < 1)
{
$error .= "Введите ваше сообщение.
";// В этой строчке ставиться минимальное ограничение на написание букв.
}
if(!?utf-8?b?". base64_encode($name) ."?=";
$message ="\n\nИмя: ".$name."\n\nНомер телефона: " .$tel."\n\nСообщение: ".$message."\n\n";
$mail = mail("[email protected]", $subject, $message,
"From: ".$name_tema." <".$tel."> "."Reply-To: ".$email." "." X-Mailer: PHP/" . phpversion());
if($mail)
{
echo "OK";
}
}
else
{
echo "
Работоспособность формы
Чтобы приходили письма на ваш почтовый ящик, измените строку о которой я говорил выше. Советую использовать gmail.com почту, на ней задержек и косяков не наблюдается при получении сформированного письма из формы. Предупредил, т.к. много было вопросов у читателей (письма не приходят на mail.ru). Будьте внимательны на этот счет.
Заполняем все поля, обратите внимание, что телефон вводится с 8 — я специально в подсказке так и написал номер с восьмерки «89251122333». При вводе знака «+» появится сообщение об ошибке. Если кому-то нужно, то легко добавить в обработчик данный «+» .
Заполненная форма с тестовыми данными
Письмо на почтовом ящике
Как видите письмо получили, со всеми тремя полями, которые заполняли и отправили. Заголовок письма «Заявка с сайта сайт» меняется в обработчике contact.php
Все работает отлично, будет приятно услышать вашу обратную связь (конструктивную критику) в комментариях, если появились затруднения и с чем-то не справляетесь — смело пишите мне в VK (в контактных данных найдете). Надеюсь вам понравился и дизайн и функционал данного симбиоза формы обратной связи (заказа услуг, заявки) и триггера, призывающего к действию. Всем удачи в работе и позитивного настроя, пока))
Подготовлено при поддержке,
Ф ормы в html предназначены для обмена данными между пользователем и сервером. Область применения форм не ограничена отправкой данных на сервер, с помощью клиентских скриптов можно получить доступ к любому элементу формы, изменять его и применять по своему усмотрению.
Для отправки формы на сервер используется кнопка SUBMIT , такого же эффекта можно добиться, если нажать клавишу Enter в пределах формы. Когда html форма отправляется на сервер, управление данными передается CGI-программе, заданной параметром action тега FORM. Аббревиатурой CGI (Common Gateway Interface, общий шлюзовый интерфейс) обозначается протокол, с помощью которого программы взаимодействуют с веб-сервером. С помощью CGI на сервере можно выполнять программы на любом языке программирования и результат их действия выводить в виде веб-страницы. Наиболее популярны следующие языки - Perl, PHP, С.
Тег FORM - создаём форму
Для указания браузеру, где начинается и заканчивается html форма , используется тег FORM. Между открывающим и закрывающим тегами и можно помещать любые необходимые теги HTML. Это позволяет добавить элементы формы в ячейки таблицы для их форматирования, а также использовать изображения. В документе допускается наличие любого количества форм, но одновременно на сервер может быть отправлена только одна форма. По этой причине формы не должны быть вложены одна в другую.
Атрибуты тега FORM приведены ниже:
- action - указывает обработчика, к которому обращаются данные формы при их отправке на сервер, в качестве обработчика может выступать CGI-программа или HTML-документ, а так же можно указать адрес электронной почты, начиная его с ключевого слова maiito .
- enctype - устанавливает тип для данных, отправляемых вместе с формой.
- method - этот параметр сообщает серверу о цели запроса, используют два основных метода: GET и POST :
- get - этот метод является одним из самых распространенных и предназначен для получения требуемой информации и передачи данных в адресной строке.
- post - посылает на сервер данные в запросе браузера, что позволяет отправлять большее количество данных, чем доступно методу GET , поскольку у него установлено ограничение в 4 Кб.
- target - после обработки формы данные возвращаются в виде html-документа, а с помощью этого атрибута можно определить окно, в которое будет загружаться итоговая веб-страница. Имя окна задаётся параметром NAME .
- _blank - загружается в новом окне браузера;
- _self - загружает страницу, возвращаемую обработчиком формы в текущее окно;
- _parent - загружает страницу во фрейм-родитель, если фреймов нет, то этот параметр работает как _self ;
- _top - отменяет все фреймы, если они имеются, и загружает страницу в полном окне браузера, в противном случае этот параметр работает как _self .
Элементы форм
Форма представляет собой лишь контейнер для размещения объектов, которые дублируют элементы интерфейса операционной системы: кнопки, поле со списком, переключатели, флажки и т.д.
Текстовое поле
Текстовое поле предназначено для ввода символов с клавиатуры. Различают три элемента формы, которые используются для этой цели, - однострочное текстовое поле, поле для ввода пароля и многострочное текстовое поле:
- Однострочное текстовое поле - такое поле предназначено для ввода пользователем строки текста. Размер поля можно ограничить по ширине, но это делается больше для удобства дизайна, чтобы элемент можно было вместить в отведенное для него место. Текст при ограничении ширины поля можно писать как обычно, но при наборе введенные ранее символы скрываются.
- maxlength - максимальное количество символов, разрешенных при наборе текста, если этот параметр опустить, то число вводимых символов неограничено.
- name - имя поля, предназначено для того, чтобы обработчик формы мог идентифицировать поле.
- size - ширина поля, физический размер зависит от настроек операционной системы и выбранного браузера.
- value - начальный текст, содержащийся в поле.
Пример использования текстового поля приведен ниже:
В браузере этот код будет выглядеть вот так:
Ширина текстового поля - величина нестабильная и в разных может меняться в небольших пределах. Для html формы , которая располагается в колонке ограниченной ширины, подобные изменения приводят к нарушению исходного макета. В этом случае лучше вообще отказаться от использования параметра size и заменить его стилями. К тому же CSS позволяет изменять (background) , (font) и (border) .
С применением стилей может выглядеть, примерно так:
- Поле для ввода пароля - обычное текстовое поле, вводимый текст в котором отображается звездочками. Такая особенность предназначена для того, чтобы никто не подглядел вводимый пароль. Параметры поля для пароля аналогичны параметрам текстового поля. Поле для пароля нашло широкое применение на сайтах для авторизации пользователей и разграничения доступа к разделам сайта, где требуется подтвердить права доступа.
Посмотрим, что получилось, в браузере:
Ну вот, получилась уже практически готовая форма обратной связи, если придать ей определённые стили, то получится вполне приличная html форма для сайта .
Изображения в текстовом поле
Изображение возле текстового поля обычно добавляется для привлечения внимания пользователя и дизайнерского оформления. Стили разрешают вставить рисунок прямо в поле для ввода текста.
Вначале готовим необходимое изображение, а затем добавляем его к тегу INPUT в виде фона, используя атрибут . Исходный рисунок можно уменьшить в графическом редакторе или, наоборот, увеличить высоту поля, подгоняя его под высоту изображения. С этой целью применяется свойство height . В качестве аргумента параметра background необходимо использовать no-repeat , тогда рисунок будет отображаться только один раз и не станет повторяться, как это задано для фона по умолчанию. Чтобы не писать текст поверх рисунка, к стилю тега INPUT следует добавить атрибут padding-left . Он обеспечивает набор текста правее рисунка, а его значение зависит от ширины изображения.
Примерно так:
Из-за того, что текстовое поле изображается утопленным за счет трехмерной рамки, реальная высота области несколько меньше указанной высоты. Так, в данном примере используются рисунки высотой 34px, если установить такое же значение и для поля, то изображения окажутся обрезанными снизу. Чтобы этого не произошло, высота поля в примере задана больше. С той же целью можно установить другой вид рамки, используя стилевое .
Кнопки
Кнопки являются одним из самых понятных и интуитивных элементов интерфейса. По их виду сразу становится понятно, что единственное действие, которое с ними можно производить, - это нажимать на них. За счет этой особенности кнопки часто применяются в формах, особенно при их отправке и очистке.
Кнопку на веб-странице можно создать двумя способами - с помощью тега INPUT и тега BUTTON . Рассмотрим вначале добавление кнопки через INPUT и его синтаксис.
Основных параметров всего два - это name и value . Атрибут name задает имя кнопки и предназначен для того, чтобы обработчик формы мог идентифицировать это поле. Параметр name может быть опущен, в таком случае значение кнопки не передается на сервер. Значение кнопки и надпись на ней одновременно устанавливаются с помощью параметра value .
В надписи на кнопке можно ставить пробелы в любом количестве, за счет них можно регулировать её ширину.
Второй способ создания кнопки основан на использовании тега BUTTON . ОН по своему действию напоминает результат, получаемый с помощью тега INPUT . В отличие от этого тега, BUTTON предлагает расширенные возможности по созданию кнопок. Например, на подобной кнопке можно размещать любые элементы HTML, в том числе и . Используя стили, можно задать вид кнопки путем изменения шрифта, цвета фона, размеров и других параметров.
Теоретически, тег BUTTON должен располагаться внутри формы, устанавливаемой элементом FORM . Тем не менее браузеры не выводят сообщение об ошибке и корректно работают с тегом BUTTON , если он встречается самостоятельно. Однако если результат нажатия на кнопку необходимо отправить на сервер, то помещать BUTTON между тегами FORM обязательно.
В следующем примере показано создание обычной кнопки с текстом, а также кнопки с одновременным использованием текста и рисунка. Чтобы рисунок и текст были выровнены по одной оси, добавлен атрибут absmiddie для тега IMG .
Вот, что получилось:
Кнопка с текстом Отправить- Кнопка SUBMIT - предназначена для отправки данных на сервер. Её вид ничем не отличается от других кнопок, но при нажатии на нее происходит выполнение серверной программы, указанной параметром action тега FORM . Эта программа, называемая еще обработчиком формы, получает данные, введенные пользователем в полях формы, производит с ними необходимые манипуляции, после чего возвращает результат в виде html-документа. Что именно делает обработчик, зависит от автора сайта; так, подобная технология применяется при создании опросов, форумов, гостевых книг, тестов и многих других вещей.
Браузер отобразит:
- Кнопка RESET - при нажатии на кнопку RESET данные формы возвращаются в первоначальное значение. Как правило, эту кнопку применяют для очистки введенной в полях формы информации. Но для больших форм от использования кнопки RESET лучше вообще отказаться, чтобы по ошибке на нее не нажать, ведь тогда придется заполнять форму заново.
Ниже показана форма с одним текстовым полем, которое уже содержит предварительно введенный текст с помощью параметра value тега INPUT . После изменения текста и нажатия на кнопку "Очистить", значение поля будет восстановлено, и в нем снова появится надпись "Введите текст".
Посмотрим код html формы в отображении браузера:У этого поля три основных параметра: name , value и checked :
- name - однозначно идентифицирует поле, вдобавок, поскольку переключатели являются групповыми элементами, то имя у всех элементов группы должно быть одинаковым. Такой подход однозначно устанавливает принадлежность поля к определенной группе.
- value - задает, какое значение будет отправлено на сервер. Здесь каждый элемент должен иметь свое уникальное значение, чтобы можно было идентифицировать, какой пункт был выбран пользователем.
- checked - применяется для предварительного выделения пункта списка.
По определению, набор переключателей может иметь только один выделенный пункт, поэтому добавление checked сразу к нескольким полям не приведет к какому бы то ни было выдающемуся результату. В любом случае будет отмечен элемент, находящийся в коде HTML последним.
В браузере форма будет иметь вид:
Флажки
Флажки (checkbox) используют, когда необходимо выбрать два или более варианта из предложенного списка. Если требуется выбрать лишь один вариант, то для этого следует предпочесть переключатели (radiobutton) .
Параметры флажков идентичны переключателям, а именно: name задает имя поля, value - его значение, a checked устанавливает флажок как помеченный. При этом каждый флажок, входящий в группу, рассматривается как независимый, поэтому имена и значения у них должны различаться.
Браузер отобразит.
Создание формы обратной связи
Создание формы обратной связи на сайте
В процессе продвижения сайта наряду с изучением статистики посещений, особое значение имеет информация о сайте от самих посетителей. Одним из самых простых способов получения такой информации является размещение на сайте странички с формой обратной связи . Посетитель оставляет сообщение, и оно придет на ваш адрес электронной почты или любой другой, который вы укажете. При этом посетителю не надо использовать свою почтовую программу, ему даже не обязательно иметь свой e-mail.
Простейший пример такой формы приведен на рис.1. (Это вполне рабочий образец, и вы можете с его помощью послать мне благодарственное письмо.)
Рис.1. Простая форма обратной связи
Для размещения на сайте такой формы обратной связи достаточно всего лишь элементарных сведений об HTML и умения оперировать двумя командами - Копировать и Вставить. Рассмотрим последовательность действий по созданию формы обратной связи (рис.1) на HTML-странице сайта.
1. Проверьте, что тарифный план вашего хостинга (контора, где размещён ваш сайт) поддерживает PHP. Если нет, то вам придётся скорее всего доплатить для перехода на другой тариф, поддерживающий эту самую PHP. Значение этой аббревиатуры можете не искать, так как знание PHP вам не понадобится.
2. Выберем страницу, на которой хотим разместить форму обратной связи, и вставим в нужное место следующий код:Как видим, вся форма создаётся тегом с атрибутами action=mail.php (указание на страницу сайта, где расположен сценарий обработки введенных данных) и method=post (метод отправки данных на сервер). Отдельные строки созданы тегом с вполне понятными атрибутами. Расположение отдельных элементов формы, текст, шрифты и проч. можете менять в соответствие с дизайном вашего сайта. В теге