Building a feedback form application using Flask is a super-effective way to gather user feedback and boost services. Let’s dive into creating a sleek feedback form web app with email integration to collect and respond to user feedback like a pro.
First things first, set up your Flask environment. Get Flask ready with pip:
pip install flask
Now, create a fresh new file named app.py and kickstart your Flask app:
from flask import Flask, render_template, request, redirect, flash, url_for
app = Flask(__name__)
app.secret_key = 'your_secret_key_here'
With this, you’re creating a new Flask application instance and setting a secret key for managing sessions and other security tricks.
Next, create a folder named templates and drop a feedback.html file in there. This file will hold the HTML for your feedback form:
<!DOCTYPE html>
<html>
<head>
<title>Feedback Form</title>
</head>
<body>
<h1>Provide Your Feedback</h1>
<form method="POST">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name" required><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br>
<label for="feedback">Feedback:</label><br>
<textarea id="feedback" name="feedback" required></textarea><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
You got fields for the user’s name, email, and feedback right up there.
To handle form data and send emails, create a feedback form submission route. You’ll need Flask-Mail for mailing. Get it setup with:
pip install flask-mail
Configure Flask-Mail in your app.py file like so:
from flask_mail import Mail, Message
app.config['MAIL_SERVER'] = 'your_mail_server'
app.config['MAIL_PORT'] = 587
app.config['MAIL_USE_TLS'] = True
app.config['MAIL_USERNAME'] = 'your_email'
app.config['MAIL_PASSWORD'] = 'your_password'
mail = Mail(app)
Make sure to replace the placeholders with your actual email server details.
Next, handle the form submission and send an email by creating this route:
@app.route('/feedback', methods=['GET', 'POST'])
def feedback():
if request.method == 'POST':
name = request.form['name']
email = request.form['email']
feedback = request.form['feedback']
msg = Message(f"Feedback from {name}", sender=email, recipients=['your_email'])
msg.body = feedback
mail.send(msg)
flash('Thank you for your feedback!')
return redirect('/feedback')
return render_template('feedback.html')
This checks if the request is POST, grabs the form data, sends an email, and redirects back to the feedback page with a thank-you message.
To make sure the form data is actually valid before doing anything with it, use WTForms. Install it with:
pip install wtforms
Then, create a form class using WTForms:
from wtforms import Form, StringField, TextAreaField, validators
class FeedbackForm(Form):
name = StringField('Name', [validators.Length(min=2, max=50)])
email = StringField('Email', [validators.Email()])
feedback = TextAreaField('Feedback', [validators.Length(min=10)])
Update your route to use this validation class:
@app.route('/feedback', methods=['GET', 'POST'])
def feedback():
form = FeedbackForm(request.form)
if request.method == 'POST' and form.validate():
name = form.name.data
email = form.email.data
feedback = form.feedback.data
msg = Message(f"Feedback from {name}", sender=email, recipients=['your_email'])
msg.body = feedback
mail.send(msg)
flash('Thank you for your feedback!')
return redirect('/feedback')
return render_template('feedback.html', form=form)
This ensures you’re validating that form data before sending off any emails.
Client-side validation gives users immediate feedback. Use HTML5 validation attributes and a sprinkle of JavaScript for this:
<form id="feedbackForm" method="POST" onsubmit="return validateForm()">
<label for="name">Name:</label><br>
<input type="text" id="name" name="name" required minlength="2" maxlength="50"><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br>
<label for="feedback">Feedback:</label><br>
<textarea id="feedback" name="feedback" required minlength="10"></textarea><br>
<input type="submit" value="Submit">
</form>
<script>
function validateForm() {
var name = document.getElementById('name').value;
var email = document.getElementById('email').value;
var feedback = document.getElementById('feedback').value;
if (name.length < 2 || name.length > 50) {
alert('Name must be between 2 and 50 characters.');
return false;
}
var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(email)) {
alert('Invalid email address.');
return false;
}
if (feedback.length < 10) {
alert('Feedback must be at least 10 characters long.');
return false;
}
return true;
}
</script>
This script checks the form fields before submitting, giving the user a heads-up if anything’s off.
To run your shiny new application, just use:
flask run
Hop over to http://localhost:5000/feedback in your browser to see your feedback form in action.
All in all, building a feedback form application with Flask and email integration is a smooth ride. By utilizing WTForms for validation and Flask-Mail for sending emails, plus adding client-side validation for instant feedback, you’ve got yourself a solid, user-friendly feedback system. This will help you gather and respond to user input efficiently, enabling you to tweak and improve your services based on real user experiences.