带有灯箱成功弹出窗口的联系表单提交

Posted 2023-02-24

【中文标题】带有灯箱成功弹出窗口的联系表单提交

【英文标题】：Contact form submission with lightbox success popup

【发布时间】：2012-02-27 23:44:45

【问题描述】：

我正在为客户处理新营销活动的最后一个细节。项目的最后阶段是通过获取用户信息并将其发送出去来获得转换。

这里的棘手部分是，一旦通过 ajax 提交表单，我的客户就无法在灯箱上弹出成功图像。我正在运行 wordpress 并使用联系表 7。

这里是有问题的页面： http://igs.link-networkonline.com/campaign-landing-page/

您可以看到链接标题“image #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 的新手，所以这对我来说都是令人生畏的。我真的需要自己学习如何做到这一点，所以任何方向都将不胜感激。

【问题讨论】：

经过反复试验，我发现影子盒可以帮助我完成这项工作。我已经更改了联系表格 7 中的一些代码，现在它显示了阴影框，但里面没有图像... 非常接近这个，有人有线索吗？

【参考方案1】：

返回false并不妨碍表单正常提交，你需要做的是

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

    // continue to do AJAX request
);

您的 ID #info 不在您的来源中，这会导致问题，但不会导致您在上面看到的问题。