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

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

Сложность здесь в том, что мой клиент настроен на то, чтобы их успешное изображение всплывало в лайтбоксе после отправки формы через 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, поэтому все это меня пугает. Мне действительно нужно научиться делать это самому, поэтому любое направление будет очень признательно.


jquery lightbox submission
person Mike Lucid    schedule 27.02.2012    source источник
comment
после некоторых проб и ошибок я обнаружил, что теневой ящик может помочь мне в этом. Я изменил некоторый код в контактной форме 7, и теперь он отображает теневой ящик, но без изображения внутри... Подойдя очень близко к этому, кто-нибудь получил наводку?   -  person Mike Lucid    schedule 28.02.2012

Ответы (1)


arrow_upward
0
arrow_downward

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

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

    // continue to do AJAX request
});

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

person ncremins    schedule 27.02.2012