Как бы я оформить контактную форму с Jinja2 и HTML - PullRequest
Новая
       130

Как бы я оформить контактную форму с Jinja2 и HTML

0 голосов
/ 17 марта 2020

Я использую Jinja2 с Flask -WTF, чтобы создать контактную форму как часть моего сайта, а для ввода я использую синтаксис Jinja2. Как бы я смогла придать стиль своему Jinja и HTML так, чтобы он выглядел красиво и приятно для зрителя. В настоящее время, если я попытаюсь добавить свои собственные созданные классы для входных данных, они не будут работать с синтаксисом jinja2 в файле "contact. html". Спасибо за вашу помощь.

contact.py 

from flask_wtf import FlaskForm
from wtforms import StringField, SubmitField

class contactForm(FlaskForm):
    name = StringField('Name')
    email = StringField('Email')
    message = StringField('Message')
    submit = SubmitField('Send')

contact. html


{% block head %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/contact.css') }}">

{% endblock %}


{% block body %}
<br><br>
<h1><center>Get In Touch With Us!</center></h1>
<br><br>

      <form action="" method="POST">
        {{form.name.label}}
        {{form.name(size=40)}}
        {{form.email.label}}
        {{form.email(size=60)}}
        {{form.message.label}}
        {{form.message()}}
        {{form.submit()}}
    </form>


{% endblock %}

app.py (только контактная часть) 

@app.route('/contact', methods=['GET', 'POST'])
def contact():
    form = contactForm()
    if form.is_submitted():
        result = request.form
        return render_template('sent.html', result=result)
    return render_template('contact.html', form=form)

1 Ответ

0 голосов
/ 18 марта 2020

вы можете использовать bootstrap 4 классы в вашем коде jinja2. но для этого вы должны добавить bootstrap s CSS в свой шаблон html.

вот как я могу это сделать: 

<!DOCTYPE html>
<html>
<head>
    <title>{{ title }}</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:300" rel="stylesheet">
</head>
<body>
    <style type="text/css">
        body{
            font-family: 'Montserrat', sans-serif;
        }
    </style>
       <form action="your route fucntion" method="POST">
            {{ form.hidden_tag() }}

            {{ form.name.label() }}
            {{ form.name(class="form-control pt-4") }}

            {{ form.email.label(class="pt-4") }}
            {{ form.email(class="form-control pt-4") }}

            {{ form.message.label(class="pt-4") }}
            {{ form.message(class="form-control pt-4") }}

            {{ form.submit(class="btn btn-outline-success ml-1 mt-5") }}
        </form>
    </div>
    <p class="text-info ml-5 pt-4">**All fields are required.</p>

</body>
</html>

Для полной выбранной формы контакта с fla sh сообщений проверить мой репозиторий github: https://github.com/kvatsalay/Flask-Contact-form

...