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

Форма обратной связи с использованием ajax, php и bootstrap

Статья, в которой рассмотрим, как создать форму обратной связи для сайта, используя JavaScript, AJAX, популярный фронтенд фреймворк Bootstrap и PHP. Форма будет работать без перезагрузки страницы. Введённые данные будут отправляться на почту (email).

Загрузка формы обратной связи

Проект по созданию формы обратной связи (для Bootstrap 4) находится на гитхабе по адресу: https://github.com/itchief/simple-feedback-form.

Скачать эту форму можно также с Яндекс Диска по этому URL. Распространяется данная форма под лицензией MIT.

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

Предыдущая версия AJAX формы обратной связи (для Bootstrap 3) доступна по этой ссылке.

Более сложные варианты форм обратной связи:

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

Форма обратной связи имеет следующую структуру:

feedback/ ├── captcha/ │ ├── captcha.php │ ├── oswald.ttf │ └── background.png ├── css/ │ └── main.css ├── js/ │ ├── main.js │ └── process-forms.js ├── logs/ │ ├── .htaccess │ └── logs.txt ├── phpmailer/ │ └── … ├── process/ │ ├── email.tpl │ ├── email_client.tpl │ └── process.php ├── vendors/ │ ├── bootstrap │ └── jquery └── index.html

Назначение файлов:

• captcha.php — скрипт на языке php для генерации капчи;
• oswald.ttf — шрифт, которой будет использоваться для вывода кода капчи на изображении;
• background.png — фон, на который будет «накладываться» код капчи;
• main.css — стили (не Bootstrap) для формы обратной связи;
• main.js — скрипт, выполняющий инициализацию формы обратной связи;
• process-forms.js — скрипт, обеспечивающий логику работы формы обратной связи на клиенте (в браузере);
• logs.txt — текстовый файл, в который будет записываться лог после отправки формы обратной связи;
• phpmailer — php-библиотека, которую будем использовать для отправки email-сообщений;
• email.tpl — шаблон email-письма для получателя;
• email_client.tpl — шаблон email-письма для отправителя;
• process.php — скрипт, посредством которого будем обрабатывать форму на сервере;
• index.html — HTML-документ, содержащий форму обратной связи;

В каталоге vendors расположены фреймворк Bootstrap и библиотека jQuery.

Установка формы обратной связи

По умолчанию контактная форма (папка feedback вместе со всем содержимым) должна быть помещена в корневую директорию сайта. Т.е. путь к файлу index.html должен быть таким:

/feedback/index.html

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

Настройка файлов при изменении структуры

Если нужно модифицировать структуру формы обратной связи, т.е. изменить расположение файлов, то в этом случае потребуется откорректировать пути в файлах index.html (или там где расположена форма) и process.php. Рассмотрим, как это выполнить более подробно.

Настройка путей к файлам в index.html

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

В файле index.html ещё устанавливается путь к капче. Если она расположена не по адресу /feedback/captcha/captcha.php, то значения атрибутов src и data-src необходимо откорректировать.

Обратите внимание

Кроме этого к странице, в которой будет использоваться форма, должны быть подключены фреймворк Bootstrap 4 (bootstrap.js, bootstrap.css), библиотека jQuery (jquery.js) и скрипт process-forms.js.

… …

Инициализация формы выполняется следующим образом (в проекте для этой цели используется файл main.js):

//после загрузки DOM $(function () { var form1 = feedbackForm(); form1.init({ id: ‘#feedbackForm’ }); });

Настройка путей к файлам в process.php

В файле process.php для отправки писем используется библиотка PHPMailer. При модификации структуры проекта проверьте и при необходимости откорректируйте путь к этой библиотеки (PHPMailer), а также ещё к файлу logs.txt.

Как осуществляется валидация формы

В данной форме валидация осуществляется как на клиенте, так и на сервере.

Скриншот формы с ошибками валидации:

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

Установка требований к полям формы обратной связи определяется с помощью атрибутов type, required, minlength, maxlength, pattern и др.

Например, требование к полю name в данном проекте:

На сервере валидация данных формы осуществляется в файле process.php.

Например, валидация поля name осуществляется с помощью следующего php-кода:

