• Форма обратной связи для сайта
    Владислав SEO-Специалист, Founder

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

  • 31.08.2015
  • 4 минут
  • 132
Содержание:

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

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

Чтобы установить данную форму связи на сайт необходимо создать два файла: один с php расширением и другой с javascript. В нашем случаи они будут называться mail.php и script.js.

zemla

Файл mail.php

В данном файле размещается код обработки формы. То есть мы передаем данные через html поля формы нашему файлу обработчику, который в свою очередь отправляет информацию с помощью команды mail()
на почту.

$method = $_SERVER['REQUEST_METHOD'];
 
//Script Foreach
$c = true;
if ( $method === 'POST' ) {
 
    $project_name = trim($_POST["project_name"]);
    $admin_email  = trim($_POST["admin_email"]);
    $form_subject = trim($_POST["form_subject"]);
 
    foreach ( $_POST as $key => $value ) {
        if ( $value != "" && $key != "project_name" && $key != "admin_email" && $key != "form_subject" ) {
            $message .= "
            " . ( ($c = !$c) ? '<tr>':'<tr style="background-color: #f8f8f8;">' ) . "
            <td style='padding: 10px; border: #e9e9e9 1px solid;'><b>$key</b></td>
            <td style='padding: 10px; border: #e9e9e9 1px solid;'>$value</td>
        </tr>
        ";
    }
}
} else if ( $method === 'GET' ) {
 
    $project_name = trim($_GET["project_name"]);
    $admin_email  = trim($_GET["admin_email"]);
    $form_subject = trim($_GET["form_subject"]);
 
    foreach ( $_GET as $key => $value ) {
        if ( $value != "" && $key != "project_name" && $key != "admin_email" && $key != "form_subject" ) {
            $message .= "
            " . ( ($c = !$c) ? '<tr>':'<tr style="background-color: #f8f8f8;">' ) . "
            <td style='padding: 10px; border: #e9e9e9 1px solid;'><b>$key</b></td>
            <td style='padding: 10px; border: #e9e9e9 1px solid;'>$value</td>
        </tr>
        ";
    }
}
}
 
$message = "<table style='width: 100%;'>$message</table>";
 
function adopt($text) {
    return '=?UTF-8?B?'.base64_encode($text).'?=';
}
 
$headers = "MIME-Version: 1.0" . PHP_EOL .
"Content-Type: text/html; charset=utf-8" . PHP_EOL .
'From: '.adopt($project_name).' <'.$admin_email.'>' . PHP_EOL .
'Reply-To: '.$admin_email.'' . PHP_EOL;
 
mail($admin_email, adopt($form_subject), $message, $headers );

Второй файл mail.php, в котором находится обработчик формы, должен находиться в той же папке, что и файл index.php.

Файл script.js

jQuery(document).ready(function() {
         
    jQuery("#form-1").submit(function() { 
        var th = jQuery(this);
        jQuery.ajax({
            type: "POST",
            url: "/mail.php",//путь к расположению файла на сервере
            data: th.serialize()
        }).done(function() {
            jQuery(th).find('.success').addClass('active').css('display', 'flex').hide().fadeIn();
            setTimeout(function() {
            jQuery(th).find('.success').removeClass('active').fadeOut();
                th.trigger("reset");
            }, 3000);
        });
        return false;
    });
     
});

Структура html формы и настройки

Как не удивительно, но основные настройки в представленном скрипте мы делаем именно в html разметке (обычно в других формах приходится возиться с php кодом).

<form id="form-1">//Для каждой формы пишем свой id который попадает в скрипт jQuery
   <div class="success"><span>Спасибо за заявку!</span></div>
       <input name="project_name" value="Вопрос со страницы услуги" type="hidden">
       <input name="admin_email" value="office@seok.com.ua" type="hidden">//Вставляем свой адрес электронной почты
       <input name="form_subject" value="Вопрос со страницы услуги" type="hidden"> 
   <div class="form-group">
      <input class="form-control" name="Имя" placeholder="Ваше имя..." required="" type="text"> </div>
   <div class="form-group">
      <input class="form-control" name="Телефон" placeholder="Ваш телефон..." required="" type="text">
   </div>
     <button class="cd-btn button">Отправить</button> 
</form>

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

Оценить
Ваш email адрес не будет опубликован
Спасибо
за заявку!
Данные успешно отправлены!
Отзыв отправлен Ваш комментарий обрабатывается модератором.