I have been working on a project that will ask users for their details and then underneath a bunch of questions. The details section uses a form with gutters (unsure if that is correct terminology). But i want to be able to input the questions and have them come down 1 by 1 in order. And not by the side of eachother like it does for inputting the details.
This is the link i used for the gutters- https://getbootstrap.com/docs/5.1/forms/layout/
This is the link to what the details page looks like - https://imgur.com/a/yI7R09H
And i want it the questions like this underneath - https://imgur.com/a/qu0qjfm
However they must be in the same form otherwise my code wont work and unsure to change it to submit the form from two pages...
Code of both parts - https://pastebin.com/5nbavuUt
/* Code From Details */
<div class="col-md-7">
<label for="site_name" class="form-label">Site Name</label>
<input type="name"
class="form-control"
id="site_name"
name="site_name"
value="<?php if(isset($_GET['site_name']))
echo ($_GET['site_name']); ?>"
placeholder="Enter Site Name"
required><br>
</div>
/*Code From Questions */
<div class="form-group">
<h6 for="q9">9. Is there clear access to the position of the Machine(s)   (e.g. acess through doors)</h6>
<select class="form-select form-select-sm" name="q9">
<option selected>Choose</option>
<option value="YES">Yes</option>
<option value="NO">No</option>
</select>
</div>