Greetings and a warm welcome to Stackoverflow!
If my understanding is correct, you have the option to divide the form into sections as shown below:
<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>
Afterwards, you can implement an event on button click that increments the current step (0, 1, 2...) and hides all the divs without the correct id. Finally, submit the form when reaching the final step.
let totalSteps = 3;
let step = 1;
function onNextStep(e) {
const currentStep = step;
const nextStep = step + 1;
// If it's the last step, change the button text
if ( nextStep == totalSteps ) {
document.querySelector('form button[type="submit"]').innerText = "Submit"
}
// Once the last step is completed, submit the form.
if ( nextStep > totalSteps ) {
return
}
// Avoiding form submission
e.preventDefault()
// Hide the current section
document.getElementById('question-'+nextStep).style.display = 'block'
// Display the next section
document.getElementById('question-'+currentStep).style.display = 'none'
// Update the steps counter
step += 1
}
With some tweaks, this example should suit your requirements perfectly.