Сайты / Разработка / Форма обратной связи
Во-первых, HTML-форма. Самая простая, изящная форма: Имя, Телефон, Сообщение и ничего лишнего.
Во-вторых, CSS стили, базовый вид, без излишеств
Во-третьих, нужен PHP-обработчик, указывается в аттрибуте формы action, как правило кидается в корень сайта
И в завершение, подключаем jQuery и добавляем обработку ajax'ом
В целом всё) Проверяйте, форма должна отсылать email'ы.
--
Пара оговорок:
-- Кодировка UTF-8 в обработчике нужна, чтобы приходили письма с русским языком, а не кракозябры.
-- Часто бывает, что через форму сыпется всякий спам, дабы избежать такого, делаю простую доработку. В HTML добавляю скрытое поле с классом и именем check, чтобы точно не вылезло - скрываю его в скрытом div)))
Решение довольно примитивное, но поскольку никто из умных ботов не отправляет фотку нажатием кнопки мыши, оно работает))
UPD: Больше не работает :( Как подключить капчу от гугл читайте тутс.
<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: Больше не работает :( Как подключить капчу от гугл читайте тутс.