Как написать через форму обратной связи

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

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

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

Тег <form> — создание формы

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

Итак, наш первый код.

<form action="/" method="post">

</form>

У тега <form> есть два обязательных атрибута:

• action — ссылка на скрипт, обычно PHP, который будет обрабатывать форму. А точнее, который будет обрабатывать введенные  форму данные.
• method — метод отправки данных на сервер (GET или POST).

Подробности вы сможете найти на этом сайте, но сейчас вернемся к самой форме.

Форма для ввода текста

В нашей форме должно быть поле для ввода текста. Оно создается с помощью тега <textarea>. Добавим к нашей пустой форме поле ввода текста.

<form action="/" method="post">
<textarea></textarea>
</form>

Результат.

Поле для ввода текста пока что непонятное. Давайте модернизируем его, а именно добавим текст внутри и сделаем поле шире.

Для вставки пояснительного текста используется атрибут placeholder тега <textarea>.

Сделаем 100% ширину с помощью CSS.

textarea
{
  width:100%;
}

Получим следующую форму.

<form action="/" method="post">
<textarea placeholder="Введите ваше сообщение"></textarea>
</form>

Ну что же, уже лучше. Теперь сделаем поле для ввода нашего имени.

Ввод текста в input

Элемент <input> является универсальным, в отличии от элемента <textarea>. С его помощью мы можем создать форму для ввода небольшого текста. Ведь имена не занимают несколько предложений. С помощью атрибута type=»text» мы указываем, что в поле должен содержаться текст.

Изменим нашу форму.

<form action="/" method="post">
<input type="text" placeholder="Введите ваше имя"></input>
<textarea placeholder="Введите ваше сообщение"></textarea>
</form>

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

<form action="/" method="post">
<input type="text" placeholder="Введите ваше имя"></input>
<input type="email" placeholder="Введите ваш email"></input>
<textarea placeholder="Введите ваше сообщение"></textarea>
</form>

Все хорошо, но не хватает нормальной группировки элементов.

Группировка элементов управления в HTML-форме

<form action="/" method="post">
<fieldset>
<legend>Текстовые поля</legend>
<label> Ваше имя: <input type="text" placeholder="Имя"></input></label>
<label> Ваш email: <input type="email" placeholder="Email"></input></label>
<label>Текст сообщения:</label>
<label><textarea placeholder="Введите ваше сообщение"></textarea><label>
</fieldset>
</form>

Давайте немного изменим форму, а именно:

• Фон.
• Размер.
• Положение.

Сделаем белый фон, размер уменьшим до 70% и располагаться форма будет по центру.

<style>
form{
background-color:#ffffff;
width:70%;
margin:0 auto;
padding:15px;
}
</style>
<form action="/" method="post">
<fieldset>
<legend>Текстовые поля</legend>
<label> Ваше имя: <input type="text" placeholder="Имя"></input></label>
<label> Ваш email: <input type="email" placeholder="Email"></input></label>
<label>Текст сообщения:</label>
<label><textarea placeholder="Введите ваше сообщение"></textarea><label>
</fieldset>
</form>

Ну что же, уже лучше. Не хватает кнопок.

Кнопки в HTML-форме

Добавим две кнопки:

• Отправить.
• Очистить.

Кнопка «Отправить» должна отправлять веденый текст на сервер. Что бы кнопка работала требуется PHP-обработчик (или обработчик на ином языке).

Кнопка «Очистить» будет очищать все введенные в форму данные.

Кнопка отправки формы

Кнопка отправки формы на сервер создается с помощью тега <button> (от англ. button — кнопка)  с типом submit (от англ. submit — разместить). Полный HTML-код  кнопки отправки формы на сервер: <button type="submit">Отправить</button>.

Кнопка очистки формы

Тут по аналогии, только вместо submit мы пишем reset (от англ. reset — сбросить). Полный HTML-код кнопки очистки формы: <button type="reset">Очистить</button>.

Давайте дополним нашу форму.

<style>
form{
background-color:#ffffff;
width:70%;
margin:0 auto;
padding:15px;
}
</style>
<form action="/" method="post">
<fieldset>
<legend>Текстовые поля</legend>
<label> Ваше имя: <input type="text" placeholder="Имя"></input></label>
<label> Ваш email: <input type="email" placeholder="Email"></input></label>
<label>Текст сообщения:</label>
<label><textarea placeholder="Введите ваше сообщение"></textarea><label>
<label><button type="submit">Отправить</button> <button type="reset">Очистить</button></label>
</fieldset>
</form>

Результат.

Итак, у нас есть уже готовая простая HTML-форма обратной связи. Теперь возникает вопрос, как проверить что форма заполнена перед отправкой?

Проверка заполнения формы

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

Самым простым способом проверки формы на заполнение является добавление к элементам атрибута required (от англ. required — требуется). давайте добавим этот атрибут к полям и посмотрим что будет.

<style>
form{
background-color:#ffffff;
width:70%;
margin:0 auto;
padding:15px;
}
</style>
<form action="/" method="post">
<fieldset>
<legend>Текстовые поля</legend>
<label> Ваше имя: <input type="text" placeholder="Имя" required></input></label>
<label> Ваш email: <input type="email" placeholder="Email" required></input></label>
<label>Текст сообщения:</label>
<label><textarea placeholder="Введите ваше сообщение" required></textarea><label>
<label><button type="submit">Отправить</button> <button type="reset">Очистить</button></label>
</fieldset>
</form>

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

