I am using bootstrap studio to send form responses to my inbox. However I can't get it working properly across columns
E.g.
<div class="container">
<div class="row">
<div class="col-md-6">
<form data-bss-recipient="a6ecf09a9056b803c75d95a1041f534a" data-bss-subject="Form" id="contact-form">
<label for="name"><img src="assets/img/name.svg" /></label>
<input class="form-control" type="text" name="name" >
<label for="company"><img src="assets/img/company.svg" /></label>
<input class="form-control" type="text" name="company">
<label for="address"><img src="assets/img/address.svg" /></label>
<br>
<textarea name="address" form="contact-form" cols="24" rows="8" ></textarea>
<br>
<label for="telephone"><img src="assets/img/telephone.svg" /></label>
<input class="form-control" type="tel" name="telephone" >
<label for="email"><img src="assets/img/email.svg" /></label>
<input class="form-control" type="email" name="email" >
</div>
//ABOVE FIELDS ARE SENT CORRECTLY
<div class="col-md-6">
<label for="department-to-contact"><img src="assets/img/department-to-contact.svg" /></label>
<br>
<select>
<option value="Technical">Technical</option>
<option value="production">Production Planning & Sales</option>
<option value="office-administration">Office Administration & Order Processing</option>
<option value="company-admin">Company Administration</option>
<option value="accounts">Accounts</option>
<option value="prepress">Factory & Prepress</option>
</select>
<label for="enquiry"><img src="assets/img/enquiry.svg" /></label>
<br>
<textarea name="enquiry" form="contact-form" cols="35" rows="11" ></textarea>
<p> </p>
<button class="btn btn-sm text-white bg-white" type="submit"><img src="assets/img/Submit%20Button.svg" width="180px" /></button>
//ABOVE FIELDS ARE MISSED
I can fix this by keeping the form in one div and then splitting into two columns floating left and right. But this breaks the responsiveness and is not an option.
Your form tag is opened within the first column, and so it assumes that the form is closed when the column div closes, and is therefore only sending those fields that are part of that column. You should place all your form rows and columns within the opening and closing form tags:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
<form data-bss-recipient="a6ecf09a9056b803c75d95a1041f534a" data-bss-subject="Form" id="contact-form">
<div class="row">
<div class="col-md-6">
<label for="name"><img src="assets/img/name.svg" /></label>
<input class="form-control" type="text" name="name">
<label for="company"><img src="assets/img/company.svg" /></label>
<input class="form-control" type="text" name="company">
<label for="address"><img src="assets/img/address.svg" /></label>
<br>
<textarea name="address" form="contact-form" cols="24" rows="8"></textarea>
<br>
<label for="telephone"><img src="assets/img/telephone.svg" /></label>
<input class="form-control" type="tel" name="telephone">
<label for="email"><img src="assets/img/email.svg" /></label>
<input class="form-control" type="email" name="email">
</div>
<!-- //ABOVE FIELDS ARE SENT CORRECTLY -->
<div class="col-md-6">
<label for="department-to-contact"><img src="assets/img/department-to-contact.svg" /></label>
<br>
<select>
<option value="Technical">Technical</option>
<option value="production">Production Planning & Sales</option>
<option value="office-administration">Office Administration & Order Processing</option>
<option value="company-admin">Company Administration</option>
<option value="accounts">Accounts</option>
<option value="prepress">Factory & Prepress</option>
</select>
<label for="enquiry"><img src="assets/img/enquiry.svg" /></label>
<br>
<textarea name="enquiry" form="contact-form" cols="35" rows="11"></textarea>
<p> </p>
<button class="btn btn-sm text-white bg-white" type="submit"><img src="assets/img/Submit%20Button.svg" width="180px" /></button>
</div>
</div>
</form>
</div>