求助：将Bootstrap模板中SB Forms联系表单改为SMTP邮件发送

安全阿岳

2026-6-22

问题概述

使用Bootstrap模板搭建网站时，联系表单默认集成了需付费API Token的SB Forms服务，希望替换为通过SMTP发送邮件，已通过Composer安装PHPMailer但未实现功能，现有contact.php代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <meta name="description" content />
        <meta name="author" content />
        <title>McGrew Media - Contact</title>
        <!-- Favicon-->
        <link rel="icon" type="image/x-icon" href="assets/favicon.ico" />
        <!-- Custom Google font-->
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@100;200;300;400;500;600;700;800;900&amp;display=swap" rel="stylesheet" />
        <!-- Bootstrap icons-->
        <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css" rel="stylesheet" />
        <!-- Core theme CSS (includes Bootstrap)-->
        <link href="css/styles.css" rel="stylesheet" />
    </head>
    <body class="d-flex flex-column">
        <main class="flex-shrink-0">
            <!-- Navigation-->
            <nav class="navbar navbar-expand-lg navbar-light bg-black-gradient py-3">
                <div class="container px-5">
                    <a class="navbar-brand" href="index.html"><img src="assets/logo1.png"></a>
                    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                        <ul class="navbar-nav ms-auto mb-2 mb-lg-0 small fw-bolder">
                            <li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
                            <li class="nav-item"><a class="nav-link" href="index.html#about">About Me</a></li>
                            <li class="nav-item"><a class="nav-link" href="index.html#services">Services</a></li>
                            <li class="nav-item"><a class="nav-link" href="resume.html">Resume</a></li>
                           <!-- <li class="nav-item"><a class="nav-link" href="#">Projects</a></li>-->
                            <li class="nav-item"><a class="nav-link" href="contact.html">Contact</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
            <!-- Page content-->
            <section class="py-5">
                <div class="container px-5">
                    <!-- Contact form-->
                    <div class="bg-light rounded-4 py-5 px-4 px-md-5">
                        <div class="text-center mb-5">
                            <div class="feature bg-primary bg-gradient-primary-to-secondary text-white rounded-3 mb-3"><i class="bi bi-envelope"></i></div>
                            <h1 class="fw-bolder">Get in touch</h1>
                            <p class="lead fw-normal text-muted mb-0">Let's work together!</p>
                        </div>
                        <div class="row gx-5 justify-content-center">
                            <div class="col-lg-8 col-xl-6">
                                <!-- * * * * * * * * * * * * * * *-->
                                <!-- * * SB Forms Contact Form * *-->
                                <!-- * * * * * * * * * * * * * * *-->
                                <!-- This form is pre-integrated with SB Forms.-->
                                <!-- To make this form functional, sign up at-->
                                <!-- https://startbootstrap.com/solution/contact-forms-->
                                <!-- to get an API token!-->
                                <form method="POST" id="contactForm" data-sb-form-api-token="API_TOKEN">
                                    <!-- Name input-->
                                    <div class="form-floating mb-3">
                                        <input class="form-control" id="name" type="text" placeholder="Enter your name..." data-sb-validations="required" />
                                        <label for="name">Full name</label>
                                        <div class="invalid-feedback" data-sb-feedback="name:required">A name is required.</div>
                                    </div>
                                    <!-- Email address input-->
                                    <div class="form-floating mb-3">
                                        <input class="form-control" id="email" type="email" placeholder="name@example.com" data-sb-validations="required,email" />
                                        <label for="email">Email address</label>
                                        <div class="invalid-feedback" data-sb-feedback="email:required">An email is required.</div>
                                        <div class="invalid-feedback" data-sb-feedback="email:email">Email is not valid.</div>
                                    </div>
                                    <!-- Phone number input-->
                                    <div class="form-floating mb-3">
                                        <input class="form-control" id="phone" type="tel" placeholder="(123) 456-7890" data-sb-validations="required" />
                                        <label for="phone">Phone number</label>
                                        <div class="invalid-feedback" data-sb-feedback="phone:required">A phone number is required.</div>
                                    </div>
                                    <!-- Message input-->
                                    <div class="form-floating mb-3">
                                        <textarea class="form-control" id="message" type="text" placeholder="Enter your message here..." style="height: 10rem" data-sb-validations="required"></textarea>
                                        <label for="message">Message</label>
                                        <div class="invalid-feedback" data-sb-feedback="message:required">A message is required.</div>
                                    </div>
                                    <!-- Submit success message-->
                                    <!---->
                                    <!-- This is what your users will see when the form-->
                                    <!-- has successfully submitted-->
                                    <div class="d-none" id="submitSuccessMessage">
                                        <div class="text-center mb-3">
                                            <div class="fw-bolder">Form submission successful!</div>
                                            To activate this form, sign up at
                                            <br />
                                            <a href="https://startbootstrap.com/solution/contact-forms">https://startbootstrap.com/solution/contact-forms</a>
                                        </div>
                                    </div>
                                    <!-- Submit error message-->
                                    <!---->
                                    <!-- This is what your users will see when there is-->
                                    <!-- an error submitting the form-->
                                    <div class="d-none" id="submitErrorMessage"><div class="text-center text-danger mb-3">Error sending message!</div></div>
                                    <!-- Submit Button-->
                                    <div class="d-grid"><button class="btn btn-primary btn-lg disabled" id="submitButton" type="submit">Submit</button></div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </section>
        </main>
        <!-- Footer-->
        <footer class="bg-white py-4 mt-auto">
            <div class="container px-5">
                <div class="row align-items-center justify-content-between flex-column flex-sm-row">
                                <div class="text-center my-auto">
                    <div class="col-auto"><div class="small m-0">Copyright &copy; McGrew Media 2024</div></div>
                    
                                <div class="d-flex justify-content-center fs-2 gap-4">
                                    
                                    <a class="text-gradient" href="#!"><i class="bi bi-linkedin"></i></a>
                                    
                    </div>
 
                    <div class="col-auto">
                        <a class="small" href="#!">Privacy</a>
                        <span class="mx-1">&middot;</span>
                        <a class="small" href="#!">Terms</a>
                        <span class="mx-1">&middot;</span>
                        <a class="small" href="#!">Contact</a>
                    </div>
                </div>
            </div>
            
        </footer>
        <!-- Bootstrap core JS-->
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
        <!-- Core theme JS-->
        <script src="js/scripts.js"></script>
        <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
        <!-- * *                               SB Forms JS                               * *-->
        <!-- * * Activate your form at https://startbootstrap.com/solution/contact-forms * *-->
        <!-- * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *-->
        <script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script>
    </body>