Второй способ заключается в добавлении к кнопке «Отправить» атрибута formnovalidate, он делает кнопку не активной пока не будут заполнены input’ы. Я не буду приводить пример, но вы обязательно попробуйте проверить форму таким образом. привожу полный код такой кнопки:

<button formnovalidate type="submit">Отправить</button>.

Иные проверки (валидации) выполняются с помощью PHP или JS кода.

Другие популярные элементы

Продолжим дополнять нашу форму. Добавим несколько элементов.

Форма загрузки файлов

Для создания формы загрузки используется уже знакомый нам input. Создается она с помощью следующего кода:

<input  type="file" value="Выберите файл">

Дополним нашу форму. Создадим отдельную группу элементов.

<style>
form{
background-color:#ffffff;
width:70%;
margin:0 auto;
padding:15px;
}
</style>
<form action="/" method="post">
<fieldset>
<legend>Текстовые поля</legend>
<label> Ваше имя: <input type="text" placeholder="Имя" required></input></label>
<label> Ваш email: <input type="email" placeholder="Email" required></input></label>
<label>Текст сообщения:</label>
<label><textarea placeholder="Введите ваше сообщение"></textarea><label>
<label><button formnovalidate type="submit">Отправить</button> <button type="reset">Очистить</button></label>
</fieldset>
<fieldset>
<legend>Иные элементы управления формой</legend>
<label><input type="file" value="Выберите файл"><label> 
</fieldset>
</form>

Результат.

Выбор даты

Выбрать дату можно с помощью типа date все того же input’а. Полный код: <input type="date" />.

Добавим в нашу форму возможность выбора даты.

<style>
form{
background-color:#ffffff;
width:70%;
margin:0 auto;
padding:15px;
}
</style>
<form action="/" method="post">
<fieldset>
<legend>Текстовые поля</legend>
<label> Ваше имя: <input type="text" placeholder="Имя" required></input></label>
<label> Ваш email: <input type="email" placeholder="Email" required></input></label>
<label>Текст сообщения:</label>
<label><textarea placeholder="Введите ваше сообщение"></textarea><label>
<label><button formnovalidate type="submit">Отправить</button> <button type="reset">Очистить</button></label>
</fieldset>
<fieldset>
<legend>Иные элементы управления формой</legend>
<label><input type="file" value="Выберите файл"><label> 
<label>Укажите дату - <input type="date"><label>
</fieldset>
</form>

Результат.

Выпадающий список

Выпадающий список создается с помощью тега <select>, а элемент списка с помощью <option>. Давайте создадим в нашей форме возможность указать адресата.

<style>
form{
background-color:#ffffff;
width:70%;
margin:0 auto;
padding:15px;
}
</style>
<form action="/" method="post">
<fieldset>
<legend>Текстовые поля</legend>
<label> Ваше имя: <input type="text" placeholder="Имя" required></input></label>
<label> Ваш email: <input type="email" placeholder="Email" required></input></label>
<label>Текст сообщения:</label>
<label><textarea placeholder="Введите ваше сообщение"></textarea><label>
<label><button formnovalidate type="submit">Отправить</button> <button type="reset">Очистить</button></label>
</fieldset>
<fieldset>
<legend>Иные элементы управления формой</legend>
<label><input type="file" value="Выберите файл"><label> 
<label>Укажите дату - <input type="date"><label>
<label>Кому отправить - 
<select>
  <option>Директору</option>
  <option>В отдел продаж</option>
</select></label>
</fieldset>
</form>

Результат.

Переключатели

Переключатели бывают зависимые — можно выбрать только один вариант и независимые.

Зависимый переключатель

Зависимый переключатель создается с помощью тега  input и его атрибута type=«radio». Соответственно в зависимом переключателе можно выбрать только один варинат.

Независимый переключатель

Независимый переключатель создается с помощью атрибута type=»checkbox». В нем можно выбирать несколько вариантов.

Добавим эти элементы на нашу форму.

<style>
form{
background-color:#ffffff;
width:70%;
margin:0 auto;
padding:15px;
}
</style>
<form action="/" method="post">
<fieldset>
<legend>Текстовые поля</legend>
<label> Ваше имя: <input type="text" placeholder="Имя" required></input></label>
<label> Ваш email: <input type="email" placeholder="Email" required></input></label>
<label>Текст сообщения:</label>
<label><textarea placeholder="Введите ваше сообщение"></textarea><label>
<label><button formnovalidate type="submit">Отправить</button> <button type="reset">Очистить</button></label>
</fieldset>
<fieldset>
<legend>Иные элементы управления формой</legend>
<label><input type="file" value="Выберите файл"></label> 
<label>Укажите дату - <input type="date"></label>
<label>Кому отправить - 
<select>
  <option>Директору</option>
  <option>В отдел продаж</option>
</select></label>
<label>Отправить копию письма себе на почту?<input type="radio" name="primer">Да <input type="radio" name="primer">Нет</label>
<label>Каким образом направить вам ответ
<input type="checkbox" name="a" value="1" checked>>По электронной почте
<input type="checkbox" name="a" value="2">По почте на бумажном носителе
<input type="checkbox" name="a" value="3">Перезвонить по телефону
<label>
</fieldset>
</form>

