Flash a error/success message on flask after .validate_on_submit

Newbie to Flask and a very short time to learn to do something decent(College). I have a survey that I would like to use FLASH to flash the success and error messages(category), though I haven't been able to do so, I gave it a good research and I did get how it works, my code seems fine comparing to the examples I have found, but it is clearly not. If someone could please help me out, it would be much appreciated.

This is the .py file

def index():
    form = Form()
    if form.validate_on_submit():
        flash(u'Thank you for your collaboration!', 'success')
        if not form.validate_on_submit():
            flash(u'Something went wrong!', 'error')
            return redirect(url_for('index'))
        return redirect(url_for('index'))
    #submission_successful = True #or False. you can determine this.
    return render_template('index1.html', form=form) #submission_successful=submission_successful)

the .html file

<center>
    <form methods='POST'>
        {{ form.csrf_token }}
        {{ form.hidden_tag() }}
        <div style = font-size:18px; font-weight:bold; margin-left:200px; class="form-field"> {{ form.Email.label }} <br> {{ form.Email }}  </div> <br>
        <div style = font-size:18px; font-weight:bold; margin-left:100px; class="form-field"> {{ form.sex.label }} {{ form.sex }}   </div> <br>
        <div style = font-size:18px; font-weight:bold; margin-left:100px; class="form-field"> {{ form.age.label }}  {{ form.age }}  </div> <br>
        <div style = font-size:18px; font-weight:bold; margin-left:100px; class="form-field"> {{ form.Marital.label }}  {{ form.Marital }}  </div> <br>
        <div style = font-size:18px; font-weight:bold; margin-left:100px; class="form-field"> {{ form.county.label}}  {{ form.county }}  </div> <br>
        <div style = font-size:18px; font-weight:bold; margin-left:100px; class="form-field"> {{ form.Property.label }}  {{ form.Property }}  </div> <br>
        <div style = font-size:18px; font-weight:bold; margin-left:100px; class="form-field"> {{ form.PropertyStatus.label }}  {{ form.PropertyStatus }}  </div> <br>
        <div style = font-size:18px; font-weight:bold; margin-left:100px; class="form-field"> {{ form.Rooms.label }}  {{ form.Rooms }}  </div> <br>
        <div style = font-size:18px; font-weight:bold; margin-left:100px; class="form-field"> {{ form.People.label}} <br> {{ form.People }} </div> <br>
        <div style = font-size:17px; font-weight:bold; margin-left:100px; class="form-field"> {{ form.submit}}  </div>

        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                {% if category == 'success'%}
                    <div class='alert alert-success mb-3' role='alert'>
                        {{ message }}
                    </div>
                {% endif %}
                {% if category == 'error'%}
                    <div class='alert alert-danger mb-3' role='alert'>
                        {{ message }}
                    </div>
                {% endif %}

                {% endfor %}
            {% endif %}
        {% endwith %}


    </center>
    </form>