Контактная форма для сайта html – Обратная связь для сайта с помощью скриптов форм на Html и Php, а так же онлайн конструкторов и генераторов

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

Просмотр Скачать

Структура HTML Формы

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

<div>

<div>
<label for=»email»>E-mail Адрес <span>*</span></label>
<input type=»email» name=»email» tabindex=»2″ placeholder=» Этот адрес электронной почты защищен от спам-ботов. У вас должен быть включен JavaScript для просмотра. » required>
</div>

<div>
<label for=»subject»>Тема <span>*</span></label>
<input type=»text» name=»subject» tabindex=»3″ placeholder=»Тема письма» required>
</div>

<div>
<label for=»message»>Сообщение <span>*</span></label>
<textarea name=»message» tabindex=»4″ required></textarea>
</div>

<div>
<input type=»submit» name=»submitbtn» tabindex=»5″ value=»Отправить Сообщение»>
</div>
</form>
</div>

Структура CSS Формы

Вся анимация выполнена с новыми свойствами CSS 3. Все фоны выполнены обыкновенными градиентами. Обратите внимание на анимацию кнопки. Тени при наведении тоже выполнена на CSS3.

/* form styles */
form .row {
display: block;
padding: 7px 8px;
margin-bottom: 7px;
}
form .row:hover {
background: #f1f7fa;
}

form label {
display: inline-block;
font-size: 1.2em;
font-weight: bold;
width: 120px;

form .note {
font-size: 1.2em;
line-height: 1.33em;
font-weight: normal;
padding: 2px 7px;
margin-bottom: 10px;
}

form input:focus, form textarea:focus { outline: none; }

/* placeholder styles: http://stackoverflow.com/a/2610741/477958 */
::-webkit-input-placeholder { color: #aaafbd; font-style: italic; } /* WebKit */
:-moz-placeholder { color: #aaafbd; font-style: italic; } /* Mozilla Firefox 4 to 18 */
::-moz-placeholder { color: #aaafbd; font-style: italic; } /* Mozilla Firefox 19+ */
:-ms-input-placeholder { color: #aaafbd; font-style: italic; } /* Internet Explorer 10+ */

form .txt {
display: inline-block;
padding: 8px 9px;
padding-right: 30px;
width: 240px;

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

Конструктор форм обратной связи онлайн для сайта

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

Особенности конструктора:

• Позволяет визуально видеть все внесенные изменения.
• Работа со всеми основными элементами формы: чекбоксы, радиокнопки, выпадающие списки, файлы, подписи к полям и т.д.
• Может включать/отключать ненужные поля, менять их порядок (методом перетаскивания), подписи, вид и делать их обязательными к заполнению.
• Возможность открытия формы во всплывающем окне.

Скриншоты:

Инструкция по использованию:

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

Радиокнопки выполнены в виде уникальных наборов. Чтобы сделать несколько наборов, нажмите на кнопку дубля.

Во 2 шаге обратите внимание на кодировку вашего сайта

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

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

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

Как установить полученный код на своем сайте

Данный конструктор идеально подходит на сайтах с поддержкой PHP, например, для Joomla или WordPress.

Чтобы использовать полученный код, вставьте его где угодно на вашем сайте, например, между тегами <body> и </body>

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

Одной из наиболее часто встречающихся на практике задач является реализация формы обратной связи. Тобишь написание ее HTML кода, оформление ее на CSS, создание PHP скрипта, который бы обрабатывал полученные от пользователя данные и отправлял их на нашу почту, написание JS скрипта, который бы проверял форму на адекватность вводимых данных, защита нашего детища от спама, чтобы наш почтовый ящик не обвалился от атак ботов.

Все вышеперечисленные моменты будут рассмотрены в нашем обзоре и подробно прокомментированы.

Итак, начинаем создание формы обратной связи:

HTML

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

<form method="post" action="mail.php">
 
   <div>
      <label for="name">Имя:</label>
      <input maxlength="30" type="text" name="name" />
 
      <label for="phone">Телефон:</label>
      <input maxlength="30" type="text" name="phone" />
 
      <label for="mail">E-mail:</label>
      <input maxlength="30" type="text" name="mail" />
   </div>
 
   <div>
      <label for="message">Сообщение:</label>
      <textarea rows="7" cols="50" name="message"></textarea>
 
      <input type="submit" value="Отправить" />
   </div>
 
</form>

И визуально она выглядит сейчас следующим образом:

Согласен, пока все некрасиво и ничего не понятно, но мы только начали.

Рассмотрим приведенный выше код подробно:

• <form method="post" action="mail.php"> … </form>

  
  для того, чтобы создать форму необходимо использовать тег form. Именно он определяет начало и конец формы для интерпретатора кода. У него, как и у любого тега, есть целый набор атрибутов, но обязательных для работы формы всего два, это method (метод отправки запроса на сервер, для форм стандартно используют post) и action (указывает путь к файлу-обработчику формы, именно в этом файле будет содержаться скрипт на PHP, который после будет отправлять введенные пользователем значения нам на почту, в нашем случае мы видим, что это файл называется mail.php и лежит он в том же директории сайта, что и рассматриваемая нами страница).

• <input maxlength="30" type="text" name="name" />

  
  Далее у нас следуют инпуты. Это собственно сами поля формы в которые пользователи будут вводить необходимую нам информацию (type=»text» говорит о том, что это будет текст). Атрибут maxlength указывает сколько символов может ввести пользователь в данное поле формы. Самый важный атрибут это name – он задает имя конкретного поля. Именно по этим именам в дальнейшем PHP скрипт будет обрабатывать поступающую в него информацию. При желании можно еще задать атрибут placeholder, который выводит внутри поля текст исчезающий при установке курсора внутри нее. Одной из проблем плейсхолдера является то, что он не поддерживается некоторыми старыми браузерами.

• <label for="name">Имя:</label>

  
  Используется в случае если мы отказались от плейсхолдеров. Обычная подпись поля, атрибут for сообщает к какому конкретно полю относится данная подпись. Значением указывается name интересующего нас поля.

• <textarea rows="7" cols="50" name="message"></textarea>

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

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

  
  О том, что это кнопка для отправки формы нам сообщает type=»submit», а value задает текст, который будет внутри этой кнопки.

• <div> </div>

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

CSS

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

Мы использовали данный код:

form {
   background: #f4f5f7;
   padding: 20px;
}
form .left, form .right {
   display: inline-block;
   vertical-align: top;
   width: 458px;
}
form .right {
   padding-left: 20px;
}
label {
   display: block;
   font-size: 18px;
   text-align: center;
   margin: 10px 0px 0px 0px;
}
input, textarea {
   border: 1px solid #82858D;
   padding: 10px;
   font-size: 16px;
   width: 436px;
}
textarea {
   height: 98px;
   margin-bottom: 32px;
}
input[type="submit"] {
   width: 200px;
   float: right;
   border: none;
   background: #595B5F;
   color: #fff;
   text-transform: uppercase;
}

Подробно расписывать CSS я не вижу смысла, обращу Ваше внимание лишь на ключевые моменты:

1. Не стоит писать оформление под каждый тег в форме. Старайтесь строить свои селекторы так, чтобы парой строк кода оформлять все необходимые Вам элементы.
2. Не используйте для переноса строк и создания отступов лишние теги по типу <br>, <p> и тд, с этими задачами прекрасно справляется CSS со свойством display: block и margin с padding. Больше о том, почему не стоит пользоваться <br> в верстке вообще можете почитать в статье Тэг br, а так ли он нужен?.
3. Не стоит пользоваться табличной версткой для форм. Это противоречит семантике этого тега, а поисковики любят семантичный код. Для того, чтобы формировать визуальную структуру документа нам достаточно тегов div, и заданных им в CSS свойств display: inline-block (выстраивает блоки в ряд) и vertical-align: top (не дает им разбежаться по экрану), задаем им необходимую высоту и вуаля, ничего лишнего и все расположено так, как нам нужно.

Для желающих экономить свое время на оформлении сайтов могу посоветовать пользоваться CSS фреймворками при создании сайтов, особенно самописных. Мой выбор в этом плане- Twitter Bootstrap. Урок по оформлению форм с его использованием можно посмотреть тут.

PHP

Ну вот и пришло время сделать нашу форму работоспособной.

Заходим в наш корневой каталог сайта и создаем там файл mail.php, к которому мы ранее указывали путь в атрибуте action тега form.

В конечном итоге его код будет выглядеть следующим образом:

<!doctype html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
   <title>Ваше сообщение успешно отправлено</title>
</head>
 
<body>
 
<?php
   $back = "<p><a href=\"javascript: history.back()\">Вернуться назад</a></p>";
 
   if(!empty($_POST['name']) and !empty($_POST['phone']) and !empty($_POST['mail']) 
   and !empty($_POST['message'])){
      $name = trim(strip_tags($_POST['name']));
      $phone = trim(strip_tags($_POST['phone']));
      $mail = trim(strip_tags($_POST['mail']));
      $message = trim(strip_tags($_POST['message']));
 
      mail('почта_для_получения_сообщений@gmail.com', 'Письмо с адрес_вашего_сайта', 
      'Вам написал: '.$name.'<br />Его номер: '.$phone.'<br />Его почта: '.$mail.'<br />
      Его сообщение: '.$message,"Content-type:text/html;charset=windows-1251");
 
      echo "Ваше сообщение успешно отправлено!<Br> Вы получите ответ в 
      ближайшее время<Br> $back";
 
      exit;
   } 
   else {
      echo "Для отправки сообщения заполните все поля! $back";
      exit;
   }
?>
</body>
</html>

Обсуждение HTML и CSS части этого документа можно пропустить. По своей сути это обычная страница сайта, которую Вы можете оформить по своему желанию и необходимости. Рассмотрим же важнейшую ее часть – PHP скрипт обработки формы:

$back = "<p><a href=\"javascript: history.back()\">Вернуться назад</a></p>";

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

if(!empty($_POST['name']) and !empty($_POST['phone']) 
and !empty($_POST['mail']) and !empty($_POST['message'])){
   //внутрення часть обработчика
} 
else {
   echo "Для отправки сообщения заполните все поля! $back";
   exit;
}

Тут мы прикручиваем проверку формы на наполненность полей. Как вы догадались, в части $_POST[‘name’] в кавычках мы пишем значение атрибута name наших инпутов.

Если все поля заполнены, то скрипт начнет обрабатывать данные в своей внутренней части, если же хоть одно поле не было заполнено, то на экран пользователя выведется сообщение с требованием заполнить все поля формы echo «Для отправки сообщения заполните все поля! $back» и ссылкой для возврата на предыдущую страницу, которую мы создали самой первой строкой.

Дале вставляем во внутреннюю часть обработчика формы:

$name = trim(strip_tags($_POST['name']));
$phone = trim(strip_tags($_POST['phone']));
$mail = trim(strip_tags($_POST['mail']));
$message = trim(strip_tags($_POST['message']));

Таким образом мы очистили вводимые пользователем данные от html тегов и лишних пробелов. Это позволяет нам обезопасить себя от получения вредоносного кода в высылаемых нам сообщениях.

Проверки можно и усложнить, но это уже по вашему желанию. Минимальную защиту на серверной стороне мы уже поставили. Дальнейшее мы сделаем на стороне клиента используя JS.

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

После чистки тегов добавляем отправку сообщения:

mail('почта_для_получения_сообщений@gmail.com', 'Письмо с адрес_вашего_сайта', 
'Вам написал: '.$name.'<br />Его номер: '.$phone.'<br />Его почта: '.$mail.'<br />
Его сообщение: '.$message,"Content-type:text/html;charset=windows-1251");

Именно эта строка и занимается формированием и отправкой сообщения к нам. Заполняется она следующим образом:

1. ‘почта_для_получения_сообщений@gmail.com’ – сюда между кавычек вставляете свою почту
2. ‘Письмо с адрес_вашего_сайта’ – это тема сообщения, которое будет приходить на почту. Можно написать сюда что угодно.
3. ‘Вам написал: ‘.$name.’<br />Его номер: ‘.$phone.’<br />Его почта: ‘.$mail.’<br />Его сообщение: ‘.$message – формируем сам текст сообщения. $name – вставляем информацию заполненную пользователем через обращение к полям из предыдущего шага, в кавычках описываем что значит это поле, тегом <br /> делаем перенос строки, чтобы сообщение в целом было читабельно.
4. Content-type:text/html;charset=windows-1251 — в конце идет явное указание типа данных передаваемого в сообщении и его кодировки.

ВАЖНО!

Кодировка указанная в «голове» документа (<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />), кодировка из сообщения Content-type:text/html;charset=windows-1251 и в целом кодировка файла PHP должны совпадать иначе в получаемых на почту сообщениях вместо русских или английских букв будут выводиться «кракозябры».

Многие не указывают кодировку отправляемого сообщения явно, но на некоторых почтовых клиентах из-за этого в дальнейшем могут возникнуть проблемы (на почту приходят нечитабельные письма), потому я рекомендую ее все-же указывать.

Проверка формы на адекватность вводимых данных

Чтобы пользователи по невнимательности не промахивались полями и заполняли все корректно стоит поставить проверку вводимых данных.

Это можно сделать как на PHP на стороне сервера, так и на JS на стороне клиента. Я использую второй вариант, поскольку так человек сразу может узнать что он сделал не верно и исправить ошибку не делая дополнительных переходов по страницам.

Код скрипта вставляем в том же файле, где у нас располагается HTML часть формы. Для нашего случая он будет выглядеть так:

<script>
   function checkForm(form) {
 
      var name = form.name.value;
      var n = name.match(/^[A-Za-zА-Яа-я ]*[A-Za-zА-Яа-я ]+$/);
      if (!n) {
         alert("Имя введено неверно, пожалуйста исправьте ошибку");
         return false;
      }
 
      var phone = form.phone.value;
      var p = phone.match(/^[0-9+][0-9- ]*[0-9- ]+$/);
      if (!p) {
         alert("Телефон введен неверно");
         return false;
      }
 
      var mail = form.mail.value;
      var m = mail.match(/^[A-Za-z0-9][A-Za-z0-9\._-]*[A-Za-z0-9_]*@([A-Za-z0-9]+([A-Za-z0-9-]*
      [A-Za-z0-9]+)*\.)+[A-Za-z]+$/);
      if (!m) {
         alert("E-mail введен неверно, пожалуйста исправьте ошибку");
         return false;
      }
      return true;
   }
</script>

Ну а теперь обычный разбор:

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

<form method="post" action="mail.php" onSubmit="return checkForm(this)">

Теперь по пунктам забираем состав проверки:

1. Обращаемся к нашей форме и по значению атрибута name выбираем интересующий нас инпут.
2. Записываем его содержимое в переменную
3. Собственно сама проверка формы на совпадение с заданными нами символами. (/^[A-Za-zА-Яа-я ]*[A-Za-zА-Яа-я ]+$/ — могут использоваться только буквы русского и английского алфавитов; /^[0-9+][0-9- ]*[0-9- ]+$/ — первый символ это «+» или цифра, дальше могут быть только цифры; /^[A-Za-z0-9][A-Za-z0-9\._-]*[A-Za-z0-9_]*@([A-Za-z0-9]+([A-Za-z0-9-]*[A-Za-z0-9]+)*\.)+[A-Za-z]+$/ — первые несколько символов это английские буквы или точки, потом знак @, потом снова английские буквы, потом точка и потом еще несколько английских букв).
4. Если все верно, то проверка ничего не выводит и идет к следующему блоку кода, если же проверка на символы выдала ошибку, то выполняется часть скрипта с действиями 5 и 6.
5. Пользователю выводится это сообщение о ошибке.
   
6. Происходит выход из скрипта проверки.

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

Полный код страниц формы

Для удобства разместили полный код страниц в открытом доступе. Итак, в корне сайта должны лежать файлы:

Подводя итоги

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

Так что начинайте с малого, своей первой рабочей формы, и дополняйте ее по мере необходимости своими частями.

Надеюсь этот мануал окажется для Вас полезным. Если что-то было не понятно или не получается повторить – задавайте вопросы в комментариях.

О защите от спама я напишу в следующих статьях.

Оценок: 55 (средняя 4.7 из 5)

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

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

В этой статьи мы рассмотрим основные принципы организации обратной связи, переходите по ссылке далее, если вам нужно просто скачать код формы обратной связи на PHP либо HTML

Основные принципы организации обратной связи

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

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

Форма

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

Очень важно корректно и понятно указать поля обязательные для заполнения, которые часто обозначаются символом *. В принципе, возможно написать саму форму и в тегах <div> </div>, но существует различие. Если <form> </form> формирует POST запрос, указанный в атрибуте action, который удобно использовать для дальнейшей обработки на сервере с помощью PHP, Pyton, Java и так далее, то в случае div нужно использовать JavaScript. Так же с помощью JavaScript можно данные посылать через Ajax запросы, в таком случае страница не будет обновляться в строке браузера.

Однако принцип один — мы отправляем некие данные на сервер.

Какие данные должны быть обязательными?

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

Обработка запроса на сервере

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

Ответ с сервера

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

Непосредственный разбор кода на HTML и PHP смотрите здесь.

21 контактная форма для сайта (обратная связь) на jquery

1. Плагин для создания онлайн форм «jFormer»

Создание контактных форм: обратной связи, комментирования, форма входа, форма регистрации с проверкой правильности ввода информации.

2. Пошаговая форма регистрации с использованием jQuery

Аккуратная форма с пошаговым заполнением. Снизу указан индикатор заполнения формы.

3. Пошаговая форма

Заполнение формы в несколько шагов с проверкой правильности заполнения.

4. Контактная форма для сайта

Проверка правильности ввода ифнормации осуществляется «на лету» перед отправкой сообщения с использованием javascript.

5. Анимированное переключение между формами на jQuery

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

6. Выезжающая PHP форма обратной связи

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

7. PHP форма регистрации с использованием jQuery и CSS3

Форма с проверкой правильности ввода информации.

8. PHP форма регистрации в стиле Facebook

Симпатичная форма регистрации, реализованная с помощью CSS, PHP и jQuery.

9. jQuery контактная форма «SheepIt»

Реализована возможность перед отправкой сообщения добавлять новые поля.

10. Контактная форма «Fancy AJAX Contact Form»

Симпатичная аккуратная PHP форма обратной связи с проверкой правильности ввода информации. Технологии: CSS, PHP, jQuery.

11. Система авторизации/регистрации на сайте

Выезжающий блок авторизации/регистрации на сайте. Используемые технологии: PHP, MySQL, jQuery, CSS.

12. Форма отправки данных

С проверкой правильности заполнения.

13. Плагин jQuery «Contactable»

Для реализации выезжающей формы обратной связи для быстрой отправки сообщения. 

14. jQuery плагин «Formwizard»

Плагин для реализации пошаговых форм на сайте.

15. Контактная форма в стиле старой печатной машинки

16. Эффект свечения на jQuery

Контактная форма с эффектом неонового свечения полей.

17. Проверка правильности ввода данных в форму на jQuery

jQuery форма с анимированными подсказками о допущенных ошибках при заполнении.

18. Стильная форма

Проверка правильности заполнения полей перед отправкой.

19. Форма обратной связи выдвигается сверху экрана

Анимационный эффект выезжающей формы обратной связи сверху экрана при нажатии на кнопку «Contact Us».

20. Форма обратной связи

Аккуратная чистая форма.

21. Пошаговые формы

Обратная связь — создаем форму для сайтов на HTML и PHP в Joomla и WordPress

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

Решения для организации обратной связи

Естественно, что сейчас существует несколько способов организации обратной связи на сайте: от универсальных скриптов на php до плагинов и модулей для CMS. Нет никакой необходимости самостоятельно писать код, так что вникать в дебри HTML вам не придётся.

Можно воспользоваться следующими готовыми решениями:

• Прибегнуть к услугам бесплатных онлайн-сервисов, которые автоматически генерируют код HTML формы связи. Но при этом файл обработки php нужно будет писать и ставить самостоятельно. Вот один из ресурсов для этих целей.
• Обратиться к помощи бесплатных онлайн-сервисов, генерирующих код HTML и предоставляющих обработчики данных на php. Они зачастую размещаются на серверах этих сервисов. Один из примеров подобных ресурсов здесь.
• Найти в Интернете бесплатные скрипты для установки формы обратной связи. Этот вариант применим для людей, знающих на определенном уровне HTML и PHP, ведь скрипт в любом случае придется адаптировать конкретно под свой сайт.

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

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

Рассмотрим одну из популярных программ для написания и установки HTML-форм обратной связи с капчей. Широкий выбор таких решений представлен, например, на этом сайте. Сайт русскоязычный, определиться с выбором будет просто, а сама установка займет не более трех минут.

Не забудьте о том, что вам придётся внести некоторые правки в файл config.php — нужно изменить кодировку и написать верный электронный адрес получателя.

Папку с исправленными файлами нужно скопировать в корневой каталог сайта. Одним из важных шагов станет ограничение доступа к этой папке в файле Robots.txt (Disallow: /sendmail-zakaz).

По сути, на этом контактная форма для сайта готова — если действия выполнены правильно, готовая форма будет выглядеть так:

Форма обратной связи HTML без PHP

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

Когда вы внесёте все требуемые параметры, просто введите проверочную капчу и нажмите на кнопку «Генерировать», и далее — «Получить код».

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

Можно сделать простую контактную форму собственноручно. Для этого придётся создать файл form.php и сохранить в нем следующий код:

Для функционирования формы нужен файл-обработчик. Его тоже придётся сделать самостоятельно. Назовем его mail.php и сохраним в нём такой код:

В итоге получится такая форма связи:

Форма обратной связи Joomla

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

Итак, для настройки компонента заходим в административную панель и выбираем вкладку «Компоненты/Контакты/Категории контактов».

Откроется страница, на которой не будет ни одной категории. Чтобы создать ее, нажмем на кнопку «Новый».

Система предложит заполнить поля «Заголовок» и «Псевдоним». Сделав это, поставьте галочку «Да» в строке «Опубликовано».

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

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

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

Настройки сохраняются после нажатия соответствующей кнопки в правом верхнем углу.

Форма обратной связи настроена, осталось расположить ее на сайте. Для этого вам потребуется перейти в административную панель и, выбрав вкладку «Меню», определиться с местом размещения.

В этом меню создаем новый пункт. Для этого нажимаем кнопку «Создать» и в открывшемся меню выбираем «Контакты/Страница контакта».

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

Переходим на сайт, находим пункт «Контакты» и нажимаем на него. Должна открыться следующая страница:

Форма обратной связи WordPress

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

Скачать его можно с официального сайта, или просто добавить и активировать через меню административной панели «Плагины/Добавить новый».

В активированном плагине «контактная форма 7» следует пройти во вкладку «Контакты» и скопировать код плагина для формы обратной связи.

Дальше нужно проследовать во вкладку «Страницы/Добавить новую», и, включив режим HTML, вставить ранее скопированный код формы обратной связи.

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

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

Есть и ручной вариант организации обратной связи для этой CMS. Контактная форма wordpress без плагинов создаётся на основе HTML и PHP, так же, как и в первом рассмотренном варианте.

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

Форма обратной связи для библиотеки JavaScript jQuery без труда реализуется через один из многочисленных плагинов. Многие из них доступны для бесплатного скачивания, например, на этой странице.

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

Либо же с эффектом подсветки:

А что вы думаете об этой? Необычная форма обратной связи — дизайн стилизован под старую печатную машинку.

Форма обратной связи js может быть реализована даже в самых причудливых вариациях.

Заключение

В большинстве случаев, вам не потребуются знания HTML и PHP для создания и установки формы обратной связи. Если вы будете внимательны и последовательны, весь процесс займёт у вас не более 10-15 минут. Самый просто вариант — воспользоваться готовым решением, которых полно в выдаче по запросу: форма обратной связи скачать.