</html>

解决方案

步骤1：修改HTML表单，移除SB Forms依赖

替换原表单代码，删除SB Forms相关属性和脚本，添加表单提交目标与元素name属性：

<!-- 替换原表单代码 -->
<form method="POST" id="contactForm" action="send_mail.php">
    <!-- Name input-->
    <div class="form-floating mb-3">
        <input class="form-control" id="name" name="name" type="text" placeholder="Enter your name..." required />
        <label for="name">Full name</label>
        <div class="invalid-feedback">请填写姓名</div>
    </div>
    <!-- Email address input-->
    <div class="form-floating mb-3">
        <input class="form-control" id="email" name="email" type="email" placeholder="name@example.com" required />
        <label for="email">Email address</label>
        <div class="invalid-feedback">请填写有效的邮箱地址</div>
    </div>
    <!-- Phone number input-->
    <div class="form-floating mb-3">
        <input class="form-control" id="phone" name="phone" type="tel" placeholder="(123) 456-7890" required />
        <label for="phone">Phone number</label>
        <div class="invalid-feedback">请填写电话号码</div>
    </div>
    <!-- Message input-->
    <div class="form-floating mb-3">
        <textarea class="form-control" id="message" name="message" type="text" placeholder="Enter your message here..." style="height: 10rem" required></textarea>
        <label for="message">Message</label>
        <div class="invalid-feedback">请填写消息内容</div>
    </div>
    <!-- Submit success message-->
    <div class="d-none" id="submitSuccessMessage">
        <div class="text-center mb-3">
            <div class="fw-bolder">消息发送成功！</div>
            <p class="text-muted">我们会尽快回复您</p>
        </div>
    </div>
    <!-- Submit error message-->
    <div class="d-none" id="submitErrorMessage"><div class="text-center text-danger mb-3">消息发送失败，请稍后重试！</div></div>
    <!-- Submit Button-->
    <div class="d-grid"><button class="btn btn-primary btn-lg" id="submitButton" type="submit">Submit</button></div>
