Форма обратной связи HTML5 + CSS3 + jQuery + php
Форма обратной связи для сайта на HTML5 + CSS3 + jQuery + php. Валидация и экранирование введенных данных, проверка правильности ввода полей формы обратной связи.

3 года назад
Форма обратной связи HTML5 + CSS3 + jQuery + php
В данной статье речь пойдет о динамической форме обратной связи, которая при изменении размера окна, будет становится адаптивной к просмотру. То есть форма обратной связи будет доступна для просмотра на всех видах устройств, на персональных компьютерах, ноутбуках, смартфонах и планшетах.
Форма обратной связи будет состоять из 3 полей ввода данных — имя, адрес электронной почты и текст письма. Все поля будут обязательны для заполнения, отправить пустое письмо будет нельзя. Поле ввода адреса электронной почты дополнительно будет проходить валидацию на правильность ввода. Данные будут представлены в html коде, стили оформления формы обратной связи будут прописаны в отдельном CSS файле. По принципу данного скрипта возможно создание по аналогии большего или меньшего количества полей ввода.
Преимущества использования данной формы заключаются в непрерывной работе сайта и динамической отправки данных из формы, без перезагрузки страницы. А также нужно отметить удобство просмотра на мобильных устройствах.
В файле send.php править следующие строки:
Форма обратной связи будет состоять из 3 полей ввода данных — имя, адрес электронной почты и текст письма. Все поля будут обязательны для заполнения, отправить пустое письмо будет нельзя. Поле ввода адреса электронной почты дополнительно будет проходить валидацию на правильность ввода. Данные будут представлены в html коде, стили оформления формы обратной связи будут прописаны в отдельном CSS файле. По принципу данного скрипта возможно создание по аналогии большего или меньшего количества полей ввода.
Преимущества использования данной формы заключаются в непрерывной работе сайта и динамической отправки данных из формы, без перезагрузки страницы. А также нужно отметить удобство просмотра на мобильных устройствах.
В файле send.php править следующие строки:
$to = "admin@site.ru";
$subject= "Message from site.ru";
$header="From: site.ru";;
content.htm
<div class="outer">
<div class="middle">
<div class="inner">
<div class="login-wr">
<h2>Написать письмо</h2>
<div class="form">
<form action="send.php" method="POST">
<input type="text" id="name" placeholder="Имя" required>
<input type="email" id="email" placeholder="E-mail" required>
<textarea id="message" required></textarea>
<p>* Все поля обязательны для заполнения</p>
<button type="submit" id="submit"> Отправить </button>
<img src="loader.gif" id="loader" alt="">
<div id="result"></div>
</form>
</div>
</div>
</div>
</div>
</div>
style.css
@import url('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');
html, body {
height : 100%;
padding: 0;
margin: 0;
}
body {
background: #d3dce1;
font-family: 'Roboto', sans-serif;
font-size: 14px;
}
.outer {
display: table;
width: 100%;
height: 100%;
text-align: center;
}
.middle {
display: table-cell;
vertical-align: middle;
}
.inner {
text-align: center;
width: auto;
padding: 0 15px;
}
.login-wr {
position: relative;
margin: 0 auto;
background: #fff;
max-width: 550px;
box-shadow: 3px 3px 24px #999;
padding: 15px 15px 15px 15px;
}
h2 {
text-align: left;
font-weight: 200;
font-size: 1.6em;
margin: 0 0 10px 0;
padding: 0 0 10px 0;
border-bottom: 1px solid #eeeeee;
color: #474747;
}
.form {
padding-top: 20px;
text-align: left;
}
input[type="text"],
input[type="email"] {
margin-bottom: 25px;
height: 40px;
outline: 0;
-moz-outline-style: none;
}
button {
height: 40px;
outline: 0;
-moz-outline-style: none;
}
input[type="text"] {
background: url("img/user.png") no-repeat left 10px center;
}
input[type="email"] {
background: url("img/email.png") no-repeat left 10px center;
}
textarea {
background: url("img/pencil.png") no-repeat left 10px top 10px;
}
textarea {
width: calc(100% - 55px);
height: 120px;
border: 1px solid #bbb;
padding: 10px 10px 10px 45px;
font-size: 14px;
}
input[type="text"],
input[type="email"] {
width: calc(100% - 45px);
max-width: 250px;
border: 1px solid #bbb;
padding: 0 0 0 45px;
font-size: 14px;
}
input[type="text"]:focus,
input[type="email"]:focus {
border: 1px solid #2196f3;
}
p {
padding-bottom: 10px;
}
button {
width: 100%;
max-width: 150px;
background: #e6ebee;
border:none;
border-bottom: 5px solid #d3dce1;
color: #333;
font-size: 14px;
font-weight: 200;
cursor: pointer;
transition: box-shadow .4s ease;
}
send_message.js
$(function() {
$("#loader").hide();
$("form").submit(function(e) {
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
var data = 'name=' + name + '&email=' + email + '&message=' + message;
if(data) {
$.ajax({
type: "POST",
url: "./send.php",
data: data,
beforeSend: function(html) {
$("#loader").show();
$("#submit").hide();
},
success: function(html){
$("#loader").hide();
$("#result").html(html);
}
});
}
return false;
});
});
send.php
<?php
if(isset($_SERVER['HTTP_X_REQUESTED_WITH']) && !empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
header('Content-Type: text/html; charset=UTF-8');
mb_internal_encoding('UTF-8');
mb_http_output('UTF-8');
mb_http_input('UTF-8');
mb_regex_encoding('UTF-8');
sleep(2);
if(isset($_POST['name']) && isset($_POST['email']) && isset($_POST['message'])) {
if(trim($_POST['name']) == '') {
$hasError = true;
} else {
$name = trim($_POST['name']);
}
if(trim($_POST['email']) == '') {
$hasError = true;
} else if (!eregi("^[A-Z0-9._%-]+@[A-Z0-9._%-]+\.[A-Z]{2,4}$", trim($_POST['email']))) {
$hasError = true;
echo "Ошибка, адрес электронной почты введен не правильно";
} else {
$email = trim($_POST['email']);
}
if(trim($_POST['message']) == '') {
$hasError = true;
} else {
if(function_exists('stripslashes')) {
$message = stripslashes(trim($_POST['message']));
} else {
$message = trim($_POST['message']);
}
}
if(!isset($hasError)) {
$to = "admin@site.ru";
$subject= "Message from site.ru";
$header="From: site.ru";
$header.="\nContent-type: text/plain; charset=\"utf-8\"";
$message = "BHTML \r\nEmail: $email \nИмя: $name \n\nТекс сообщения:\n$message";
//mail($to, $subject, $message, $header);
$emailSent = true;
echo "* Сообщение отправлено";
}
}else {
echo "* Ошибка, письмо не отправлено";
}
}
?>
4,8K
Комментарии
- Виктор2 года назадСкажите пожалуйста, что делаю не так. При вставке формы на сайт и нажатии на кнопку отправить открывается файл с PHPОтветить
- NeMo2 года назадЯ установил, все работает! nПосмотрите внимательно, может где-то что-то не прописали, код не установили..nbhtml.ru отдельное спасибо, рабочая, красивая форма!Ответить
- Сергей2 года назадВиктор, наверняка у вас не установлен PHPОтветить
- Татьяна1 год назадЕсли ввести в поле Email адрес в виде fdnfndfnfdnsghshsh то есть, без точки и ru, com и т.д, то после нажатия на кнопку Отправить появляется надпись Ошибка, адрес электронной почты введен не правильно, а кнопки Отправить уже нет. И как отправить исправленное?Ответить
- wefwef1 год назадТатьяна,Ответить
- Дмитрий1 год назадА я делаю формы через специализированный сервис - FormDesigner.ru. Отличный конструктор форм, рекомендую. Может кому-то еще пригодится.Ответить
- Александр1 год назадСпасибо автору за статью! Есть вопросnКак подключается sendmessage.js Где он вообще фигурирует в коде?nОтветить