if (isset($_POST[‘name’])) { $name = filter_var($_POST[‘name’], FILTER_SANITIZE_STRING); // защита от XSS $nameLength = mb_strlen($name, ‘UTF-8’); if ($nameLength < 2) { $data[‘name’] = ‘Текст должен быть не короче 2 симв. Длина текста сейчас: ‘. $nameLength .’ симв.’; $data[‘result’] = ‘error’; } else if ($nameLength > 30) { $data[‘name’] = ‘Длина текста не должна превышать 30 симв. (сейчас ‘. $nameLength .’ симв.).’; $data[‘result’] = ‘error’; } } else { $data[‘name’] = ‘Заполните это поле.’; $data[‘result’] = ‘error’; }

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

Скриншот формы:

Форма по умолчанию состоит из трёх основных полей (имени, email-адреса, сообщения), капчи, чекбокса и кнопки «Отправить сообщение».

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

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

Отправка данных на сервер выполняется с помощью JavaScript (AJAX). Но перед тем как их передать серверу по технологии AJAX, он должен их проверить на корректность.

Все действия по обработке формы в браузере, а также обновление страницы после получения ответа от сервера выполняет код JavaScript, находящийся в файле process-forms.js.

Инициализация работы этого скрипта (process-forms.js) осуществляется с помощью кода расположенного в файле main.js.

Основные действия, которые выполняет сценарий JavaScript, расположенный в файле process-forms.js:

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

После отправки формы на сервер, она передаётся для обработки файлу process.php.

Данный файл (process.php) выполняет следующие основные действия:

• получение данных с отправленной формы;
• проверку данных формы (полей, капчи) и формирования ассоциативного массива с результатами проверки;
• в случае успеха проверки даных — отправка email письма получателю и отправителю;
• отправка JSON ответа веб-браузеру с результатами.

Скриншот формы при её успешной отправки:

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

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

HTML код формы обратной связи (файл index.html):

Показать или скрыть код

Имя Email-адрес Сообщение (не менее 20 символов) Обновить Код, показанный на изображении Нажимая кнопку, я принимаю условия Пользовательского соглашения и даю своё согласие на обработку моих персональных данных, в соответствии с Федеральным законом от 27.07.2006 года №152-ФЗ «О персональных данных». Исправьте данные и отправьте форму ещё раз. Отправить сообщение Форма успешно отправлена. Нажмите на ссылку, чтобы отправить ещё одно сообщение.

JavaScript код (файл process-forms.js):

Показать или скрыть код

‘use strict’; var feedbackForm = (function () { // переключить во включенное или выключенное состояние кнопку submit var _changeStateSubmit = function (element, state) { $(element) .closest(‘form’) .find(‘[type=»submit»]’).prop(‘disabled’, state); }; // изменение состояния кнопки submit в зависимости от состояния checkbox agree var _changeAgreement = function (element) { _changeStateSubmit(element, !element.checked); }; // обновление капчи var _refreshCaptcha = function (form) { var captchaImg = form.find(‘.img-captcha’), captchaSrc = captchaImg.attr(‘data-src’), captchaPrefix = captchaSrc.indexOf(‘?id’) !== -1 ? ‘&rnd=’ : ‘?rnd=’, captchaNewSrc = captchaSrc + captchaPrefix + (new Date()).getTime(); captchaImg.attr(‘src’, captchaNewSrc); }; // изменение состояния элемента формы (success, error, clear) var _setStateValidaion = function (input, state, message) { input = $(input); if (state === ‘error’) { input .removeClass(‘is-valid’).addClass(‘is-invalid’) .siblings(‘.invalid-feedback’).text(message); } else if (state === ‘success’) { input.removeClass(‘is-invalid’).addClass(‘is-valid’); } else { input.removeClass(‘is-valid is-invalid’); } }; // валилация формы var _validateForm = function (_$form) { var valid = true; _$form.find(‘input,textarea’).not(‘[type=»file»],[name=»agree»]’).each(function () { if (this.checkValidity()) { _setStateValidaion(this, ‘success’); } else { _setStateValidaion(this, ‘error’, this.validationMessage); valid = false; } }); return valid; }; var _showForm = function (form, _isCaptcha, _isAgreeCheckbox) { if (!form.find(‘.form-error’).hasClass(‘d-none’)) { form.find(‘.form-error’).addClass(‘d-none’); } form.siblings(‘.form-result-success’).addClass(‘d-none’).removeClass(‘d-flex’); form[0].reset(); form.find(‘input,textarea’).each(function () { _setStateValidaion(this, ‘clear’); }); if (_isCaptcha) { _refreshCaptcha(form); } if (_isAgreeCheckbox) { _changeStateSubmit(form, true); } }; return function () { var _defaults = { id: ‘#feedbackForm’ // id формы обратной связи } var _form = $(_defaults.id)[0], // форма обратной связи _$form = $(_form), _action = $(_form).attr(‘action’), _isCaptcha = false, // имеется ли у формы секция captcha _isAgreeCheckbox = false; // имеется ли у формы секция agreement // собираем данные для отправки на сервер var _collectData = function () { var data = new FormData(_form); return data; }; // отправка формы var _sendForm = function (e) { e.preventDefault(); if (!_validateForm(_$form)) { if (_$form.find(‘.is-invalid’).length > 0) { _$form.find(‘.is-invalid’)[0].focus(); } return; } var request = $.ajax({ type: «POST», url: _action, data: _collectData(), // данные для отправки на сервер contentType: false, processData: false, cache: false, beforeSend: function () { _changeStateSubmit(_$form, true); } }) .done(_success) .fail(_error) }; var _success = function (data) { // при успешной отправки формы if (data.result === «success») { _$form.parent().find(‘.form-result-success’) .removeClass(‘d-none’) .addClass(‘d-flex’); return; } // если произошли ошибки при отправке _$form.find(‘.form-error’).removeClass(‘d-none’); _changeStateSubmit(_$form, false); // сбрасываем состояние всех input и textarea элементов _$form.find(‘input,textarea’).not(‘[type=»file»],[name=»agree»]’).each(function () { _setStateValidaion(this, ‘clear’); }); // выводим ошибки которые прислал сервер for (var error in data) { if (!data.hasOwnProperty(error)) { continue; }; switch (error) { case ‘captcha’: _refreshCaptcha(_$form); _setStateValidaion(_$form.find(‘[name=»’ + error + ‘»]’), ‘error’, data[error]); break; case ‘log’: $.each(data[error], function (key, value) { console.log(value); }); break; default: _setStateValidaion(_$form.find(‘[name=»’ + error + ‘»]’), ‘error’, data[error]); } // устанавливаем фокус на 1 невалидный элемент if (_$form.find(‘.is-invalid’).length > 0) { _$form.find(‘.is-invalid’)[0].focus(); } } }; var _error = function (request) { _$form.find(‘.form-error’).removeClass(‘d-none’); }; // устанавливаем обработчики событий var _setupListener = function () { $(document).on(‘change’, _defaults.id + ‘ [name=»agree»]’, function () { _changeAgreement(this); }); $(document).on(‘submit’, _defaults.id, _sendForm); $(document).on(‘click’, _defaults.id + ‘ .refresh-captcha’, function (e) { e.preventDefault(); _refreshCaptcha(_$form); }); $(document).on(‘click’, ‘[data-reloadform=»’ + _defaults.id + ‘»]’, function (e) { e.preventDefault(); _showForm(_$form, _isCaptcha, _isAgreeCheckbox); }); } return { init: function (config) { _isCaptcha = _$form.find(‘.captcha’).length > 0; // имеется ли у формы секция captcha _isAgreeCheckbox = _$form.find(‘.agreement’).length > 0; // имеется ли у формы секция agreement $.each(config, function (key, value) { _defaults[key] = value; }); _setupListener(); } }; } })();

PHP код для формирование изображения, содержащего код капчи (файл captcha.php):

Показать или скрыть код

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

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

$back = «

Вернуться назад

«;

Этой строкой мы создаем ссылку для возвращения на предыдущую страницу. Поскольку мы заранее не знаем с какой страницы пользователь попадет на эту, то делается это при помощи маленькой 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.’
Его номер: ‘.$phone.’
Его почта: ‘.$mail.’
Его сообщение: ‘.$message,»Content-type:text/html;charset=windows-1251″);

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

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

ВАЖНО!

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

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

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

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

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

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

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; }

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

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

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

• Обращаемся к нашей форме и по значению атрибута name выбираем интересующий нас инпут.
• Записываем его содержимое в переменную
• Собственно сама проверка формы на совпадение с заданными нами символами. (/^[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]+$/ — первые несколько символов это английские буквы или точки, потом знак @, потом снова английские буквы, потом точка и потом еще несколько английских букв).
• Если все верно, то проверка ничего не выводит и идет к следующему блоку кода, если же проверка на символы выдала ошибку, то выполняется часть скрипта с действиями 5 и 6.
• Пользователю выводится это сообщение о ошибке.
• Происходит выход из скрипта проверки.

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

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

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

• index.php
• mail.php
• style.css

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

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

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

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

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

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

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

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

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

Совет

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

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

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

Начнем с простенькой формы. Здесь добавим кнопку “обновить капчу” на тот случай, если изображение сгенерировалось совсем не читаемое. В этом случае у нас заново сработает скрипты случайного значения и рисунка, а также перепишется сессия.

Ваше имя

Ваш е-mail:

Сообщение:

Обновить капчу
Введите капчу:

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

function generate_code() { $chars = ‘abdefhknrstyz23456789’; // Задаем символы, которые будут в капче $length = rand(3, 4); // Длина капчи $numChars = strlen($chars); // Вычисляем, сколько всего символов $str = ”; for ($i = 0; $i < $length; $i++) { $str .= substr($chars, rand(1, $numChars) – 1, 1); } // Выдергиваем случайные символы // Перемешиваем $array_mix = preg_split(‘//’, $str, -1, PREG_SPLIT_NO_EMPTY); srand ((float)microtime()*1000000); shuffle ($array_mix); // Возвращаем полученный код return implode(“”, $array_mix); }

Вот собственно скрипт, который будет рисовать нашу картинку-капчу:

// Устанавливаем переменную img_dir, путm к шрифтам и фонам define(«img_dir», $_SERVER[‘DOCUMENT_ROOT’].»/img/»); // Подключаем генератор текста include(«random.php»); $captcha = generate_code(); // Записываем значение в сессию session_start(); $_SESSION[‘captcha’]=md5($captcha); // Функция генерации изображения function img_code($code) // $code — сюда передадим сгенерированный код { // Отправляем браузеру Header’ы header(«Expires: Mon, 26 Jul 1997 05:00:00 GMT»); header(«Last-Modified: » . gmdate(«D, d M Y H:i:s», 10000) . » GMT»); header(«Cache-Control: no-store, no-cache, must-revalidate»); header(«Cache-Control: post-check=0, pre-check=0», false); header(«Pragma: no-cache»); header(«Content-Type:image/png»); // Количество линий. Будут за текстом и сверху текста $linenum = rand(3, 15); // Задаем фоны для капчи. Можете загрузить свой (у меня в папке /img). Рекомендуемый размер — 150х70 $img_arr = array( «1.png», «2.png» ); // Шрифты $font_arr = array(); $font_arr[0][«fname»] = «Andika-R.ttf»; // Имя шрифта. Например Droid Sans $font_arr[0][«size»] = rand(20, 35); // Размер в pt // Генерируем подложку со случайным фоном $n = rand(0,sizeof($font_arr)-1); $img_fn = $img_arr[rand(0, sizeof($img_arr)-1)]; $im = imagecreatefrompng (img_dir . $img_fn); // Рисуем линии на подложке for ($i=0; $i //Функция проверки капчи function check_code($code,$cap) { $code = trim($code); $code = md5($code); if ($code == $cap){return TRUE;}else{return FALSE;} } if (isset($_POST[‘go’])) { //Если была нажата кнопка… session_start(); $cap = $_SESSION[‘captcha’]; //берем из сессии значение MD5 нашего кода, занесенного туда captcha.php $_SESSION[‘captcha’] = ”; //Чистим сессию $online_theme = ‘=?UTF-8?B?’.base64_encode(«Письмо с сайта: Мой сайт»).’?=’; //Тема письма $online_name = strip_tags(stripslashes(substr($_POST[‘online_name’],0,50))); //Имя $online_mail = strip_tags(stripslashes(substr($_POST[‘online_mail’],0,30))); //Email товарища $online_message = strip_tags(stripslashes(substr($_POST[‘online_message’],0,3000))); //Сообщение для передачи if (!empty($_POST[‘online_name’])) { if (!empty($_POST[‘online_mail’])) { if (!empty($_POST[‘online_message’])) { if(checkmail($online_mail) !== -1) { //Отправка письма если все проверено! $message = «Письмо с сайта мой сайт
От: {$online_name}
Его email: {$online_mail}
Сообщение: {$online_message}
«; $headers = ‘MIME-Version: 1.0’ . »
«; $headers=»Content-type: text/plain; charset=»UTF-8″»; $headers.=»From: «; $headers.=»Subject: {$online_theme}»; $headers.=»Content-type: text/plain; charset=»UTF-8″»; if (check_code($_POST[‘code’], $cap)) //Тут как раз и проверяем совпадение капчи { if(mail(«ваш@ящик.ru, второй@ящик.com»,$online_theme,$message,$headers) !== FALSE) //Отправляем письмо если все ок { //Через куки передаем информацию, что все ок setcookie(«info»,»Сообщение успешно отправлено»,time()+3600); header(‘Location: /’); exit(); } else {echo «

Возникла ошибка при отправке, повторите позднее
Назад

«; } } else { echo «

Неправильный код капчи Назад

«;} } else { echo «

Введите корректный электронный адрес Назад

«; } } else { echo «

Введите сообщение Назад

«; } } else { echo «

Вы не ввели e-mail Назад

«; } } else { echo «

Вы не указали имя Назад

«; } }

Дополнительная функция проверки корректности введенного емэйла:

function checkmail($email) { $email=trim($email); if (strlen($email)==0) return -1; if (!preg_match(«/^[a-z0-9_-]{1,20}+(.){0,2}+([a-z0-9_-]){0,5}@(([a-z0-9-]+.)+(com|net|org|mil|edu|gov|arpa|info|biz|inc|name|[a-z]{2})|[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3})$/is»,$email)) return -1; return $email; }

Ну и финальная сборка. Для теста разместим все в корне сайта. Для начала создадим директорию “img” и закинем туда пару картинок с шумом сгенерированных в фотошопе, назвав их 1.png и 2.png. В эту же директорию закинем шрифт, например у меня Andika-R.ttf.

Файлов будет всего два. Первый captcha.php будет нашей картинкой. Второй собственно скрипт-форма-обработчик.
captcha.php

define(«img_dir», $_SERVER[‘DOCUMENT_ROOT’].»/img/»); function generate_code() { $chars = ‘abdefhknrstyz23456789’; $length = rand(3, 4); $numChars = strlen($chars); $str = ”; for ($i = 0; $i < $length; $i++) { $str .= substr($chars, rand(1, $numChars) – 1, 1); } $array_mix = preg_split(‘//’, $str, -1, PREG_SPLIT_NO_EMPTY); srand ((float)microtime()*1000000); shuffle ($array_mix); return implode(“”, $array_mix); } $captcha = generate_code(); session_start(); $_SESSION[‘captcha’]=md5($captcha); function img_code($code) { header(“Expires: Mon, 26 Jul 1997 05:00:00 GMT”); header(“Last-Modified: ” . gmdate(“D, d M Y H:i:s”, 10000) . ” GMT”); header(“Cache-Control: no-store, no-cache, must-revalidate”); header(“Cache-Control: post-check=0, pre-check=0”, false); header(“Pragma: no-cache”); header(“Content-Type:image/png”); $linenum = rand(2, 4); $img_arr = array(“1.png”, “2.png”); $font_arr = array(); $font_arr[0][“fname”] = “Andika-R.ttf”; $font_arr[0][“size”] = rand(20, 35); $n = rand(0,sizeof($font_arr)-1); $img_fn = $img_arr[rand(0, sizeof($img_arr)-1)]; $im = imagecreatefrompng (img_dir . $img_fn); for ($i=0; $i Ваше имя

Ваш е-mail:

Сообщение:

Обновить капчу
Введите капчу:

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

Как установить и настроить капчу?

Добрый день, друзья! В этой статье речь пойдёт о капчи (captcha). Я расскажу Вам, как «прикрутить» капчу практически к любой форме Вашего сайта. Как настроить капчу, изменить цвет фона, цвет символов, размеры капчи и т.д. Внимание, капча (captcha) работает на php.

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

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

Обратите внимание

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

Если посетитель Вашего сайта не заполнил поле формы «введите буквы» или ввёл некорректные данные, то появляется сообщение об ошибке. Символы капчи при этом меняются на другие.

Если же все поля были заполнены верно, буквы капчи, введённые посетителем, соответствуют буквам на картинке, то инфу из формы успешно отправляем на Ваш e-mail. Выводим посетителю сообщение об успешной отправке и меняем буквы капчи снова.

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

В корне Вашего сайта создайте каталог (папку) с названием «captcha», в нём будут находиться два файла: captcha.php – скрипт генерации капчи и verdana.ttf – файл шрифта капчи.

Пишем php-код скрипта генерации капчи, файл captcha.php, в коде даны пояснения относительно настроек генерации картинок капчи.

session_start(); $string = «»; for ($i = 0; $i < 5; $i++) $string .= chr(rand(97, 118)); //или $string .= mt_rand(1, 9); если Вы хотите чтоб были цифры $_SESSION[‘rand’] = $string; $dir = “”; $image = imagecreatetruecolor(85, 25); //размер создаваемой картинки $color = imagecolorallocate($image, 137, 15, 200); //цвет букв или цифр картинки $white = imagecolorallocate($image, 246, 246, 246); //цвет фона картинки imagefilledrectangle($image,0,0,399,99,$white); imagettftext ($image, 17, 0, 10, 20, $color, $dir.”verdana.ttf”, $_SESSION[‘rand’]); header(“Content-type: image/png”); imagepng($image);

Теперь переходим к html-коду нашей формы. Нам необходимо после поля «Ваш e-mail» вставить html-код изображения и поля для ввода данных нашей капчи. Вот этот код:

А теперь html-код формы обратной связи с установленной капчей целиком:

А сейчас, давайте, добавим css-стили для изображения и поля ввода нашей капчи, чтобы они выглядели аккуратно:

/* CSS стили длякапчи */ .input_capT { width: 98px; height: 20px; overflow: hidden; background: white; border: solid 1px #DFE2E5; margin: 5px 0 10px 10px; box-shadow: 0 0 5px #ccc; -webkit-box-shadow: 0 0 5px #ccc; -moz-box-shadow: 0 0 5px #ccc; } .input_capT input { width: 100px; height: 26px; background: white; margin: -3px 0 0 -5px; padding: 0px 8px; border: none; background: transparent; } Важно

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

С html-кодом мы разобрались, css-стили для капчи добавили, переходим к файлу js-form.js. Сначала разберём js-код, отвечающий за обновление символов капчи после каждого нажатия кнопки «отправить»:

var id = Math.floor(Math.random()*10000); var captSRC = «captcha/captcha.php?id=»+id;

Смысл здесь в том, что мы создаём переменную «id» и после каждого нажатия кнопки «отправить» присваиваем ей произвольное число. Во второй строчке создаём переменную «captSRC», куда заносим полный путь до файла генерации капчи captcha.php, а также передаём идентификатор «id» методом GET.

Далее создаём переменную «captcha» и присваиваем ей данные, которые ввёл посетитель:

var captcha = $(«#captcha»).val();

Сейчас нам необходимо обновить строку, отвечающую за отправку данных в обработчик send.php:

data: {«posName»: posName, «posEmail»: posEmail, «posText»: posText, «captcha»: captcha},

И в конце скрипта js-form.js нам необходимо добавить строчку, отвечающую за обновление символов капчи, в не зависимости от полученных из обработчика данных.

$(«#capT»).attr(‘src’,captSRC);

Теперь полный JavaScript код выглядит так:

$(document).ready(function() { // Форма обратной связи с установленной капчей../ var regVr22 = «Сообщение обрабатывается…
«; $(«#send»).click(function(){ var id = Math.floor(Math.random()*10000); var captSRC = «captcha/captcha.php?id=»+id; $(«#loadBar»).html(regVr22).show(); var posName = $(«#posName»).val(); var posEmail = $(«#posEmail»).val(); var posText = $(«#posText»).val(); var captcha = $(«#captcha»).val(); $.ajax({ type: «POST», url: «../send.php», data: {«posName»: posName, «posEmail»: posEmail, «posText»: posText, «captcha»: captcha}, cache: false, success: function(response){ var messageResp = «

Спасибо, «; var resultStat = «! Ваше сообщение отправлено!

«; var oll = (messageResp + posName + resultStat); if(response == 1){ $(«#loadBar»).html(oll).fadeIn(3000); $(«#posName»).val(«»); $(«#posEmail»).val(«»); $(«#posText»).val(«»); $(«#captcha»).val(«»); $(«#capT»).attr(‘src’,captSRC); } else { $(«#loadBar»).html(response).fadeIn(3000); $(«#capT»).attr(‘src’,captSRC); } } }); return false; }); });

Большая часть нашей работы закончена, мы можем смело перейти к изменению php-обработчика — файл send.php. Сейчас, давайте, поднимемся вверх по странице и ещё раз посмотрим на код файла captcha.php, в самом верху находится функция запуска сессии:

Совет

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

$captcha = addslashes($_POST[‘captcha’]); $captcha = htmlspecialchars($captcha); $captcha = stripslashes($captcha); $captcha = trim($captcha);

И осталось последнее изменение: выполнить проверку на правильность введённых символов капчи посетителем:

//Проверка правильности капчи! if ($captcha != $_SESSION[‘rand’]) { $log.=»

• Вы ввели неверные буквы с картинки!

«; $error=»yes»; }

Теперь полный php-код файла send.php с учётом всех изменений выглядит так:

session_start(); header(«Content-type: text/html; charset=utf-8″); //********************************************** if(empty($_POST[‘js’])){ $log ==»»; $error=»no»; //флаг наличия ошибки $posName = addslashes($_POST[‘posName’]); $posName = htmlspecialchars($posName); $posName = stripslashes($posName); $posName = trim($posName); $posEmail = addslashes($_POST[‘posEmail’]); $posEmail = htmlspecialchars($posEmail); $posEmail = stripslashes($posEmail); $posEmail = trim($posEmail); $posText = addslashes($_POST[‘posText’]); $posText = htmlspecialchars($posText); $posText = stripslashes($posText); $posText = trim($posText); $captcha = addslashes($_POST[‘captcha’]); $captcha = htmlspecialchars($captcha); $captcha = stripslashes($captcha); $captcha = trim($captcha); //Проверка правильности капчи! if ($captcha != $_SESSION[‘rand’]) { $log.=»

• Вы ввели неверные буквы с картинки!

«; $error=»yes»; } //Проверка правильность имени if(!$posName || strlen($posName)>20 || strlen($posName)

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

Теперь пару слов по настройкам капчи, по тому, что заранее предвижу вопросы в комментариях типа: — Как настроить Вашу капчу на моём сайте?

Прошу Вас ещё раз внимательно посмотреть на код файла captcha.php, в нём даны комментарии к различным функциям скрипта. Внимание, цвет фона и символов капчи устанавливается в формате RGB. Где взять код цвета в RGB формате? Я обычно использую для этого программу Adobe Photoshop.

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

В рубрику «Мотивация – путь к успеху» я выбрал такую картинку:

Как Вам статья? Надеюсь, тема: «как установить и настроить капчу?» была Вам интересна, и Вы нашли здесь для себя что-то полезное. Не забудьте подписаться на обновление моего сайта по e-mail.
Внимание! Всех приглашаю в свою ! Давайте делиться анонсами своих статей на стене этой группы! Думаю, она станет неплохим источником трафика для каждого блоггера!

На этом всё. С уважением, Павел Макаров.
P.S. Буду рад комментариям к этому посту.

Скрипт формы обратной связи с прикреплением файла (php + ajax)

(Обновлено 26.06.2018)

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

В скрипте используется проверка заполненности обязательных полей с помощью скрипта jquery.validation с последующей отправкой сообщения на e-mail администратора без перезагрузки страницы с помощью технологии ajax.

Демо-страницу можно посмотреть – тут.

Рассмотрим работу скрипта на примере:
Дана форма с полями: Имя, Телефон, Е-mail и «Описание заказа».

Код формы:

Форма заказа

Имя*:

Контактный номер*:

E-mail:

Описание заказа:

Прикрепить файл:

! В форме, в которой происходит прикрепление файла, обязательно наличие аттрибута enctype=”multipart/form-data”.

Javascript код

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

Javascript код для валидации и ajax-отправки формы

// Как только страничка загрузилась window.onload = function () { // проверяем поддерживает ли браузер FormData if(!window.FormData) { alert(«Браузер не поддерживает загрузку файлов на этом сайте»); } } $(document).ready(function(){ // =validation var errorTxt = ‘Ошибка отправки’; $(«#sendform»).validate({ submitHandler: function(form){ var form = document.forms.sendform, formData = new FormData(form), xhr = new XMLHttpRequest(); xhr.open(«POST», «/send.php»); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if(xhr.status == 200) { $(«#sendform»).html(‘

Данные отправлены!

‘); } } }; xhr.send(formData); } }); })

Разберем более подробно этот код.

Для отправки файлов используется интерфейс FormData. Для кодирования данных метод FormData использует формат “multipart/form-data”.

Это означает то, что он позволяет подготовить для отправки по AJAX как текстовые данные, так и файлы. При создании объекта FormData ему можно в качестве параметра указать DOM форму.

В этом случае в объект FormData автоматически добавятся все поля (имяПоля:значение) этой формы.

О более детальной работе FormData можно почитать тут.

Обратите внимание

После загрузки страницы, с помощью строки if(!window.FormData) проверяем доступность данного объекта.

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

При нажатии на кнопку “Отправить” проверяются обязательные поля на заполненность с помощью метода validate и в случае успешной проверки (submitHandler) создается новый объект FormData, происходит вызов скрипта send.php, который и производит отправку форму и прикрепленного к ней файла.

Затем вместо формы выводится сообщение об успешной отправке. За это отвечает строка

$(«#sendform»).html(‘

Данные отправлены!

‘);

PHP-скрипт отправки данных с формы

send.php

Архив с примером
Демо-страница формы обратной связи с прикреплением файла

Дополнение от 28.12.2016

Отправка формы с прикреплением нескольких файлов

В элементе input, в котором прикрепляем файл, дописываем аттрибут multiple
(), что даст возможность выбора одновременно несколько файлов.

