Офис НП 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-10-2014 15:49 24 Октябрь 2014 15:49:54 4868  Прочтений 4868 Прочтений  2 Комментариев 2 Комментариев
 printer
Понадобилось мне тут как-то сделать небольшую форму обратной связи на Ajax+JQuery+PHP. Порылся немного в сети, нашел подходящую, однако были в ней косяки, которые пришлось устранять. И получилось у меня следующее творение.

Сразу отмечу, что код валиден по стандарту 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. На демке не балуйтесь, данные там все равно никуда не уходят
Понравилась статья?
Метки для данной статьи
Похожие статьи
Поделиться:   
Комментарии
#1 | &#1042;&#1080;&#1082;&#1090;&# 25 августа 2019 17:33:25
No Avatar
Гость
&#1055;&#1077;&#1088;&#1077;&#1079;&#1074;&#1086;&#1085;&#1080;&#1090;&#1077; &#1084;&#1085;&#1077; &#1087;&#1086;&#1078;&#1072;&#1083;&#1091;&#1081;&#1089;&#1090;&#1072; 8 (953)148-45-77 &#1045;&#1074;&#1075;&#1077;&#1085;&#1080;&#1081;.
#2 | &#1042;&#1103;&#1095;&#1077;&# 31 августа 2019 09:45:34
No Avatar
Гость
&#1055;&#1077;&#1088;&#1077;&#1079;&#1074;&#1086;&#1085;&#1080;&#1090;&#1077; &#1084;&#1085;&#1077; &#1087;&#1086;&#1078;&#1072;&#1083;&#1091;&#1081;&#1089;&#1090;&#1072; 8 (812) 389-60-30 &#1042;&#1103;&#1095;&#1077;&#1089;&#1083;&#1072;&#1074;.
Добавить комментарий
Имя:

Проверочный код:
Последние активные темы форума
  Темы Просмотров Ответов Последние сообщения
folder Плагин Email рассылки Mail To All by Pisatel
CMS PHP Fusion
13257 33 promask
27. апреля 2019
folder Вопрос по переделке bb-кода
PHP, MySQL
3331 5 Pisatel
26. мая 2017
folder Вопросы по Ajax форме обратной связи
CMS PHP Fusion
13801 48 Ditrin
19. февраля 2017
folder BBCode YouTube Video Colorbox mod
CMS PHP Fusion
7707 2 Pisatel
10. декабря 2016
folder Как лучше создать собственную страницу?
CMS PHP Fusion
7056 17 Pisatel
11. мая 2016
folder Небольшие вопросы по скриптам магазина и катало...
PHP, MySQL
52716 80 Pisatel
11. января 2016
folder BBCode Code mod
CMS PHP Fusion
4027 0 Pisatel
31. августа 2015
folder Ajax Like Dislike Article Panel
CMS PHP Fusion
8160 16 Pisatel
07. июля 2015
folder Хлебные крошки / BreadCrumbs SEO Panel
CMS PHP Fusion
9200 17 Pisatel
04. июля 2015
folder Abbr Description BBCode
CMS PHP Fusion
3042 0 Pisatel
15. июня 2015
folder Подозрительный трафик и прочие страшилки
Всякая хрень
5705 2 Ditrin
23. апреля 2015
folder Мод Newsletter - рассылка писем пользователям с...
CMS PHP Fusion
7728 13 Pisatel
10. апреля 2015
folder Мод отправки писем PHPMailer для PHP-Fusion
CMS PHP Fusion
41279 113 Ditrin
06. апреля 2015
folder Появление неизвестного файла subscriptions.php
CMS PHP Fusion
3721 2 Pisatel
06. апреля 2015
folder Autoban on IP
CMS PHP Fusion
13635 13 Pisatel
03. апреля 2015