I wan to process a contact form in flask in index page itself at the bottom

Question

@app.route('/')
def hello_world():
    return render_template("index.html")


@app.route('/success', methods=['GET', 'POST'])
def contact():
    if request.method == 'POST':
        if request.form == False:
            flash('All fields are required.')
            return render_template('index.html')
        else:
            msg = Message(request.form['subject'], sender=request.form['email'], recipients=['mustafa.bizzalley@gmail.com'])
            msg.body = """
      From: %s <%s>
      Phone: %s
             %s
      """ % (request.form['name'], request.form['email'], request.form['phone'], request.form['message'])
            mail.send(msg)
            flash('Message sent successfully')
            return render_template('index.html', success=True)

    elif request.method == 'GET':
        return render_template('index.html')

            <div class="col-sm-6 col-md-5 offset-md-2 col-lg-6 offset-lg-0">
              <!-- Starting of ajax contact form -->
    <form class="contact__form" method="post" action="{{ url_for('contact') }}">
      
      <div class="row">
          <div class="col-md-6 form-group">
              <input name="name" type="text" class="form-control" placeholder="Name" required>
          </div>
          <div class="col-md-6 form-group">
              <input name="email" type="email" class="form-control" placeholder="Email" required>
          </div>
          <div class="col-md-6 form-group">
              <input name="phone" type="text" class="form-control" placeholder="Phone" required>
          </div>
          <div class="col-md-6 form-group">
              <input name="subject" type="text" class="form-control" placeholder="Subject" required>
          </div>
          <div class="col-12 form-group">
              <textarea name="message" class="form-control" rows="3" placeholder="Message" required></textarea>
          </div>
          <div class="col-12">
              <input name="submit" type="submit" class="button-style" value="Send Message">
          </div>
      </div>


    </form>

  <!-- Starting of successful form message -->
                {% block content %}
                 {% if success %}
      <div class="row">
          <div class="col-12">
              <div class="alert alert-success contact__msg" style="display: none" role="alert">
                  {% with messages = get_flashed_messages() %}
                    {% if messages %}
                        {{ message }}
                        {% endif %}
        {% endwith %}
              </div>
          </div>
      </div>
                {% endif %}
                {% endblock %}
      <!-- Ending of successful form message -->
          </div>
        </div>

I want to display the success message below the form after the form is submitted without redirecting or refreshing the page or an error message in the same format. But I am unable to achieve this as there is couldn't find any guide to do this above task in flask because all I find is redirecting to another page for success message

score 0 · Accepted Answer · answered Sep 30 '19 at 10:59

after the form is submitted without redirecting or refreshing the page - this would need javascript.

Currently what's happening is,

you click on the submit button
browser sends a request to the server
flask app process the requests, generate a response and send it back

This would refresh the page.

What you need to do,

on click of the submit button
- block the event in javascript
- send an ajax request to the server using jQuery or something
- once you get the response back from the server
- populate response at the bottom location as required

You may have a look at the following for reference,

Blocking events - https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
Ajax requests - https://api.jquery.com/jquery.ajax/

I wan to process a contact form in flask in index page itself at the bottom

1 Answers1