Создание формы обратного звонка на лету и отправка с помощью jQuery

Для обратного звонка можно воспользоваться библиотекой fancybox, которая позволяет создавать модальные окна. В модальном окне будет располагаться форма обратной связи.

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

И так, для кнопки по нажатию будет всплывать окно, для этого просто присвоим произвольный класс, который будем использовать в скрипте:

<a class="buttons-click buttons-click-form" href="#mess">Отправить сообщение</a>

Создадим тут же форму

<div id="mess" class="call-form formMess">

  <div class="title">Отправить письмо</div>

  <div class="content">

    <input type="text" name="name" placeholder="Ваше имя" />

    <span class="error error_name"></span>

    <input type="text" name="email" placeholder="Ваше email" />

    <span class="error error_email"></span>

    <input type="text" name="phone" placeholder="Ваш номер" />

    <span class="error error_phone"></span>

    <textarea name="mess" placeholder="Текст сообщения"></textarea>

    <span class="error error_mess"></span>

    <button class="buttons buttons-click-form">Отправить</button>

  </div>

</div>

Напишем функцию js для вызова всплывающего окна с помощью библиотеки fancybox:

$('.buttons-click').click(function(){

$tag=$(this).attr('href');

$.fancybox($tag);

return false;

})

Для того чтобы собрать данные с формы, потребуется функция

$('.buttons-click-form').click(function(){

$('.formMess span').html(null)

$.ajax({

url: 'index.php?route=information/form/mess',

type: 'post',

dataType: 'json',

data: 'name='+$('input[name=name]').val()+'&phone='+$('input[name=phone]').val()+'&email='+$('input[name=email]').val()+'&mess='+$('textarea[name=mess]').val(),

success: function(m){

    if(m.error){

$.each(m.error,function(i,e){

    $('.error_'+e.name).html(e.text)

})

    }

    else{

$('.formMess .title').html('Ваше сообщение отправлено!')

$('.formMess .content').remove();

setTimeout(function(){

$.fancybox.close();

},3000);

    }

}

})

})

Отправив данные на сервер, добавим в контролер form функцию, которая обработает данные, и возвратит код ошибки, если будет не верное заполненное поле (без перезагрузки страницы)

public function mess(){

    $this->load->model('catalog/information');

    if (($this->request->server['REQUEST_METHOD'] == 'POST') && $this->validateMess()) {

        $mail = new Mail();

        $mail->protocol = $this->config->get('config_mail_protocol');

        $mail->parameter = $this->config->get('config_mail_parameter');

        $mail->smtp_hostname = $this->config->get('config_mail_smtp_host');

        $mail->smtp_username = $this->config->get('config_mail_smtp_username');

        $mail->smtp_password = html_entity_decode($this->config->get('config_mail_smtp_password'), ENT_QUOTES, 'UTF-8');

        $mail->smtp_port = $this->config->get('config_mail_smtp_port');

        $mail->smtp_timeout = $this->config->get('config_mail_smtp_timeout');

        $mode=$this->model_catalog_information->voiteMail('VOITE_MESS',$this->request->post);

        $mail->setTo($this->config->get('config_email'));

        if(!empty($this->request->post['email'])){

            $mail->setFrom($this->request->post['email']);

        }

       else{

            $mail->setFrom($this->config->get('config_email'));

        }

        $mail->setSender($this->request->post['name']);

        $mail->setSubject(sprintf($this->language->get('email_subject'), $this->request->post['name']));

        $mail->setHtml($mode);

        $mail->send();

        $this->response->addHeader('Content-Type: application/json');

        $this->response->setOutput(json_encode($json['success']=true));

    }

    else{

        $json['error']=$this->error;

        $this->response->addHeader('Content-Type: application/json');

        $this->response->setOutput(json_encode($json));

    }

}


Вот и вся функция обратного звонка, Вы спросите, что это за функция?

$this->model_catalog_information->voiteMail()

Это функция вызова шаблона для отправки письма

Комментарии к статье
Защита от роботов

jquery, mail