GitHub Pages中使用formsubmit.co提交表单遇404错误求助

问题根源分析 #

1. Formsubmit目标地址错误：表单action属性填写的https://formsubmit.co/el/kenigo并非合法的formsubmit端点。formsubmit标准用法是在action中填写接收邮件的邮箱地址或官网生成的专属端点，错误地址会导致请求失败，跳转至GitHub 404页面。
2. 未完成邮箱验证：formsubmit要求首次使用前必须访问目标邮箱对应的formsubmit地址完成验证，未验证则无法发送邮件。
3. 表单字段名含空格：name="type of work"这类带空格的字段名，可能导致formsubmit解析数据时出错，影响邮件发送。
4. 重复资源引入：页面多次重复引入Bootstrap、Font Awesome的CSS/JS文件，虽不直接导致表单问题，但可能引发样式冲突或加载异常。

修复步骤 #

1. 修正Formsubmit Action地址
   将表单action改为你的接收邮箱地址，示例：

   <form action="https://formsubmit.co/你的实际邮箱@域名.com" method="POST">
   

   随后在浏览器打开该地址完成邮箱验证，这是邮件发送成功的必要前提。

2. 规范表单字段名
   将带空格的name属性改为下划线连接格式，示例：

   <!-- 原字段 -->
   <select name="type of work" required>
   <!-- 修改后 -->
   <select name="type_of_work" required>
   
   <!-- 原字段 -->
   <textarea name="problem description" required></textarea>
   <!-- 修改后 -->
   <textarea name="problem_description" required></textarea>
   

3. 清理重复资源
   保留一套Bootstrap 5资源和一套Font Awesome引入，删除重复链接，示例：

   <!-- 仅保留最新Bootstrap 5资源 -->
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
   <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
   
   <!-- 仅保留一套Font Awesome -->
   <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.4.0/css/all.css">
   

修正后的完整表单代码示例 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Submit Ticket | </title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@100;400;700&display=swap" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://site-assets.fontawesome.com/releases/v6.4.0/css/all.css">
    <link rel="stylesheet" href="./css/index.css" />
    <link rel="stylesheet" href="./css/contact.css" />
    <link rel="stylesheet" href="./css/ticket-form.css">
    <link rel="icon" type="image/x-icon" href="/Bootstrap-project/images/favicon-32x32.png">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
  <!-- TICKET RQUEST FORM START -->
  <div class="container mt-5 mb-5" id="container-background">
    <h1 class="mb-4">Submit A Ticket</h1>
    <!-- 替换为你的实际邮箱地址 -->
    <form action="https://formsubmit.co/你的实际邮箱@域名.com" method="POST">
        <div class="mb-3">
            <label for="Name" class="form-label">Full Name</label>
            <input type="text" class="form-control" placeholder="Your Full Name" name="name" aria-describedby="emailHelp" required>
        </div>
        <div class="mb-3">
            <label for="Email" class="form-label">Email Address</label>
            <input type="email" class="form-control" placeholder="Your Email Address" name="email" aria-describedby="emailHelp" required>
        </div>
        <div class="mb-3">
            <label for="Number" class="form-label">Phone Number</label>
            <input type="tel" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" class="form-control" placeholder="Your Phone Number" maxlength="12" name="tel" aria-describedby="emailHelp" id="tel" required>
        </div>
        <div class="mb-3">
            <label for="Message" class="form-label">Type of Work</label>
            <select class="form-select select-control" data-width="auto" aria-placeholder="" name="type_of_work" required>
                <option selected>Select A Category</option>
                <option value="CCTV / Alarm Systems">CCTV / Alarm Systems</option>
                <option value="Desktop/Laptop">Desktop/Laptop</option>
                <option value="Fiber Cabling">Fiber Cabling</option>
                <option value="General Tasks">General Tasks</option>
                <option value="Kiosk">Kiosk</option>
                <option value="Low Voltage Cabling">Low Voltage Cabling</option>
                <option value="Networking">Networking</option>
                <option value="Point of Sale (POS)">Point of Sale (POS)</option>
                <option value="Printer">Printer</option>
                <option value="Pro A/V, Digital Signage">Pro A/V, Digital Signage</option>
                <option value="Project management">Project management</option>
                <option value="Server Hardware/Software">Server Hardware/Software</option>
                <option value="Software Development">Software Development</option>
                <option value="Structured Cabling">Structured Cabling</option>
                <option value="Telecom / VOIP">Telecom / VOIP</option>
                <option value="Other">Other</option>
              </select>
        </div>
        <div class="mb-3">
            <label for="Message" class="form-label">Description of the Problem</label>
            <textarea type="text" class="form-control" placeholder="Describe the problem clearly. (What is the problem, when the problem started, where did the problem begin, etc. )" name="problem_description" required></textarea>
        </div>
        <div class="mb-3">
            <label for="Message" class="form-label">Required Materials/Equipment</label>
            <textarea type="text" class="form-control" placeholder="What equipment or materials are required to resolve the issue?" name="needed_materials" required></textarea>
        </div>
        <input type="hidden" name="_next" value="https://patriotsforlife.github.io/Bootstrap-project/thank-you.html">
        <!-- <input type="hidden" name="_captcha" value="false"> -->
        <input type="hidden" name="_subject" value="New Ticket Request Submission!">
        <button type="submit" class="btn btn-primary mb-3" id="submit-button">Submit</button>
        </form>
        <script>
            var tele = document.querySelector('#tel');

tele.addEventListener('keyup', function(e){
  if (event.key != 'Backspace' && (tele.value.length === 3 || tele.value.length === 7)){
  tele.value += '-';
  }
});
        </script>
  </div>
  <!-- TICKET RQUEST FORM CLOSE -->
</body>
</html>

验证步骤 #

1. 替换action中的邮箱地址后，在浏览器打开该formsubmit链接完成邮箱验证。
2. 测试表单提交，此时应能正常收到邮件并跳转到自定义感谢页。

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