Простая форма на Ajax для вашего сайта

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

Вот пример простой формы обратной связи, которую при желании и должном умении можно переделать под свой лад, форма также имеет в своем арсенале поле для отправки изображений до 10 МБ, далее следует инструкция по установке:

Подключаем библиотеку JQuery по ссылки ниже, или же свою:

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

Копируем скрипт в ваш файл .JS:

$(function() {
  document.getElementById('feedback-form').addEventListener('submit', function(evt){
    var http = new XMLHttpRequest(), f = this;
    var th = $(this);
    evt.preventDefault();
    http.open("POST", "/mail.php", true); // Обратите внимание, что параметр "mail.php" указывает путь к файлу mail.php, если путь будет некоректный, форма работать не будет, это будет полезно для тех кто работает с CMS, и размещает формы на разных страницах, а не только на главной
    http.onreadystatechange = function() {
      if (http.readyState == 4 && http.status == 200) {
        alert(http.responseText);
        if (http.responseText.indexOf(f.nameFF.value) == 0) { // очистить поля формы, если в ответе первым словом будет имя отправителя (nameFF)
          th.trigger("reset");
        }
      }
    }
    http.onerror = function() {
      alert('Извините, данные не были переданы');
    }
    http.send(new FormData(f));
  }, false);
});

Создаем в корне вашего сайта файл mail.php копируем в него код ниже:

<?php
if (isset ($_POST['contactFF'])) {
  $to = "coder7.ru@gmail.com";
  $from = "Coder7.ru";
  $subject = "Обратная связь | CODER7.RU";
  
  
  $message =  "\nИмя: "
              .$_POST['nameFF'].
              
              "\nПочта: "
              .$_POST['contactFF'].
              
              "\nПроект: "
              .$_POST['projectFF']
              ;
 
 
  $boundary = md5(date('r', time()));
  $filesize = '';
  $headers = "MIME-Version: 1.0\r\n";
  $headers .= "From: " . $from . "\r\n";
  $headers .= "Reply-To: " . $from . "\r\n";
  $headers .= "Content-Type: multipart/mixed; boundary=\"$boundary\"\r\n";
  $message="
Content-Type: multipart/mixed; boundary=\"$boundary\"
 
--$boundary
Content-Type: text/plain; charset=\"utf-8\"
Content-Transfer-Encoding: 7bit
 
$message";
     if(is_uploaded_file($_FILES['fileFF']['tmp_name'])) {
         $attachment = chunk_split(base64_encode(file_get_contents($_FILES['fileFF']['tmp_name'])));
         $filename = $_FILES['fileFF']['name'];
         $filetype = $_FILES['fileFF']['type'];
         $filesize = $_FILES['fileFF']['size'];
         $message.="
 
--$boundary
Content-Type: \"$filetype\"; name=\"$filename\"
Content-Transfer-Encoding: base64
Content-Disposition: attachment; filename=\"$filename\"
 
$attachment";
     }
   $message.="
--$boundary--";
 
  if ($filesize < 10000000) { // проверка на общий размер всех файлов. Многие почтовые сервисы не принимают вложения больше 10 МБ
    mail($to, $subject, $message, $headers);
    echo $_POST['nameFF'].', Ваше сообщение отправлено, спасибо!';
  } else {
    echo 'Извините, письмо не отправлено. Размер всех файлов превышает 10 МБ.';
  }
}
?>

HTML код формы:

<form id="feedback-form" enctype="multipart/form-data" method="post">
    <input id="nameFF" name="nameFF" type="text" placeholder="Имя*" required>
    
    <input id="contactFF" name="contactFF" type="email" type="text" placeholder="Email*" required>

    <textarea id="projectFF" name="projectFF" cols="20" rows="5" placeholder="Сообщение*" required></textarea>
    
    <input type="file" name="fileFF">
    
    <button type="submit" id="submitFF">Отправить</button>
</form>