Отправка контактной формы с успешным всплывающим окном лайтбокса - PullRequest
Новая
       15

Отправка контактной формы с успешным всплывающим окном лайтбокса

1 голос
/ 28 февраля 2012

Я работаю над последней деталью новой маркетинговой кампании для клиента.Последний этап проекта - получить конверсию, собрав информацию о пользователях и отправив ее.

Сложность в том, что мой клиент не может установить всплывающее окно с изображением успеха на лайтбоксе после отправки формы через ajax.Я использую WordPress и использую контактную форму 7.

Вот эта страница: http://igs.link -networkonline.com / campaign-Landing-Page /

Выможно увидеть заголовок ссылки "изображение # 1" уже рабочий лайтбокс на страницу успеха.

Пока я нашел этот код: 

<script type = 'text/javascript'>

 $(function(){
      //handle the form submitting
      $(".wpcf7-form").submit(function(){
          var data = $(this).serialize();
          //do an ajax call that expects html to be returned
          $.ajax({
             type:"POST",
             dataType:'html',
             data:data,
             success:function(data){
                //put the returned html into the info div and turn it 
                //into a facebox popup
                $("#info").html(data);
                jQuery.facebox({ div: '#success' });
             }

          }); // end ajax

         //prevent form from submiting normally
         return false;
      })
  });
</script>

Мне нужно проверить форму, прежде чем всплывет сообщение об успехе, отсюда и строка ajax в jquery (не уверен, что это так.реализовано правильно ...).Я новичок в JQuery, так что это все пугающе для меня.Мне действительно нужно научиться делать это самому, поэтому мы будем благодарны за любое направление.

1 Ответ

0 голосов
/ 28 февраля 2012

возврат false не препятствует отправке формы нормально, что вам нужно сделать, это 

$(".wpcf7-form").submit(function(event){
    event.preventDefault();

    // continue to do AJAX request
});

Ваш id #info нигде в вашем источнике, это вызывает проблемы, но не то, что вы видите выше.

...