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

Часто не могу найти качественно сделанную форму обратной связи, чтобы вставить на сайт. Где-то приходится менять параметры самой формы, где-то переделывать php-обработчик и js-скрипт.
Собрал собрал несколько симпатичных форм из интернета, чтобы были под рукой.

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

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

У Madcatzz нашел изящное решение проблем с несколькими формами на странице.

В html-документе создаем несколько форм:

<form>
<input type="text" name="name">
<input type="text" name="phone">
<textarea name="mes" rows="6"></textarea>
<input type="submit" name="submit" value="ОТПРАВИТЬ">
</form>
 
<form>
<input type="text" name="name">
<input type="text" name="phone">
<textarea name="mes" rows="6"></textarea>
<input type="submit" name="submit" value="ОТПРАВИТЬ">
</form>

<form>
<input type="text" name="name">
<input type="text" name="phone">
<textarea name="mes" rows="6"></textarea>
<input type="submit" name="submit" value="ОТПРАВИТЬ">
</form>

К каждой форме добавим свой id. Можно их дополнить, прописать placeholder. В строчке с formData опишем место, откуда пришло сообщение.

<form id="form1">
<input type="text" class="name" name="name" placeholder="Ваше имя">
<input type="text" class="phone" name="phone" placeholder="Ваш телефон">
<textarea name="mes" class="mes" rows="6" placeholder="Текст сообщения"></textarea>
<input type="submit" name="submit" class="btn" value="ОТПРАВИТЬ">
<input type="hidden" name="formData" value="Заказ">
</form>

<form id="form2">
<input type="text" class="name" name="name" placeholder="Ваше имя">
<input type="text" class="phone" name="phone" placeholder="Ваш телефон">
<textarea name="mes" class="mes" rows="6" placeholder="Текст сообщения"></textarea>
<input type="submit" name="submit" class="btn" value="ОТПРАВИТЬ">
<input type="hidden" name="formData" value="Текст в тему письма">
</form>

<form id="form3">
<input type="text" class="name" name="name" placeholder="Ваше имя">
<input type="text" class="phone" name="phone" placeholder="Ваш телефон">
<textarea name="mes" class="mes" rows="6" placeholder="Текст сообщения"></textarea>
<input type="submit" name="submit" class="btn" value="ОТПРАВИТЬ">
<input type="hidden" name="formData" value="обратный звонок">
</form>

Теперь нужен JS-скрипт, который отправит данные из формы на сервер безе перезагрузки страницы.

<script type="text/javascript">
    $(document).ready(function () {
        $('form').submit(function () {
            var formID = $(this).attr('id'); // Получение ID формы
            var formNm = $('#' + formID);
            $.ajax({
                type: 'POST',
                url: 'mail.php', // Обработчик формы отправки
                data: formNm.serialize(),
                success: function (data) {
                    // Вывод текста результата отправки в текущей форме
                    $(formNm).html(data);
                }
            });
            return false;
        });
    });
</script>

В папку с сайтом нужно залить PHP-обработчик — скрипт, который принимает данные формы от браузера и отправляет на почту владельцу сайта.
Большинство форм для передачи данных используют метод POST, это позволяет «спрятать» данные формы и не загромождать URL в адресной строке.
Данный обработчик содержит проверку метода передачи данных.

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    if (isset($_POST['name'])) {$name = $_POST['name'];}
    if (isset($_POST['phone'])) {$phone = $_POST['phone'];}
    if (isset($_POST['email'])) {$email = $_POST['email'];}
    if (isset($_POST['formData'])) {$formData = $_POST['formData'];}
    $to = "info@site.ru"; /*Укажите ваш адрес электронной почты*/
    $headers = "Content-type: text/plain; charset = utf-8";
    $subject = "$formData";
    $message = "$formData\n\nИмя: $name \n\nТелефон: $phone \n\n$email";
    $send = mail ($to, $subject, $message, $headers);
    if ($send == 'true')
    {
    echo "<center>Спасибо за отправку вашего сообщения!</center>";
    }
    else 
    {
    echo "<center><b>Ошибка. Сообщение не отправлено!</b></center>";
    }
} else {
    http_response_code(403);
    echo "Попробуйте еще раз";
}
?>

Эту форму можно улучшить — добавить валидацию данных. Для этого можно использовать JavaScript или атрибуты HTML5.
Статья на Хабре про проверку вводимых данных с помощью средств HTML5

Форма обратной связи, оформленная с помощью CSS-фреймворка Bootstrap 3

Еще одну крутую форму нашел на сайте ItChief. Она также отправляет данные без перезагрузки страницы, а еще генерирует капчу для каждого ввода данных в форму, записывает все сообщения в файл message.txt на сервере и отправляет их на почту владельцу сайта.
C помощью этой формы сделал страничку для связи на своем сайте. Я даже оставил стандартное оформление, поменяю когда-нибудь потом.

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

Сделать свою форму

Простая форма связи cодержит три элемента: сама форма на HTML+CSS, JS-скрипт для отправки данных на сервер и PHP-обработчик, который формирует и отправляет email.

— Саму форму легко сверстать из базовых элементов HTML и CSS.
— В роли JS-скрипта можно использовать «Экспромтум» от Студии Лебедева.
Пример реализации этого скрипта с оформлением можно посмотреть на сайте Вениамина Векка.

— В предыдущей форме обработчиком входящих данных на сервере служил PHPMailer. Это популярная библиотека для отправки писем. Используются в некоторых популярных CMS — Wordpress, Drupal, Joomla. Настроить ее довольно легко, на Гитхабе есть все инструкции.
Исходник на GitHub

Добавить интересные эффекты к интерфейсу формы можно с помощью JS-библиотеки Foxholder.

Форма обратной связи и быстрой покупки без программирования

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

Для покупок в один клик есть аналогичная форма с легкой настройкой от того же автора — Buyme.

Поделиться
Отправить
Запинить
5 декабря   web-development
Популярное