Результат.

На этом заметка о HTML-формах подходит к концу. Задавайте ваши вопросы в в комментариях.

Форма обратной связи — древнейшее программистское искусство. Тут есть всё: форма с проверкой, приём запроса, обработка, безопасность, хранение и ответ. Это как Hello World, только для самых крутых.

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

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

Чтобы сделать у себя на сайте такое, нам понадобится:

Сервер для PHP

Для того, чтобы PHP-код исполнялся, нужен какой-то компьютер-исполнитель. Мы называем его сервером — то есть «раздающим». На сервере должна работать программа для PHP, которое отвечает за правильную обработку таких файлов.

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

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

Готовим страницу с формой

Возьмём стандартный шаблон страницы и наполним его стилями и кодом для формы.

<!DOCTYPE html>
<html>
<!-- Служебная часть -->

<head>
  <!-- Заголовок страницы -->
  <title>Заголовок</title>
  <!-- Настраиваем служебную информацию для браузеров -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style type="text/css">
    /* Тут будут стили */
  </style>
  <!-- Закрываем служебную часть страницы -->
</head>

<body>
  <!-- Тут будет наша страница -->
</body>
<!-- Конец всей страницы -->

</html>

Пропишем CSS-стили, чтобы наша страница выглядела опрятно. Забежим немного вперёд и используем в стилях разделы input и textarea:

/*Задаём общие параметры для всей страницы: шрифт и отступы*/
body {
  /*text-align: center;*/
  margin: 10;
  font-family: Verdana, Arial, sans-serif;
  font-size: 16px;
}
/* Настраиваем внешний вид полей ввода*/
input {
  display: inline-block;
  margin: 10px auto;
  border: 2px solid #eee;
  padding: 10px 20px;
  font-family: Verdana, Arial, sans-serif;
  font-size: 16px;
}
textarea {
  display: inline-block;
  margin: 10px auto;
  border: 2px solid #eee;
  padding: 10px 20px;
  font-family: Verdana, Arial, sans-serif;
  font-size: 16px;
}

Чтобы сделать форму на странице, мы будем использовать такие теги:

<input> — для ввода имени, почты для связи и темы письма. Они занимают одну строку, нам этого достаточно.

<textarea> — здесь будут писать само сообщение, поэтому нужно будет сделать это поле побольше и пошире.

Ещё мы воспользуемся тегом <form> — он мысленно собирает наши поля в одну форму и помогает управлять ими из одного места. У каждой формы есть свой метод, по которому она работает с данными. Форма может или отправлять данные (post), или получать их (get). Так как нам надо отправить сообщение в PHP-скрипт, будем использовать метод post. Сразу пропишем путь к скрипту на сервере — по этому адресу мы зальём нужный файл на следующем этапе. Этот скрипт, который мы позже напишем, и есть обработчик формы.

Оформим всё в виде кода:

<!-- Создаём форму и указываем её обработчик и метод -->
<form action="http://mihailmaximov.ru/projects/mail/post.php" method="post" name="form">
  <!-- Поле ввода имени -->
  <input name="name" type="text" placeholder="Ваше имя" />
  <br>
  <!-- Поле ввода почты  -->
  <input name="email" type="text" placeholder="Ваша почта" />
  <br>
  <!-- Поле ввода для темы сообщения -->
  <input size="30" name="header" type="text" placeholder="Тема" />
  <br>
  <!-- Текстовое поле для самого сообщения -->
  <textarea cols="32" name="message" rows="5"> Текст сообщения
  </textarea>
  <br>
  <!-- Кнопка с надписью «Отправить», которая запускает обработчик формы -->
  <input type="submit" value="Отправить" />
</form>

Пишем обработчик формы на PHP

Когда мы заполним и отправим форму на нашей странице, произойдёт следующее:

Логика работы PHP-программы будет такая:

Мы специально делаем так, чтобы форма отсылала письма на тот же адрес, который одновременно и адрес отправителя. Это сделано для того, чтобы вы получали эти письма, когда будете тестировать сервис. В рабочем проекте замените переменную $email в функции send() на свой настоящий адрес, чтобы самим получать письма из формы.

<!-- Через 10 секунд после появления сообщения об отправке или ошибке — отправляемся на сайт Кода 🙂 -->
<meta http-equiv='refresh' content='10; url=http://thecode.local/'>
<meta charset="UTF-8" />
<!-- Начался блок PHP -->
<?php
// Получаем значения переменных из пришедших данных
$name = $_POST['name'];
$email = $_POST['email'];
$header = $_POST['header'];
$message = $_POST['message'];
// Формируем сообщение для отправки, в нём мы соберём всё, что ввели в форме
$mes = "Имя: $name nE-mail: $email nТема: $header nТекст: $message";
// Пытаемся отправить письмо по заданному адресу
// Если нужно, чтобы письма всё время уходили на ваш адрес — замените первую переменную $email на свой адрес электронной почты
$send = mail($email, $header, $mes, "Content-type:text/plain; charset = UTF-8rnFrom:$email");
// Если отправка прошла успешно — так и пишем
if ($send == 'true') {echo "Сообщение отправлено";}
// Если письмо не ушло — выводим сообщение об ошибке
else {echo "Ой, что-то пошло не так";}
?>

Отправляем PHP-скрипт на сервер

Последнее, что осталось сделать — загрузить файл скрипта на сервер. Для этого сохраним его как post.php и загрузим по адресу mihailmaximov.ru/projects/mail/post.php. Если у вас ещё нет своего сервера, можете использовать этот скрипт для тестирования формы обратной связи.

Как загружать файлы, мы рассказывали в статье про публикацию сайта в Сети, поэтому просто сделаем всё по той инструкции:

Теперь, когда мы обновим HTML-страницу, заполним все поля и нажмём «Отправить», на указанную почту придёт письмо с нашим сообщением. Это значит, что форма работает, а мы с вами сделали очередной полезный проект!

Что дальше

Дальше как обычно — улучшаем.

В этой статье мы изучим, как добавить на сайт форму обратной связи и настроить её под свои поля. Отправляет данные эта форма на почту. Её код написан на чистом CSS, JavaScript и PHP.

Назначение и основные характеристики

Форма обратной связи (на английском feedback или contact form) – это один из способов взаимодействия клиента с менеджером или владельцем сайта. Например, её можно использовать для получения отзывов от клиентов, заказа услуг, оставления заявок и т.д.

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

Основные характеристики этой формы:

• работа без перезагрузки страницы (через AJAX);
• наличие графической капчи для защиты от спама;
• возможность добавления файлов;
• валидация данных на стороне клиента (в браузере) и на сервере;
• отправка успешных форм на почту (файлы могут приходить как в виде вложений, так и в виде ссылок).

Исходные коды

Файлы формы обратной связи расположены на GitHub: https://github.com/itchief/feedback-form.

Последний релиз – 4.0.6. Скачать его можно, нажав на эту ссылку. Распространяется она под лицензией MIT.

Оформление формы выполнено с помощью стилей, находящихся в файле «form-processing.css». Для исполнения серверных сценариев необходимо иметь PHP не ниже v7.0.

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

Демо формы

Скриншоты

Установка и настройка

1. Добавить форму в HTML документ.

<form id="form" action="/feedback/processing.php" enctype="multipart/form-data" novalidate>
  ...
</form>

Указание обработчика осуществляется с помощью атрибута action. Форма используется для получения сведений от пользователя. Пример формы расположен в «index.html».

2. Подключить к странице CSS и JavaScript файлы:

<link rel="stylesheet" href="/feedback/css/form-processing.css">
<script src="/feedback/js/form-processing.js"></script>

JavaScript используется для отправки формы на сервер через AJAX (без перезагрузки страницы), а также для проверки вводимых пользователем данных и отображения сообщения об успешном завершении.

3. Написать код для вывода сообщения об успехе.

Какое сообщение и каким образом оно должно выводиться пользователю при успешной отправке формы вы определяете сами. Выполнять это следует в обработчике события success, которое генерируется в «form-processing.js» для тега <form>.

Например, для этого в «index.html» используется следующий HTML и JavaScript.

HTML код:

<!-- Сообщение об успешной отправки формы -->
<div class="form-success form-success_hide">
  <div class="form-success__message">Форма успешно отправлена. Нажмите <button type="button" class="form-success__btn">здесь</button>, если нужно отправить ещё одну форму.</div>
</div>

JavaScript:

document.addEventListener('itc.successSendForm', (e) => {
  const el = e.target.closest('.form-container').querySelector('.form-success');
  el.classList.remove('form-success_hide');
});
// при клике на .form-success__btn
document.querySelector('.form-success__btn').addEventListener('click', (e) => {
  const el = e.target.closest('.form-container').querySelector('form');
  const form = ItcSubmitForm.getOrCreateInstance(el);
  form.reset();
  e.target.closest('.form-container').querySelector('.form-success').classList.add('form-success_hide');
});

Метод reset() используется для сброса формы.

4. Инициализировать форму как ItcSubmitForm:

// 'form' - селектор для выбора <form>
ItcSubmitForm.getOrCreateInstance('form');

Передача дополнительных настроек осуществляется в формате объекта, который нужно указать в качестве 2 аргумента:

ItcSubmitForm.getOrCreateInstance('form', {
  isCheckValidationOnClient: true, // проверять форму перед отправкой на сервер
  attachMaxItems: 5, // максимальное количество файлов, которые можно добавить к форме
  attachMaxFileSize: 512, // 512 Кбайт - максимальный размер файла
  attachExt: ['jpg', 'jpeg', 'bmp', 'gif', 'png'] // допустимые расширения файлов
});

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

5. Настроить константы в серверном php-скрипте «form-processing.php».

5.1. Если вы используете капчу, встроенную в форму, то константе HAS_CHECK_CAPTCHA необходимо установить значение true. В противном случае false:

define('HAS_CHECK_CAPTCHA', true);

5.2. Файлы (поле attach):

// не пропускать форму, если к ней не прикреплён хотя бы один файл
const HAS_ATTACH_REQUIRED = false;
// разрешённые mime типы файлов
const ALLOWED_MIME_TYPES = ['image/jpeg', 'image/gif', 'image/png'];
// максимальный размер файла
const MAX_FILE_SIZE = 512 * 1024;

5.3. Настройки почты:

