Офис НП 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 Pisatel Добавлено 24-10-2014 15:49 24 Октябрь 2014 15:49:54 8311 Прочтений 8311 Прочтений
 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. На демке не балуйтесь, данные там все равно никуда не уходят
Понравилась статья?
Метки для данной статьи
Теги:  #html5 #ajax #jquery #javascript #php #form #css3 #validate #форма обратной связи #контактная форма 
Похожие статьи
Заголовок
Категория
Просмотров
22499
10398
28726
Поделиться:   
Последние активные темы форума
  Темы Просмотров Ответов Последние сообщения
folder Вопрос по переделке bb-кода
PHP, MySQL		 22793 5 Pisatel
26. мая 2017
folder Вопросы по Ajax форме обратной связи
CMS PHP Fusion		 71357 48 Ditrin
19. февраля 2017
folder BBCode YouTube Video Colorbox mod
CMS PHP Fusion		 15673 2 Pisatel
10. декабря 2016
folder Как лучше создать собственную страницу?
CMS PHP Fusion		 18305 17 Pisatel
11. мая 2016
folder Небольшие вопросы по скриптам магазина и катало...
PHP, MySQL		 149595 80 Pisatel
11. января 2016
folder BBCode Code mod
CMS PHP Fusion		 14814 0 Pisatel
31. августа 2015
folder Ajax Like Dislike Article Panel
CMS PHP Fusion		 23119 16 Pisatel
07. июля 2015
folder Хлебные крошки / BreadCrumbs SEO Panel
CMS PHP Fusion		 26905 17 Pisatel
04. июля 2015
folder Abbr Description BBCode
CMS PHP Fusion		 7809 0 Pisatel
15. июня 2015
folder Плагин Email рассылки Mail To All by Pisatel
CMS PHP Fusion		 37965 32 Pisatel
26. апреля 2015
folder Подозрительный трафик и прочие страшилки
Всякая хрень		 11998 2 Ditrin
23. апреля 2015
folder Мод Newsletter - рассылка писем пользователям с...
CMS PHP Fusion		 31422 13 Pisatel
10. апреля 2015
folder Мод отправки писем PHPMailer для PHP-Fusion
CMS PHP Fusion		 132921 113 Ditrin
06. апреля 2015
folder Появление неизвестного файла subscriptions.php
CMS PHP Fusion		 8979 2 Pisatel
06. апреля 2015
folder Autoban on IP
CMS PHP Fusion		 23470 13 Pisatel
03. апреля 2015