Изменяем php файл для обработки массива из нескольких файлов:

Демо-пример формы с прикреплением нескольких файлов на отдельной странице
Архив с примером

Как защитить свою форму обратной связи от атаки?

Представьте такую ситуацию.

Приходите вы на работу, садитесь проверить почту, рассчитывая увидеть ответ от партнёра, немного спама, а вместо этого видите вот такое: Входящие (164 532).

Картинка, естественно, фейковая. Причём вся почта пришла с формы обратной связи вашего сайта. Вам приходиться разбираться в десятках тысяч писем, и даже если они легко идентифицируются и удаляются — вы потратите огромное количество времени на решение вопроса, тем более что надо быть внимательным, что бы не пропустить действительно нужную корреспонденцию. Несложно посчитать, сколько писем может придти с формы обратной связи всего с одного компьютера злоумышленника за выходные. В пятницу рабочий день заканчивается в 18.00, предположим в 18.30 офис закрывается на ключ. В понедельник рабочий день начинает в 9.00, ну а открывают офис, к примеру, в 8.00. Итого имеем 61.5 час на то, что бы злоумышленник не опасаясь быстрого разоблачения занялся делом. Предположим он спамит (а сделать это можно даже с помощью браузера) в 10 потоков, т.е. он одновременно может отсылать 10 писем. Если он будет отправлять письма раз в три секунды, то утром понедельника, в 8.00 мы обнаружим 738 000 писем. Естественно, потоков может быть больше, время между отправками писем меньше, да и компьютеров, вовлечённых в этот процесс может быть десятки, а то и сотни. Но потеря времени не самое страшное, что может случиться, вы случайно можете удалить письмо клиента, или распоряжение директора, который находиться в длительной командировке. А потеря таких писем грозит не только взысканием с работника, но и серьёзными финансовыми потерями компании. Также, из печальных последствий, могут возникнуть серьёзные проблемы с хостинг провайдером, на площадке которого размещён ваш сайт. А если сообщение из формы обратной связи уходит на почтовый ящик, который расположен на другой хостинг-площадке (особенно если она бесплатная), то ваш домен может попасть в чёрные списки, из которых выбираться довольно — таки хлопотно. Подобные формы обратной связи буквально заполонили Рунет. Их десятки тысяч, а это значит, что среди них может оказаться и ваша компания. И в любой момент ваш рабочий процесс может остановиться по первому желанию злоумышленника. Ведь электронная почта в большинстве случаев самое важное средство коммуникации многих компаний. К сожалению, наказать злоумышленника, даже если вы точно знаете кто это, практически невозможно. Вот как это комментирует один из сотрудников отдела по борьбе с компьютерными преступлениями города Санкт — Петербург: Теперь давайте посмотрим, как работает уязвимая форма обратной связи. В большинстве случаев форма обратной связи отправляет информацию методом POST, либо сразу через функцию mail(). Не будем углубляться в дебри, но эти решения грешат возможностью автоматизации отправки огромного количества писем на ящик, в который уходят сообщения из формы обратной связи. Вот посмотрите предупреждение браузера Firefox2 о повторной отсылке информации на сервер:
Браузер Mozilla Firefox 2.0.0.12 Как вы сами понимаете, простое нажатие кнопки F5 на клавиатуре снова отправит вам письмо. Ну а автоматизировать данный процесс, повторюсь, совсем не сложно (хотя бы с помощью Opera). А теперь давайте поговорим о том, как можно исправить положение, не отказываясь от формы обратной связи. Я предлагаю пять вариантов, каждый вариант обладает как положительными сторонами, так и отрицательными. Вариант номер 1: Вариант номер 2: Вариант номер 3: Вариант номер 4: Вариант номер 5: Стоит учесть, что абсолютной панацеи всё равно нет, просто эти способы (которые, кстати, легко можно модернизировать, совмещать и т.п.) помогут отгородиться от проказ молодых и неопытных сетевых хулиганов.

