НТВ плюс 

Горизонтальная форма обратной связи html. Веб-дизайн и поисковая оптимизация. Код из урока по созданию формы обратной связи

На этом уроке мы познакомимся с функцией 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 .

$to = "[email protected]"; // емайл получателя данных из формы
$tema = "Форма обратной связи на PHP"; // тема полученного емайла
$message = "Ваше имя: ".$_POST["name"]."
";//присвоить переменной значение, полученное из формы name=name
$message .= "E-mail: ".$_POST["email"]."
"; //полученное из формы name=email
$message .= "Номер телефона: ".$_POST["phone"]."
"; //полученное из формы name=phone
$message .= "Сообщение: ".$_POST["message"]."
"; //полученное из формы name=message
$headers = "MIME-Version: 1.0" . "\r\n"; // заголовок соответствует формату плюс символ перевода строки
$headers .= "Content-type: text/html; charset=utf-8" . "\r\n"; // указывает на тип посылаемого контента
mail($to, $tema, $message, $headers); //отправляет получателю на емайл значения переменных
?>

Таким образом данные из массива $_POST будут переданы соответствующим переменным и отправлены на почту при помощи функции mail . Давайте заполним нашу форму и нажмем кнопку отправить. Не забудьте указать ваш е-майл. Письмо пришло моментально.


Добрый день, форма обратной связи должна присутствовать на каждом сайте. Сегодня я покажу пример готовой формы для вставки на любой сайт, в том числе и на движок wordpress. Готовый пример html и php кода можно будет скопировать на свой сайт. Кроме готового примера, существует много плагинов, которые так же пользуются большой популярностью. На многих сайта такая форма уже встроена в тему, но иногда бывает необходимость добавить еще одну на другую страницу или заменить старую.

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

Есть конечно и достойные ответы, но их очень мало. Я приведу простой пример, для которого много ума не нужно. Особых знаний в php не требуется, точнее они вообще не нужны. Что и где нужно изменить, я напишу подробно, когда это будет нужно. Форма работает нормально, без сбоев. Пример формы находится у меня на . В готовый пример я добавил немного стилей для красоты, чтоб форма совсем уже не смотрелась «убого». При желании можно все изменить на ваше усмотрение.

Готовая форма обратной связи для сайта на html

В данном примере, форма обратной связи для сайта состоит из html кода. Такой пример html кода вставляете абсолютно на любую страницу сайта, не важно, где и что вы используете. Этот же код можно вставить на страницу движка wordpress, все будет работать правильно и без сбоев.

Имя E-mail: Тема сообщения Ваш текст:

< form action = "/wp-content/themes/xmarkup/form.php" method = "post" name = "form" > Имя< input class = "inp" style = "width: 30%;" name = "name" type = "text" / >

E - mail : < input class = "inp" style = "width: 30%;" name = "email" type = "text" / >

Темасообщения< input class = "inp" style = "width: 30%;" name = "temma" type = "text" / >

Ваштекст:

< textarea class = "inp" style = "width: 80%;" cols = "1" name = "massage" rows = "5" > < / textarea >

< input class = "inp" type = "submit" value = "Отправить" / >

< / form >

В самом начале кода, в первом строчке, вы должны указать свой путь к php файлу form.php (про него немного попозже). Больше ничего менять не нужно. Если вас не устраивает название формы и ее поля, вы всегда можете добавить новые или изменить старые. Так же можно добавить свои стили прямо суда в таблицу. Если такой вариант вам неудобный, задавайте новые классы и уже потом добавляйте стили через ваш файл style.css

Кто не знает, как это можно сделать, заходим в админку сайта, переходим в редактор и открываем файл style.css. В самый конец таблицы стилей добавляем вот этот код. В итоге должен быть вставлен код формы на страницу и ваши css стили в таблицу style.css

