没有让联系表格使用模板工作

Question

请注意，在制作网站方面我完全是菜鸟。

我正在使用网上找到的模板制作网站：https://www.styleshout.com/new-website-template-kards/

我通过 github 托管网站。一切都运行良好，除了使联系表工作。我已经搜索了几个小时没有任何进展。

在模板文件夹中可找到的有关如何使联系表单正常工作的信息很少，我对这方面的经验为零。有一个 'sendEmail.php' 文件，我在其中找到以下内容：

// Replace this with your own email address 
$siteOwnersEmail = 'user@website.com';

这正是我填写自己的电子邮件地址的地方。但是，我没有让它工作，而且我一直收到“出了点问题。请重试。”错误。此错误消息应该来自 Java 脚本 'main.js'，因为我测试了更改消息。

我希望下面的块是相关的并且足以帮助我解决我的问题。

谢谢。

'index.html'

中的联系人部分

   <!-- contact
   ================================================== -->
    <section id="contact">

        <div class="row section-intro">
        <div class="col-twelve">

            <h5>Contact</h5>
            <h1>I'd Love To Hear From You.</h1>

        </div> 
    </div> <!-- /section-intro -->

    <div class="row contact-form">

        <div class="col-twelve">

            <!-- form -->
            <form name="contactForm" id="contactForm" method="post" action="">
                <fieldset>

                    <div class="form-field">
                        <input name="contactName" type="text" id="contactName" placeholder="Name" value="" minlength="2" required="">
                    </div>
                    <div class="form-field">
                        <input name="contactEmail" type="email" id="contactEmail" placeholder="Email" value="" required="">
                    </div>
                    <div class="form-field">
                        <input name="contactSubject" type="text" id="contactSubject" placeholder="Subject" value="">
                    </div>                       
                    <div class="form-field">
                        <textarea name="contactMessage" id="contactMessage" placeholder="message" rows="10" cols="50" required=""></textarea>
                    </div>                      
                    <div class="form-field">
                        <button class="submitform">Submit</button>
                        <div id="submit-loader">
                            <div class="text-loader">Sending...</div>                             
                            <div class="s-loader">
                                <div class="bounce1"></div>
                                <div class="bounce2"></div>
                                <div class="bounce3"></div>
                            </div>
                        </div>
                    </div>

                </fieldset>
            </form> <!-- Form End -->

            <!-- contact-warning -->
            <div id="message-warning">              
            </div>            
            <!-- contact-success -->
            <div id="message-success">
               <i class="fa fa-check"></i>Your message was sent, thank you!<br>
            </div>

         </div> <!-- /col-twelve -->
        
    </div> <!-- /contact-form -->
        
    </section> <!-- /contact -->

Java 脚本 'main.js' 中的联系表单块（也作为脚本包含在 'index.html' 中）

    /*---------------------------------------------------- */
    /*  contact form
    ------------------------------------------------------ */

    /* local validation */
    $('#contactForm').validate({

        /* submit via ajax */
        submitHandler: function(form) {

            var sLoader = $('#submit-loader');

            $.ajax({        

              type: "POST",
              url: "inc/sendEmail.php",
              data: $(form).serialize(),
              beforeSend: function() { 

                sLoader.fadeIn(); 

              },
              success: function(msg) {

                // Message was sent
                if (msg == 'OK') {
                    sLoader.fadeOut(); 
                   $('#message-warning').hide();
                   $('#contactForm').fadeOut();
                   $('#message-success').fadeIn();   
                }
                // There was an error
                else {
                    sLoader.fadeOut(); 
                   $('#message-warning').html(msg);
                    $('#message-warning').fadeIn();
                }

              },
              error: function() {

                sLoader.fadeOut(); 
                $('#message-warning').html("Something went wrong. Please try again.");
                 $('#message-warning').fadeIn();

              }

          });           
        }

    });

'sendEmail.php' 文件（带电子邮件占位符）

<?php

// Replace this with your own email address
$siteOwnersEmail = 'user@website.com';


if($_POST) {

   $name = trim(stripslashes($_POST['contactName']));
   $email = trim(stripslashes($_POST['contactEmail']));
   $subject = trim(stripslashes($_POST['contactSubject']));
   $contact_message = trim(stripslashes($_POST['contactMessage']));

   // Check Name
    if (strlen($name) < 2) {
        $error['name'] = "Please enter your name.";
    }
    // Check Email
    if (!preg_match('/^[a-z0-9&\'\.\-_\+]+@[a-z0-9\-]+\.([a-z0-9\-]+\.)*+[a-z]{2}/is', $email)) {
        $error['email'] = "Please enter a valid email address.";
    }
    // Check Message
    if (strlen($contact_message) < 15) {
        $error['message'] = "Please enter your message. It should have at least 15 characters.";
    }
   // Subject
    if ($subject == '') { $subject = "Contact Form Submission"; }


   // Set Message
   $message .= "Email from: " . $name . "<br />";
    $message .= "Email address: " . $email . "<br />";
   $message .= "Message: <br />";
   $message .= $contact_message;
   $message .= "<br /> ----- <br /> This email was sent from your site's contact form. <br />";

   // Set From: header
   $from =  $name . " <" . $email . ">";

   // Email Headers
    $headers = "From: " . $from . "\r\n";
    $headers .= "Reply-To: ". $email . "\r\n";
    $headers .= "MIME-Version: 1.0\r\n";
    $headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";


   if (!$error) {

      ini_set("sendmail_from", $siteOwnersEmail); // for windows server
      $mail = mail($siteOwnersEmail, $subject, $message, $headers);

        if ($mail) { echo "OK"; }
      else { echo "Something went wrong. Please try again."; }
        
    } # end if - no validation error

    else {

        $response = (isset($error['name'])) ? $error['name'] . "<br /> \n" : null;
        $response .= (isset($error['email'])) ? $error['email'] . "<br /> \n" : null;
        $response .= (isset($error['message'])) ? $error['message'] . "<br />" : null;
        
        echo $response;

    } # end if - there was a validation error

}

?>

Answer 1

如评论中所述，您正在尝试做一些您使用的技术无法实现的事情。

但让我们说实话...

当您刚开始时，对于表单的提交方式、数据的去向、发生的方式等有点困惑。

所以这里有一些提示可以帮助您朝着正确的方向前进，但首先让我们从基本解释开始，因为我认为这在这里很重要。

Javascript 这样实际上只有两个目的。

• 通过使用可以修改页面上 HTML 的编程语言更改页面的外观（例如向元素添加 css class 或添加基于用户 activity)

的页面新元素

• 页面上有一种语言可以通过 Internet 从用户的浏览器向其他计算机发送请求（通用 http 请求）。

我不想 tooooooo 深入到第二个，因为它有点超出范围，但这是超级基础知识：

Javascript 调用（获取 api 或类似）到服务器。这只是意味着 Javascript 正在接听 phone，拨打一个号码（在本例中是一个 IP 地址 [或域名 ex: google.com，这只是一个 IP 地址结束]）。服务器是它在 phone 上拨打的电话——就像在 phone 上打电话给朋友一样——它接收发送的数据 javascript 并执行 stuff 与它。

通常这个 stuff 是写入数据库、发送电子邮件等。也就是说，这需要有一个专门用于此的服务器。当您连接到网页时，您只是以完全相同的方式向另一台服务器发送请求（浏览器选择 phone 并根据您在 url 中键入的内容为您拨打服务器)，但此服务器只是将所有 html 和 css 从其自己的数据库或任何类型的存储中发回给您。

综上所述，这如何回答问题？那么，在您托管的地方，github 有点像告诉服务器回答不存在的 phone。除了普通的旧静态页面，它不支持任何东西，不支持像 php、nodejs、ruby 等服务器语言

没有让联系表格使用模板工作

Not getting contact form to work using template

html

javascript

php