如何在Flask+Bootstrap表单提交后显示成功与错误提示信息？

数据老陈

2026-8-19

问题描述

我用Bootstrap、Python、HTML开发网站，没写CSS（需要的话可以补充）。已经通过smtplib和Flask实现了邮件发送功能，现在想在表单提交后显示成功和错误提示信息，请问该怎么写代码？需要用JavaScript吗，还是只用Flask就能实现？

以下是我的代码：

server.py

from flask import Flask, render_template, request
import smtplib

MY_EMAIL = "your email"
MY_PASSWORD = "your pw"

app = Flask(__name__)

@app.route('/', methods=["GET", "POST"])
def home():
    if request.method == "POST":
        data = request.form
        print(data["name"])
        print(data["email"])
        print(data["phone"])
        print(data["message"])

        with smtplib.SMTP("smtp.gmail.com", port=587) as connection:
            connection.starttls()
            connection.login(user=MY_EMAIL, password=MY_PASSWORD)
            connection.sendmail(
                from_addr=MY_EMAIL,
                to_addrs=MY_EMAIL,
                msg=f"Subject:New Message\n\nName: {data['name']}\nEmail: {data['email']}\nPhone: {data['phone']}\nMessage: {data['message']}"
            )

        return render_template("index.html", msg_sent=True)
    return render_template("index.html", msg_sent=False)

if __name__ == "__main__":
    app.run(debug=True)

index.html 联系表单部分

<!-- Contact-->
<section class="resume-section" id="contact">
    <div class="container">
        <div class="resume-section-content">
            <h2 class="mb-0">Contact Me</h2>
            <div class="subheading mb-5">
            If you are interested in me, I would love to hear it.
            </div>
        </div>
        <form id="contactForm" action="{{ url_for('home') }}" method="post">
            <div class="row align-items-stretch mb-5">
                <div class="col-md-6">
                    <div class="form-group">
                        <!-- Name input-->
                        <input class="form-control" id="name" name="name" type="text" placeholder="Your Name *" data-sb-validations="required" />
                        <div class="invalid-feedback" data-sb-feedback="name:required">A name is required.</div>
                    </div>
                    <div class="form-group">
                        <!-- Email address input-->
                        <input class="form-control" id="email" name="email" type="email" placeholder="Your Email *" data-sb-validations="required,email" />
                        <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>
                    <div class="form-group mb-md-0">
                        <!-- Phone number input-->
                        <input class="form-control" id="phone" name="phone" type="tel" placeholder="Your Phone *" data-sb-validations="required" />
                        <div class="invalid-feedback" data-sb-feedback="phone:required">A phone number is required.</div>
                    </div>
                </div>
                    <div class="col-md-6">
                        <div class="form-group form-group-textarea mb-md-0">
                            <!-- Message input-->
                            <textarea class="form-control" id="message" name="message" placeholder="Your Message *" data-sb-validations="required"></textarea>
                            <div class="invalid-feedback" data-sb-feedback="message:required">A message is required.</div>
                        </div>
                    </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 text-white mb-3">
                    <div class="fw-bolder">Form submission successful!</div>
                </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="text-center">
                <button class="btn btn-primary btn-xl text-uppercase" id="submitButton" type="submit">Send Message</button>
            </div>
        </form>
    </div>
</section>

解决方案

方案一：仅用Flask实现（无需JavaScript）

你的现有代码已经在传递msg_sent参数，但缺少错误捕获和提示显示逻辑，修改如下：

1. 更新server.py（添加异常捕获）

from flask import Flask, render_template, request
import smtplib
from smtplib import SMTPException

MY_EMAIL = "your email"
MY_PASSWORD = "your pw"

app = Flask(__name__)

@app.route('/', methods=["GET", "POST"])
def home():
    msg_sent = False
    send_error = False
    if request.method == "POST":
        data = request.form
        try:
            with smtplib.SMTP("smtp.gmail.com", port=587) as connection:
                connection.starttls()
                connection.login(user=MY_EMAIL, password=MY_PASSWORD)
                connection.sendmail(
                    from_addr=MY_EMAIL,
                    to_addrs=MY_EMAIL,
                    msg=f"Subject:New Message\n\nName: {data['name']}\nEmail: {data['email']}\nPhone: {data['phone']}\nMessage: {data['message']}"
                )
            msg_sent = True
        except SMTPException as e:
            print(f"邮件发送失败: {e}")
            send_error = True
    return render_template("index.html", msg_sent=msg_sent, send_error=send_error)

