Contact form submission with lightbox success popup

Question

I am working on the last detail of a new marketing campaign for a client. The last stage of the project is to get the conversion by grabbing the users info and sending it out.

The tricky part here is my client is dead set on haveing their success image popup on a lightbox once the form is submitted via ajax. I am running wordpress and using contact form 7.

Here is the page in question: http://igs.link-networkonline.com/campaign-landing-page/

You can see the link title "image #1" is already a working lightbox to the success page.

So far I have found this code:

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

I need the form to validate before the success message will popup, hence the ajax line in the jquery(not sure if this is being implemented correctly...). I am new to jquery, so this is all daunting to me. I really need to learn how to do this myself, so any direction would be greatly appreciated.

after some trial and error I found that shadow box can help me accomlish this. i have altered some code in the contact form 7 and now it displays the shadowbox, but no image inside... Getting really close on this one, anyone got a lead? — Mike Lucid, Feb 28 '12 at 04:37

score 0 · Answer 1 · answered Feb 27 '12 at 23:54

returning false does not prevent a form from submitting normally what you need to do is

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

    // continue to do AJAX request
});

your id #info is nowhere in your source, this causes problems but not what you're seeing above.

Contact form submission with lightbox success popup

1 Answers1