Форма «заказать обратный звонок в InSales»

Сейчас помогаю настраивать один сайт на InSales. В числе прочего заказчик хотел иметь форму заказа обратного звонка. Т.е. на сайте клиент жмакает ссылку «перезвоните мне», а админу приходит на почту уведомление. Казалось бы ничего необычного в этом нет и решений таких, как готовых множество, так и написать его не составляет большого труда. Но! Специфика системы InSales в том, что они не предоставляют доступа к своим скриптам, и все что там можно сделать — это javascript да шаблонизатор. Но в данном случае и этого достаточно.

Как выглядит готовый результат можно посмотреть на этом самом сайте интимных товаров. Я сделал эту форму на основе инсэйловской формы обратной связи.

Как там все работает

Форма обратной связи посылает данные на сервер используя ajax. Посылаются данные двух полей:

содержание: <textarea id="feedback_content" name="feedback[content]" ></textarea>
и
email: <input id="feedback_from" type="text" name="feedback[from]">

И их же проверяет на сервере. Если они неправильно заполнены — возвращает же аяксом сообщение об ошибке. На сервере проверяются поля по имени ( feedback[content] и feedback[from] ), данные javascript собирает по id формы ( feedback_from ).

Т.е. мы должны отправлять на сервер: форму с двумя заполненными полями:

содержание: <textarea name="feedback[content]" ></textarea>
и
email: <input type="text" name="feedback[from]">

Такую форму сервер обработает и пошлет письмо на указанный в админке адрес.
Важно, что сервер проверит как заполнена почта (правильный email или нет) и написано ли что-нибудь в поле feedback[content].

Поскольку у них форма отправляется аяксом и мы напишем аналогичный код. И чтобы родной код не обрабатывал нашу форму (а обрабатывает он ее по id), нашей форме мы укажем другой id. Например, у меня она называется callback_form.

        var form = $('#callback_form');
        var fields = form.serialize();
        $.ajax({
            url:      form.attr('action') + '.json',
            type:     'post',
            data:     fields,
            dataType: 'json',
            beforeSend: function() {show_preloader();},
            complete: function() {hide_preloader();},
            success:  function(response) {
                if ( response.status == 'ok' ) {
                    $("#callback_comment").val("");
                    var thanks = $("#thanks_message");
                    thanks.html(response.notice);
                    thanks.show();
                    window.setTimeout(function() {
                       thanks.fadeOut("slow", function(){thanks.hide();});
                    }, 6000);
                } else {
                    alert(errors_to_arr(response.errors).join("\n"));
                }
            }
        });

Что здесь происходит: берутся все поля формы (ее id указан в первой строчке), переводятся в json для отправки на сервер, ну и дальше красота — уведомления, сообщения, очистка полей.
$(«#callback_comment»).val(«»); — здесь, если отправка прошла успешно — очищается поле callback_comment (так сделано у меня). Это важный момент — зачем вообще это поле.

Поскольку сервер обрабатывает данные только двух полей, об этом выше, мы можем и отправить данные только двух полей. Одно из них поле для адреса электронной почты и в нем должен содержаться корректный адрес. Хорошо, если вам оно нужно. Мне, например, было не нужно. Ведь у меня форма обратного звонка. У меня в форме такие поля: телефон, имя, комментарии. Что я делаю: перед отправкой, яваскриптом, свожу данные своей формы в одно поле — то самое, которое обработает сервер — это поле name=»feedback[from]», можно его сделать скрытым.
Вот мой код, если чо:

       var comment = document.getElementById('callback_comment');
       var phone = document.getElementById('callback_phone');
       var username = document.getElementById('callback_username');
       phone.className = '';
       if(phone.value){
         var comments = (comment.value)? '\nКомментарии: '+comment.value : '';
         document.getElementById('callback_content').value = 'Посетитель сайта '+username.value.bold()+ 
                                                              +'просит перезвонить ему по телефону: '+ 
                                                              +phone.value.bold() + comments;

/* здесь данные формы отправляются */

       }
       else{
          alert('Вы не указали телефон для обратной связи');
          phone.className = 'empty_message_input';
       }

    }

Вы можете написать любые свои поля, лишь бы потом их все свести в одно — то, которое с именем name=»feedback[from]».
Здесь я проверяю еще, чтобы в поле телефон было хоть что-то забито.
А поле email мне не нужно. Я его сделал скрытым, забил туда корректный адрес какой-то, вот так:

<input id="callback_email" type="hidden" value="callback@sexticket.ru" name="feedback[from]">

и отправляю его всегда, поэтому оно всегда проходит проверку. А если оно вам нужно — оставьте его открытым.

Все это я завернул в функцию и запускаю ее по onclick на кнопке отправить.

Вот такая примерно схема. Можете тупо скопировать исходный код формы и скрипта, который идет за ней с сайта этого магазина. В таком виде все должно работать. Там еще скрытие появление формы сделано, поэтому надо будет соответствующий css написать, если вы хотите реализовать ее в таком же виде.

P.S. Если захочется меня поблагодарить за эту статью — купите вибратор или искусственный член. :)

Один комментарий на “Форма «заказать обратный звонок в InSales»”

  1. ИВан:

    Спасибо, мужик!

Добавить комментарий

Перед отправкой формы:
Human test by Not Captcha