if __name__ == "__main__":
    app.run(debug=True)

2. 修改index.html（动态显示提示）

替换原有的固定提示框，用Jinja2模板变量控制显示：

<!-- 替换原成功/错误提示框 -->
{% if msg_sent %}
<div class="text-center text-success mb-3">
    <div class="fw-bolder">表单提交成功！已收到你的消息</div>
</div>
{% endif %}

{% if send_error %}
<div class="text-center text-danger mb-3">
    <div class="fw-bolder">发送失败，请稍后重试或检查邮箱配置</div>
</div>
{% endif %}

如果想保留原有ID结构，也可以修改类名：

<div class="{{ 'd-block' if msg_sent else 'd-none' }}" id="submitSuccessMessage">
    <div class="text-center text-success mb-3">
        <div class="fw-bolder">表单提交成功！已收到你的消息</div>
    </div>
</div>
<div class="{{ 'd-block' if send_error else 'd-none' }}" id="submitErrorMessage">
    <div class="text-center text-danger mb-3">
        <div class="fw-bolder">发送失败，请稍后重试</div>
    </div>
</div>

可选：成功提交后清空表单

{% if msg_sent %}
<script>
    document.getElementById('contactForm').reset();
</script>
{% endif %}

方案二：用JavaScript实现无刷新提交（提升体验）

如果不想页面刷新，用AJAX提交表单：

1. 更新server.py（返回JSON响应）

from flask import Flask, render_template, request, jsonify
import smtplib
from smtplib import SMTPException

MY_EMAIL = "your email"
MY_PASSWORD = "your pw"

app = Flask(__name__)

@app.route('/', methods=["GET"])
def home():
    return render_template("index.html")

@app.route('/send-email', methods=["POST"])
def send_email():
    if request.method == "POST":
        data = request.form
        try:
            with smtplib.SMTP("smtp.gmail.com", port=587) as connection:
                connection.starttls()
                connection.login(user=MY_EMAIL, password=MY_PASSWORD)
                connection.sendmail(
                    from_addr=MY_EMAIL,
                    to_addrs=MY_EMAIL,
                    msg=f"Subject:New Message\n\nName: {data['name']}\nEmail: {data['email']}\nPhone: {data['phone']}\nMessage: {data['message']}"
                )
            return jsonify({"status": "success"})
        except SMTPException as e:
            print(f"邮件发送失败: {e}")
            return jsonify({"status": "error", "message": str(e)}), 500

2. 修改index.html（添加AJAX逻辑）

<!-- 表单去掉action和method，保留原内容 -->
<form id="contactForm">
    <!-- 原表单内容不变 -->
</form>

<script>
document.getElementById('contactForm').addEventListener('submit', function(e) {
    e.preventDefault(); // 阻止默认页面刷新提交

    const formData = new FormData(this);
    const submitBtn = document.getElementById('submitButton');
    const successMsg = document.getElementById('submitSuccessMessage');
    const errorMsg = document.getElementById('submitErrorMessage');

    // 禁用按钮防止重复提交
    submitBtn.disabled = true;
    submitBtn.textContent = '发送中...';

    // 隐藏之前的提示
    successMsg.classList.add('d-none');
    errorMsg.classList.add('d-none');

    fetch('/send-email', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.status === 'success') {
            successMsg.classList.remove('d-none');
            document.getElementById('contactForm').reset(); // 清空表单
        } else {
            errorMsg.classList.remove('d-none');
        }
        // 恢复按钮状态
        submitBtn.disabled = false;
        submitBtn.textContent = 'Send Message';
    })
    .catch(error => {
        errorMsg.classList.remove('d-none');
        submitBtn.disabled = false;
        submitBtn.textContent = 'Send Message';
    });
});
</script>

注意事项

用Gmail的话，建议使用应用专用密码（需开启两步验证），不要开启低安全性应用访问
前端可保留Bootstrap原生表单验证，确保必填项已填写
生产环境关闭Flask的debug=True，并配置正确的邮件服务器参数

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

如何在Flask+Bootstrap表单提交后显示成功与错误提示信息？

server.py #

index.html 联系表单部分 #

方案一：仅用Flask实现（无需JavaScript） #