title: How to paginate flask form with "Next" buttons?
body: <p>Currently, using Flask, I have a home page with a single (long) form for users to fill out. However, I'd like to separate this form out into chunks and iterate through them with a "Next" button (kind of like when you buy something online and have to go through different pages to fill out your information). So far, I have tried the following:</p>
  
  <p><strong>Implementing multiple "Submit" buttons in the homepage html:</strong></p>
  
  <pre><code>{% extends 'layout.html' %}
  
  {% block body %}
      &lt;div class="content-section"&gt;
          &lt;form method="POST" action=""&gt;
              {{ form.hidden_tag() }}
              &lt;fieldset class="form-group"&gt;
                  &lt;legend class="border-bottom mb-4"&gt;Pipeline Input&lt;/legend&gt;
                  &lt;div class="form-group required"&gt;
                      {{ form.stack_name.label(class="form-control-label") }}
                      {{ form.deploy_bucket(class="form-control form-control-lg") }}
                  &lt;/div&gt;
                  &lt;div class="form-group required"&gt;
                      {{ form.key_pair.label(class="form-control-label") }}
                      {{ form.key_pair(class="form-control form-control-lg") }}
                  &lt;/div&gt;
                  &lt;div class="form-group required"&gt;
                      {{ form.start_point.label(class="form-control-label") }}
                      {{ form.start_point(class="form-control form-control-lg") }}
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      {{ form.qc.label(class="form-control-label") }}
                      {{ form.qc(class="form-control form-control-lg") }}
                  &lt;/div&gt;
                      {{ form.submit_1(class="btn btn-outline-info") }}
                  &lt;div class="form-group required"&gt;
                      {{ form.input_uri.label(class="form-control-label") }}
                      {{ form.input_uri(class="form-control form-control-lg") }}
                  &lt;/div&gt;
                  &lt;div class="form-group required"&gt;
                      {{ form.output_uri.label(class="form-control-label") }}
                      {{ form.output_uri(class="form-control form-control-lg") }}
                  &lt;/div&gt;
                  &lt;div class="form-group required"&gt;
                      {{ form.ref_uri.label(class="form-control-label") }}
                      {{ form.ref_uri(class="form-control form-control-lg") }}
                  &lt;/div&gt;
                  &lt;div class="form-group required"&gt;
                      {{ form.user_assets_uri.label(class="form-control-label") }}
                      {{ form.user_assets_uri(class="form-control form-control-lg") }}
                  &lt;/div&gt;
                      {{ form.submit_2(class="btn btn-outline-info") }}
                  &lt;div class="form-group"&gt;
                      {{ form.target.label(class="form-control-label") }}
                      {{ form.target(class="form-control form-control-lg") }}
                  &lt;/div&gt;
                  &lt;div class="form-group required"&gt;
                      {{ form.package_name.label(class="form-control-label") }}
                      {{ form.package_name(class="form-control form-control-lg") }}
                  &lt;/div&gt;
                  &lt;div class="form-group required"&gt;
                      {{ form.license_name.label(class="form-control-label") }}
                      {{ form.license_name(class="form-control form-control-lg") }}
                  &lt;/div&gt;
                  {{ form.submit_final(class="btn btn-outline-info") }}
              &lt;/div&gt;
              &lt;/fieldset&gt;
              &lt;/div class="form-group"&gt;
              &lt;/div&gt;  
          &lt;/form&gt;
          &lt;p&gt;{{ error }}&lt;/p&gt;
      &lt;/div&gt;
  
  {% endblock %}
  </code></pre>
  
  <p><strong>Here is where the form inputs are defined:</strong></p>
  
  <pre><code>from flask_wtf import FlaskForm
  from wtforms import StringField, TextField, SubmitField, IntegerField, SelectField, validators
  
  class InputForm(FlaskForm):
  
      stack_name = StringField('STACK NAME', validators=[validators.required()])
      deploy_bucket = SelectField('DEPLOYMENT BUCKET', validators=[validators.required()])
      key_pair = SelectField('KEY PAIR', validators=[validators.required()])
      start_point = SelectField('START POINT', validators=[validators.required()], choices=[("", "---"), ("", "fastq"), ("", "bam"), ("", "hdof"), ("", "gvcf"), ("", "vcf")])
      qc = SelectField('QC', choices=[("", "---"), ("","BAM"), ("","VCF")])
  
      submit_1 = SubmitField('Next')
  
      input_uri = StringField('INPUT BUCKET', validators=[validators.required()])
      output_uri = StringField('OUTPUT BUCKET', validators=[validators.required()])
      ref_uri = SelectField('REFERENCE BUCKET', validators=[validators.required()])
      user_assets_uri = StringField('USER ASSETS BUCKET', validators=[validators.required()])
  
      submit_2 = SubmitField('Next')
  
      target = StringField('TARGET')
      package_name = StringField('PACKAGE NAME', validators=[validators.required()])
      license_name = StringField('LICENSE NAME', validators=[validators.required()])
  
      submit_final = SubmitField('Execute Pipeline')
  </code></pre>
  
  <p><strong>Here is my app.py, where the form data is processed. It is currently still set up for just having one submit button, so I'm not sure how to handle the "next" buttons/pagination here:</strong></p>
  
  <pre><code>@app.route('/', methods=['GET', 'POST'])
  def pipeline():
      form = InputForm(request.form)
      form.deploy_bucket.choices = [("", "---")] + [("", bucket["Name"]) for bucket in app.config['S3_CLIENT'].list_buckets()["Buckets"]]
      form.ref_uri.choices = [("", "---")] + [("", bucket["Name"]) for bucket in app.config['S3_CLIENT'].list_buckets()["Buckets"]]
      form.key_pair.choices = [("", "---")] + [("", pair["KeyName"]) for pair in app.config['EC2_CLIENT'].describe_key_pairs()["KeyPairs"]]
  
      if request.method == 'POST':
          STACK_NAME = form.stack_name.data
          DEPLOY_BUCKET = form.deploy_bucket.data
          KEY_PAIR = form.key_pair.data
          START_POINT = form.start_point.data
          QC = form.qc.data
          INPUT_URI = form.input_uri.data
          OUTPUT_URI = form.output_uri.data
          REF_URI = form.ref_uri.data
          USER_ASSETS_URI = form.user_assets_uri.data
          TARGET = form.target.data
          PACKAGE_NAME = form.package_name.data
          LICENSE_NAME = form.license_name.data
  
          flash('The pipeline has been executed!', 'success')
  
          dic = {
                  "STACK_NAME": STACK_NAME, 
                  "DEPLOY_BUCKET": DEPLOY_BUCKET,
                  "KEY_PAIR": KEY_PAIR,
                  "START_POINT": START_POINT,
                  "QC": QC,
                  "INPUT_URI": INPUT_URI,
                  "OUTPUT_URI": OUTPUT_URI,
                  "REF_URI": REF_URI,
                  "USER_ASSETS_URI": USER_ASSETS_URI,
                  "LOCAL_ASSETS_DIR": LOCAL_ASSETS_DIR,
                  "SAMPLE_FILE": SAMPLE_FILE,
                  "TARGET": TARGET,
                  "PACKAGE_NAME": PACKAGE_NAME,
                  "LICENSE_NAME": LICENSE_NAME,
                }
  
          proc = subprocess.Popen('pwd', shell=True, stdout=subprocess.PIPE)
  
          with open("input.json", 'w') as f:
              json.dump(dic, f)
  
          proc = subprocess.Popen('python pipeline.py -p', shell=True, stdout=subprocess.PIPE)
  
          return redirect(url_for('dashboard'))
  
      return render_template('pipeline.html', title='Pipeline Input', form=form)
  
  @app.route('/dashboard')
  def dashboard():
      return render_template('dashboard.html')
  </code></pre>