// отправлять письмо на указанный адрес email
const HAS_SEND_EMAIL = true;
// добавить файлы в тело письма в виде ссылок (В противном случае прикрепить)
const HAS_ATTACH_IN_BODY = true;
// базовый URL-адрес (используется, если составления полного URL для ссылок, добавляемых в тело письма)
const BASE_URL = 'https://domain.com';
// настройка почты (отправка осуществляется через SMTP)
const EMAIL_SETTINGS = [
  'addresses' => ['manager@domain.com'], // кому необходимо отправить письмо
  'from' => ['no-reply@domain.com', 'Имя сайта'], // от какого email и имени необходимо отправить письмо
  'subject' => 'Сообщение с формы обратной связи', // тема письма
  'host' => 'ssl://smtp.yandex.ru', // SMTP-хост
  'username' => 'name@yandex.ru', // // SMTP-пользователь
  'password' => '*********', // SMTP-пароль
  'port' => '465' // SMTP-порт
];

5.4. Отправка уведомления пользователю (необходим email в форме):

// необходимо ли отправлять уведомление пользователю на почту
const HAS_SEND_NOTIFICATION = false;
// тема письма
const SUBJECT_FOR_CLIENT = 'Ваше сообщение доставлено';

5.5. HAS_WRITE_LOG определяет, необходимо ли писать предупреждения и ошибки при обработке формы в лог (файлы записываются в папку /feedback/logs/):

// писать предупреждения и ошибки в лог
define('HAS_WRITE_LOG', true);

5.6. Константа HAS_WRITE_TXT определяет необходимо ли сохранять успешные формы в файл «/feedback/logs/forms.log»:

// записывать успешные формы в файл forms.log
const HAS_WRITE_LOG = true;

6. После завершения настройки, скопировать папку «feedback» в корневую директорию сайта.

По умолчанию в папке «feedback» имеется файл «index.html». Его можно использовать для тестирования формы перед тем как создавать свои на нужных страницах.

На сайте с доменным именем «domain.com» эта форма будет доступна по следующему URL: http://domain.com/feedback/ (или https://domain.com/feedback/).

Часто задаваемые вопросы

1. Как убрать капчу

Если вам не нужна встроенная капча, то необходимо выполнить 2 действия.

1. Удалить из HTML блок с капчей:

<!-- Капча -->
<div class="form-group form-captcha">
  ...
</div>

2. В php обработчике формы установить константе HAS_CHECK_CAPTCHA значение false.

// проверять ли капчу
  const HAS_CHECK_CAPTCHA = false;

2. Как добавить новое поле в форму

Для добавления нового поля (например, phone) достаточно выполнить следующие действия.

1. Вставить HTML код, содержащий <input type="tel" name="phone"> в <form>:

<!-- Телефон -->
<div class="form-group">
  <label for="phone" class="control-label">Телефон</label>
  <div class="input-group">
    <div class="input-group-prepend">
      <div class="input-group-text">+7</div>
    </div>
    <input id="phone" type="tel" name="phone" class="form-control" value="(___)___-__-__" pattern="^(?[0-9]{3})?(s+)?[0-9]{3}-?[0-9]{2}-?[0-9]{2}$">
    <div class="invalid-feedback"></div>
  </div>
</div>

2. При необходимости можно создать маску для телефона. Например, на базе «masked_input_1.4.1-min.js»:

<script>
// masked_input_1.4.1-min.js
// angelwatt.com/coding/masked_input.php

MaskedInput({
  elm: document.getElementById('phone'), // select by id
  format: '(___)___-__-__',
  separator: '()-'
});
</script>

3. Добавить в «form-processing.php» код для валидации номера телефона:

// валидация phone
if (!empty($_POST['phone'])) {
  $data['form']['phone'] = preg_replace('/D/', '', $_POST['phone']);
  if (!preg_match('/^(8|7)(d{10})$/', $phone)) {
    $data['result'] = 'error';
    $data['errors']['phone'] = 'Поле содержит не корректный номер.';
    itc_log('Phone не корректный.');
  }
}

Также необходимо добавить строчку, которая будет заменять плейсхолдер %phone% в шаблоне письма:

$search = ['%subject%', '%name%', '%email%', '%message%', '%phone%', '%date%'];
$replace = [EMAIL_SETTINGS['subject'], $data['form']['name'], $data['form']['email'], $data['form']['message'], $data['form']['phone'], date('d.m.Y H:i')];

В месте, где записываем лог:

$output .= 'Телефон: ' . isset($data['form']['phone']) ? $data['form']['phone'] : 'не указан' . PHP_EOL;

4. Добавить в шаблон письма «email.tpl»:

Телефон: <b>%phone%</b>

Пример формы, в котором присутствует поле для ввода телефона: скачать.

3. Как использовать почту Gmail

По умолчанию в аккаунте Google отключена возможность отправлять почту через SMTP-сервер Gmail с помощью PHP. Чтобы её включить необходимо предоставить доступ к аккаунту для приложения.

Но перед этим, необходимо узнать текущее состояние двухэтапной аутентификации.

Для этого необходимо перейти в Google аккаунт и открыть раздел «Безопасность». В группе «Вход в аккаунт Google» найти настройку «Двухэтапная аутентификация» и посмотреть её статус.

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

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

