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

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

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

Осуществляется это посредством выполнения следующих шагов.

В HTML файле (index.html) нужно:

• скопировать имеющийся фрагмент формы обратной связи и расположить его в нужном месте страницы;
• установить форме новый идентификатор, т.е. значение атрибута id (например, form-2);
• указать атрибуту action формы путь к php-сценарию, который будет обрабатывать её на стороне сервера (например, /feedback/process/process-2.php);
• установить капче (элементу ) в атрибуте src и data-src get-параметр; его значение будет являться ключом, с которым будет связан её код на сервере (например, /feedback/captcha/captcha.php?id=captcha-2);
• изменить у формы значения атрибутов id и for так, чтобы они были уникальными на странице;
• установить ссылке с помощью которой перезапускается форма значение атрибута data-reloadform (например, #feedback-form-2).

В JavaScript файле () необходимо добавить блок инициализации для второй формы:

Последнее действие – это выполнить создание копии файла process.php. В новом файле (например, process-2.php) необходимо изменить код, посредством которого эта форма должна будет обрабатываться на сервере.

Если в форме не изменяется количество полей, то достаточно будет изменить только фрагмент кода, в котором проверяется код капчи. А именно изменить ключ в суперглобальном массиве $_SESSION с captcha на тот, который мы установили (в данном случае на captcha-2).

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

Форма обратной связи в 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-код  кнопки отправки формы на сервер: .

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

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

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

<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-форма обратной связи. Теперь возникает вопрос, как проверить что форма заполнена перед отправкой?

Оформление внешнего вида с помощью CSS

В этом примере я приведу фрагмент своего CSS файла, который отвечает за внешний вид формы обратной связи:

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

— появляется в поле input при валидации формы; — появляется в поле input когда форма не заполнена или заполнена неверно.

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

Создаем файл, принимающий данные из HTML формы

Это будет файл с именем send.php

В файле на первом этапе нужно принять данные из пост массива. Для этого создаем две переменные:

Перед названиями переменных в php ставится знак $, в конце каждой строки ставиться точка с запятой. $_POST это массив в который передаются данный из формы. В форме html при этом указан метод отправки method=»post». Так, приняты две переменные из формы html. Для целей защиты своего сайта нужно провести эти переменные через несколько фильтров — функций php.

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

Третей функцией мы удалим пробелы с начала и конца строки, если таковые имеются:

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

Проверка данных, передаваемых от HTML формы в файл PHP

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

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

Отправка файлов

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

Тут есть два важных отличия от первого примера:

• Добавился новый атрибут , который всегда должен иметь значение. Если его не будет, то файл не отправится.
• Сам файл загружается при помощи поля с типом «file».

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

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

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

Перемещение загруженного файла

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

Код для перемещения файла в новую папку:

Функция выполняет два действия:

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

Что дальше

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

1. Например, сейчас, если не заполнить поле с темой или адресом, то будет ошибка и письмо не уйдёт. При этом пользователь не будет знать, что же именно он сделал не так. Можно организовать проверку на заполнение полей и выводить нужные сообщения, если что-то не заполнено.
2. Всегда можно улучшить безопасность и защитить скрипт от многократных запросов — чтобы никто не абьюзил сервис и не делал из нас спамеров.
3. А ещё при отправке мы переходим на страницу обработчика, а потом вообще на другой сайт. Чтобы сделать как у всех, чтобы форма отправлялась без перезагрузки страницы, можно использовать Ajax. Когда-нибудь доберёмся и до него. Подписывайтесь, чтобы не пропустить.

Как экспортировать AMP-письма в ваш ESP?

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

Если ваш ESP поддерживает AMP, но у нас почему-то не включен прямой экспорт AMP-писем, просто загрузите свой шаблон в виде файла AMP HTML и откройте его в своем ESP.

Если почтовик пользователя не поддерживает AMP, то он получит традиционное HTML-письмо. А те подписчики, чьи почтовики уже присоединились к этой технологии, увидят ваши письма во всей красе.

Обратите внимание, что элементы AMP — это новая функция Google, и не все возможные почтовые службы и клиенты поддерживают ее

Создание HTML макета

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

Для обозначения форм в html используется тег <form></form>, внутри которого заполняются необходимые параметры.

<form class="contact_form" action="contact-form.php" method="post">
	<p>
            <label for="name">Имя:</label>
            <input type="text"  name="name" placeholder="Введите ваше имя" required />
        </p>
        <p>
            <label for="email">Email:</label>
            <input type="email" name="email" placeholder="Введите электронный адрес" required />
            <span class="form_hint">Правильный формат "[email protected]"</span>
        </p>
        <p>
            <label for="tel">Телефон:</label>
            <input type="tel" name="tel" placeholder="Введите номер телефона" required />
            <span class="form_hint">Правильный формат "+7-123-4567890"</span>
        </p>
        <p>
            <label for="website">Сайт:</label>
            <input type="url" name="website" placeholder="Введите адрес вашего сайта" pattern="(http|https)://.+"/>
            <span class="form_hint">Правильный формат "http://someaddress.com"</span>
        </p>
        <p>
            <label for="message">Текст сообщения:</label>
            <textarea name="message" cols="40" rows="6" required ></textarea>
        </p>
	    <input name="bezspama" type="text" style="display:none" value="" />
        <p>
            <button class="submit" type="submit">Отправить сообщение</button>
        </p>
</form>

Начнем с первой строки.

class=”contact_form” – указываем класс, для того, чтобы в будущем задать CSS стили.

action=”contact-form.php” – указываем название файла со скриптом, который будет обрабатывать данные формы и осуществлять отправку сообщения. Если файл лежит в той же папке, что и страница с формой, то достаточно указать только название файла, если в другой, то нужно будет указать и путь к файлу.

Дальше идут 4 блока <p>, отвечающих за вывод полей для ввода данных, по названиям понятно, какой за что отвечает. Сами поля выводятся с помощью тегов <input>, внутри которого задаются следующие характеристики:

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

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

Required – этот параметр указывает на то, что поле обязательно для заполнения. Вы можете самостоятельно решить, какие элементы обязательны, а какие нет.

pattern=”(http|https)://.+” – эта конструкция служит для проверки корректности поля веб сайт, указывает на то, что адрес обязательно должен содержать http://текст или https://текст, в противном случае будет ошибка.

Для некоторых полей задана всплывающая подсказка, которая появляется при выборе элемента. Ее задет <span class=”form_hint”>, где form_hint является классом элемента (его свойства прописываются в CSS). Текст во всплывающей подсказке для каждого поля контактной формы можно задать любой. Если такая фишка вам не нужна – просто удалите весь тег <span></span>.

Поля для ввода самого сообщения размечается тегом <textarea>, в котором cols задает количество символов поля в ширину, а rows число строк.

Защита от спама – невидимое поле с именем name=bezspama. У него стоит стиль display:none – это значит поле невидимо людям, но боты его будут заполнять на автомате.

И завершающий элемент любой формы – кнопка отправки сообщения, она задается тегом <button> </button>, имеющим свой класс для настройки внешнего вида и тип “submit”.

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

Отправляем письмо

Составим и отправим письмо на электронную почту администратора сайта (или кому хотите). Для отправки и компоновки письма будем использовать pear library (инструкцию по установке смотрите ниже). Pear классы  и  используются для отправки электронной почты с прикрепленными файлами.

Для начала мы должны подключить файлы pear library для этих классов:

PHP

Ниже приведен код компоновки и отправки письма:

PHP

Класс  поможет в создании MIME послания. В приведенном выше коде мы создали объект , обновили тело письма () и добавили прикрепленный файл ().

Прежде чем использовать классы PEAR необходимо установить PEAR на вашем сервере. Вот быстрый способ установить PEAR:Скачайте инсталлятор PEARhttp://pear.php.net/go-pearСохраните файл как ««. Загрузите этот файл на ваш сервер в любой каталог. Затем пропишите путь к файлу в вашем браузере:http://www.yourdomain.com/pear-installer.phpПоявится веб-интерфейс для установки PEAR на вашем сайте. Следуйте инструкции по установке. После установки Pear, найдите и установите пакеты «» и ««.

Форма отправки сообщения PHP:

Форма отправки сообщения необходимо для ввода пользователем самого сообщения и адреса получателя. В форме требуется указать обработчик и метод передачи.

Форма ввода сообщения:

<form action="send_mess.php" method="post" enctype="multipart/form-data">
        Адресат: <br />
        <select name="to">
                <option value="1">Алексей
                <option value="2">Виталий
                <option value="3">Владимир
                <option value="4">Сергей
        </select>
        Текст сообщения: <br /><textarea name="message"></textarea><br />
        <input type="submit"  value="Отправить" />
</form>

Обработчик отправки сообщения:

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

/**
 * Принимаем постовые данные. Очистим сообщение от html тэгов
 * и приведем id получателя к типу integer
 */
$message= htmlspecialchars($_POST);
$to=(int)$_POST;

/**
 * Я использую библиотеку PDO
 */
$db_user='db_username';
$db_name='db_name';
$db_pass='db_userpassword';

$db  =  new  PDO('mysql:dbname='.$db_name.'; host=localhost',$db_user,$db_pass);
$db->exec("SET CHARACTER SET utf8");

$sql="insert into messages (u_from,u_to,message,flag) values
    (:u_from,:u_to,:message,:flag)";
$sth=$db->prepare($sql);
$sth->bindValue(':u_from', 1);// 1 - ID отправителя
$sth->bindValue(':u_to', $to);
$sth->bindValue(':message', $message);
$sth->bindValue(':flag', 0);
$sth->execute();
$error=$sth->errorInfo();
/**
 * Проверка результата запроса
 */
if($error==0){
    echo 'Сообщение успешно отправлено';
}else{
    echo 'Ошибка отправки сообщения';
}

В нашем случае сообщение отправляется от пользователя с ID=1, в вашем же случае это может быть адрес, взятый из массивов $_SESSION либо $_COOKIE. Давайте напишем скрипт, который будет выводить все личные сообщения, отправленные посредством PHP определенному пользователю. Опять же, ID берите из уже обговоренных массивов $_SESSION либо $_COOKIE.

/**
 * Номер пользователя,для которого отображать сообщения
 */
$u_id=1;

$db_user='db_username';
$db_name='db_name';
$db_pass='db_userpassword';

$db  =  new  PDO('mysql:dbname='.$db_name.'; host=localhost',$db_user,$db_pass);
$db->exec("SET CHARACTER SET utf8");

/**
 * Достаем сообщения
 */
$sql="select * from messages where u_to=? order by id desc";
$sth=$db->prepare($sql);
$sth->bindParam(1,$u_id,PDO::PARAM_INT);
$sth->execute();
$res=$sth->fetchAll(PDO::FETCH_ASSOC);
foreach ($res as $row){
    echo 'Сообщение №'.$row.'  <a href="read_mess.php?id='.$row.'">Открыть</a><br />';
}

Также Вы можете создать end-points для обработки данных вместо описанного ранее Сервиса Данных

*End-point» — это место назначения на сервере, куда отправляются запросы для дальнейшей обработки, и оно также предназначено для обмена данными. Конечная точка часто представлена ссылкой.

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

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

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

Теперь, давайте, протестируем AMP письма вместе со Stripo

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

Если это ваш личный аккаунт, сделайте следующее:

• зайдите в панель настроек Gmail и нажмите иконку «Настройки»;

• в выпадающем меню выберите раздел «Настройки»;

в новом окне в разделе «Общие» найдите «Динамический контент» и откройте «Настройки разработчика»;

и нажмите «Сохранить».

Если же это ваш корпоративный аккаунт Workspace (бывший G-Suite), вам нужно:

Попросить вашего менеджера включить для вас «Динамические письма». И тогда вам останется только добавить наш адрес, чтобы получать от Stripo тестовые AMP-письма.

Обратите внимание: все изменения вступают в силу в течение 24 часов

Помещаем HTML и PHP код отправки формы в один файл

Для реализации такой работы нужно поместить HTML код формы в файл send.php и добавить условие, которое будет проверять наличие переменных в массиве POST (этот массив передается из формы). То есть, если переменные в массиве не существуют, то нужно показать пользователю форму. Иначе нужно принять данные из массива и отправить их адресату.

Давайте посмотрим как изменить PHP код в файле send.php:

Существование переменной в POST массиве мы проверяем PHP функцией isset(). Восклицательный знак перед этой функцией в условии означает отрицание. То есть, если переменной не существует, то нужно показать нашу форму. Если бы я не поставил восклицательный знак, то условие дословно означало бы — «если существует, то показать форму». А это неправильно в нашем случае. Естественно, что вы можете переименовать его в index.php. Если будуту переименовывать файл, то не забудьте переименовать название файла и в строке <form action=»send.php» method=»post»>. Форма должна ссылаться на эту же страницу, например index.php. В код я добавил заголовок страницы.

PHP код формы (send.php):

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40

<?php if($_SERVER’REQUEST_METHOD’==’POST’){ $to=»[email protected]»;// Куда идет письмо $from=»[email protected]»;// От кого идет письмо $name=$_POST’name-at’; $email=$_POST’email-at’; $message=$_POST’message-at’; $subject=$_POST’subject-at’; $return_arr=array(); // Еще раз проверим заполненные поля формы. // Эту проверку можно удалить или удалить проверку на JS if($name==»»||$email==»»||$message==»»||$subject==»»){ $return_arr»frm_check»=’error’; $return_arr»msg»=»Пожалуйста, заполните все поля!»; } // Проверка на плохие слова. Если не мучают хулиганы, можно ее удалить. $badwords=array(‘предложение’,’купить’,’раскрутка’); $banstring=($message!=str_ireplace($badwords,»XX»,$message))?truefalse;if($banstring){ $return_arr»frm_check»=’error’; $return_arr»msg»=»Есть запрещенные слова»; } if($return_arr»frm_check»!=’error’){ $subject=»From my-site.ru: $subject»; $message=»Сообщение от «.$name.»\n Контакт: «.$email.»\n         Сообщение:\n».$message; $headers=»Content-Type: text/plain; charset=utf-8\r\n»; $headers.=»From: $from\r\n»; $headers.=»Reply-To: $from\r\n»; if(!mail($to,$subject,$message,$headers)){ $return_arr»frm_check»=’error’; $return_arr»msg»=»Сообщение не отправлено, ошибка почтового сервера!»; } } echojson_encode($return_arr); } ?>

Немного о коде:

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

Настройка формы

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

1. Открываем файл jquery.contactable.js и находим там следующий код:

   var defaults = { url 'http://site.ru/your/path/contactable/mail.php', name 'Ваше имя', email 'Ваш E-mail', message 'Сообщение', subject 'Feedback from MySite', page location.href, submit 'Отправить письмо', recievedMsg 'Благодарю вас за письмо', notRecievedMsg 'Извините, но при отправке письма произошла ошибка, попробуйте позже', disclaimer 'Пожалуйста, не стесняйтесь отправлять сообщения. Я буду очень признателен за все отзывы и с радостью отвечу на все ваши вопросы!', hideOnSubmit true   };

   Как минимум нам надо изменить для переменной url путь к директории contactable/ на вашем сервере. Эта процедура аналогична четвертому пункту установки. Остальные переменные можете изменять по своему усмотрению.

2. Открываем файл mail.php и находим там следующий код:

   $contactMessage = "Имя отправителя: $name <$emailAddr>   $comment   Письмо отправлено со страницы: $page IP отправителя: $_SERVER";   //send the email mail('[email protected]', $subject, $contactMessage, $headers);

   Здесь вам необходимо прописать свой контактный e-mail, на который будут сыпаться письма. То есть заменяем [email protected] на свой ящик.Переменная $contactMessage содержит шаблон письма, которое вы будет получать. По умолчанию в шаблоне присутствуют имя и ящик отправителя, само сообщение, страница с которой было отправлено письмо (мне показалось, что это интересная информация для анализа) и IP адрес. Все это можете отредактировать как вам захочется.

3. По желанию можете изменять внешний вид самой формы, ее цвета и т.д., все css-стили хранятся в файле contactable.css
4. На этом настройка завершена.

Всякие дополнительные фишки

1. Если вы хотите, чтобы после отправки сообщения показывалось не только «Спасибо за письмо», но и происходило перемещение пользователя на заданную страницу, необходимо проделать следующее: Открываем файл jquery.contactable.js и находим:
   

   $(this_id_prefix+'#callback').show().append(options.recievedMsg);

   и НИЖЕ добавляем:

   document.location.href="http://alaev.info";

   где нужно вместо http://alaev.info прописать адрес вашей страницы, куда вы хотите переместить пользователя.

Что еще стоит сказать про этот скрипт?

• Форма обратной связи с капчей уже не рулит, потому что данный скрипт работает только при включенном javascript, а у ботов он выключен, соответственно пользователям никакую капчу вводить не придется, а у вас не будет спама.
• После установки у вас может возникнуть проблема с кодировкой, поэтому проследите, что вы скачали подходящий архив (я специально подготовил две версии для скачивания). Сохраняйте файлы после редактирования в правильной кодировке (в большинстве случаев принудительно указывать кодировку не придется, но мало ли).
• На вопрос «А как сделать чтобы это было справа, а не слева?» отвечаю сразу — исходники открыты, колупайте на здоровье!
• Да, эта форма обратной связи не поддерживает аттачи. Но я считаю, что этого и не надо.
• А как сделать, чтобы после отправки сообщения форма не исчезала и можно было отправить еще одно сообщение без перезагрузки страницы? Найдите строку и замените на
• Эта форма не работает на локальном сервере, только на сайтах в сети.
• Пока все, но я буду добавлять сюда интересные вопросы из ваших комментариев, чтобы другие их больше не задавали

Вот и все, надеюсь, для вашего сайта эта форма пригодится, пользуйтесь на здоровье!

Делаем файл отправки почты send.php.

Форма с action=send.php и методом method=post будет обращаться к файлу, который мы сейчас сделаем.

Вначале пишем все постовые данные, которые принимаем это

1. $name=$_POST
2. $phone=$_POST
3. $what=$_POST
4. $question=$_POST

Затем формируем сообщение с темой письма $subject=Заявка с сайта потолок и тело сообщения $message с указание имени, телефона, которые функцией htmlspecialchars () символы преобразуются в html.

Затем при помощи формата преобразования charset=utf-8 передаем текст.

Функция mail отправляет почту.

Последняя функция после отправки header () вызывает окно спасибо за заявку.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<?php $name=$_POST’name’; $phone=$_POST’phone’; $what=$_POST’what’; $question=$_POST’question’; $to=»[email protected]»; $subject=»Заявка с сайта потолок»; $message=»Письмо из формы <br />Пользователь хочет:» .htmlspecialchars($what).»<br /> Имя: «.htmlspecialchars($name).»<br /> Телефон: «.htmlspecialchars($phone).»<br /> Вопрос: «.htmlspecialchars($question); $headers=»From: site.ru <[email protected]>\r\nContent-type: text/html; charset=utf-8 \r\n»; mail($to,$subject,$message,$headers); header(‘Location: thank.html’); exit(); ?>

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

После отправки почты в папке tmp у локального сервера denwer появится новая папка sendmail, в ней будут лежать все отправленные письма их посмотреть можно в outlook почте.

Также можно проверить отправку писем выгрузив форму на хостинг.