Inp{ padding: 10px; border: 1px solid #E5E5E5; width: 200px; color: #999999; box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 8px; }

Inp {

padding : 10px ;

border : 1px solid #E5E5E5;

width : 200px ;

color : #999999;

box - shadow : rgba (0 , 0 , 0 , 0.1 ) 0px 0px 8px ;

Moz - box - shadow : rgba (0 , 0 , 0 , 0.1 ) 0px 0px 8px ;

Webkit - box - shadow : rgba (0 , 0 , 0 , 0.1 ) 0px 0px 8px ;

После проделанных действий, у вас должна получиться вот такая форма обратной связи на странице. Не стоит сильно увлекаться, ваша форма должна быть простой и максимально удобной. Без лишних дополнительных полей...имя, почта, тема и сообщение. При желании, даже Тему сообщения можно убрать.

Php код формы

С разметкой формы определились, красоту навели, теперь необходимо создать файл с расширением php и добавить в него вот такой код. Файл добавляйте через FTP клиент на ваш сайт. Большинство пользователей используют CMS, скидывайте данный файл в папке с вашей темой. Адрес и название этого файла, вы должны изначально прописать в разметке вашей формы, которую я показывал выше. Я прописал полный путь для примера, чтоб было понятно, что и куда необходимо вставить.

(

Сам код файла form.php содержит в себе:

< meta http - equiv = "refresh" content = "1; url=http://сайт" >

< meta charset = "UTF-8" / >

if (isset ($_POST [ "name" ] ) ) { $name = $_POST [ "name" ] ; if ($name == "" ) { unset ($name ) ; } }

if (isset ($_POST [ "email" ] ) ) { $email = $_POST [ "email" ] ; if ($email == "" ) { unset ($email ) ; } }

if (isset ($_POST [ "temma" ] ) ) { $temma = $_POST [ "temma" ] ; if ($temma == "" ) { unset ($temma ) ; } }

if (isset ($_POST [ "massage" ] ) ) { $massage = $_POST [ "massage" ] ; if ($massage == "" ) { unset ($massage ) ; } }

if (isset ($name ) && isset ($email ) && isset ($temma ) && isset ($massage ) ) {

$address = "[email protected]" ;

$mes = "Имя: $name \nE-mail: $email \nТема: $temma \nТекст: $massage" ;

$send = mail ($address , $temma , $mes , "Content-type:text/plain; charset = UTF-8\r\nFrom:$email" ) ;

if ($send == "true" )

{ echo "Сообщение отправлено" ; }

else { echo "Ой, что-то пошло не так" ; }

else

echo "Заполните все поля" ;

Вместо url=http://сайт пишем свой адрес сайта. $address = «[email protected]» — в данной строчке указываем свой адрес электронной почты, на которую будут приходить письма. Больше ничего менять не нужно, все настроено и работает. Если у вас возникли трудности в процессе установки, пишите в комментариях, я обязательно отвечу.

Вставка обратной связи в wordpress

Процесс установки формы в wordpress ничем не отличается, все действия делаются аналогично. Файл form.php желательно закачать в папку с вашей темой. Не забываем в html разметки указать полный и точный адрес к файлу обработчику. Кроме этого, нужно изменить адрес сайта на свой сайт и правильно написать адрес электронной почты. Код готовой формы можно вставить на любую страницу вашего блога. В качестве примера я добавил к себе на блог на страницу с конкурсами.

В качестве примера, можно создать страницу «Связаться с автором» или «Автор» и закинуть туда вашу форму. На некоторых блогах я замечал снизу каждой формы ряд из кнопок социальных сетей или дополнительные варианты связи с автором. Если есть желание, можно так же повторить. У меня на блоге форма связи работает, я проверял лично на своем примере. Если к вам письма не доходят, значит проблема с вашей стороны.

Плагины для wordpress

Если у вас возникли трудности с вставкой такой рода обратной связи на свой сайт, вы можете сказать один из плагинов и установить его на свой сайт. На сегодня существует большое количество плагинов, с помощью которых можно сделать такие формы для сайта. Заходим в панель администратора, нажимаем на Плагины — добавить новый. Выбираем любой, который вам понравится и пользуемся на здоровье. Больше популярностью пользуется плагин Contact Form 7.

  1. Fast Secure Contact Form.
  2. Contact Form by Contact ME.
  3. FormCraft.
  4. Visual Form Builder.
  5. nForms – WordPress Form Builder.
  6. Gravity Forms.

Устанавливаем каждый по очереди и смотрим на каждый из них отдельно. Обратите внимание сразу на работоспособность плагина, на удаление посторонней ссылки на сайт автора (если она имеется). Все такие формы изначально смотрятся очень не красиво, сможете ли вы настроить ее под свой вкус и цвет.

Возьмем для примера первый из них. Добавляем новый плагин Contact Form 7. Данный плагин очень простой, при работа с ним проблем возникнуть не должно. Многие блогера пользуются этим плагином для дополнительных мелких форм на своих сайтах. Переходи в консоли слева в пункт Contact Form 7 и нажимаем «добавить новую форму». Язык по умолчанию уже стоит русский.

В первой вкладке выбираем и называем поля, которые будут присутствовать. Не нужно делать очень большую форму, добавляем имя, почту, тему, сообщение и кнопку «отправить». В вкладке «Письмо» указываем ваш электронный ящик, на который будут приходить сообщения". Особых трудностей у вас возникнуть не должно, все интуитивно понятно.

После создания, плагин предложит вам короткий шорткод, который нужно будет вставить в нужное место на сайте, например . После вставки шорткода, вы увидите свою новенькую форму. При создании любой страницы, переходим на вкладку редактирования «Текст» и вставляем ваш код.

Небольшой минус заключается в том, что дизайн вашей обратной связи будет в очень ужасном виде. Не стоит сильно расстраиваться. Заходим через ftp по данному адресу wp-content/plugins/contact-form-7/modules. В этой папке находятся все css стили плагина. Можно смело добавлять свои новые свойства, чтоб ваша форма была красивая и заметная.

Генератор формы обратной связи

Кроме дополнительных плагинов, можно воспользоваться таких форм. Существуют специальные сервисы, с помощью которых можно быстро и без особых знаний создать новенькую форму. Существует и другая сторона медали. Такие сервисы так же нужно проверить на работоспособность и самое главное, на стоимость такого удовольствия. Некоторые из них есть бесплатные, но так же существуют и платные варианты. Напишите в яндексе название одного их них.

  • formdesigner;
  • livetools.uiparade;
  • Google Forms;
  • iFormbuilder;
  • faary.

В таких онлайн генераторах нет необходимости прописывать код с нуля, думать про ошибки и так далее. Все уже сделано ранее. От вас необходимо выбрать только поля для формы, добавить кнопку «отправить» и прописать все необходимые записи. После всех этих действий, сервис предложит вам код для вставки на страницу сайта. Копируете полученный код на свою страницу и проверяете связь на работоспособность.

Связь с владельцем сайта, блога или магазина сейчас существует на каждом сайте. Очень много интернет магазинов пользуются услугами платных сервисов. С помощью таких сервисов, кроме отправки писем, повышается количество продаж. Очень удобно, когда клиент заходит на сайт и в любое время может в живую связаться с администратором интернет магазина.

На сегодня подобных вида услуг существует большое количество и все они не стоят на месте. С каждый обновлением добавляются новые фишки. Онлайн консультанты добавляют много возможностей вашему интернет магазину для удобства связи с клиентом. Возьмем для примера сервис livetex, единственный его минус наверное цена. Период пользования три месяца стоит 4200 рублей для одного магазина. Всегда есть возможность испытать пробный период.

  1. Живое общение с клиентом.
  2. Генераторы лидов.
  3. Различные виджеты для обратного звонка.
  4. Онлайн статистика.
  5. Онлайн мониторинг.

Если у вас остались вопросы как устанавливать обратную связь на сайт, задавайте их в комментариях. Не стесняйтесь, поделитесь статьей в социальных сетях.

Всем привет! В этой статье вы узнаете, как создать всплывающую форму обратной связи для html и wordpress сайтах. В первую очередь такие формы будут необходимы интернет-магазинам, лендингам, да и простым сайтам-визиткам, так как это реально удобно для пользователя.

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

Создаем форму обратной связи на html

Итак, допустим у вас уже есть сайт, и вы хотите создать форму, при заполнении которой, пользователь сможет получить от вас обратную связь. Для этого, в первую очередь создается сам каркас.

Вставляем в нужное место на сайте следующий код:

Онлайн заявка

По желанию вы можете добавить дополнительные поля для ввода информации, либо убрать уже имеющиеся. Настоятельно не рекомендую вам использовать в подобных формах капчу, либо другие защиты от ботов, что затруднит пользователю заполнение формы.

Код вставлен, что мы видим?

Форма появилась, но надо придать ей вид. Для этого добавляем следующие стили:

/* Форма обратной связи */ #inline { margin-left:30px; width:80%; margin:0 auto; background:#fff; padding:10px 20px; } .txt { display:inline-block; color:#676767; width:190px; margin-bottom:10px; border:1px solid #ccc; padding:5px 9px; font-size:15px!important; line-height:1.4em; } .txtarea { display:inline-block; color:#676767; width:617px; margin-bottom:10px; border:1px solid #ccc; padding:5px 9px; font-size:15px!important; line-height:1.4em; height:80px; } .txt:focus, .txtarea:focus { border-style:solid; border-color:#bababa; color:#444; } input.error, textarea.error { border-color:#973d3d; border-style:solid; background:#f0bebe; color:#a35959; } input.error:focus, textarea.error:focus { border-color:#973d3d; color:#a35959; } #send { color:#FFFFFF; display:block; cursor:pointer; padding:5px 11px; font-size:1.2em; border:solid 1px #F9F9F9; border-radius:2px; background:#70C6B9; width:210px; margin-bottom:20px; } #send:hover { background:#979797; } /* Форма обратной связи */

Так уже гораздо лучше. В любом случае, форму вам надо будет подстраивать под общий дизайн сайта, поэтому у вас она в конечном итоге будет отличаться от моей.

Выглядит это вот так:

Что получается? Посетитель кликает на поле, и скрипт подставляет ему уже готовую маску, с кодом страны. Довольно удобно.

Для этого, необходимо подключить скрипт маски. Скачать его вы сможете в самом конце статьи вместе с исходниками.

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

Для этого перед закрывающимся тегом вставьте следующий скрипт:

Как работает этот скрипт?

  1. Производит проверку введенного e-mail.
  2. Указывает поля, с которыми будет работать.
  3. Проверяет эти поля на заполнения. В случае, если обязательные поля не указаны – выдает сообщение о том, что их нужно заполнить.
  4. Обрабатывает введенную информации и инициирует отправку уведомления на почту.
  5. Выдает сообщение пользователю о том, что его заявка принята с помощью Ajax.

Осталось сделать самое последнее – создать файл sendmessage.php вставить в него нижеприведенный php код и загрузить его в корень вашего сайта.

Новое сообщение\r\n"; $msg .= "

Имя: ".$username."

\r\n"; $msg .= "

Номер телефона: ".$userphone."

\r\n"; $msg .= "

Почта: ".$usermail."

\r\n"; $msg .= "

Сообщение: ".$content."

\r\n"; $msg .= " "; // отправка сообщения if(@mail($sendto, $subject, $msg, $headers)) { echo "true"; } else { echo "false"; } ?>

Вот и все, простая форма обратной связи для html сайта готова. Не забудьте только поменять e-mail в файле sendmessage.php на свой.

Добавляем всплывающую форму обратной связи на сайт

Бывают случаи, когда нужна именно всплывающая форма, которая открывается при нажатии на кнопку. Сделать ее очень просто. В качестве примера возьмем форму, созданную нами ранее и будет работать с ней.

Для начала нам нужно подключить jqury fancybox, скачать который вы сможете в конце статьи.

Добавьте эти строчки перед закрывающимся тегом body, только поменяйте путь к файлам на свой.

И придаем ей стили.

Modalbox { color:#FFFFFF; display:block; cursor:pointer; padding:10px 11px; font-size:1.2em; border:solid 1px #F9F9F9; border-radius:2px; background:#70C6B9; width:210px; text-decoration:none; text-align:center; margin:0 auto 20px; } .modalbox:hover { background:#979797; }

Обратите внимание, что кнопке, при нажатии на которую будет вызывать всплывающее окно, обязательно должен быть присвоен класс modalbox и путь href=”#inline”. Без этого всплывающая форма не будет открываться на сайте.

После чего прячем созданную нами ранее форму, чтобы она открывалась во всплывающем окне. Для этого нужно заменить стили #inline со старых на новые.

#inline { display:none; margin-left:30px; width:80%; margin:0 auto; background:#fff; padding:10px 20px; }

В итоге у нас получается вот такая кнопочка.

При нажатии на которую открывается всплывающее окно с обратной связью.

Опять же, стили, расположение полей и элементов можно менять так, как вам будет нужно. К примеру, для обратного звонка с сайта достаточно будет оставить всего 2 поля – имя и телефон, а остальные поля убрать.

Не забывайте, что для того, чтобы форма работала, в конце сайта нужно будет добавить обработчик, который опубликован выше, и загрузить в корень сайта файл sendmessage.php .

Форма обратной связи для wordpress

В случае, если ваш сайт работает на движке wordpress, вы можете использовать специальные плагины для добавления контактной формы. Один из лучших плагинов Contact Form 7. Скачать его можно с официального сайта, либо через админку в разделе Плагины.

После активации плагина в левом меню появится новая вкладка. Открываете ее и нажимаете Add New.

Вводите название новой формы, выбираете поля, которые должны быть в форме. Обычно вполне хватает стандартных, которые добавлены автоматически. Сохраняете форму.

После сохранения на экране появится шорткод, который нужно будет вставить на страницу, где должна будет отображаться контактная форма, например, на странице Контакты.

Копируете этот код, переходите на нужную страницу, в визуальном редакторе выбираете формат «Текст», вставляете этот шорткод и сохраняете страницу.

Затем проверяем, отображается ли форма на странице и корректно ли работает. Для этого, достаточно будет просто перейти на страницу, где вставили код. У вас должна появиться вот такая форма:

Теперь посетители вашего сайта смогут связаться с вами через созданную контактную форму на движке wordpress.

Делаем всплывающую форму обратной связи для wordpress

Я сам не люблю добавлять лишние плагины на данный движок, так как они грузят сайт, замедляя его работу. Поэтому для всплывающей формы использую обычно 2 варианта.

  1. Всплывающую форму, описанную выше в статье, просто прикручиваем ее не к html сайту, а к движку.
  2. Форму, созданную через плагин всплывающей формы Contact Form 7, внеся небольшие доработки.

Первый способ уже был описан выше, поэтому сразу перейдем ко второму.

Для начала, вставляем следующий код сразу после открытия тега body.

X

Давайте разберемся что есть что:

  • Ссылка, имеющая id=”callme-open” при нажатии на которую, наша форма будет открываться. Обратите внимания, что эту ссылку нужно вставить не после открытого тега, а в то место, где вы хотите, чтобы эта кнопка располагалась. Обычно ее добавляют в правый угол шапки, рядом с телефоном вашей компании.
  • Блок bg-b будет создавать затемненный фон сайта, когда всплывающая форма будет открыта.
  • Блок callme будет содержать саму форму обратной связи.
  • X – это будет наш крестик в углу форму, при клике на которую форма будет закрываться.
  • Ну и php код, в котором будет запускаться шорткод плагина Contact Form 7.

Обратите внимание на то, что у вас id и название формы могут отличаться от моих. Новый код добавлен, теперь задаем ему стили.

Bg-b { position:absolute; width:100%; height:100%; left:0; top:0; background:rgba(51,51,51,0.55); z-index:1000; } body { position:relative; } .callme { position:fixed; top:30%; left:50%; width:300px; margin-left:-150px; z-index:1100; background:#fff; padding:20px 20px 10px; border-radius:4px; } .callme small { position:absolute; right:10px; top:10px; font-size:15px; cursor:pointer; }

Сохраняем код и проверяем. Теперь форма должна быть расположена по середине вашего экрана, а сзади нее полупрозрачный затемненный фон. Все хорошо, но осталось добавить последнее – скрипт, который будет открывать и прятать данную форму при клике на нужные кнопки.

Данный скрипт необходимо вставить в файл footer, перед закрывающимся тегом body.

Остались последние штрихи и всплывающая форма на wordpress будет готова. Добавьте классам.callme и.bg-b стиль display:none. Это необходимо для того, чтобы форма не появлялась на экране при запуске сайта.

Мы рассмотрели с вами несколько вариантов создания формы для обратного звонка. Надеюсь, что у вас не возникнет проблем с внедрением формы на ваш сайт. Если же у вас возникнут проблемы или вопросы, вы всегда сможете получить консультацию в комментариях.

UPDATE 06.06.2018

В последних версиях WordPress jQuery скрипты не работают с символом $ , поэтому это следует учесть и заменить $ на jQuery

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

Url: "http://site.ru/sendmessage.php"

А скачать исходники первых двух форм, вы сможете по

UPDATE 04.07.2018

По многочисленным просьбам, форма обратной связи была модернизирована. Теперь в ней учтена установка галочки на согласие об отправке данных согласно законодательству РФ № 152-ФЗ «О персональных данных», доработана адаптивность под любые разрешения экранов, сжаты js и css файлы.

Посмотреть пример, а также и скачать исходники обновленной формы обратной связи и всплывающей формы теперь можно online, по ссылкам.

Форма обратной связи для сайта , которую я вам покажу – основана на использовании технологии Ajax. Но не волнуйтесь, знать этого вам не надо, все уже готово, останется только установить эту форму и настроить под себя!

Ребята - скрипт очень давно устарел. У кого-то работает, у кого то нет. А мне разбираться и уж тем более обновлять - лень. Поэтому тестируйте на своё усмотрение.

Форма обратной связи php с отправкой на почту

Эта форма обратной связи на сайт очень функциональна сама по себе, к ней подключено несколько плагинов, которые создают привлекательный внешний вид и проверяют валидность (читай правильность) введенных вами данных. Эти плагины работают на великом и могучем ! А называются так:

    1. JQTransform – плагин который позволяет сделать нашу форму обратной связи красивой!

    2. formValidator – а этот плагин проверяет форму контактов на правильность введенной информации и в случае чего выводит всплывающие подсказки!

Для полноценной работы этой формы будет использован класс – PHPMailer. Считается одним из лучших!

Заметка для самых умных:

Форму обратной связи для сайта можно сделать на HTML! Но работать она начнет только при помощи PHP! И никак иначе!

Это я для тех, кто ищет форму обратной связи только на HTML. Сделать сделаете, но работать она не будет!

Поэтому, ваш должен поддерживать PHP, а для этой формы контактов, PHP должен быть не ниже пятой версии. Надеюсь, понятно излагаю? Тем более, сейчас, любой нормальный хостинг поддерживает эти условия!

Эту форму обратной связи я откопал на сайте www.tutorialzine.com ссылка ведет непосредственно на страницу оригинала, т.е. сайт автора данной формы!

Там все на английском, поэтому нам с Сашей пришлось немного повозиться, что бы русифицировать данную форму контактов и сами плагины, которые подключены к ней.

Признаюсь честно, мы с этой «формочкой» провозились два дня, так как начинали всплывать различные косяки, а недоделанную до конца форму обратной связи, тем более такую красивую, выкладывать не хотелось! Так что если вы любитель все сделать сами, и в вашу светлейшую голову влезет мысль – самому русифицировать данную форму, дам пару советов, так как просто переводом фраз не ограничишься:

    1. Эта форма обратной связи заточена под буржуев, от туда же и скачена, поэтому она будет присылать вам вместо нормальных русских символов – кракозяблы. Разберитесь с кодировкой. Да и вообще все «тюлени» будут связаны с этим!

    2. Скрипт валидации изначально не понимает наши букв, поэтому их там надо будет прописать!

    3. Даже после этих действий если указать тему письма на русском, письмо приходит с темой – No subject (надеюсь правильно написал), это лечится если указать кодировку в файле класса PHPMailer.

    4. В оригинальной форме текст в полях ввода прижимался к низу, а не по середине. Это глюк плагина JQTransform.

Ну, вроде все расписал и предупредил. Поехали дальше!