Офис НП AMWAY в Ярославле
→ На карте Купить AMWAY в ЯрославлеПриобрести высококачественную продукцию Амвей в Ярославле, получить консультации по бизнесу, заказать продукцию или получить заказ:
●Адрес: улица Валентины Терешковой, дом 1 (Вход со двора)
●Телефон: +7 (920) 112-00-91
●Email: matyxho@mail.ru
●Сайт: https://www.amway.ru/user/lebedem
●Визитка: http://yar.meweb.ru
Иерархия статей
Статьи » HTML, CSS, JS » Ajax форма обратной связи
Сниппет
Простая форма обратной связи на Ajax + jQuery + PHP с проверкой на корректность заполненности полей.
Ajax форма обратной связи
Pisatel 
24 Октябрь 2014 15:49:54
8162 Прочтений
Понадобилось мне тут как-то сделать небольшую форму обратной связи на Ajax+JQuery+PHP. Порылся немного в сети, нашел подходящую, однако были в ней косяки, которые пришлось устранять. И получилось у меня следующее творение.
Сразу отмечу, что код валиден по стандарту HTML5.
Итак, для начала- разметка:
В общем, все просто: имя, обратный почтовый адрес, телефон (необязательно), сообщение, и ответ на несложный контрольный вопрос- типа, защита :)
Далее- код, который все это дело будет отправлять на сервер, наш файл site.js. Уточню, что для проверки формы и отправки сообщения я использую плагины JQuery Validation и JQuery Form соответственно. По ходу буду давать небольшие комментарии для удобства:
У нас должно получиться следующее: после отправки формы (без перезагрузки страницы) она перекрывается слоем с уведомлением о статусе: удачно/неудачно (с невозможностью вводить что-либо в поля), затем через 15 секунд форма очищается и снова готова к отправке. Все остальные более-менее важные комментарии даны в самом коде, поэтому переходим сразу к файлу process.php, который будет отвечать за отправку сообщения. Я сделал в нем примитивную проверку и преобразование стандартной функцией htmlspecialchars() спецсимволов.
Ну и последний штрих- стиль. Можете править его на свой вкус
Вот, в общем, у нас и получилась форма обратной связи на Ajax+JQuery+PHP. Пробуйте. Можно еще добавить метод валидации телефонов российских сотовых операторов, что-то типа такого:
Надеюсь, разберетесь, как этим пользоваться. Либо вот еще небольшая регулярка для номеров российских сотовых операторов:
Будут вопросы- спрашиваем. Удачи и всех благ.
P.S. На демке не балуйтесь, данные там все равно никуда не уходят
Сразу отмечу, что код валиден по стандарту HTML5.
Итак, для начала- разметка:
Код: HTML5
<!-- подключение скриптов -->
<head>
<script src='js/jquery.min.js'></script> <!-- не забываем подключить фреймворк jquery -->
<script src='js/jquery.form.min.js'></script>
<script src='js/jquery.validate.min.js'></script>
<script src='js/site.js'></script>
</head>
<!-- далее- сама форма -->
<div class='myform'>
<div class='span_of_text'>
<h4>Обратная связь</h4>
</div>
<div class='contact_form'>
<form id='contact' name='contact' method='post' novalidate='novalidate'>
<fieldset>
<label for='name'>Имя<span class='required'>*</span></label>
<input type='text' name='name' id='name' size='30' value='' required='' placeholder='Ваше имя' />
<label for='email'>Email<span class='required'>*</span></label>
<input type='text' name='email' id='email' size='30' value='' required='' placeholder='Ваш email'/>
<label for='phone'>Телефон</label>
<input type='text' name='phone' id='phone' size='30' value='' placeholder='Ваш телефон'/>
<label for='mymess'>Сообщение<span class='required'>*</span></label>
<textarea name='message' id='mymess' required='' placeholder='Ваше сообщение'></textarea>
<label for='answer'>Планета, на которой мы живем<span class='required'>*</span></label>
<input type='text' name='answer' id='answer' value='' required='' placeholder='Ответ на вопрос'/><br />
<input id='submit' type='submit' name='submit' value='Отправить'/>
<input id='reset' type='reset' name='reset' value='Очистить'/>
</fieldset>
</form>
<div id='success'>
<span>Сообщение успешно отправлено!<br /> Я свяжусь с Вами в самое ближайшее время.</span>
</div>
<div id='error'>
<span>Что-то пошло не так...<br /> Сообщение не отправлено.<br /> Попробуйте еще раз...</span>
</div>
</div>
</div>
В общем, все просто: имя, обратный почтовый адрес, телефон (необязательно), сообщение, и ответ на несложный контрольный вопрос- типа, защита :)
Далее- код, который все это дело будет отправлять на сервер, наш файл site.js. Уточню, что для проверки формы и отправки сообщения я использую плагины JQuery Validation и JQuery Form соответственно. По ходу буду давать небольшие комментарии для удобства:
Код: JQUERY
$(function() {
/* сначала добавляем для валидатора метод проверки ответа на вопрос */
jQuery.validator.addMethod('answercheck', function (value, element) {
return this.optional(element) || /земля$/i.test(value);
}, "введите корректный ответ");
/* ну а далее- сама валидация и отправка формы */
$('#contact').validate({
/* валидация: задаем правила */
rules: {
name: {
required: true,
minlength: 2
},
email: {
required: true,
email: true
},
phone: {
required: false,
minlength: 6,
maxlength: 12
},
message: {
required: true,
minlength: 5
},
answer: {
required: true,
answercheck: true
}
},
/* сообщения при некорректном вводе данных */
messages: {
name: {
required: "Не помните, как вас зовут?",
minlength: "Минимум 2 символа"
},
email: {
required: "Введите мыло",
email: "Введите корректный email-адрес"
},
phone: {
minlength: "Минимум 6 цифр",
maxlength: "Максимум 12 цифр"
},
message: {
required: "Нет смысла посылать пустое сообщение",
minlength: "Слишком короткое сообщение"
},
answer: {
required: "Неверный ответ"
}
},
/* ну и далее- отправка данных формы на сервер */
submitHandler: function(form) {
$.ajax({
/* вообще, нужно бы было вместо $.ajax использовать $(form).ajaxSubmit- это функция из плагина jquery.form */
/* однако у меня эта функция работала некроссбраузерно, поэтому я заменил ее на стандартную */
type:"POST",
data: $(form).serialize(),
url:"/process.php",
/* при удачном выполнении сработает следующая функция */
success: function() {
/* ставим на все инпуты атрибут disabled='disabled' */
$('#contact input').prop('disabled', true);
/* ставим на textarea атрибут disabled='disabled' */
$('#contact textarea').prop('disabled', true);
$('#contact').fadeTo("slow", 0.15, function() {
$(this).find('input').prop('disabled', true);
$(this).find('label').css('cursor','default');
/* выводим сообщение об успешной отправке */
$('#success').fadeIn();
});
/* далее- появление формы через 15 секунд, чтобы снова можно было отправить сообщение */
setTimeout(function(){
$('#success').fadeOut("slow", function(){
$('#contact').fadeIn("slow", function(){
$('#contact').find('label').css('cursor','pointer');
/* удаляем атрибут disabled у input и textarea */
$('#contact').find('input').removeProp('disabled');
$('#contact textarea').removeProp('disabled');
/* очищаем полностью форму */
$('#contact').clearForm();
}).css('opacity', '1.0');
});
}, 15000);
},
/* следующая функция сработает, если произойдет ошибка при отправке */
error: function() {
/* аналогично закрываем возможность для ввода данных */
$('#contact input').prop('disabled', true);
$('#contact textarea').prop('disabled', true);
$('#contact').fadeTo("slow", 0.15, function() {
/* появления сообщения об ошибке */
$('#error').fadeIn();
});
/* появление формы через 15 секунд, чтобы пользователь мог снова отправить сообщение */
setTimeout(function(){
$('#error').fadeOut("slow", function(){
$('#contact').fadeIn("slow", function(){
$('#contact').find('label').css('cursor','pointer');
/* удаляем атрибут disabled у input и textarea */
$('#contact').find('input').removeProp('disabled');
$('#contact textarea').removeProp('disabled');
/* очищаем форму */
$('#contact').clearForm();
}).css('opacity', '1.0');
});
}, 15000);
}
});
/* обязательно возвращаем "ложь", чтобы отменить действие кнопки submit по умолчанию, иначе страница "подскочит" вверх */
return false;
}
});
});
У нас должно получиться следующее: после отправки формы (без перезагрузки страницы) она перекрывается слоем с уведомлением о статусе: удачно/неудачно (с невозможностью вводить что-либо в поля), затем через 15 секунд форма очищается и снова готова к отправке. Все остальные более-менее важные комментарии даны в самом коде, поэтому переходим сразу к файлу process.php, который будет отвечать за отправку сообщения. Я сделал в нем примитивную проверку и преобразование стандартной функцией htmlspecialchars() спецсимволов.
Код: PHP
<?php
// примитивная проверка на присутствие значений массива
if (isset($_POST['name']) && isset($_POST['email']) && isset($_POST['message']) && isset($_POST['answer']) || isset($_POST['phone'])) {
// заменишь на свое мыло
$to = "tvoy_email@mail.ru";
$from = trim(htmlspecialchars($_POST['email']));
// создаем массив с заголовками для корректного отображения письма даже на проблемном майл.ру
$headers = array();
$headers[] = "MIME-Version: 1.0";
$headers[] = "Content-Type: text/plain; charset=UTF-8";
$headers[] = "Content-Transfer-Encoding: 7bit";
$headers[] = "From: ".$from;
$headers[] = "X-Mailer: PHP v".phpversion();
$subject = "Новое сообщение с сайта ".$_SERVER['HTTP_HOST'];
// категории данных (будут отображаться в теле письма)
$fields = array();
$fields{"name"} = "Имя";
$fields{"email"} = "Email";
$fields{"phone"} = "Телефон";
$fields{"message"} = "Текст письма";
// формируем само тело письма
$body = "Сообщение:\n\n";
foreach($fields as $a => $b){
$body .= sprintf("%20s: %s\n", $b, trim(htmlspecialchars($_POST[$a])));
}
// ну и отправка стандартной функцией php mail();
mail($to, "=?UTF-8?B?".base64_encode($subject)."?=", $body, implode("\r\n", $headers)) ? true : false;
} else {
// иначе- убиваем процесс
die("Access Denied!");
}
?>
Ну и последний штрих- стиль. Можете править его на свой вкус
Код: CSS
.myform {
display: block;
margin: 100px auto;
width: 40%;
}
.span_of_text {
background: #71AF42;
text-align: center;
padding: 4%;
border-radius: 8px 8px 0 0;
-webkit-border-radius: 8px 8px 0 0;
-moz-border-radius: 8px 8px 0 0;
-o-border-radius: 8px 8px 0 0;
position: relative;
}
.span_of_text:after {
content: '';
position:absolute;
width: 0;
height: 0;
border:10px solid #71AF42;
border-bottom: 0 solid rgba(0, 0, 0, 0)!important;
border-right: 10px solid rgba(0, 0, 0, 0)!important;
border-left: 10px solid rgba(0, 0, 0, 0)!important;
left:10%;
bottom: -8px;
margin-left: -10px;
z-index: 1;
}
.span_of_text h4 {
font-size: 2em;
color: #fff;
}
.contact_form {
padding: 6%;
background: #fff;
border-radius: 0 0 8px 8px;
-webkit-border-radius: 0 0 8px 8px;
-moz-border-radius: 0 0 8px 8px;
-o-border-radius: 0 0 8px 8px;
position: relative;
}
.contact_form form {
margin:0;
}
.contact_form form label {
font-size:1.3em;
line-height:1.3em;
color:#e6e6e1;
text-shadow: 0 -1px #202020;
display: block;
}
.contact_form form label.error {
font-size: 0.5em;
line-height: 0.4em;
color: #c0392b;
text-align: center;
margin: 0.3em auto;
}
.contact_form form input[type="text"], .contact_form form textarea {
display: block;
font-size: 1.4em;
line-height: 1.4em;
box-shadow: none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
background: #e6e6e6;
border:1px solid #191919;
-moz-border-radius: 0.2em;
-webkit-border-radius: 0.2em;
border-radius: 0.2em;
width: 90%;
margin: 0.5em auto 1.25em auto;
}
.contact_form form textarea {
height: 100px;
}
.contact_form form input[type="text"]:focus, .contact_form form textarea:focus {
border-color:#191919;
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
}
.contact_form form input[type="text"][disabled], .contact_form form textarea[disabled] {
background: #fff;
}
.contact_form form input[type="text"].error, .contact_form form textarea.error {
background: #e6e6e6;
border-color: #c0392b;
}
.contact_form fieldset {
border: 0;
margin: 0;
padding: 0;
}
.contact_form .required {
color:#e9266d;
}
.contact_form #success, .contact_form #error {
display:none;
}
.contact_form #success, .contact_form #error {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 95%;
margin: auto auto;
text-align: center;
}
.contact_form #success span, .contact_form #error span {
display: block;
margin-top: 13em;
text-align: center;
font-size: 1.3em;
}
.contact_form #success span {
color: green;
text-shadow: 1px 1px #333;
}
.contact_form #error span {
color: #c0392b;
text-shadow: 1px 1px #000;
}
.contact_form input[type="submit"] {
width: 50%;
margin: 0 auto;
float:left;
background: #71AF42;
color: #fff;
border: 1px solid #69A23D;
text-align: center;
font-weight: 100;
cursor: pointer;
padding: 12px 16px;
outline: none;
font-size: 1em;
text-transform: uppercase;
-webkit-appearance: none;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
text-shadow: 0 1px 0 rgb(0, 0, 0);
-webkit-text-shadow: 0 1px 0 rgb(0, 0, 0);
-moz-text-shadow: 0 1px 0 rgb(0, 0, 0);
-o-text-shadow: 0 1px 0 rgb(0, 0, 0);
}
.contact_form input[type="submit"]:hover{
background: #659E39;
}
.contact_form input[type="reset"]{
width: 40%;
float:left;
background: #D8D8D8;
color: #303030;
border: 1px solid rgb(192, 192, 192);
margin: 0 auto 0 1em;
text-align:center;
font-weight:100;
cursor: pointer;
padding: 12px 16px;
outline: none;
font-size: 1em;
text-transform: uppercase;
-webkit-appearance: none;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
text-shadow: 0 1px 0 rgb(255, 255, 255);
-webkit-text-shadow: 0 1px 0 rgb(255, 255, 255);
-moz-text-shadow: 0 1px 0 rgb(255, 255, 255);
-o-text-shadow: 0 1px 0 rgb(255, 255, 255);
}
.contact_form input[type="reset"]:hover{
background: #BEBEBE;
}
Вот, в общем, у нас и получилась форма обратной связи на Ajax+JQuery+PHP. Пробуйте. Можно еще добавить метод валидации телефонов российских сотовых операторов, что-то типа такого:
Код: JQUERY
jQuery.validator.addMethod("phoneRU", function(phone_number, element) {
phone_number = phone_number.replace(/\s+/g, "");
phone_number = phone_number.replace('(', "");
phone_number = phone_number.replace(')', "");
phone_number = phone_number.replace(/-/g, "");
return this.optional(element)||phone_number.length>9 && phone_number.match(/(\+7|8)9([0-9]{2})[1-9]([0-9]{6})/);
}, "Некорректный номер! Пример: 89201234567");
Надеюсь, разберетесь, как этим пользоваться. Либо вот еще небольшая регулярка для номеров российских сотовых операторов:
Код: JQUERY
jQuery.validator.addMethod('phoneRU', function (value, element) {
return this.optional(element) || (/^((8|\+7|007)[\-\.\/ ]?)?([\(\/\.]?\d{3}[\)\/\.]?[\-\.\/]?)?[\d\-\.\/ ]{7,10}$/g).test(value);
}, "введите корректный номер телефона");
Будут вопросы- спрашиваем. Удачи и всех благ.
P.S. На демке не балуйтесь, данные там все равно никуда не уходят
Понравилась статья?
Метки для данной статьи
Похожие статьи
Поделиться:
Последние активные темы форума
| Темы | Просмотров | Ответов | Последние сообщения | |
 |
