Офис НП AMWAY в Ярославле
Купить продукцию Амвей в Ярославле, офис 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 3948  Прочтений 3948 Прочтений  0 Комментариев 0 Комментариев
 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. На демке не балуйтесь, данные там все равно никуда не уходят
Понравилась статья?
Метки для данной статьи
Похожие статьи
Поделиться:   
Комментарии
Нет комментариев.
Добавить комментарий
Имя:

Проверочный код:
Последние активные темы форума
  Темы Просмотров Ответов Последние сообщения
folder Вопрос по переделке bb-кода
PHP, MySQL
1563 5 Pisatel
26. мая 2017
folder Вопросы по Ajax форме обратной связи
CMS PHP Fusion
7454 48 Ditrin
19. февраля 2017
folder BBCode YouTube Video Colorbox mod
CMS PHP Fusion
6466 2 Pisatel
10. декабря 2016
folder Как лучше создать собственную страницу?
CMS PHP Fusion
4584 17 Pisatel
11. мая 2016
folder Небольшие вопросы по скриптам магазина и катало...
PHP, MySQL
41715 80 Pisatel
11. января 2016
folder BBCode Code mod
CMS PHP Fusion
3072 0 Pisatel
31. августа 2015
folder Ajax Like Dislike Article Panel
CMS PHP Fusion
5883 16 Pisatel
07. июля 2015
folder Хлебные крошки / BreadCrumbs SEO Panel
CMS PHP Fusion
6493 17 Pisatel
04. июля 2015
folder Abbr Description BBCode
CMS PHP Fusion
2290 0 Pisatel
15. июня 2015
folder Плагин Email рассылки Mail To All by Pisatel
CMS PHP Fusion
9151 32 Pisatel
26. апреля 2015
folder Подозрительный трафик и прочие страшилки
Всякая хрень
3942 2 Ditrin
23. апреля 2015
folder Мод Newsletter - рассылка писем пользователям с...
CMS PHP Fusion
5626 13 Pisatel
10. апреля 2015
folder Мод отправки писем PHPMailer для PHP-Fusion
CMS PHP Fusion
28353 113 Ditrin
06. апреля 2015
folder Появление неизвестного файла subscriptions.php
CMS PHP Fusion
2784 2 Pisatel
06. апреля 2015
folder Autoban on IP
CMS PHP Fusion
11398 13 Pisatel
03. апреля 2015