Для создания паролю приложению нужно перейти в Google аккаунт, а затем в раздел «Безопасность». Далее на этой странице найти группу настроек «Вход в аккаунт Google» и кликнуть на ссылку «Пароли приложений». На открывшейся странице из раскрывающегося списка «Приложение» необходимо выбрать «Другое (введите название)» и написать, например, имя своего сайта, а затем нажать на кнопку «Создать». Созданный пароль необходимо скопировать, он нам нужен будет при настройке отправки почты с использованием PHPMailer.

Для этого необходимо открыть файл «form-processing.php» и сделать следующие настройки почты:

const EMAIL_SETTINGS = [
  'addresses' => ['manager@domain.com'], // кому необходимо отправить письмо
  'from' => ['name@gmail.com', 'Имя'], // от какого email и имени необходимо отправить письмо
  'subject' => 'Сообщение с формы обратной связи', // тема письма
  'host' => 'ssl://smtp.gmail.com', // SMTP-хост
  'username' => 'name@gmail.com', // // SMTP-пользователь
  'password' => '*********', // SMTP-пароль
  'port' => '465' // SMTP-порт
];

При включенной двухэтапной аутентификации Google мы указываем в качества ключа password пароль, созданный для приложения. В противном случае – пароль от аккаунта.

Нескольких форм на одной странице

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

1. Добавить к каждой из них id (например, form-1, form-2 и т.д.), для того их можно было более просто получить.

2. Если их обработка на сервере будет значительно отличаться, то создать необходимые php-скрипты и указать их в action:

<!-- форма 1 -->
<form id="form-1" action="/feedback/form-processing-1.php" enctype="multipart/form-data" novalidate>
  ...
</form>
<!-- форма 2 -->
<form id="form-2" action="/feedback/form-processing-2.php" enctype="multipart/form-data" novalidate>
  ...
</form>

3. Добавить в URL адрес для капчи GET-параметр id (так образом мы можем создать свою капчу для каждой формы):

<!-- форма 1 -->
<form id="form-1" action="/feedback/form-processing-1.php" enctype="multipart/form-data" novalidate>
  ...
  <img class="form-captcha__image" src="/feedback/captcha/captcha.php?id=captcha-1" data-src="/feedback/captcha/captcha.php?id=captcha-1" width="132" height="46" alt="Капча">
  ...
</form>
<!-- форма 2 -->
<form id="form-2" action="/feedback/form-processing-2.php" enctype="multipart/form-data" novalidate>
  ...
  <img class="form-captcha__image" src="/feedback/captcha/captcha.php?id=captcha-2" data-src="/feedback/captcha/captcha.php?id=captcha-2" width="132" height="46" alt="Капча">
  ...
</form>

4. Выполнить инициализацию форм как ItcSubmitForm:

// инициализация #form-1
ItcSubmitForm.getOrCreateInstance('#form-1');
// инициализация #form-2
ItcSubmitForm.getOrCreateInstance('#form-2');

5. Внести изменения в «form-processing-1.php» и «form-processing-2.php» для обработки форм. Изначально эти файлы можно создать как копии «form-processing.php».

6. В месте, в котором проверяется код капчи, установить в качестве ключа $_SESSION то значение id, которое мы использовали в <img>:

