Обратная связь для сайта – Красивая форма обратной связи для сайта без плагина!

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

Вот в кое-то веки занялся облегчением своего блога и решил избавиться от лишних плагинов, которые грузят его своим весом и не дают загружаться страницам быстро. И первым делом мой выбор пал на форму обратной связи, вернее на плагин, который ее выводил у меня на сайте “Contact Form 7“, а ему в нагрузку еще требовался второй плагин выводящий капчу “reCaptcha“.  Вот таким образом я решил избавиться сразу от двух, довольно весомых плагинов, используя форму обратной связи, которая не требует ни каких плагинов и легка в установке на сайт. Сейчас я вам о ней расскажу и конечно же дам скачать файлы для того, чтобы и Вы смогли себе создать аналогичную обратную связь для сайта …

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

Посмотреть и проверить работоспособность моей формы обратной связи для сайта Вы сможете на странице “Обратная Связь“. Напишите в моей форме для связи на сайте и я вам отвечу!

Теперь давайте перейдем к самому главному и создадим свою собственную, не зависящую ни от каких плагинов обратную связь для сайта …

Делаем обратную связь для сайта без плагинов!

Все, что нам для этого понадобится: мой блог Pribylwm.ru со статьей “Обратная связь для сайта“, текстовый редактор Notepad++ и конечно же ваше желание создать свою собственную форму для связи на сайте, чтобы облегчить его избавившись от не нужных и тяжелых плагинов!

Вот вам код HTML самой формы обратной связи для сайта, который Вы сможете вставить на свой сайт или блог в любое место, у меня это страница для контактов:

<form id="contact" action="ВАШ ДОМЕН/wp-content/themes/ВАША ТЕМА/mail.php" method="post">
<H3>Форма обратной связи</H3>
<div id="note"></div>
<div id="fields">
  <p><input type="text" name="name" id="author" placeholder="Имя" required> <label for="author">Как вас зовут</label></p>
  <p><input type="email" name="email" id="email" placeholder="E-mail" required> <label for="email">Электронная почта</label></p>
  <p><input type="text" name="sub" id="url" placeholder="Тема" required> <label for="url">Тема сообщения</label></p>
  <p><textarea name="message" cols="1" rows="10" id="comment" style="width:98%" placeholder="Введите сюда текст сообщения" required></textarea></p>
  <p><button type="submit" id="submit" class="go">Отправить сообщение</button></p>
</div>
</form>

Обратите внимание на некоторые важные вещи, которые вам нужно выполнить в этом коде:

1. Работайте с кодом только в текстовом редакторе Notepad++
2. Исправьте в первой строке кода путь до файла mail.php, о котором я вам расскажу немного позже

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

<?php
$post = (!empty($_POST)) ? true : false;
if($post) {
  $email = $_POST['email'];
  $name = $_POST['name'];
  $email = $_POST['email'];
  $sub = $_POST["sub"];
  $message = $_POST['message'];
  $error = '';
  if(!$name) {$error .= 'Укажите свое имя. ';}
  if(!$email) {$error .= 'Укажите электронную почту. ';}
  if(!$sub) {$error .= 'Укажите тему обращения. ';}
  if(!$message || strlen($message) < 1) {$error .= 'Введите сообщение. ';}
  if(!$error) {
    $address = "АДРЕС ВАШЕЙ Е-МАЙЛ ПОЧТЫ НА ХОСТИНГЕ! ";
    $mes = "Имя: ".$name."\n\nТема: " .$sub."\n\nСообщение: ".$message."\n\n";
    $send = mail ($address,$sub,$mes,"Content-type:text/plain; charset = UTF-8\r\nFrom:$email");
    if($send) {echo 'OK';}
  }
  else {echo '<div class="err">'.$error.'</div>';}
}
?>

Этот файл Вы должны залить на свой хостинг в корневую папку движка сайта! Но сначала проверьте исправили Вы его или нет!

В строке, где написан текст “АДРЕС ВАШЕЙ Е-МАЙЛ ПОЧТЫ НА ХОСТИНГЕ!“, вам нужно обязательно его исправить на свой Е-майл адрес, который у Вас на хостинге. Если у Вас нет почты на хостинге, то обязательно ее заведите. Это не сложно!

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

Вот этот скрипт:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Или можете добавить на WordPress в файл functions.php вот эту функцию:

function my_jquery() {
  wp_deregister_script( 'jquery' );
  wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
  wp_enqueue_script( 'jquery' );
}

Она заменяет скрипт и также подключает библиотеку jQuery на сайте WordPress.

Теперь подключаем на своем сайте скрипт, который будет с файлом mail.php совместно, отправляя ваши письма. Для этого нам нужно создать вот такой js файл contact.js и отправить его на ваш сайт в папку со скриптами вашей активной темы оформления, которая так и назвается js. Если ее нет у Вас на сайте, то создайте!

Вот этот скрипт:

jQuery(document).ready(function($) {
  $("#contact").submit(function() {
    var str = $(this).serialize();
    $.ajax({
      type: "POST",
      url: "ВАШ ДОМЕН/wp-content/themes/ВАША ТЕМА/mail.php",
      data: str,
      success: function(msg) {
        if(msg == 'OK') {
          result = '<div class="ok">Сообщение отправлено</div>';
          $("#fields").hide();
        }
        else {result = msg;}
        $('#note').html(result);
      }
    });
    return false;
  });
});

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

Вот код стилей формы обратной связи для сайта:

form#contact  {
  border:1px solid #e5e5e5;
  padding:10px;
  background:#e9ffd0;
  border-radius:5px;
}
#contact label {
  font-size: 14px;
}
#contact input:required:valid {
  box-shadow: 0 0 3px #BCEF89;
  border-color: #BCEF89!important;
  background: #fff url(images/valid.png) no-repeat 98% center;
}
#contact textarea:required:valid {
  box-shadow: 0 0 3px #BCEF89;
  border-color: #BCEF89!important;
}
#contact input:focus:invalid {
  box-shadow: 0 0 3px #FFDF97;
  border-color: #FFDF97!important;
  background: #fff url(images/invalid.png) no-repeat 98% center;
}
#contact textarea:focus:invalid {
  box-shadow: 0 0 3px #FFDF97;
  border-color: #FFDF97!important;
}
.err {
  border: 1px solid #ff8c00;
  padding: 10px;
  background: #FFDF97;
  text-align: left;
  border-radius: 3px;
}
.ok {
  border: 1px #BCEF89 solid;
  margin-bottom: 15px;
  padding: 10px;
  background: #f5f9fd;
  text-align: center;
  border-radius: 3px;
}
#author, #email, #url {
  width: 30%;
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #e5e5e5;
}
#comment {
  padding: 5px;
  border-radius: 5px;
  border: 1px solid #e5e5e5;
  overflow: auto;
}
#submit {
  font-weight: 400;
  background: #393;
  font-size: 15px;
  color: #fff;
  padding: 10px 50px;
  border: none;
  cursor: pointer;
}

Просто скопируйте их и отправьте в файл style.css вашей активной темы на сайте. Если затем хотите поменяете цвета и форму, но это только для продвинутых пользователей!

Вот теперь наша обратная связь для сайта полностью готова к работе. Тестируйте и наслаждайтесь ее работой!

На этом все!

Если вам понравился этот материал? Тогда кликните по соцкнопкам, подпишитесь на обновления блога и напишите свой комментарий ниже!

Спасибо всем!!!