时间戳

首页 > 解决方案 > Flask - 联系表单在提交时发送电子邮件，但不重定向并且引导 btn 不显示

javascript - Flask - 联系表单在提交时发送电子邮件，但不重定向并且引导 btn 不显示

问题描述

在此处输入图像描述


from flask_mail import Mail, Message

app.config['MAIL_SERVER'] = 'xxxx'
app.config['MAIL_PORT'] = 465
app.config['MAIL_USERNAME'] = 'xxxx'
app.config['MAIL_PASSWORD'] = 'xxxx'
app.config['MAIL_USE_TLS'] = False
app.config['MAIL_USE_SSL'] = True
app.config['MAIL_DEFAULT_SENDER'] = 'xxx'
mail = Mail(app)
app.config['SECRET_KEY'] = 'xxx'

# Contact Form
class ContactForm(FlaskForm):
    name =StringField("Name",validators=[DataRequired()])
    email = StringField("Email",validators=[DataRequired(), Email()])
    message = TextAreaField("Message",validators=[DataRequired()])
    submit = SubmitField('Send')

@app.route('/', methods=['GET', 'POST'])
def home():
    form = ContactForm()
    if form.validate_on_submit() == False:
        return render_template('home2.html',form=form)
    else:
        msg = Message('WEBSITE CONTACT', sender='xxx', recipients=['xxxx'])
        msg.body = '%s \n %s \n\n %s ' % (form.name.data, form.email.data, form.message.data)
        mail.send(msg)
        return redirect(url_for('form_complete'))
    return render_template('home2.html',form=form)

@app.route('/complete')
def form_complete():
    return render_template('form_submitted.html')

联系表单成功发送电子邮件，但它不会重定向到 form_complete。

我希望在提交联系表单后（通过引导按钮）发送一封电子邮件并重定向到 form_submitted.html

此外，如果我更改 HTML 中的类，Send文本就会消失：

...
<div class="container">
        <h3 class="big text-center" data-aos="fade-down" data-aos-delay="0">
            Contact
        </h3>
        <form method="POST" action ="">
            {{ form.hidden_tag() }}

            {% for message in form.name.errors %}
              <div class="flash"><br><br>{{ message }}<br><br></div>
            {% endfor %}

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


            {% for message in form.email.errors %}
            <div class="flash"><br><br>{{ message }}<br><br></div>
            {% endfor %}

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

            {% for message in form.message.errors %}
            <div class="flash"><br><br>{{ message }}<br><br></div>
            {% endfor %}

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

            <!--{# {{ form.submit(class="btn btn-outline-info") }} #}-->
            {{ form.submit() }}
        </form>
    </div>
...

编辑：按下提交按钮时，联系表单正确发送到我的电子邮件，尽管它没有按照我的意愿重定向。

有一个 script.js 包含一些残留的 php 表单信息 - 但从 script.js 中删除它并没有改变任何东西。

Github： https ://github.com/olbliss/OB_Flask

标签： javascriptjquery

解决方案

我发现了问题，它是由 引起的script.js。
在static/script.js注释掉或删除第 170 行

$("form:not(.SFG)").submit(function(event){

        // event.preventDefault();

        var form = $(this);
        var grecaptchaContainer = document.getElementById("g-recaptcha");
        if($(grecaptchaContainer).length>0){

注释掉或只是删除event.preventDefault();，一切都会奏效。

在 Bootstrap Button 中，您在 Bootstrap.css 和framework.cssand之间命名冲突framework.min.css因为.btn有影响 Bootstrap 类.btn的类，这就是您的 Bootstrap Button 不出现的原因 您需要在and中更改.btn该类的命名static\framework.cssstatic\framework.min.css

推荐阅读