Сайты / Разработка / 

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

Во-первых, HTML-форма. Самая простая, изящная форма: Имя, Телефон, Сообщение и ничего лишнего.

<form id="contact-form" method="post" action="mail.php">
    <div class="clint__comment__form">
        <div class="single__cl__form">
            <input name="name" id="name" type="text" placeholder="Ваше имя">
            <input name="tel" id="tel" type="text" placeholder="Телефон">
        </div>
        <div class="single__cl__message">
            <textarea name="message" id="message" placeholder="Сообщение"></textarea>
        </div>
        <div class="clint__submit__btn">
            <button class="submit htc__btn" type="submit">ОТПРАВИТЬ</button>
        </div>
    </div>
</form>

Во-вторых, CSS стили, базовый вид, без излишеств 

.single__cl__form {
    display: flex;
    margin-bottom: 20px;
    margin-left: -15px;
    margin-right: -15px;
}
.single__cl__form input {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #e1e1e1;
    height: 40px;
    line-height: 40px;
    margin: 0 15px;
    padding: 0 20px;
    width: 50%;
    color: #606060;
}
.single__cl__message textarea {
    background: #fff none repeat scroll 0 0;
    border: 1px solid #e1e1e1;
    margin-bottom: 22px;
    min-height: 155px;
    padding-left: 20px;
    padding-top: 12px;
}
textarea {
    resize: none;
    background: #fcc236;
    border: 1px solid #fcc236;
    padding: 10px;
    width: 100%;
    font-size: 14px;
}
.htc__btn {
    background: #fcc236 none repeat scroll 0 0;
    color: #fff;
    display: inline-block;
    /* font-family: Raleway; */
    font-size: 18px;
    font-weight: 700;
    height: 45px;
    line-height: 45px;
    padding: 0 45px;
    transition: 0.5s;
    border: 1px solid #fcc236;
}

Во-третьих, нужен PHP-обработчик, указывается в аттрибуте формы action, как правило кидается в корень сайта

<?php 

    // Only process POST reqeusts.
    if ($_SERVER["REQUEST_METHOD"] == "POST") {
        $charset = "utf-8";
        // Get the form fields and remove whitespace.
        $name = strip_tags(trim($_POST["name"]));
        $name = str_replace(array("\r","\n"),array(" "," "),$name);
        $tel = trim($_POST["tel"]);
        $message = trim($_POST["message"]);

        // Check that data was sent to the mailer.
        if ( empty($name) OR empty($tel) ) {
            // Set a 400 (bad request) response code and exit.
            http_response_code(400);
            echo "Пожалуйста, заполните необходимые поля.";
            exit;
        }

        // Set the recipient email address.
        $recipient = "********";

        // Set the email subject.
        $subject = "Сообщение с сайта ВашСайт";

        // Build the email content.
        $email_content = "Имя: <b>$name</b><br>";
        $email_content .= "Телефон: <b>$tel</b><br>";
        $email_content .= "<br>Сообщение: <br>$message<br>";

        // Build the email headers.
        $email_headers = "Content-type: text/html; charset=$charset\r\n";
        $email_headers .= "From: *******@example.com <********@example.com>";  // можно указать почту домена, если есть
        
        // Send the email.
        if (mail($recipient, $subject, $email_content, $email_headers)) {
            // Set a 200 (okay) response code.
            http_response_code(200);
            echo "Ваше сообщение отправлено.";
        } else {
            // Set a 500 (internal server error) response code.
            http_response_code(500);
            echo "Ошибка. Мы не смогли отправить Ваше сообщение.";
        }

    } else {
        // Not a POST request, set a 403 (forbidden) response code.
        http_response_code(403);
        echo "Ошибка сервера. Попробуйте ещё раз.";
    }

?>

И в завершение, подключаем jQuery и добавляем обработку ajax'ом

$(function() {

  // Get the form.
  var form = $('#contact-form');

  // Get the messages div.
  var formMessages = $('.form-messege');

  // Set up an event listener for the contact form.
  $(form).submit(function(e) {
    // Stop the browser from submitting the form.
    e.preventDefault();

    // Serialize the form data.
    var formData = $(form).serialize();

    // Submit the form using AJAX.
    $.ajax({
      type: 'POST',
      url: $(form).attr('action'),
      dаta: formData
    })
    .done(function(response) {
      // Make sure that the formMessages div has the 'success' class.
      $(formMessages).removeClass('error');
      $(formMessages).addClass('success');

      // Set the message text.
      $(formMessages).text(response);

      // Clear the form.
      $('#contact-form input,#contact-form textarea').val('');
    })
    .fail(function(data) {
      // Make sure that the formMessages div has the 'error' class.
      $(formMessages).removeClass('success');
      $(formMessages).addClass('error');

      // Set the message text.
      if (data.responseText !== '') {
        $(formMessages).text(data.responseText);
      } else {
        $(formMessages).text('Ошибка! Ваше сообщение не отправлено.');
      }
    });
  });

});

В целом всё) Проверяйте, форма должна отсылать email'ы.
--
Пара оговорок:
-- Кодировка UTF-8 в обработчике нужна, чтобы приходили письма с русским языком, а не кракозябры.
-- Часто бывает, что через форму сыпется всякий спам, дабы избежать такого, делаю простую доработку. В HTML добавляю скрытое поле с классом и именем check, чтобы точно не вылезло - скрываю его в скрытом div)))

<div style="display: none;"><input id="check" name="check" type="hidden" value="" /></div>

В кнопку отправки формы добавляю действие, которое добавит в value скрытого поля какие-нибудь_символы

onclick="document.getElementById('check').value = 'какие-нибудь_символы';"

В PHP-обработчик добавляю условие, которое выдаёт ошибку 400

$_POST['checkfield'] != 'какие-нибудь_символы'

Решение довольно примитивное, но поскольку никто из умных ботов не отправляет фотку нажатием кнопки мыши, оно работает)) 

UPD: Больше не работает :( Как подключить капчу от гугл читайте тутс.