联系表格在fancybox中

时间:2014-02-02 18:28:28

标签: php jquery wordpress fancybox contact-form

我目前有一个wordpress页面,我调用iframe函数在我的网站中显示另一个网站。从wordpress模板页面我调用一个隐藏的fancybox联系表单,人们可以在其中订阅页面上显示的网站。我可以弹出窗体甚至发送电子邮件,但由于某种原因,它没有将输入字段传递给正在提交的电子邮件。谁能帮我弄清楚我做错了什么?

网站为here

如你所见。我有页面底部的按钮。一旦他们点击按钮就会显示一个他们可以填写的花哨的盒子形式,但就像我说的那样,它没有将用户输入字段传递给电子邮件。

这是模板页面编码:

    <?php

/**

 *  Template Name: Page Ads

 *

 *  The template for displaying client paid pages

 */



//Display the page content/body

if ( have_posts() ) while ( have_posts() )

{

the_post();

the_content();

}

?>



<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('template_directory'); ?>/leasestyle.css" />

<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_directory'); ?>/script/fancybox/jquery.fancybox.css">

  <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

  <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/script/fancybox/jquery.fancybox.js?v=2.0.6"></script>



    <div class="lease-now-div" style='position:fixed;padding:9px;cursor:pointer !important;line-height:42px; text-align:center; width:100%; background:rgba(0, 40, 92, 0.65); font-size:30px; padding-top:10px; color:#FFFFFF; text-shadow: 1px 1px 30px #000000;'>

    <div class="lease-now-title">

    <strong>Promote Your Website Here! Only <i><span style='font-size:22px;font-weight:bold;vertical-align: super' class='lease-now-price'>$50</span></i><span style='font-size:38px; font-weight:300;' class='lease-now-slash'>/</span><span style='font-size:22px;font-weight:bold;' class='lease-now-int'>Month</span></strong>

    </div>

        <div id="contact">

            <a class="modalbox" href="#inline"><span id="lease-learn-btn" class="lease-now" style="color:#4B4B4B">Learn How</span></a>

            <a class="modalbox" href="#inline"><span id="lease-order-btn" class="lease-now" style="color:#4B4B4B">Order Now</span></a>

            </div>

        </div>

</div>



<!-- hidden inline form -->

<div id="inline">

    <center><h2>Your Website Here! Only <i><span style='font-size:22px;font-weight:bold;vertical-align: super' class='lease-now-price'>$50</span></i><span style='font-size:38px; font-weight:300;' class='lease-now-slash'>/</span><span style='font-size:22px;font-weight:bold;' class='lease-now-int'>Month</span></h2></center>

    <br>

    <form id="contact" name="contact" action="#" method="post">

        <label for="name">Your Name</label>

        <input type="text" id="name" name="name" class="txt"><br>

        <label for="email">Your Email</label>

        <input type="email" id="email" name="email" class="txt"><br>

        <label for="website_url">Site URL :-</label>

        <input type="text" id="website_url" name="website_url" class="txt">

        <center><p>Please remember to include</p>

        <p>http://   or   https://</p></center>

        <br>

        <br>        

        <center><button id="send">Subscribe</button></center>

    </form>

</div>



<!-- basic fancybox setup -->

<script type="text/javascript">

    function validateEmail(email) { 

        var reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;

        return reg.test(email);

    }



    $(document).ready(function() {

        $(".modalbox").fancybox();

        $("#contact").submit(function() { return false; });





        $("#send").on("click", function(){

            var emailval  = $("#email").val();

            var mailvalid = validateEmail(emailval);



            if(mailvalid == false) {

                $("#email").addClass("error");

            }

            else if(mailvalid == true){

                $("#email").removeClass("error");

            }



            if(mailvalid == true) {

                // if both validate we attempt to send the e-mail

                // first we hide the submit btn so the user doesnt click twice

                $("#send").replaceWith("<em>sending...</em>");



                $.ajax({

                    type: 'POST',

                    url: '<?php bloginfo('template_directory'); ?>/sendmessage.php',

                    data: $("#contact").serialize(),

                    success: function(data) {

                        if(data == "true") {

                            $("#contact").fadeOut("fast", function(){

                                $(this).before("<p><strong>Your ad has been submitted Successfully! Someone will contact you shortly.</strong></p>");

                                setTimeout("$.fancybox.close()", 1000);



                            });

                        }

                    }

                });

            }

        });

    });

</script>

这是我正在尝试使用的sendmessage.php:

<?php

$sendto   = "username@email.com";
$email = $_POST['email'];
$Name = $_POST['name'];
$website = $_POST['website_url'];

$subject  = "Page Ad Inquiry";
$headers  = "From: " . strip_tags($email) . "\r\n";
$headers .= "Reply-To: ". strip_tags($email) . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html;charset=utf-8 \r\n";

$msg  = "<html><body style='font-family:Arial,sans-serif;'>";
$msg .= "<h2 style='font-weight:bold;border-bottom:1px dotted #ccc;'>Page Ad Inquiry</h2>\r\n";
$msg .= "<p><strong>Name:</strong> ".$Name."</p>\r\n";
$msg .= "<p><strong>Sent by:</strong> ".$email."</p>\r\n";
$msg .= "<p><strong>Message:</strong> ".$website."</p>\r\n";
$msg .= "</body></html>";


if(@mail($sendto, $subject, $msg, $headers)) {
    echo "true";
} else {
    echo "false";
}

?>

0 个答案:

没有答案