Изпращане на формуляр за контакт с изскачащ прозорец за успех в лайтбокса

Работя върху последния детайл от нова маркетингова кампания за клиент. Последният етап от проекта е да получите преобразуването, като вземете информацията за потребителите и я изпратите.

Трудната част тук е, че моят клиент е твърдо настроен да има изскачащо изображение за успех в лайтбокс, след като формулярът бъде изпратен чрез 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
});

вашето id #info не е никъде във вашия източник, това създава проблеми, но не и това, което виждате по-горе.

person ncremins    schedule 27.02.2012