</form>

<!-- 移除SB Forms脚本 -->
<!-- <script src="https://cdn.startbootstrap.com/sb-forms-latest.js"></script> -->

步骤2：创建SMTP邮件处理脚本`send_mail.php`

在网站根目录创建该脚本，配置PHPMailer发送邮件：

<?php
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;

// 引入Composer自动加载文件
require 'vendor/autoload.php';

// 初始化PHPMailer
$mail = new PHPMailer(true);

try {
    // SMTP配置
    $mail->isSMTP();
    $mail->Host       = 'smtp.example.com'; // 替换为你的SMTP服务器地址
    $mail->SMTPAuth   = true;
    $mail->Username   = 'your-email@example.com'; // 发件邮箱账号
    $mail->Password   = 'your-email-password'; // 邮箱密码/应用专用密码
    $mail->SMTPSecure = PHPMailer::ENCRYPTION_SMTPS; // 加密方式：tls或ssl
    $mail->Port       = 465; // SMTP端口：465(ssl)或587(tls)

    // 收件人配置
    $mail->setFrom($_POST['email'], $_POST['name']);
    $mail->addAddress('your-target-email@example.com'); // 接收消息的目标邮箱

    // 邮件内容
    $mail->isHTML(true);
    $mail->Subject = "新的联系表单消息 - {$_POST['name']}";
    $mail->Body    = "
        <h3>来自联系表单的新消息</h3>
        <p><strong>姓名:</strong> {$_POST['name']}</p>
        <p><strong>邮箱:</strong> {$_POST['email']}</p>
        <p><strong>电话:</strong> {$_POST['phone']}</p>
        <p><strong>消息:</strong><br>{$_POST['message']}</p>
    ";
    $mail->AltBody = "
        来自联系表单的新消息
        姓名: {$_POST['name']}
        邮箱: {$_POST['email']}
        电话: {$_POST['phone']}
        消息: {$_POST['message']}
    ";

    $mail->send();
    // 发送成功，跳回表单页面提示
    header("Location: contact.php?success=1");
    exit;
} catch (Exception $e) {
    // 发送失败，跳回表单页面提示
    header("Location: contact.php?error=1");
    exit;
}
?>

步骤3：修改前端JS，处理提交反馈

在js/scripts.js中添加以下代码，根据URL参数显示成功/失败提示：

// 页面加载时检查提交状态
document.addEventListener('DOMContentLoaded', function() {
    const urlParams = new URLSearchParams(window.location.search);
    const success = urlParams.get('success');
    const error = urlParams.get('error');

    if (success) {
        document.getElementById('submitSuccessMessage').classList.remove('d-none');
        document.getElementById('contactForm').reset();
    } else if (error) {
        document.getElementById('submitErrorMessage').classList.remove('d-none');
    }
});

关键注意事项

替换send_mail.php中的SMTP配置为你的实际邮箱服务商参数（如Gmail、服务器自带SMTP）
确保服务器支持PHP，且Composer安装的PHPMailer路径正确（vendor/autoload.php存在）
部分邮箱服务商需开启SMTP权限，或使用应用专用密码（如Gmail两步验证场景）
可添加额外输入验证逻辑，防止恶意提交
开启PHP错误日志，方便排查发送失败问题

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

求助：将Bootstrap模板中SB Forms联系表单改为SMTP邮件发送

步骤1：修改HTML表单，移除SB Forms依赖 #

步骤2：创建SMTP邮件处理脚本send_mail.php #

步骤3：修改前端JS，处理提交反馈 #

关键注意事项 #

步骤1：修改HTML表单，移除SB Forms依赖

步骤2：创建SMTP邮件处理脚本`send_mail.php`

步骤3：修改前端JS，处理提交反馈

关键注意事项