Спасибо metalalisametalalisa за дополнение. Если честно, про капчу хотел написать, на забыл ?

Кросс-пост из моего блога.

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

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

Ваше имя: Ваш E-mail: Ваш телефон: Текст сообщения: Я добровольно отправляю свои данные Отправить

В файле main.css накидаю простенькие стили для оформления:

* { padding: 0; margin: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; font-size: 16px; background-color: #fff; } .container { max-width: 500px; margin: 50px auto; padding: 20px; border-radius: 4px; background-color: #ebebeb; box-shadow: 0 0 3px #666; } h2, .field-block { margin-bottom: 20px; } .field-block label, .field-block .field { display: block; width: 100%; } .field-block label { margin-bottom: 8px; font-weight: bold; } .field-block .field { font-size: 16px; padding: 8px 12px; line-height: 1.5; border-radius: 4px; border: 1px solid #ccc; box-shadow: inset 0 1px 1px rgba(0,0,0,0.075); transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; } .field-block .field:focus { border-color: #66afe9; outline: 0; box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6); } .field-block textarea { resize: vertical; } .check-text { font-size: 14px; vertical-align: top; } .button { cursor: pointer; font-size: 16px; padding: 6px 12px; margin-bottom: 5px; } #loader { display: none; }

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

Наполняем main.js:

• Включаем маску для ввода номера телефона.
• Делаем проверку, если чекбокс согласия на обработку персональных данных не отмечен, то деактивируем кнопку и не даем отправить форму.
• Формируем Ajax-запрос для отправки пользовательских данных на сервер и получение ответа от сервера.

Код в main.js получился такой:

jQuery(document).ready(function($) { // Добавляем маску для поля с номера телефона $(‘#phone’).mask(‘+7 (999) 999-99-99’); // Проверяет отмечен ли чекбокс согласия // с обработкой персональных данных $(‘#check’).on(‘click’, function() { if ($(«#check»).prop(«checked»)) { $(‘#button’).attr(‘disabled’, false); } else { $(‘#button’).attr(‘disabled’, true); } }); // Отправляет данные из формы на сервер и получает ответ $(‘#contactForm’).on(‘submit’, function(event) { event.preventDefault(); var form = $(‘#contactForm’), button = $(‘#button’), answer = $(‘#answer’), loader = $(‘#loader’); $.ajax({ url: ‘handler.php’, type: ‘POST’, data: form.serialize(), beforeSend: function() { answer.empty(); button.attr(‘disabled’, true).css(‘margin-bottom’, ’20px’); loader.fadeIn(); }, success: function(result) { loader.fadeOut(300, function() { answer.text(result); }); form.find(‘.field’).val(”); button.attr(‘disabled’, false); }, error: function() { loader.fadeOut(300, function() { answer.text(‘Произошла ошибка! Попробуйте позже.’); }); button.attr(‘disabled’, false); } }); }); });

На этом клиентская часть нашей формы завершена, переходим к серверной части.

Отправка почты на E-mail администратора

Обратная связь для сайта — Интернет работа

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

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

Формы обратной связи на сайт — что выбрать

Форма для связи — такая вещь, которая всегда должна быть под рукой. Я имею ввиду какой-то свой проверенный скрипт, который вы изучили вдоль и поперек, а его встраивание в оформление сайта занимает 5 минут, настройка — ну пусть еще 5.

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

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

Допустим, сегодня я делаю блог на Ворпдрессе (только по этой инструкции), завтра на Джумле, послезавтра на Друпале, в выходные делаю интернет-магазин на Опенкарте, затем верстаю лендинг страницу на чистом HTML5 + CSS3… И во всех проектах мне нужна эта форма, будь она неладна.

Вот скажите мне — это же сколько времени нужно потратить, чтобы к каждому отдельному сайту подобрать скрипт или плагин, удовлетворяющий требованиям? Ну ладно, допустим ты блоггер, работаешь с одним Ворпдрессом и по умолчанию в твоей сборке WordPress есть какой-нибудь плагин wp-contact-form-7.

Остальным-то что делать?

Поэтому я и предлагаю работать с кодом. Ваша персональная «карманная» форма обратной связи на языке PHP и HTML может быть супер гибкой, с множеством полей и AJAX, но она должна:

• Быть в наличии в одной из ваших бесконечных папок со скриптами.
• Работать всегда и везде.
• Не требовать танцев с бубном при встраивании на сайт.

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

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

Я же предлагаю сэкономить:

• Время.
• Деньги.
• Трудозатраты.

И поэтому мы будем использовать удобные, готовые универсальные скрипты, которые подойдут и динамическим сайтам на CMS, и статическим сайтам на HTML. Ведь в вопросе «как сделать милую и красивую форму обратной связи» нет «с нуля, разработать, написать, своими руками, самостоятельно». И правильно. А зачем?

Скачайте просто скрипт Simple Send Mail или другую его версию Simple Send Mail Order с сайта landman.ru.

Скачать скрипт формы (.zip, 169Кб)

Вот какие формы вы получите:

Обратите внимание, скрипты поставляются с встроенной каптчей. Второй скрипт (Simple Send Mail Order) имеет одно отличие — он одновременно отправляет два письма. Одно заказчику, другое — вам.

Важно

Как сделать одну из таких форм обратной связи на сайте? Качайте архив, закачивайте файлы из архива на сайт в каталог /sendmail, настраиваете конфигурационный файл config.php (прописываете свой email, другие настройки) и можно пользоваться — скрипт формы обратной связи готов к работе. Покажу как выглядит конфигурационный файл:

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

Вставка на сайт производится просто: — можете дать ссылку на /sendmail/index.php

— можете сразу вставить на страницу, при помощи кода

Пример кода:

Код можно найти на сайте, ссылка на который размещена выше.

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

Super (AJAX) Contact Form — русифицированная версия формы обратной связи

Скачать (.zip, 72.4Кб)

Работает эта штучка на чистом PHP + jQuery & AJAX — очень удобно для блога или небольшого интернет-магазина. Пример формы:

Как выглядит конфиг внутри («codeassetsxmlconfig.php»):

Конфиг для настройки полей («codeassetsxmlfields.php»):

Установка скрипта формы для связи SuperAJAX ContactForm ничем не отличается от инструкции по установке другого скрипта выше. Содержимое архива закачиваете на сервер и пользуетесь.

Преимущества этой формы над предыдущей: — более эстетично привлекательная — используется проверка полей, ошибки выводятся через AJAX — подробнейшая инструкция по установке и настройке внутри

— есть подсказки под полями

Например, посмотрите как в этой форме связи выводятся ошибки:

Выглядит неплохо! А вот что увидит пользователь, после успешной отправки сообщения:

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

Вы также можете посмотреть интересный видеоурок по данному скрипту:

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

Установка готовой бесплатной формы обратной связи на сайт

Итак, на одном сайтов установлена вот такая «кнопка»:

Если нажать на нее, вниз «выпадет» форма обратной связи:

На другом сайте установлена всплывающая (popup) форма обратной связи, выглядит она так:

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

Очень удобно. Вот код для работы формы как в первом случае: