how to display success message after form submit in html

Question

Here is my code using bootstrap/python/html i didn't post css part if you need it I will post it this part. I can send an email using smtplib and flask, and I want to display success and error message after form submit. how to write code? do I need to write JavaScript or can I keep using flask to show a message?

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 part

    <!-- 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>

Answer 1

You can use blocks to show content based on conditions. So use that message_sent variable inside the template to display success or failure. The block content can be something like below. This can be placed in the html file:

{% block content %}
   {% if msg_sent %}
      <div>blah blah blah blah</div>
   {% else %}
      <div>NONONONO</div>
   {% endif %}
{% endblock content %}