Mike
Posted on March 6, 2020
It's just not working
So my website has a contact form. On that form I have a ReCaptcha implemented with flask-wtf ReCaptcha.
When I fill out the ReCaptcha it runs and I get the msg "Sending email to {email address} but then it just redirects and flash's the message that it's sending emails but never actually sends them. It's like it skips the mail.send(msg) line. I've done it with both TESTING=True and TESTING=False. With TESTING=Flase I get the error on the form that says "The response parameter is missing" Where's it missing from? because I went through the validation process.
EDIT: It should be noted that I can remove the ReCaptcha and it works fine.
Here's the 3 files that are in play.
The Route
# Routes.py
@bp.route('/', methods=['GET', 'POST'])
def contact():
form = ContactForm()
name = form.name.data
email = form.email.data
message = form.message.data
# Test output so I can see what's going on
print(f'Request method: {request.method}')
print(f'Validation: {form.validate_on_submit()}')
print(f'Recaptcha: {form.recaptcha}')
# End test output
if form.validate_on_submit():
msg = Message(
subject=f"New message from {name}",
sender=form.email.data,
recipients=['michael.e.case@gmail.com'],
html=f"""
From: <a href="mailto://{email}">{name}</a><br>
Message: {message}
"""
)
print(f'Sending email to {msg.recipients[0]}') # more test output
mail.send(msg) # Seems to skip this line of code.
flash('Sending your message...')
return redirect(url_for('blog_bp.home'))
return render_template(
'contact_form/contact_form.jinja2', form=form)
The form
# contact_form.jinja2
{% extends "layout/layout.html" %}
{% block content %}
<div class="container">
<form action="" method="POST">
{{ form.csrf_token() }}
<div class="form-group row">
<div class="col">
<label for="">Name</label>
{{ form.name(class='form-control', placeholder='Please enter your name') }}
<small id="helpId" class="text-muted">Please enter your name</small>
</div>
<div class="col">
<label for="">Email Address</label>
{{ form.email(class='form-control', placeholder='your@email.com') }}
<small id="helpId" class="text-muted">Enter your email address</small>
</div>
</div>
<div class="form-group row">
<div class="col">
<label for="">Your message</label>
{{ form.message(class='form-control', rows='15') }}
</div>
</div>
<div class="form-group row">
<div class="col">
{{ form.recaptcha }}
{% for error in form.recaptcha.errors %}
<ul>
<li>{{ error }}</li>
{% endfor %}
</ul>
</div>
<div class="col">
{{ form.submit(class='btn btn-primary') }}
</div>
</div>
</form>
</div>
{% endblock content %}
The model
# forms.py
from flask_wtf import FlaskForm
from flask_wtf.recaptcha import RecaptchaField
from wtforms import StringField, TextAreaField, SubmitField
from wtforms.validators import Email, InputRequired
email_err_msg = "Invalid E-mail Address"
input_err_msg = "This field is required."
class ContactForm(FlaskForm):
name = StringField('Name', validators=[InputRequired(input_err_msg)])
email = StringField(
'Email Address', validators=[
Email(email_err_msg),
InputRequired(input_err_msg)
])
message = TextAreaField(
'Your Message', validators=[InputRequired(input_err_msg)])
recaptcha = RecaptchaField("Are you real?")
submit = SubmitField('Send Message')
Just to be thorough..
This is my output in the terminal while the website is running.
The first code clip is a GET request to the /contacts page
Request method: GET
Validation: False
Recaptcha:
<script src='https://www.google.com/recaptcha/api.js' async defer></script>
<div class="g-recaptcha" data-theme="dark" data-sitekey="site-key-edited-for-security"></div>
192.168.123.100 - - [06/Mar/2020 16:41:26] "GET /contact/ HTTP/1.1" 200 -
This one is the POST request to that same /contacts page
Request method: POST
Validation: True
Recaptcha:
<script src='https://www.google.com/recaptcha/api.js' async defer></script>
<div class="g-recaptcha" data-theme="dark" data-sitekey="site-key-edited-for-security"></div>
192.168.123.100 - - [06/Mar/2020 16:41:42] "POST /contact/ HTTP/1.1" 200 -
Posted on March 6, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.