ライトボックスを使用したフォーム提出の成功のポップアップ

Question

私はクライアントのための新しいマーケティングキャンペーンの最後の詳細に取り組んでいます。このプロジェクトの最後の段階では、ユーザー情報を取得して送信することでコンバージョンを獲得します。

ここで難しいのは、フォームがajaxを介して送信されると、私のクライアントはライトボックス上で成功の画像ポップアップを持っていることになります。私はワードプレスを実行し、ここではコンタクトフォーム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> 

私はjqueryの（これが正しく実装されているかどうかわからない中で、成功メッセージがポップアップします前に検証するので、Ajaxのラインを形成する必要があります。.. ）。私はjqueryを初めて使っているので、これは私にとっては大変なことです。私は本当にこれを自分で行う方法を学ぶ必要があるので、どんな方向性も高く評価されます。あなたが何をする必要があるか、通常提出からフォームを防ぐことはできませんfalseを返す

Answer 1

が

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

    // continue to do AJAX request 
}); 

あなたのid #infoがあなたの元にどこにもありません、これはあなたが上記の見ているどのような問題を引き起こすがありません。