聯繫表單提交與燈箱成功彈出

我正在爲客戶的新營銷活動的最後細節工作。該項目的最後階段是通過抓取用戶信息並將其發送出去來實現轉換。聯繫表單提交與燈箱成功彈出

這裏最棘手的部分是我的客戶端在通過ajax提交表單後，已經無法在lightbox上顯示成功圖像。我運行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的新手，所以這對我來說都很艱鉅。我真的需要學習如何自己做到這一點，所以任何方向將不勝感激。

來源

2012-02-27 Mike Lucid

經過一些試驗和錯誤，我發現陰影盒可以幫助我緩解這一點。我已經改變了聯繫表格7中的一些代碼，現在它顯示了shadowbox，但是裏面沒有圖像......在這個之上獲得真正的接近，任何人都有領先？ – 2012-02-28 04:37:28

返回false並不阻止從形式提交，通常你需要做的是

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

    // continue to do AJAX request 
});

您的ID #info是無處在源，這會導致問題，但不是你上面看到的。

來源

2012-02-27 23:54:46 ncremins

聯繫表單提交與燈箱成功彈出

回答

相關問題