Вопрос по переделке bb-кода PHP, MySQL |
21880 | 5 | Pisatel 26. мая 2017 |
|
Вопросы по Ajax форме обратной связи CMS PHP Fusion |
66527 | 48 | Ditrin 19. февраля 2017 |
|
BBCode YouTube Video Colorbox mod CMS PHP Fusion |
15146 | 2 | Pisatel 10. декабря 2016 |
|
Как лучше создать собственную страницу? CMS PHP Fusion |
17591 | 17 | Pisatel 11. мая 2016 |
|
Небольшие вопросы по скриптам магазина и катало... PHP, MySQL |
140966 | 80 | Pisatel 11. января 2016 |
|
BBCode Code mod CMS PHP Fusion |
14093 | 0 | Pisatel 31. августа 2015 |
|
Ajax Like Dislike Article Panel CMS PHP Fusion |
22112 | 16 | Pisatel 07. июля 2015 |
|
Хлебные крошки / BreadCrumbs SEO Panel CMS PHP Fusion |
25747 | 17 | Pisatel 04. июля 2015 |
|
Abbr Description BBCode CMS PHP Fusion |
7546 | 0 | Pisatel 15. июня 2015 |
|
Плагин Email рассылки Mail To All by Pisatel CMS PHP Fusion |
36134 | 32 | Pisatel 26. апреля 2015 |
|
Подозрительный трафик и прочие страшилки Всякая хрень |
11613 | 2 | Ditrin 23. апреля 2015 |
|
Мод Newsletter - рассылка писем пользователям с... CMS PHP Fusion |
30804 | 13 | Pisatel 10. апреля 2015 |
|
Мод отправки писем PHPMailer для PHP-Fusion CMS PHP Fusion |
124639 | 113 | Ditrin 06. апреля 2015 |
|
Появление неизвестного файла subscriptions.php CMS PHP Fusion |
8756 | 2 | Pisatel 06. апреля 2015 |
|
Autoban on IP CMS PHP Fusion |
22980 | 13 | Pisatel 03. апреля 2015 |