Solution 1 :

Hi and welcome to Stackoverflow!

If I understood correctly, you can split the form in sections like the following:

<form POST="..." onsubmit="onNextStep">
   <div class='form-section' id='question-1'>
      <!-- code here -->
   </div>
   <div class='form-section' id='question-2'>
      <!-- code here -->
   </div>
   <div class='form-section' id='question-3'>
      <!-- code here -->
   </div>
   <div class="form-footer">
      <button type="submit"> Next </button>
   </div>
</form>

and then add an event on button click that increments the current step (0, 1, 2…) and hide all the divs without the correct id and then submit the form when on the final step.

let totalSteps = 3;
let step = 1;

function onNextStep(e) {
  const currentStep = step;
  const nextStep = step + 1; 

  // in the last step change the button text
  if ( nextStep == totalSteps ) {
    document.querySelector('form button[type="submit"]').innerText = "Submit"
  }

  // If the last step is completed, submit the form.
  if ( nextStep > totalSteps ) {
    return
  }
 
  // prevent form submission
  e.preventDefault()


  // hide the current section
  document.getElementById('question-'+nextStep).style.display = 'block'
  
  // show the next section
  document.getElementById('question-'+curentStep).style.display = 'none'  

  // increment our steps counter
  step += 1
}

This example with some adjustments should fit your case.

Solution 2 :

Just use the one form.

Use the fieldset tag to encapsulate your questions then use javascript to hide and show as needed.

let questions = document.querySelectorAll(".question");
let answerButtons = document.querySelectorAll(".question button");

for (var i = 0; i < answerButtons.length; i++) {
  answerButtons[i].addEventListener("click",function() {
    //Get Closest question
    var question = this.closest(".question");   
    //Remove Active class
    question.classList.remove("active");
    //Add active class to next sibling
    question.nextElementSibling.classList.add("active");
  });
}
.question:not(.active) {
  display: none;
}
<form action="">
  <fieldset class="question active">
    <legend>Question 1 of 3</legend>
    <label>What is your name? <input type="text" name="qName"></label>
    <button type="button">Submit Answer</button>
  </fieldset>
  <fieldset class="question">
    <legend>Question 2 of 3</legend>
    <label>What is your quest? <input type="text" name="qQuest"></label>
    <button type="button">Submit Answer</button>
  </fieldset>
  <fieldset class="question">
    <legend>Question 3 of 3</legend>
    <label>What is your quest? <input type="text" name="qName"></label>
    <button type="submit">Submit Quiz</button>
  </fieldset>
</form>

Problem :

I have created a quiz using HTML currently there are 5 questions in total and I have it coded so that only the question being answered appears so users taking the quiz cannot see upcoming questions. The way I have done it using multiple forms so for each question there is a separate form this makes it a pain to be able to send all of the answers to the questions via email, currently it only sends the last questions… Is there a way I can combine my forms into one big form or possibly have a button that submits all my forms?

Any help would be greatly appreciated 🙂

Currently, it won’t let me send code. I’ll try again.

Comments

Comment posted by minimal reproducible example

Use one form. Use the

By