Уникальная форма обратной связи с ajax на php

23.03.2017

Самый уникальный скрипт формы обратной связи, из всех, что я встречал, нашел на этой сайте http://webdesign-master.ru/blog/tools/578.html и использую уже очень давно.

Выложу здесь коды, чтобы было проще копировать, но все исходники есть на GitHub https://github.com/agragregra/uniMail.

В чем уникальность этого скрипта – в том, что у вас может быть любая форма с любым количеством различных полей, и не нужно под каждое поле создавать вывод данных в письме, скрипт просто проходит по всем полям и выводит все данные из них. Например, при добавлении нового поля в файле html, нет необходимости добавлять еще какие-то параметры в mail.php. И это очень круто и просто. То есть форма будет работать уже при минимальных правках из коробки.

Структура такая:

index.html

<form>

  <!-- Hidden Required Fields -->
  <input type="hidden" name="project_name" value="Site Name">
  <input type="hidden" name="admin_email" value="admin@mail.com">
  <input type="hidden" name="form_subject" value="Form Subject">
  <!-- END Hidden Required Fields -->

  <input type="text" name="Name" placeholder="Your name..." required><br>
  <input type="text" name="E-mail" placeholder="Your E-mail..." required><br>
  <input type="text" name="Phone" placeholder="Your phone..."><br>
  <button>Send</button>

</form>

В скрытые поля вносим данные для отправки письма – Имя отправителя, имя отправителя (он же и получатель), тема письма.

script.js

$(document).ready(function() {

  //E-mail Ajax Send
  $("form").submit(function() { //Change
    var th = $(this);
    $.ajax({
      type: "POST",
      url: "mail.php", //Change
      data: th.serialize()
    }).done(function() {
      alert("Thank you!");
      setTimeout(function() {
        // Done Functions
        th.trigger("reset");
      }, 1000);
    });
    return false;
  });

});

Перед подключением скрипта обязательно подключаем jquery, если он еще не подключен:

<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="script.js"></script>

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

mail.php

<?php

$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 – основной, он собирает все данные из полей формы и отправляет на почту.

Видео

 

 

Рекомендую к прочтению:

Комментарии (25) к “Уникальная форма обратной связи с ajax на php”

  • Владимир

    Спасибо, очень удобно! Явно человек с понятием о масштабируемых системах писал) Супер!

    Ответить
  • WahaWaher

    Кому интересно. Универсальный плаг обратной связи https://github.com/WahaWaher/sendmail-js
    Любые поля форм + файлы, авто оформление в таблицу и отправка на почту. jq php phpmailer ajax

    Ответить
  • Дари

    Как сделать чтобы сообщение отправлялось мне на почту после паузы 5 минут?

    Ответить
  • Алексей

    Здравствуйте, подскажите пожалуйста почему она не отправляет на mail.ru на яндекс отправляет на ура а на mail.ru не приходят

    Ответить
    • Denis Creative

      Если сервер сайта находится в Украине, то на yandex.ru и mail.ru почта не будет отправляться.

      Проверьте спам, и желательно, что бы почта отправителя была не от почтового сервиса, а от почтового домена, например, admin@site.com, тогда проблем не должно быть.

      Ответить
  • Лариса

    Здравствуйте! Интересно.
    А как прикрутить приложения … прикрепленные файлы?

    Ответить
  • Николай

    Главное в таких формах $_POST и $_GET фильтровать, а то взломают, у меня так код вредоносный в php файл вписали и спам рассылали. После этого плюнус и на stepFORM форму собрал, как-нибудь нужно еще попытаться свою форму сделать))

    Ответить
  • Алексей

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

    Ответить
  • Сергей

    Да, крутая дыра для рассылки)
    Замените всё, начиная от строки
    } else if ( $method === 'GET' ) {
    ДО строки
    $message = "$message";
    на строку
    }
    Иначе с вашего хостинга начнут рассылать спам через этот скрипт

    Ответить
  • Drakonoved

    See alternative variant with using Java+Spring and AngularJS+Material: https://drakonoved.org/blog/2020/04/30/simple-feedback-form.html

    Ответить
  • Sky

    Здравствуйте, подскажите пожалуйста, как убрать e-mail (куда отправлять) из формы на странице, в php скрипт?

    Ответить
  • на почту приходит не таблица а открытый код

    на почту приходит не таблица а открытый код

    Ответить
    • Denis Creative

      Значит что-то неправильно сделали, попробуйте не форматировать файл mail.php – только поменять свои данные в нем.

      Ответить
      • SERGEY

        ПЕРЕПРОБОВАЛ ВСЕ , НЕ ПОЛУЧАЕТСЯ .ПРОБЛЕМА НЕ РЕШАЕТСЯ )

        Ответить
        • Denis Creative

          ну хотите, скиньте мне доступы для фтп на почту mail [at] denis-creative.com и скажите адрес страницы, для которой выделена директория фтп – я попробую тестовую форму сделать.

          Ответить
        • Denis Creative

          у меня на нескольких сайтах данная форма до сих пор стоит, всё работает

          Ответить
        • Simon

          Замените :

          $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;

          на:

          $headers = "MIME-Version: 1.0" . "\r\n";
          $headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";
          $headers .= 'From: '.adopt($project_name).' <'.$admin_email.'>' . "\r\n";
          $headers .= 'Reply-To: '.$admin_email.'' . "\r\n";
          Ответить
  • nikita

    для php 8.1 какие изменения?

    Ответить
  • саша

    Помогите мне прошу вас, таблица как у вас на выходе не получаться почему я не понимаю

    Ответить

Оставить комментарий