Crear contacto usando WTForms en Flask

WTForms es una biblioteca diseñada para facilitar la gestión del procesamiento de formularios. Maneja los datos enviados por el navegador muy fácilmente. En este artículo, discutiremos cómo crear un formulario de contacto usando WTForms.

Ventajas de WT-FORM:

  1. No tenemos que preocuparnos por los validadores.
  2. Prevención de la falsificación de requests entre sitios (CSRF) .
  3. WTForms vienen como clases, por lo que todo lo bueno viene de un formulario de objeto.
  4. No es necesario crear ningún elemento <label> o <input> manualmente usando HTML.

Instalación

Use la Terminal para instalar Flask-WTF.

pip install Flask-WTF

Implementación paso a paso

Paso 1: cree una clase que tenga todos los elementos que desee en su formulario en main.py.

Python3

from flask_wtf import FlaskForm
from wtforms import StringField, validators, PasswordField, SubmitField
from wtforms.validators import DataRequired, Email
import email_validator
  
  
class contactForm(FlaskForm):
    name = StringField(label='Name', validators=[DataRequired()])
    email = StringField(label='Email', validators=[
      DataRequired(), Email(granular_message=True)])
       message= StringField(label='Message')
    submit = SubmitField(label="Log In")

Paso 2: crea el objeto del formulario y pasa el objeto como un parámetro en el render_template

Python3

@app.route("/", methods=["GET", "POST"])
def home():
    cform = contactForm()
    return render_template("contact.html", form=cform)

Paso 3: agregue la protección CSRF. Agrega una clave secreta.

app.secret_key = "any-string-you-want-just-keep-it-secret"

Paso 4: Agregue los campos en el ARCHIVO HTML contact.html.

{{ form.csrf_token }} is used to provide csrf protection.

HTML

<!DOCTYPE HTML>
  
<html>
    <head>
        <title>Contact</title>
    </head>
    <body>
        <div class="container">
            <h1>Contact Us</h1>
            <form method="POST" action="{{ url_for('home') }}">
                {{ form.csrf_token }}
                  
                <p>
                    {{ form.name.label }} 
                    <br>
                    {{ form.name }}
                </p>
  
  
                  
                <p>
                    {{ form.email.label }} 
                    <br>
                    {{ form.email(size=30) }}
                </p>
  
  
                  
                <p>
                    {{ form.message.label }} 
                    <br>
                    {{ form.message }}
                </p>
  
                {{ form.submit }}
            </form>
        </div>
    </body>
</html>

Paso 5: Validación del Formulario y recepción de los datos.

Python3

@app.route("/", methods=["GET", "POST"])
def home():
    cform = contactForm()
    if cform.validate_on_submit():
        print(f"Name:{cform.name.data}, 
              E-mail:{cform.email.data}, 
              message:{cform.message.data}")
    else:
        print("Invalid Credentials")
                
    return render_template("contact.html", form=cform)

Código completo:

Python3

from flask import Flask, render_template, request, redirect, url_for
from flask_wtf import FlaskForm
from wtforms import StringField, validators, PasswordField, SubmitField
from wtforms.validators import DataRequired, Email
import email_validator
  
app = Flask(__name__)
app.secret_key = "any-string-you-want-just-keep-it-secret"
  
class contactForm(FlaskForm):
    name = StringField(label='Name', validators=[DataRequired()])
    email = StringField(
      label='Email', validators=[DataRequired(), Email(granular_message=True)])
    message = StringField(label='Message')
    submit = SubmitField(label="Log In")
  
  
@app.route("/", methods=["GET", "POST"])
def home():
    cform=contactForm()
    if cform.validate_on_submit():
            print(f"Name:{cform.name.data}, E-mail:{cform.email.data},
                  message:{cform.message.data}")
    return render_template("contact.html",form=cform)
  
  
if __name__ == '__main__':
    app.run(debug=True)

Producción:

Name:Rahul Singh, E-mail:rahuls@gmail.com, message:This is Sample gfg Output!!!

Agregar Bootstrap

También podemos agregar el arranque al formulario anterior para que parezca interactivo. Para ello, utilizaremos la librería Flask-Bootstrap. Para instalar este módulo, escriba el siguiente comando en la terminal.

pip install Flask-Bootstrap

Paso 1: Crear base.html

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
</head>
<body>
    {% block content %}{% endblock %}
</body>
</html>

Paso 2: Modifica contact.html a

with single line {{ wtf.quick_form(form) }}

HTML

{% extends 'bootstrap/base.html' %}
{% import "bootstrap/wtf.html" as wtf %}
  
{% block title %}
Contact Us
{% endblock %}
  
{% block content %}
        <div class="container">
            <h1>Contact Us</h1>
            {{ wtf.quick_form(form) }}
        </div>
{% endblock %}l>

Paso 3: MODIFICAR main.py

Es muy sencillo modificar el archivo .py. Solo tenemos que importar el módulo y agregar la siguiente línea en el código

Bootstrap(app)

Python3

from flask import Flask, render_template, request, redirect, url_for
from flask_wtf import FlaskForm
from wtforms import StringField, validators, PasswordField, SubmitField
from wtforms.validators import DataRequired, Email
from flask_bootstrap import Bootstrap
import email_validator
app = Flask(__name__)
Bootstrap(app)
app.secret_key = "any-string-you-want-just-keep-it-secret"
  
class contactForm(FlaskForm):
    name = StringField(label='Name', validators=[DataRequired()])
    email = StringField(label='Email', validators=[DataRequired(), Email(granular_message=True)])
    message = StringField(label='Message')
    submit = SubmitField(label="Log In")
  
  
@app.route("/", methods=["GET", "POST"])
def home():
    cform=contactForm()
    if cform.validate_on_submit():
            print(f"Name:{cform.name.data}, E-mail:{cform.email.data}, message:{cform.message.data}")
    return render_template("contact.html",form=cform)
  
  
if __name__ == '__main__':
    app.run(debug=True)

Producción:

Publicación traducida automáticamente

Artículo escrito por rajasethi056 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *