Netlify Forms Issue - netlify

Question

Im having an issue with Netlify forms. I have created a multistep form with HTML and Javascript to show and hide the separate sections in the form. All the steps are in separate <div>'s and are all inside the <form>
The issue that I'm having is that in the Netlify UI where you can see the form data, all fields are showing up, but on the email notification only half the fields are being emailed.
<form
action="/"
class="form-page p-lg-5"
name="HelloVet Form"
method="POST"
data-netlify="true"
>
<input type="hidden" name="HelloVet Form" value="HelloVet Form" />
<!-- Pet 1 information form -->
<div class="p-2 p-md-5 step step1 active">
<h2 class="border-bottom">Client Information</h2>
<div class="row pt-2">
<div class="col">
<label for="FirstName" class="form-label">Name:</label>
<input
name="FirstName"
type="text"
class="form-control"
id="FirstName"
placeholder="Jane Doe"
name="FirstName"
/>
<label for="emailAddress" class="form-label">Email address</label>
<input
type="email"
class="form-control"
id="emailAddress"
placeholder="name#example.com"
name="email"
/>
<label for="street-address" class="form-label">Street:</label>
<input
type="text"
class="form-control"
id="street-address"
placeholder="123 Main Street"
name="street-address"
/>
<label for="state" class="form-label">State:</label>
<input
type="text"
class="form-control"
id="state"
placeholder="State"
name="state"
/>
</div>
<div class="col">
<label for="petReferredBy">Referred by:</label>
<select
class="form-select"
id="petReferredBy"
name="petReferredBy"
required
>
<option selected>Select One</option>
<option value="facebook">Facebook</option>
<option value="google">Google</option>
<option value="nextdoor">NextDoor</option>
<option value="internet">Internet Search</option>
<option value="instagram">Instagram</option>
<option value="grommer">Mobile Groomer</option>
<option value="instagram">Previous Client</option>
<option value="friend">Referred by Friend</option>
<option value="vet">Vet Hospital</option>
<option value="yelp">Yelp</option>
</select>
<label for="phoneNumber" class="form-label">Phone</label>
<input
type="tel"
class="form-control"
id="phoneNumber"
placeholder="[phone]"
name="phoneNumber"
/>
<label for="city" class="form-label">City:</label>
<input
type="text"
class="form-control"
id="city"
placeholder="City"
name="city"
/>
<label for="zip" class="form-label">Zip:</label>
<input
type="text"
class="form-control"
id="zip"
placeholder="Zip"
name="zip"
/>
</div>
</div>
<!-- Pet 1 information form -->
<div class="mt-5" id="pet1-info">
<h2 class="border-bottom">Pet information</h2>
<div class="row pt-2">
<div class="col">
<label for="petName">Pets Name:</label>
<input
type="text"
class="form-control"
id="petName"
placeholder="Pets Name"
name="petName"
/>
</div>
<div class="col">
<label for="breed">Breed:</label>
<input
type="text"
class="form-control"
id="breed"
placeholder="Breed"
name="breed"
/>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="species">Species:</label>
<select class="form-select" id="species" name="species">
<option selected>Select One</option>
<option value="Cat">Cat</option>
<option value="Dog">Dog</option>
</select>
</div>
<div class="col">
<label for="gender">Gender:</label>
<select class="form-select" id="gender" name="gender">
<option selected>Select One</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div class="col">
<label for="spay">Neutered/Spayed:</label>
<select class="form-select" id="spay" name="spay">
<option selected>Select One</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="weight" class="form-label">Weight:</label>
<input
type="number"
class="form-control"
id="weight"
name="weight"
placeholder="Weight"
/>
</div>
<div class="col">
<label for="age" class="form-label">Age:</label>
<input
type="number"
class="form-control"
id="age"
name="age"
placeholder="Age"
/>
</div>
<div class="col">
<label for="birthday" class="form-label">Birthday:</label>
<input
class="form-control"
type="date"
id="birthday"
name="birthday"
/>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="pastVet">Past Vet Clinics and/or Doctors:</label>
<textarea
class="form-control"
placeholder="Leave a comment here"
id="pastVet"
name="pastVet"
style="height: 100px"
></textarea>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="medRecords">Can we request records?:</label>
<select class="form-select" id="medRecords" name="medRecords">
<option selected>Select One</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="formFile" class="form-label"
>Pet Records - Upload:</label
>
<input
class="form-control"
type="file"
name="formFile"
id="formFile"
/>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="reason">Reason for At-Home Care:</label>
<textarea
class="form-control"
placeholder="Leave a comment here"
id="reason"
name="reason"
style="height: 100px"
></textarea>
</div>
</div>
<!-- Pet 1 Additional information -->
<div class="mt-5" id="">
<h2 class="border-bottom">Additional information</h2>
<p>Temperament:</p>
<div class="row">
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="isFriendly"
id="isFriendly"
value="Checked"
/>
<label class="form-check-label" for="isFriendly">
Friendly
</label>
</div>
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="willBite"
id="willBite"
value="Checked"
/>
<label class="form-check-label" for="willBite">
Will bite
</label>
</div>
</div>
<div class="row">
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="willHide"
id="willHide"
value="Checked"
/>
<label class="form-check-label" for="willHide">
Will Hide
</label>
</div>
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="needsMuzzle"
id="needsMuzzle"
value="Checked"
/>
<label class="form-check-label" for="needsMuzzle">
Needs a Muzzle
</label>
</div>
</div>
<div class="row">
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="aggressive"
id="aggressive"
value="Checked"
/>
<label class="form-check-label" for="aggressive">
Aggressive
</label>
</div>
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="sedation"
id="sedation"
value="Checked"
/>
<label class="form-check-label" for="sedation">
Sedation
</label>
</div>
</div>
<div class="row">
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="extraHands"
id="extraHands"
value="Checked"
/>
<label class="form-check-label" for="extraHands">
Extra hands
</label>
</div>
<div class="col"></div>
</div>
<div class="row pt-4">
<div class="col">
<label for="petPhoto" class="form-label"
>Photo - upload:</label
>
<input
class="form-control"
type="file"
id="petPhoto"
name="petPhoto"
/>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="share">Additional information: </label>
<textarea
class="form-control"
placeholder="Leave a comment here"
id="share"
name="share"
style="height: 100px"
></textarea>
</div>
</div>
</div>
</div>
<div class="row p-3">
<p class="btn btn-primary full-width btn-add-pet">Add Pet</p>
</div>
</div>
<!-- Pet 2 information form -->
<div class="p-2 p-md-5 step step2">
<div class="mt-5" id="pet1-info">
<h2 class="border-bottom">Pet information</h2>
<div class="row pt-2">
<div class="col">
<label for="petName2">Pets Name:</label>
<input
name="petName2"
type="text"
class="form-control"
id="petName2"
placeholder="Pets Name"
/>
</div>
<div class="col">
<label for="breed2">Breed:</label>
<input
name="breed2"
type="text"
class="form-control"
id="breed2"
placeholder="Breed"
/>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="species2">Species:</label>
<select class="form-select" name="species2" id="species2">
<option selected>Select One</option>
<option value="Cat">Cat</option>
<option value="Dog">Dog</option>
</select>
</div>
<div class="col">
<label for="gender2">Gender:</label>
<select class="form-select" name="gender2" id="gender2">
<option selected>Select One</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</div>
<div class="col">
<label for="spay2">Neutered/Spayed:</label>
<select class="form-select" name="spay2" id="spay2">
<option selected>Select One</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="weight2" class="form-label">Weight:</label>
<input
type="number"
class="form-control"
id="weight2"
name="weight2"
placeholder="Weight"
/>
</div>
<div class="col">
<label for="age2" class="form-label">Age:</label>
<input
type="number"
class="form-control"
id="age2"
name="age2"
placeholder="Age"
/>
</div>
<div class="col">
<label for="birthday2" class="form-label">Birthday:</label>
<input
class="form-control"
type="date"
id="birthday2"
name="birthday2"
/>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="pastVet2">Past Vet Clinics and/or Doctors:</label>
<textarea
class="form-control"
placeholder="Leave a comment here"
id="pastVet2"
name="pastVet2"
style="height: 100px"
></textarea>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="medRecords2">Can we request records?:</label>
<select class="form-select" id="medRecords2" name="medRecords2">
<option selected>Select One</option>
<option value="Yes">Yes</option>
<option value="No">No</option>
</select>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="formFile2" class="form-label"
>Pet Records - Upload:</label
>
<input
class="form-control"
type="file"
name="formFile2"
id="formFile2"
/>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="reason2">Reason for At-Home Care:</label>
<textarea
class="form-control"
placeholder="Leave a comment here"
id="reason2"
name="reason2"
style="height: 100px"
></textarea>
</div>
</div>
<!-- Pet 1 Additional information -->
<div class="mt-5" id="">
<h2 class="border-bottom">Additional information</h2>
<p>Temperament:</p>
<div class="row">
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="isFriendly2"
id="isFriendly2"
value="Checked"
/>
<label class="form-check-label" for="isFriendly2">
Friendly
</label>
</div>
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="willBite2"
id="willBite2"
value="Checked"
/>
<label class="form-check-label" for="willBite2">
Will bite
</label>
</div>
</div>
<div class="row">
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="willHide2"
id="willHide2"
value="Checked"
/>
<label class="form-check-label" for="willHide2">
Will Hide
</label>
</div>
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="needsMuzzle2"
id="needsMuzzle2"
value="Checked"
/>
<label class="form-check-label" for="needsMuzzle2">
Needs a Muzzle
</label>
</div>
</div>
<div class="row">
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="aggressive2"
id="aggressive2"
value="Checked"
/>
<label class="form-check-label" for="aggressive2">
Aggressive
</label>
</div>
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="sedation2"
id="sedation2"
value="Checked"
/>
<label class="form-check-label" for="sedation2">
Sedation
</label>
</div>
</div>
<div class="row">
<div class="col">
<input
class="form-check-input"
type="checkbox"
name="extraHands2"
id="extraHands2"
value="Checked"
/>
<label class="form-check-label" for="extraHands2">
Extra hands
</label>
</div>
<div class="col"></div>
</div>
<div class="row pt-4">
<div class="col">
<label for="petPhoto2" class="form-label"
>Photo - upload:</label
>
<input
class="form-control"
type="file"
id="petPhoto2"
name="petPhoto2"
/>
</div>
</div>
<div class="row pt-2">
<div class="col">
<label for="share2">Additional information: </label>
<textarea
class="form-control"
placeholder="Leave a comment here"
id="share2"
name="share2"
style="height: 100px"
></textarea>
</div>
</div>
</div>
</div>
<div class="row p-3">
<p class="btn btn-primary full-width btn-prev-pet">Previous Pet</p>
<p class="btn btn-primary full-width btn-add-pet">Next Pet</p>
</div>
</div>
<!-- Pet 3 information form -->
<!-- Pet 4 information form -->
<!-- submit button -->
<div class="row p-md-5">
<div class="col">
<div class="row p-3">
<button
type="submit"
class="btn btn-primary full-width"
id="btn-submit"
>
Submit
</button>
</div>
</div>
</div>
</form>
const steps = Array.from(document.querySelectorAll('form .step'))
const addPetBtn = document.querySelectorAll('form .btn-add-pet')
const prevPetBtn = document.querySelectorAll('form .btn-prev-pet')
const form = document.getElementsByClassName('form-page ')
addPetBtn.forEach((button) => {
button.addEventListener('click', (e) => {
changeStep('next')
scrollTo(0, 0)
})
})
prevPetBtn.forEach((button) => {
button.addEventListener('click', () => {
changeStep('prev')
scrollTo(0, 0)
})
})
function changeStep(btn) {
let index = 0
const active = document.querySelector('form .step.active')
index = steps.indexOf(active)
steps[index].classList.remove('active')
if (btn === 'next') {
index++
} else if (btn == 'prev') {
index--
}
steps[index].classList.add('active')
scrollTo(0, 0)
}