// в файле form-processing-1.php
if ($_POST['captcha'] === $_SESSION['captcha-1']) {

// в файле form-processing-2.php
if ($_POST['captcha'] === $_SESSION['captcha-2']) {

Пример с двумя формами, расположенными на одной странице, расположен на GitHub в папке examples.

Что внутри?

Форма в HTML состоит из следующих элементов:

• <input type="text" name="name"> – имя;
• <input type="email" name="email"> – email;
• <textarea name="message"> – сообщение;
• <input type="file" name="attach[]" multiple> – файлы;
• <input type="text" name="captcha"> – капча;
• <input type="checkbox" name="agree"> – пользовательское соглашение;
• <button type="submit"> – кнопка для отправки формы.

Это набор полей, которая <form> имеет по умолчанию. При необходимости в неё можно добавить новые, а также удалить существующие.

Работа формы выполняется через AJAX.

Когда пользователь нажимает на кнопку «Отправить», возникает событие submit на элементе <form>. В JavaScript срабатывает соответствующий обработчик. Код этого обработчика выполняет валидацию полей (если значение ключа _isCheckValidationOnClient равно true). Если все поля соответствуют требованиям, то форма отправляется на сервер через AJAX (сбор данных осуществляется с использованием FormData).

Запрос на сервере обрабатывается в «form-processing.php». Сначала в нём осуществляется валидация данных. При их корректности осуществляется отправка формы на указанный в настройках email. Результат обработки формы отправляется клиенту в формате JSON.

После получения ответа от сервера, JavaScript разбирает его и определённым образом обновляем страницу.

Как организована валидация

Валидация полей формы в JavaScript выполняется с использованием метода checkValidity():

let valid = true;
// input, textarea
this._elForm.querySelectorAll('input, textarea').forEach(el => {
  if (el.checkValidity()) {
    this._setStateValidaion(el, 'success');
  } else {
    this._setStateValidaion(el, 'error', el.validationMessage);
    valid = false;
  }
});
return valid;

Метод _setStateValidaion() устанавливает для элемента определённые классы, которые используются для его стилизации.

Как генерируется капча

Для генерации капчи используются 3 файла:

• captcha.php (скрипт для генерации капчи);
• oswald.ttf (шрифт, посредством которого код капчи пишется на изображении);
• background.png (изображение, на которое накладывается текст капчи).

При нажатии на кнопку Обновить генерируется новый код капчи и обновляется его изображение на странице.

Добавление файлов в форму

В <form> код для добавления файлов организован с использованием <input>, который имеет атрибуты type="file" и multiple:

<!-- Файлы -->
<div class="form-group form-attach" data-count="5">
  <div class="form-attach__label">Файлы (не более <span class="form-attach__count">5</span>)</div>
  <div class="form-attach__wrapper">
    <input type="file" name="attach[]" multiple required>
    <div class="form-attach__description">
      <div>Нажмите для загрузки файлов или перетащите их</div>
      <div class="text-sm">PNG, JPG, GIF (до 512 Кбайт)</div>
    </div>
    <div class="form-attach__items"></div>
  </div>
  <div class="invalid-feedback"></div>
</div>

Для создания превью изображений в JavaScript используется FileReader.

Файлы формы обратной связи имеют кодировку UTF-8 без BOM. Для проверки работоспособности формы в Денвере необходимо в корне сайта создать файл .htaccess и добавить в него строчку: AddDefaultCharset UTF-8.

Что отправляет form-processing.php на клиент (в браузер)

В «form-processing.php» отправляется всегда то, что находится в переменной $data.

Результат обработки находится в ключе result. Он может иметь одно из следующих значений:

• 'success' — успех;
• 'error' — при обработке формы возникли ошибки.

Ошибки валидации помещаются в $data['errors']. Например так записывается ошибка для поля email:

$data['errors']['email'] = 'Email не корректный.';

Добавления сообщений, которые затем нужно вывести в консоль браузера, осуществляется так:

$data['logs'][] = 'Сообщение, которое нужно вывести в консоль браузера.';

Добавление файлов к письму

По умолчанию файлы прикрепляются к письму. Осуществляется это так:

foreach ($attachs as $attach) {
  $mail->addAttachment($attach);
}

Кроме этого имеется также возможность добавить их в виде ссылок в тело письма (зависит это от значения константы HAS_ATTACH_IN_BODY)

$ul = 'Файлы, прикреплённые к форме: <ul>';
foreach ($attachs as $attach) {
  $href = str_replace($_SERVER['DOCUMENT_ROOT'], '', $attach);
  $name = basename($href);
  $ul .= '<li><a href="' . BASE_URL . $href . '">' . $name . '</a></li>';
  $data['href'][] = BASE_URL . $href;
}
$ul .= '</ul>';

В письмо «email.tpl» они вставляются в место, определяемым плейсхолдером %attachs%.

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

• Форма обратной связи с использованием Bootstrap
• Форма обратной связи в модальном окне
• Добавление Google reCAPTCHA к PHP форме
• Защита PHP формы от спама с помощью invisible reCAPTCHA

Форма обратной связи на сайте – это механизм для общения между посетителем ресурса и его администраторами.

Больше видео на нашем канале — изучайте интернет-маркетинг с SEMANTICA

Для чего нужна обратная связь

• Ответы на вопросы посетителей.
• Анкетирование.
• Прием заказов посредством сайта.
• Прием заявок на обратные звонки.

Два вида коммуникации с посетителем

• Отправка на email. После заполнения предложенных полей форма отправляется на e-mail администратора сайта. Все дальнейшее общение происходит посредством обмена электронными письмами или выходом в офф-лайн (телефон и т.п.).
• Отправка в систему управления сайтом. После заполнения администратор сайта видит запрос в списке заполненных данных в CMS, и там же может его обработать. К примеру, таким образом может быть реализована гостевая книга или система «Вопрос-ответ». Покупка товаров в интернет-магазине работает подобным образом.

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

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

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

Для разработки необходимы знания php, html и javascript. На CMS существуют разные конструкторы, позволяющие сделать сервис обратной связи, также можно воспользоваться сервисами в интернете. Но все же предпочтительнее первый способ. Вы, как администратор сайта, должны точно знать, какие механизмы применяются для отправки сообщений.

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

Структура

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

Как правило, обязательными к заполнению являются поля: ФИО, телефон, e-mail, ваш вопрос. Самая простая страница коммуникации должна содержать эти поля.

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

Пример сервиса обратного звонка

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

Пример усложненной формы обратной связи для заказа

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

Где размещать

Обычно применяют два вида размещения формы:

• На отдельной странице в случае, если форма содержит много полей.
• На странице «Контакты» под заголовком «Напишите нам».

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

Правила хорошего тона

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

Связь через формы – самый быстрый метод коммуникации с клиентами, дающий возможность подготовить детальные ответы и собрать уникальную базу e-mail адресов и телефонных номеров. Помните: вы не имеете право пользоваться этой базой для массовой рассылки и передавать ее сторонней организации. По статистике ваше предложение будет работать, если человек в данный момент ищет именно вашу услугу или товар. Если потенциальный клиент к вам уже обратился, в ваших силах предложить ему сейчас именно то, в чем он заинтересован.

Форма обратной связи — используется, как не странно, для связи пользователя сайта с администратором. В ней пользователь может сообщить о каких то ошибках на сайте или спросить о чем-либо разработчика.

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

• Способ №1. Форма обратной связи на html + css + php (функционален, расширяем, относительно сложный способ)
• Способ №2. Форма обратной связи только на html от стороннего сервиса (простота установки, функционален)
• Способ №3. Форма для связи, реализованная по средствам ссылки для почтового клиента. При клике по ней открывается ваша почта, в которой уже вписан нужный email для связи. (просто, но и нет ни каких функций или возможностей)

Способ №1. Форма обратной связи html + php.

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

Для данной формы вам потребуется:

• Хостинг с поддержкой PHP
• Знания HTML+ CSS
• Знания PHP

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

<meta http-equiv='refresh' content='3; url=https://you-hands.ru'>
<meta charset="UTF-8" />
<?php

	if (isset($_POST['name']) && $_POST['name'] != "")//если существует атрибут NAME и он не пустой то создаем переменную для отправки сообщения
		$name = $_POST['name'];
	else die ("Не заполнено поле "Имя"");//если же атрибут пустой или не существует то завершаем выполнение скрипта и выдаем ошибку пользователю.

	if (isset($_POST['email']) && $_POST['email'] != "") //тут все точно так же как и в предыдущем случае
		$email = $_POST['email'];
	else die ("Не заполнено поле "Email"");

	if (isset($_POST['subjects']) && $_POST['subjects'] != "") 
		$sub = $_POST['subjects'];
	else die ("Не заполнено поле "Тема"");

	if (isset($_POST['message']) && $_POST['message'] != "") 
		$body = $_POST['message'];
	else die ("Не заполнено поле "Сообщение"");
	 


	$address = "[email protected]";//адрес куда будет отсылаться сообщение для администратора
	$mes  = "Имя: $name n";	//в этих строчках мы заполняем текст сообщения. С помощью оператора .= мы просто дополняем текст в переменную
	$mes .= "E-mail: $email n";
 	$mes .= "Тема: $sub n";
 	$mes .= "Текст: $body"; 
	$send = mail ($address,$sub,$mes,"Content-type:text/plain; charset = UTF-8rnFrom:$email");//собственно сам вызов функции отправки сообщения на сервере

	if ($send) //проверяем, отправилось ли сообщение
		echo "Сообщение отправлено успешно! Перейти на <a href='https://You-hands.ru/'>you-hands.ru</a>, если вас не перенаправило вручную.";
	else 
		echo "Ошибка, сообщение не отправлено! Возможно, проблемы на сервере";
		 
?>

Далее давай те напишем HTML код формы

<!DOCTYPE html>
<html lang="ru">
<head>
	<meta charset="UTF-8">
	<title>Форма обратной связи</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	

	<form name="form" action="mail.php" method="post" id="form_message">
		<h2>Форма обратной связи.</h2>
		<p> <div class="titles">Ваше имя*</div> <input class="input" name="name" type="text"/> </p>
		 
		<p> <div class="titles">Электронная почта*</div> <input class="input" name="email" type="text"/> </p>
		 
		<p> <div class="titles">Тема сообщения</div> <input class="input" name="subjects" type="text"/> </p>
		 
		<p> <div class="titles">Текст сообщения:</div><textarea name="message" cols="22" rows="5" /></textarea></p>
		<p><input id="submit" value="Отправить" type="submit" /></p>
	</form>
</body>
</html>

Ну и конечно же файл CSS, что-бы все облагородить)

.titles{
	width: 140px;
	float: left;
}

#form_message{
	box-shadow: 0 0 10px rgba(0,0,0,0.5);
	border-radius: 5px;
	margin:10px;
	padding: 10px;
	width: 320px;
	height:330px;
}

