Introduction

Adding a contact form to your website is an essential way for visitors to get in touch with you. In this guide, we'll explore how to add a contact form to your Flask website, a Python web framework. You'll learn how to create a simple contact form, handle form submissions, and send email notifications when users submit the form. By following this guide, you'll be able to enhance user engagement and communication on your website.


Step 1: Setting Up Your Flask Application

Start by setting up your Flask application and creating a directory structure. Here's a sample structure:

contact-form-website/
    app.py
    templates/
        index.html
        contact.html

Step 2: Creating the Contact Form

Create a Flask application for the contact form. Here's an example of the Python code:

# app.py
from flask import Flask, render_template, request, redirect, flash
from flask_mail import Mail, Message
app = Flask(__name)
app.config['MAIL_SERVER'] = 'smtp.example.com'
app.config['MAIL_PORT'] = 587
app.config['MAIL_USE_TLS'] = True
app.config['MAIL_USE_SSL'] = False
app.config['MAIL_USERNAME'] = 'your_email@example.com'
app.config['MAIL_PASSWORD'] = 'your_password'
mail = Mail(app)
@app.route('/')
def index():
    return render_template('index.html')
@app.route('/contact', methods=['GET', 'POST'])
def contact():
    if request.method == 'POST':
        name = request.form['name']
        email = request.form['email']
        message = request.form['message']
        msg = Message('Contact Form Submission', sender='your_email@example.com', recipients=['your_email@example.com'])
        msg.body = f'Name: {name}\nEmail: {email}\nMessage: {message}'
        try:
            mail.send(msg)
            flash('Message sent successfully!', 'success')
        except Exception:
            flash('Message sending failed. Please try again later.', 'danger')
    return render_template('contact.html')
if __name__ == '__main__':
    app.run(debug=True)

Step 3: Creating HTML Templates

Create HTML templates for the contact form and the home page. Here's an example:

<!-- templates/index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Contact Us</title>
</head>
<body>
    <header>
        <h1>Contact Us</h1>
    </header>
    <section>
        <p>Have questions or feedback? Feel free to contact us!</p>
        <a href="/contact">Contact Form</a>
    </section>
</body>
</html>
        
<!-- templates/contact.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Contact Form</title>
</head>
<body>
    <header>
        <h1>Contact Us</h1>
    </header>
    <section>
        <h2>Contact Form</h2>
        <form method="POST" action="/contact">
            <label for="name">Name:</label>
            <input type="text" id="name" name="name" required>
            <label for="email">Email:</label>
            <input type="email" id="email" name="email" required>
            <label for="message">Message:</label>
            <textarea id="message" name="message" rows="4" required></textarea>
            <button type="submit">Submit</button>
        </form>
    </section>
</body>
</html>

Step 4: Running Your Website with a Contact Form

Run your Flask website with the contact form using the following command:

python app.py

Access your website in a web browser and use the contact form to send messages. You should receive email notifications when users submit the form.


Conclusion

Adding a contact form to your Flask website is an effective way to encourage user interaction and feedback. By following the steps in this guide, you can create a simple contact form, handle form submissions, and send email notifications. This project serves as a foundation for more advanced contact forms with additional features like captcha, user accounts, and customized email templates.