Web forms allow users to submit information such as login credentials, contact details, and feedback to a web application. In Flask, HTML forms are commonly used with the request object to retrieve submitted data and process it on the server. This article demonstrates how to create a web form and handle form submissions in a Flask application.
Prerequisites
- Flask
- IDE such as VS Code or PyCharm
- knowledge of Python and HTML
Steps to Use Web Forms in a Flask Application
- Create the project structure.
- Design the HTML form.
- Create the Flask application.
- Read the submitted form data.
- Run the application.
- Submit the form and view the output.
File Structure:
This is the File structure after we complete our project:
Create an HTML Form Using Bootstrap
The first step is to create an HTML page that contains the form. This form will collect information from the user and send it to the Flask application when the Submit button is clicked. Bootstrap 5 is used to quickly create a responsive and visually appealing form without writing custom CSS. Bootstrap provides pre-built components and utility classes that simplify the process of designing forms.
Create a file named index.html inside the templates folder and add the following code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flask Web Form</title>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
rel="stylesheet">
</head>
<body class="bg-light">
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card shadow">
<div class="card-body">
<h2 class="text-center mb-4">User Registration Form</h2>
<form action="{{ url_for('read_form') }}" method="POST">
<!-- Email -->
<div class="mb-3">
<label for="email" class="form-label">Email Address</label>
<input
type="email"
class="form-control"
id="email"
name="userEmail"
placeholder="Enter your email"
required>
</div>
<!-- Password -->
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<input
type="password"
class="form-control"
id="password"
name="userPassword"
placeholder="Enter your password"
minlength="6"
required>
</div>
<!-- Contact -->
<div class="mb-3">
<label for="contact" class="form-label">Contact Number</label>
<input
type="tel"
class="form-control"
id="contact"
name="userContact"
placeholder="Enter your contact number"
required>
</div>
<!-- Gender -->
<label class="form-label">Gender</label>
<div class="form-check">
<input
class="form-check-input"
type="radio"
name="gender"
id="male"
value="Male"
checked>
<label class="form-check-label" for="male">
Male
</label>
</div>
<div class="form-check mb-3">
<input
class="form-check-input"
type="radio"
name="gender"
id="female"
value="Female">
<label class="form-check-label" for="female">
Female
</label>
</div>
<!-- Newsletter -->
<div class="form-check form-switch mb-4">
<input
class="form-check-input"
type="checkbox"
id="newsletter"
name="newsletter"
value="Yes">
<label class="form-check-label" for="newsletter">
Subscribe to Newsletter
</label>
</div>
<button
type="submit"
class="btn btn-primary w-100">
Submit
</button>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Flask Application to Process Form Data
After creating the HTML form, the next step is to build the Flask application that serves the form and processes the submitted data.
In this application, we will create two routes:
- The home route (/) displays the HTML form.
- The /read-form route receives the submitted form data, extracts the values using request.form, and returns the submitted information.
Create a file named app.py in the project directory and add the following code.
from flask import Flask, render_template, request
# Create a Flask application instance
app = Flask(__name__)
# Route to display the HTML form
@app.route("/", methods=["GET"])
def index():
return render_template("index.html")
# Route to process the submitted form
@app.route("/read-form", methods=["POST"])
def read_form():
# Retrieve form data
email = request.form.get("userEmail")
password = request.form.get("userPassword")
contact = request.form.get("userContact")
gender = request.form.get("gender")
# Check whether the newsletter checkbox was selected
newsletter = "Yes" if request.form.get("newsletter") else "No"
# Return the submitted data
return {
"email": email,
"contact": contact,
"gender": gender,
"newsletter": newsletter,
"message": "Form submitted successfully!"
}
# Run the application
if __name__ == "__main__":
app.run(debug=True)
Explanation:
- Define the root (/) route to render and display the index.html form template.
- Create the /read-form route to handle POST requests when the form is submitted.
- Retrieve the submitted form values using request.form.get(), where each key matches the corresponding HTML input's name attribute.
- Check whether the newsletter checkbox is selected and assign "Yes" or "No" accordingly.
- Return the extracted form data as a JSON response to display the submitted information.
- Run the Flask development server using app.run(debug=True), which enables debug mode for easier development and testing.
Run the Flask application
After creating the HTML form and the Flask application, the next step is to run the development server and test the form. Open a terminal in the project directory and execute the following command:
python app.py
Now, open your web browser and navigate to:
http://127.0.0.1:5000/
The user registration form created in the previous section will be displayed. Enter the required details, select the desired options, and click the Submit button to send the form data to the Flask application.
Submit the Flasks Form and view the Data Entered
When finished, click the submit button. You should be able to view the following output after a successful answer. Please be aware that while I utilized a JSON beautifier plugin in my browser, the final product may not look exactly the same in your browser.
Output:
