hackersandslackers / flask-wtform-tutorial

📝😎 Tutorial to implement forms in your Flask app.

Flask-WTF Tutorial

Handle user input in your Flask app by creating forms with the Flask-WTForm library.

• Tutorial: https://hackersandslackers.com/flask-wtforms-forms/
• Demo: https://flaskwtf.hackersandslackers.app/

Getting Started

Get set up locally:

Installation

Get up and running with make deploy:

git clone https://github.com/hackersandslackers/flask-wtform-tutorial.git
cd flask-wtform-tutorial
make deploy

Environment Variables

Replace the values in .env.example with your values and rename this file to .env:

• SECRET_KEY: Randomly generated string of characters used to encrypt your app's data.
• FLASK_DEBUG: Whether to run Flask in "debug" mode (either True or False).

Remember never to commit secrets saved in .env files to Github.

---

Hackers and Slackers tutorials are free of charge. If you found this tutorial helpful, a small donation would be greatly appreciated to keep us in business. All proceeds go towards coffee, and all coffee goes towards more content.

flask-wtform-tutorial's Issues

requirement Flask-WTF-Tutorial==0.0.1 not found

Hello and thanks for the tutorial!

Running "pip3 install -r requirements.txt" on ubuntu 18 gets me the following. Any suggestions on how to resolve this would be most appreciated!!

File "/home/bgf/flask-wtform-tutorial/myenv/share/python-wheels/requests-2.18.4-py2.py3-none-any.whl/requests/models.py", line 935, in raise_for_status raise HTTPError(http_error_msg, response=self) requests.exceptions.HTTPError: 404 Client Error: Not Found for url: https://pypi.org/simple/flask-wtf-tutorial/****

Method not allowed when trying contact or signup - "POST / HTTP/1.1" 405

Hello, thanks for the tutorial.
When trying the example, testing it using make deploy, i'm getting a "POST / HTTP/1.1" 405 - so when I submit the form, i get an url with "Method Not Allowed".
I really don't understand why i'm getting this error but i'm just learning flask and Flask-WTF.
All the dependencies are installed and i'm not getting any other errors or warnings. Any thoughts?

main.py

There is no main.py file

Styling in Form - caret-down icon outside box

Hi,

I am doing this tutorial and for some reason, the caret-down icon from Font Awesome is getting outside the title select box. How you are achieving that in your flash demo on the web page?. Checking the CSS code I don't see any pseudo-selector (::before or ::after) or other code that allows this font awesome icon to be positioned where is wanted. Would appreciate your help.

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update dependency jinja2 to v3.1.4 [SECURITY]
• Update dependency werkzeug to v3.0.3 [SECURITY]
• Update dependency black to v24.4.2
• Update dependency black to v24.4.2
• Update dependency platformdirs to v4.2.1
• Update dependency blinker to v1.8.2
• Update dependency pytest to v8.2.0
• Update dependency pytest to v8.2.0
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

pep621

pyproject.toml

• poetry-core >=1.5.0

pip_requirements

requirements.txt

• black ==24.4.0
• blinker ==1.7.0
• click ==8.1.7
• colorama ==0.4.6
• dnspython ==2.6.1
• email-validator ==2.1.1
• exceptiongroup ==1.2.1
• flake8 ==7.0.0
• flask-wtf ==1.2.1
• flask ==3.0.3
• gunicorn ==22.0.0
• idna ==3.7
• iniconfig ==2.0.0
• isort ==5.13.2
• itsdangerous ==2.2.0
• jinja2 ==3.1.3
• markupsafe ==2.1.5
• mccabe ==0.7.0
• mypy-extensions ==1.0.0
• packaging ==24.0
• pathspec ==0.12.1
• platformdirs ==4.2.0
• pluggy ==1.5.0
• pycodestyle ==2.11.1
• pyflakes ==3.2.0
• pytest ==8.1.1
• python-dotenv ==1.0.1
• tomli ==2.0.1
• typing-extensions ==4.11.0
• werkzeug ==3.0.2
• wtforms ==3.1.2

poetry

pyproject.toml

• python >=3.10,<4.0
• flask *
• flask-wtf *
• python-dotenv *
• email_validator *
• pytest *
• black *
• isort *
• flake8 *
• gunicorn *

---

• Check this box to trigger a request for Renovate to run again on this repository

Privacy Error

The following error occurs whenever I try to access the demo.

Q: Changes right or wrong? (What it took to make this example work on a fresh Ubuntu 20 install)

This example is a great resource. However I have had some trouble getting it functional on a fresh ubuntu 20 desktop install with python version 3.8.2 and Flask-WTF version 0.14.3.

Included are the changes that made it work. I'd be interested to know if they are needed or if I missed something in following the instructions.

Below find a git diff, information on the python environment, and the commands that made the environment run the Flask server.

$ git diff
diff --git a/application/forms.py b/application/forms.py
index f8440b1..19f1c4b 100644
--- a/application/forms.py
+++ b/application/forms.py
@@ -11,7 +11,7 @@ from wtforms.validators import (DataRequired,
                                 EqualTo,
                                 Length,
                                 URL)
-
+from datetime import date
 
 class ContactForm(FlaskForm):
     """Contact form."""
@@ -37,7 +37,7 @@ class SignupForm(FlaskForm):
         DataRequired(message="Please enter a password."),
     ])
     confirmPassword = PasswordField('Repeat Password', [
-            EqualTo(password, message='Passwords must match.')
+            EqualTo('password', message='Passwords must match.')
             ])
     title = SelectField('Title', [DataRequired()],
                         choices=[('Farmer', 'farmer'),
@@ -47,6 +47,8 @@ class SignupForm(FlaskForm):
                                  ('Lonely Guy At A Diner', 'lonely'),
                                  ('Pokemon Trainer', 'pokemon')])
     website = StringField('Website', validators=[URL()])
-    birthday = DateField('Your Birthday')
-    recaptcha = RecaptchaField()
+    birthday = DateField('Your Birthday', 
+                         [DataRequired(message="Please enter your birthday")],
+                         default=date.today )
+    #recaptcha = RecaptchaField()
     submit = SubmitField('Submit')
diff --git a/application/templates/contact.jinja2 b/application/templates/contact.jinja2
index 7be8188..db9e3d1 100644
--- a/application/templates/contact.jinja2
+++ b/application/templates/contact.jinja2
@@ -7,7 +7,8 @@
 {% block content %}
 <div class="formwrapper">
   <h2 class="title">Contact</h2>
-  <form method="POST" action="/">
+  <form method="POST" action="">
+    {{ form.csrf_token }}
     <div class="form-field">{{ form.name.label }} {{ form.name(size=20) }}
       {% if form.name.errors %}
         <ul class="errors">
diff --git a/application/templates/signup.jinja2 b/application/templates/signup.jinja2
index fb41b21..09d7513 100644
--- a/application/templates/signup.jinja2
+++ b/application/templates/signup.jinja2
@@ -7,7 +7,7 @@
 {% block content %}
 <div class="formwrapper">
   <h2 class="title">Sign Up</h2>
-  <form method="POST" action="/">
+  <form method="POST" action="">
       {{ form.csrf_token }}
       <div class="form-field">{{ form.email.label }} {{ form.email }}
         {% if form.email.errors %}
diff --git a/config.py b/config.py
index 30fd52a..207879f 100644
--- a/config.py
+++ b/config.py
@@ -1,5 +1,5 @@
 """App configuration."""
-from os import environ, path
+from os import environ, path, urandom
 from dotenv import load_dotenv
 
 basedir = path.abspath(path.dirname(__file__))
@@ -10,7 +10,7 @@ class Config:
     """Set Flask configuration vars from .env file."""
 
     # General Config
-    SECRET_KEY = environ.get('SECRET_KEY')
+    SECRET_KEY = environ.get('SECRET_KEY', urandom(32))
     FLASK_APP = environ.get('FLASK_APP')
     FLASK_ENV = environ.get('FLASK_ENV')

$ pip list
Package         Version   
--------------- ----------
appdirs         1.4.3     
CacheControl    0.12.6    
certifi         2019.11.28
chardet         3.0.4     
click           7.1.2     
colorama        0.4.3     
contextlib2     0.6.0     
distlib         0.3.0     
distro          1.4.0     
dnspython       1.16.0    
email-validator 1.1.1     
Flask           1.1.2     
Flask-WTF       0.14.3    
html5lib        1.0.1     
idna            2.9       
ipaddr          2.2.0     
itsdangerous    1.1.0     
Jinja2          2.11.2    
lockfile        0.12.2    
MarkupSafe      1.1.1     
msgpack         0.6.2     
packaging       20.3      
pep517          0.8.2     
pip             20.0.2    
pkg-resources   0.0.0     
progress        1.5       
pyparsing       2.4.6     
python-dotenv   0.13.0    
pytoml          0.1.21    
requests        2.22.0    
retrying        1.3.3     
setuptools      44.0.0    
six             1.14.0    
urllib3         1.25.8    
webencodings    0.5.1     
Werkzeug        1.0.1     
wheel           0.34.2    
WTForms         2.3.1     

$ uname -a
Linux U20D 5.4.0-37-generic #41-Ubuntu SMP Wed Jun 3 18:57:02 UTC 2020 x86_64 x86_64 x86_64 GNU/Linux
$ python3 -V
Python 3.8.2
<snip>
$ git clone https://github.com/hackersandslackers/flask-wtform-tutorial.git
$ cd flask-wtform-tutorial/
$ sudo apt install pipenv
$ pipenv --python /usr/bin/python3
$ pipenv shell
$ pipenv update
$ flask run

Action Required: Fix Renovate Configuration

There is an error with this repository's Renovate configuration that needs to be fixed. As a precaution, Renovate will stop PRs until it is resolved.

Error type: undefined. Note: this is a nested preset so please contact the preset author if you are unable to fix it yourself.

Method not allowed when running example

When submitting the contact form, an error 405 "Method not allowed" error is returned.

In ´contact.html´ line 10:
<form method="POST" action="/">
I thing should have the '/' deleted, so the line is

<form method="POST" action="">
{{ form.csrf_token }}

Because it redirects to index.html, which does not accept POST, and the route should lead to success.html any way.

However that gives an odd result when submitting:
Redirecting... You should be redirected automatically to target URL: /success. If not click the link.

How to get rid of the <h1>Redirecting...</h1> message and go directly to success.html?

Dependabot couldn't authenticate with https://pypi.org/simple/

Dependabot couldn't authenticate with https://pypi.org/simple/.

You can provide authentication details in your Dependabot dashboard by clicking into the account menu (in the top right) and selecting 'Config variables'.

View the update logs.