2012-02-27 1 views
1

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

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

Вот страница вопроса: http://igs.link-networkonline.com/campaign-landing-page/

Вы можете увидеть название ссылки «изображение # 1» уже работает Lightbox на страницу успеха.

До сих пор я нашел этот код:

<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> 

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

+0

после некоторых проб и ошибок я обнаружил, что теневая коробка может помочь мне выполнить это. я изменил код в контактной форме 7, и теперь он отображает теневой блок, но нет изображения внутри ... Как очень близко к этому, кто-то получил преимущество? –

ответ

0

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

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

    // continue to do AJAX request 
}); 

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

Смежные вопросы