#form_message input,textarea{
	border-radius: 5px;
	width: 170px;
}

#submit{
	height: 50px;
	float: right;
}

#form_message h2{
	text-align: center;
}

Скачать с Я.Диск: https://yadi.sk/d/hohX1ZdUAWX_7Q

Вот, что получилось в итоге.

Способ №2. Сервис для формы обратной связи.

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

Для данного способа вам понадобиться:

• Хостинг HTML
• Знание HTML приветствуется

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

Я собрал вот такую форму на сервисе Яндекса.

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

Способ №3. Ссылка для отправки email.

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

<a href="mailto:[email protected]">Отправить сообщение</a>

Такую ссылку можно усложнить и задать сразу еще и тему к примеру

<a href="mailto:[email protected]?subject=YOUR_SUBJECT">Отправить сообщение с темой</a>

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

4.28/5 (23)

Всем привет! В этой статье вы узнаете, как создать всплывающую форму обратной связи для 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 код и загрузить его в корень вашего сайта.

";
$msg .= "
Новое сообщение
rn";
$msg .= "
Имя: ".$username."
rn";
$msg .= "
Номер телефона: ".$userphone."
rn";
$msg .= "
Почта: ".$usermail."
rn";
$msg .= "
Сообщение: ".$content."
rn";
$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. Скачать его можно с официального сайта, либо через админку в разделе Плагины.

Еще нет сайта на данном движке? Рекомендую прочитать статью о том, как установить wordpress на свой домен.

После активации плагина в левом меню появится новая вкладка. Открываете ее и нажимаете 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. Это необходимо для того, чтобы форма не появлялась на экране при запуске сайта.

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

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

UPDATE 06.06.2018

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

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

url: 'http://site.ru/sendmessage.php'

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

UPDATE 04.07.2018

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

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

popup form
form

Отдельного внимания зазлуживает реализация формы обратной связи на WordPress без использования плагинов.