Github Pages上PHP/JS联系表单点击发送无响应求助

我用Github Pages搭建了一个简易作品集网站，但网站的联系表单点击发送按钮后没有任何反应，代码和初始模板完全一致，找不到问题所在，需要排查方向和帮助。

相关代码 #

JS代码 #

$("#contactform").submit(function () {
    var a = $(this).attr("action");
    $("#message").slideUp(750, function () {
        $("#message").hide();
        $("#submit").attr("disabled", "disabled");
        $.post(a, {
            name: $("#name").val(),
            email: $("#email").val(),
            comments: $("#comments").val()
        }, function (a) {
            document.getElementById("message").innerHTML = a;
            $("#message").slideDown("slow");
            $("#submit").removeAttr("disabled");
            if (null != a.match("success")) $("#contactform").slideDown("slow");
        });
    });
    return false;
});
$("#contactform input, #contactform textarea").keyup(function () {
    $("#message").slideUp(1500);
});
$(" .mob_filter-btn").on("click", function () {
    $(" .inline-filters-wrap .gallery-filters").fadeToggle(400);

});

HTML代码 #

<div id="contact-form" class="fl-wrap">
    <div id="message"></div>
    <form class="custom-form" action="php/contact.php" name="contactform" id="contactform">
        <fieldset>
            <input type="text" name="name" id="name" placeholder="Your name *" value="">
            <input type="text"  name="email" id="email" placeholder="Your email *" value="">
            <textarea name="comments"  id="comments" cols="40" rows="3" placeholder="Your message:"></textarea>
            <button class="btn float-btn flat-btn color-bg" id="submit" type="submit">Send </button>
        </fieldset>
    </form>
</div>

PHP代码 #

<?php

if(!$_POST) exit;

// Email address verification, do not edit.
function isEmail($email) {
    return(preg_match("/^[-_.[:alnum:]]+@((([[:alnum:]]|[[:alnum:]][[:alnum:]-]*[[:alnum:]])\.)+(ad|ae|aero|af|ag|ai|al|am|an|ao|aq|ar|arpa|as|at|au|aw|az|ba|bb|bd|be|bf|bg|bh|bi|biz|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|com|coop|cr|cs|cu|cv|cx|cy|cz|de|dj|dk|dm|do|dz|ec|edu|ee|eg|eh|er|es|et|eu|fi|fj|fk|fm|fo|fr|ga|gb|gd|ge|gf|gh|gi|gl|gm|gn|gov|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|in|info|int|io|iq|ir|is|it|jm|jo|jp|ke|kg|kh|ki|km|kn|kp|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|me|mg|mh|mil|mk|ml|mm|mn|mo|mp|mq|mr|ms|mt|mu|museum|mv|mw|mx|my|mz|na|name|nc|ne|net|nf|ng|ni|nl|no|np|nr|nt|nu|nz|om|org|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr|pro|ps|pt|pw|py|qa|re|ro|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sj|sk|sl|sm|sn|so|sr|st|su|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tm|tn|to|tp|tr|tt|tv|tw|tz|ua|ug|uk|um|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm|zw)$|(([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5])\.){3}([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5]))$/i",$email));
}

if (!defined("PHP_EOL")) define("PHP_EOL", "\r\n");

$name     = $_POST['name'];
$email    = $_POST['email'];
$comments = $_POST['comments'];


if(trim($name) == '') {
    echo '<div class="error_message">Enter your name.</div>';
    exit();
} else if(trim($email) == '') {
    echo '<div class="error_message">Enter a valid email address.</div>';
    exit();
} else if(!isEmail($email)) {
    echo '<div class="error_message">You have entered an invalid e-mail address. Please try again.</div>';
    exit();
} else if(trim($comments) == '') {
    echo '<div class="error_message">Enter your message.</div>';
    exit();
} 

if(get_magic_quotes_gpc()) {
    $comments = stripslashes($comments);
}


// Configuration option.
// Enter the email address that you want to emails to be sent to.
// Example $address = "joe.doe@yourdomain.com";

//$address = "example@themeforest.net";
$address = "myemailchanged@gmail.com";


// Configuration option.
// i.e. The standard subject will appear as, "You've been contacted by John Doe."

// Example, $e_subject = '$name . ' has contacted you via Your Website.';

$e_subject = 'You\'ve been contacted by ' . $name . '.';


// Configuration option.
// You can change this if you feel that you need to.
// Developers, you may wish to add more fields to the form, in which case you must be sure to add them here.

$e_body = "You have been contacted by: $name" . PHP_EOL . PHP_EOL;
$e_reply = "E-mail: $email\r\nPhone: $phone";
$e_content = "Message:\r\n$comments" . PHP_EOL . PHP_EOL;


$msg = wordwrap( $e_body . $e_content . $e_reply, 70 );

$headers = "From: $email" . PHP_EOL;
$headers .= "Reply-To: $email" . PHP_EOL;
$headers .= "MIME-Version: 1.0" . PHP_EOL;
$headers .= "Content-type: text/plain; charset=utf-8" . PHP_EOL;
$headers .= "Content-Transfer-Encoding: quoted-printable" . PHP_EOL;

if(mail($address, $e_subject, $msg, $headers)) {

    // Email has sent successfully, echo a success page.

    echo "<fieldset>";
    echo "<div id='success_page'>";
    echo "<h3>Email sent successfully.</h3>";
    echo "<p>Thank you <strong>$name</strong>. Your message has been submitted to us.</p>";
    echo "</div>";
    echo "</fieldset>";

} else {

    echo 'ERROR!';

}

排查方向 #

• 核心问题：Github Pages不支持PHP
  Github Pages仅提供静态文件托管服务，无法运行任何服务器端脚本（包括PHP）。表单提交请求到php/contact.php时，服务器只会返回这个文件的源代码，不会执行它，导致前端JS无法收到预期的响应，甚至可能因为请求失败没有触发回调，看起来就像“点击没反应”。这是最根本的问题，必须换方案处理表单提交，比如用第三方表单服务，或者把表单提交逻辑放到支持PHP的服务器上。

• 前端JS错误排查
  打开浏览器开发者工具（按F12）的「控制台」面板，查看是否有JS报错：

  • 确认jQuery是否正确加载：如果页面没引入jQuery，$会报错，导致整个表单提交逻辑无法运行。
  • 检查表单选择器是否正确：确保#contactform、#message等元素确实存在，没有拼写错误。
  • 查看$.post请求的状态：在「网络」面板里，找到提交表单时的请求，看返回状态码是404（文件不存在）还是200（返回PHP源码），这能验证第一个问题。

• PHP代码自身的问题（若换环境测试）
  即使把代码放到支持PHP的服务器上，这段代码也有问题：

  • 未定义变量$phone：表单里没有手机号字段，但PHP代码中$e_reply里用了$phone，会导致报错，邮件内容生成失败。
  • mail()函数依赖服务器配置：很多主机默认不配置SMTP，mail()函数会直接失败，需要改用SMTP类（如PHPMailer）发送邮件。
  • 邮件头格式问题：代码里的PHP_EOL和\r\n混用，可能导致邮件头解析错误，影响发送成功率。

• 表单验证逻辑
  前端没有做预验证，虽然PHP里有验证，但如果JS因为请求失败没触发回调，用户看不到错误提示。可以先给表单加前端验证，确认输入合法后再提交，同时在JS的$.post里加错误回调，捕获请求失败的情况并提示用户。

内容的提问来源于stack exchange，提问作者Tavas