<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pet Transport Form</title>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBOaIw0ZuWRnUn-EXQSip4uJ5RMQjewBxw&libraries=places&v=beta&callback=initAutocomplete" async defer></script>
<link rel="stylesheet" href="style2.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/choices.js@10.2.0/public/assets/styles/choices.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/css/intlTelInput.css">
</head>
<body>
<div class="form-container">
<form id="pet-form">
<div id="page-1" class="page">
<h2>Pet Information</h2>
<div id="pet-forms-container">
</div>
<button type="button" id="next-page-1-btn">Next</button>
</div>
<div id="page-2" class="page" style="display: none;">
<h2>Tell us what your project is.</h2>
<h3>Departure</h3>
<label for="departure-address">Address:</label>
<gmp-place-autocomplete id="departure-address" name="departure-address"></gmp-place-autocomplete>
<label for="departure-country">Country:</label>
<select id="departure-country" name="departure-country" required>
<option value="">--Select a Country--</option>
<option value="Afghanistan">Afghanistan</option>
<option value="South Africa">South Africa</option>
<option value="Åland Islands">Åland Islands</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="Germany">Germany</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antigua and Barbuda">Antigua and Barbuda</option>
<option value="Netherlands Antilles">Netherlands Antilles</option>
<option value="Saudi Arabia">Saudi Arabia</option>
<option value="Argentina">Argentina</option>
<option value="Armenia">Armenia</option>
<option value="Aruba">Aruba</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Azerbaijan">Azerbaijan</option>
<option value="Bahamas">Bahamas</option>
<option value="Bahrain">Bahrain</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Barbados">Barbados</option>
<option value="Belarus">Belarus</option>
<option value="Belgium">Belgium</option>
<option value="Belize">Belize</option>
<option value="Benin">Benin</option>
<option value="Bermuda">Bermuda</option>
<option value="Bhutan">Bhutan</option>
<option value="Bolivia">Bolivia</option>
<option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
<option value="Botswana">Botswana</option>
<option value="Brazil">Brazil</option>
<option value="Brunei">Brunei</option>
<option value="Bulgaria">Bulgaria</option>
<option value="Burkina Faso">Burkina Faso</option>
<option value="Burundi">Burundi</option>
<option value="Cambodia">Cambodia</option>
<option value="Cameroon">Cameroon</option>
<option value="Canada">Canada</option>
<option value="Cabo Verde">Cabo Verde</option>
<option value="Cayman Islands">Cayman Islands</option>
<option value="Central African Republic">Central African Republic</option>
<option value="Chile">Chile</option>
<option value="China">China</option>
<option value="Christmas Island">Christmas Island</option>
<option value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option>
<option value="Colombia">Colombia</option>
<option value="Comoros">Comoros</option>
<option value="Congo">Congo</option>
<option value="Cook Islands">Cook Islands</option>
<option value="North Korea">North Korea</option>
<option value="South Korea">South Korea</option>
<option value="Costa Rica">Costa Rica</option>
<option value="Côte d'Ivoire">Côte d'Ivoire</option>
<option value="Croatia">Croatia</option>
<option value="Cuba">Cuba</option>
<option value="Denmark">Denmark</option>
<option value="Djibouti">Djibouti</option>
<option value="Dominica">Dominica</option>
<option value="Egypt">Egypt</option>
<option value="El Salvador">El Salvador</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="Dubai">Dubai</option>
<option value="Ecuador">Ecuador</option>
<option value="Eritrea">Eritrea</option>
<option value="Spain">Spain</option>
<option value="Estonia">Estonia</option>
<option value="Federated States of Micronesia">Federated States of Micronesia</option>
<option value="United States">United States</option>
<option value="Ethiopia">Ethiopia</option>
<option value="Falkland Islands">Falkland Islands</option>
<option value="Faroe Islands">Faroe Islands</option>
<option value="Fiji">Fiji</option>
<option value="Finland">Finland</option>
<option value="France">France</option>
<option value="Gabon">Gabon</option>
<option value="Gambia">Gambia</option>
<option value="Georgia">Georgia</option>
<option value="South Georgia and the South Sandwich Islands">South Georgia and the South Sandwich Islands</option>
<option value="Ghana">Ghana</option>
<option value="Gibraltar">Gibraltar</option>
<option value="Greece">Greece</option>
<option value="Grenada">Grenada</option>
<option value="Greenland">Greenland</option>
<option value="Guadeloupe">Guadeloupe</option>
<option value="Guam">Guam</option>
<option value="Guatemala">Guatemala</option>
<option value="Guinea">Guinea</option>
<option value="Equatorial Guinea">Equatorial Guinea</option>
<option value="Guinea-Bissau">Guinea-Bissau</option>
<option value="Guyana">Guyana</option>
<option value="French Guiana">French Guiana</option>
<option value="Haiti">Haiti</option>
<option value="Honduras">Honduras</option>
<option value="Hong Kong">Hong Kong</option>
<option value="Hungary">Hungary</option>
<option value="India">India</option>
<option value="Indonesia">Indonesia</option>
<option value="Iran">Iran</option>
<option value="Iraq">Iraq</option>
<option value="Ireland">Ireland</option>
<option value="Iceland">Iceland</option>
<option value="Israel">Israel</option>
<option value="Italy">Italy</option>
<option value="Jamaica">Jamaica</option>
<option value="Japan">Japan</option>
<option value="Jordan">Jordan</option>
<option value="Kazakhstan">Kazakhstan</option>
<option value="Kenya">Kenya</option>
<option value="Kyrgyzstan">Kyrgyzstan</option>
<option value="Kiribati">Kiribati</option>
<option value="Kuwait">Kuwait</option>
<option value="Laos">Laos</option>
<option value="Lesotho">Lesotho</option>
<option value="Latvia">Latvia</option>
<option value="Lebanon">Lebanon</option>
<option value="Liberia">Liberia</option>
<option value="Libya">Libya</option>
<option value="Liechtenstein">Liechtenstein</option>
<option value="Lithuania">Lithuania</option>
<option value="Luxembourg">Luxembourg</option>
<option value="Macao">Macao</option>
<option value="North Macedonia">North Macedonia</option>
<option value="Madagascar">Madagascar</option>
<option value="Malaysia">Malaysia</option>
<option value="Malawi">Malawi</option>
<option value="Maldives">Maldives</option>
<option value="Mali">Mali</option>
<option value="Malta">Malta</option>
<option value="Isle of Man">Isle of Man</option>
<option value="Northern Mariana Islands">Northern Mariana Islands</option>
<option value="Morocco">Morocco</option>
<option value="Marshall Islands">Marshall Islands</option>
<option value="Martinique">Martinique</option>
<option value="Mauritius">Mauritius</option>
<option value="Mauritania">Mauritania</option>
<option value="Mayotte">Mayotte</option>
<option value="Mexico">Mexico</option>
<option value="Moldova">Moldova</option>
<option value="Monaco">Monaco</option>
<option value="Mongolia">Mongolia</option>
<option value="Montenegro">Montenegro</option>
<option value="Montserrat">Montserrat</option>
<option value="Mozambique">Mozambique</option>
<option value="Myanmar">Myanmar</option>
<option value="Namibia">Namibia</option>
<option value="Nauru">Nauru</option>
<option value="Nepal">Nepal</option>
<option value="Nicaragua">Nicaragua</option>
<option value="Niger">Niger</option>
<option value="Nigeria">Nigeria</option>
<option value="Niue">Niue</option>
<option value="Norfolk Island">Norfolk Island</option>
<option value="Norway">Norway</option>
<option value="New Caledonia">New Caledonia</option>
<option value="New Zealand">New Zealand</option>
<option value="Oman">Oman</option>
<option value="Uganda">Uganda</option>
<option value="Uzbekistan">Uzbekistan</option>
<option value="Pakistan">Pakistan</option>
<option value="Palau">Palau</option>
<option value="Palestine">Palestine</option>
<option value="Panama">Panama</option>
<option value="Papua New Guinea">Papua New Guinea</option>
<option value="Paraguay">Paraguay</option>
<option value="Netherlands">Netherlands</option>
<option value="Peru">Peru</option>
<option value="Philippines">Philippines</option>
<option value="Pitcairn Islands">Pitcairn Islands</option>
<option value="Poland">Poland</option>
<option value="French Polynesia">French Polynesia</option>
<option value="Puerto Rico">Puerto Rico</option>
<option value="Portugal">Portugal</option>
<option value="Qatar">Qatar</option>
<option value="Central African Republic">Central African Republic</option>
<option value="Democratic Republic of the Congo">Democratic Republic of the Congo</option>
<option value="Dominican Republic">Dominican Republic</option>
<option value="Congo">Congo</option>
<option value="Czech Republic">Czech Republic</option>
<option value="Réunion">Réunion</option>
<option value="Romania">Romania</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Russia">Russia</option>
<option value="Rwanda">Rwanda</option>
<option value="Saint Helena">Saint Helena</option>
<option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option>
<option value="Saint Lucia">Saint Lucia</option>
<option value="San Marino">San Marino</option>
<option value="Saint Pierre and Miquelon">Saint Pierre and Miquelon</option>
<option value="Vatican City">Vatican City</option>
<option value="Saint Vincent and the Grenadines">Saint Vincent and the Grenadines</option>
<option value="El Salvador">El Salvador</option>
<option value="Samoa">Samoa</option>
<option value="Sao Tome and Principe">Sao Tome and Principe</option>
<option value="Senegal">Senegal</option>
<option value="Serbia">Serbia</option>
<option value="Seychelles">Seychelles</option>
<option value="Sierra Leone">Sierra Leone</option>
<option value="Singapore">Singapore</option>
<option value="Slovakia">Slovakia</option>
<option value="Slovenia">Slovenia</option>
<option value="Somalia">Somalia</option>
<option value="Sudan">Sudan</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
<option value="Suriname">Suriname</option>
<option value="Svalbard and Jan Mayen">Svalbard and Jan Mayen</option>
<option value="Eswatini">Eswatini</option>
<option value="Syria">Syria</option>
<option value="Tajikistan">Tajikistan</option>
<option value="Taiwan">Taiwan</option>
<option value="Tanzania">Tanzania</option>
<option value="Chad">Chad</option>
<option value="French Southern Territories">French Southern Territories</option>
<option value="Thailand">Thailand</option>
<option value="Timor-Leste">Timor-Leste</option>
<option value="Togo">Togo</option>
<option value="Tonga">Tonga</option>
<option value="Trinidad and Tobago">Trinidad and Tobago</option>
<option value="Tunisia">Tunisia</option>
<option value="Turkmenistan">Turkmenistan</option>
<option value="Turks and Caicos Islands">Turks and Caicos Islands</option>
<option value="Turkey">Turkey</option>
<option value="Tuvalu">Tuvalu</option>
<option value="Ukraine">Ukraine</option>
<option value="Uruguay">Uruguay</option>
<option value="Vanuatu">Vanuatu</option>
<option value="Venezuela">Venezuela</option>
<option value="British Virgin Islands">British Virgin Islands</option>
<option value="United States Virgin Islands">United States Virgin Islands</option>
<option value="Vietnam">Vietnam</option>
<option value="Wallis and Futuna">Wallis and Futuna</option>
<option value="Yemen">Yemen</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select>
<h3>Destination</h3>
<label for="destination-address">Address:</label>
<gmp-place-autocomplete id="destination-address" name="destination-address"></gmp-place-autocomplete>
<label for="destination-country">Country:</label>
<select id="destination-country" name="destination-country" required>
<option value="">--Select a Country--</option>
<option value="Afghanistan">Afghanistan</option>
<option value="Afrique du Sud">Afrique du Sud</option>
<option value="Åland Islands">Åland Islands</option>
<option value="Albania">Albania</option>
<option value="Algeria">Algeria</option>
<option value="Germany">Germany</option>
<option value="American Samoa">American Samoa</option>
<option value="Andorra">Andorra</option>
<option value="Angola">Angola</option>
<option value="Anguilla">Anguilla</option>
<option value="Antigua and Barbuda">Antigua and Barbuda</option>
<option value="Netherlands Antilles">Netherlands Antilles</option>
<option value="Saudi Arabia">Saudi Arabia</option>
<option value="Argentina">Argentina</option>
<option value="Armenia">Armenia</option>
<option value="Aruba">Aruba</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Azerbaijan">Azerbaijan</option>
<option value="Bahamas">Bahamas</option>
<option value="Bahrain">Bahrain</option>
<option value="Bangladesh">Bangladesh</option>
<option value="Barbados">Barbados</option>
<option value="Belarus">Belarus</option>
<option value="Belgium">Belgium</option>
<option value="Belize">Belize</option>
<option value="Benin">Benin</option>
<option value="Bermuda">Bermuda</option>
<option value="Bhutan">Bhutan</option>
<option value="Bolivia">Bolivia</option>
<option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
<option value="Botswana">Botswana</option>
<option value="Brazil">Brazil</option>
<option value="Brunei">Brunei</option>
<option value="Bulgaria">Bulgaria</option>
<option value="Burkina Faso">Burkina Faso</option>
<option value="Burundi">Burundi</option>
<option value="Cambodia">Cambodia</option>
<option value="Cameroon">Cameroon</option>
<option value="Canada">Canada</option>
<option value="Cabo Verde">Cabo Verde</option>
<option value="Cayman Islands">Cayman Islands</option>
<option value="Central African Republic">Central African Republic</option>
<option value="Chile">Chile</option>
<option value="China">China</option>
<option value="Christmas Island">Christmas Island</option>
<option value="Cocos (Keeling) Islands">Cocos (Keeling) Islands</option>
<option value="Colombia">Colombia</option>
<option value="Comoros">Comoros</option>
<option value="Congo">Congo</option>
<option value="Cook Islands">Cook Islands</option>
<option value="North Korea">North Korea</option>
<option value="South Korea">South Korea</option>
<option value="Costa Rica">Costa Rica</option>
<option value="Côte d'Ivoire">Côte d'Ivoire</option>
<option value="Croatia">Croatia</option>
<option value="Cuba">Cuba</option>
<option value="Denmark">Denmark</option>
<option value="Djibouti">Djibouti</option>
<option value="Dominica">Dominica</option>
<option value="Egypt">Egypt</option>
<option value="El Salvador">El Salvador</option>
<option value="United Arab Emirates">United Arab Emirates</option>
<option value="Dubai">Dubai</option>
<option value="Ecuador">Ecuador</option>
<option value="Eritrea">Eritrea</option>
<option value="Spain">Spain</option>
<option value="Estonia">Estonia</option>
<option value="Federated States of Micronesia">Federated States of Micronesia</option>
<option value="United States">United States</option>
<option value="Ethiopia">Ethiopia</option>
<option value="Falkland Islands">Falkland Islands</option>
<option value="Faroe Islands">Faroe Islands</option>
<option value="Fiji">Fiji</option>
<option value="Finland">Finland</option>
<option value="France">France</option>
<option value="Gabon">Gabon</option>
<option value="Gambia">Gambia</option>
<option value="Georgia">Georgia</option>
<option value="South Georgia and the South Sandwich Islands">South Georgia and the South Sandwich Islands</option>
<option value="Ghana">Ghana</option>
<option value="Gibraltar">Gibraltar</option>
<option value="Greece">Greece</option>
<option value="Grenada">Grenada</option>
<option value="Greenland">Greenland</option>
<option value="Guadeloupe">Guadeloupe</option>
<option value="Guam">Guam</option>
<option value="Guatemala">Guatemala</option>
<option value="Guinea">Guinea</option>
<option value="Equatorial Guinea">Equatorial Guinea</option>
<option value="Guinea-Bissau">Guinea-Bissau</option>
<option value="Guyana">Guyana</option>
<option value="French Guiana">French Guiana</option>
<option value="Haiti">Haiti</option>
<option value="Honduras">Honduras</option>
<option value="Hong Kong">Hong Kong</option>
<option value="Hungary">Hungary</option>
<option value="India">India</option>
<option value="Indonesia">Indonesia</option>
<option value="Iran">Iran</option>
<option value="Iraq">Iraq</option>
<option value="Ireland">Ireland</option>
<option value="Iceland">Iceland</option>
<option value="Israel">Israel</option>
<option value="Italy">Italy</option>
<option value="Jamaica">Jamaica</option>
<option value="Japan">Japan</option>
<option value="Jordan">Jordan</option>
<option value="Kazakhstan">Kazakhstan</option>
<option value="Kenya">Kenya</option>
<option value="Kyrgyzstan">Kyrgyzstan</option>
<option value="Kiribati">Kiribati</option>
<option value="Kuwait">Kuwait</option>
<option value="Laos">Laos</option>
<option value="Lesotho">Lesotho</option>
<option value="Latvia">Latvia</option>
<option value="Lebanon">Lebanon</option>
<option value="Liberia">Liberia</option>
<option value="Libya">Libya</option>
<option value="Liechtenstein">Liechtenstein</option>
<option value="Lithuania">Lithuania</option>
<option value="Luxembourg">Luxembourg</option>
<option value="Macao">Macao</option>
<option value="North Macedonia">North Macedonia</option>
<option value="Madagascar">Madagascar</option>
<option value="Malaysia">Malaysia</option>
<option value="Malawi">Malawi</option>
<option value="Maldives">Maldives</option>
<option value="Mali">Mali</option>
<option value="Malta">Malta</option>
<option value="Isle of Man">Isle of Man</option>
<option value="Northern Mariana Islands">Northern Mariana Islands</option>
<option value="Morocco">Morocco</option>
<option value="Marshall Islands">Marshall Islands</option>
<option value="Martinique">Martinique</option>
<option value="Mauritius">Mauritius</option>
<option value="Mauritania">Mauritania</option>
<option value="Mayotte">Mayotte</option>
<option value="Mexico">Mexico</option>
<option value="Moldova">Moldova</option>
<option value="Monaco">Monaco</option>
<option value="Mongolia">Mongolia</option>
<option value="Montenegro">Montenegro</option>
<option value="Montserrat">Montserrat</option>
<option value="Mozambique">Mozambique</option>
<option value="Myanmar">Myanmar</option>
<option value="Namibia">Namibia</option>
<option value="Nauru">Nauru</option>
<option value="Nepal">Nepal</option>
<option value="Nicaragua">Nicaragua</option>
<option value="Niger">Niger</option>
<option value="Nigeria">Nigeria</option>
<option value="Niue">Niue</option>
<option value="Norfolk Island">Norfolk Island</option>
<option value="Norway">Norway</option>
<option value="New Caledonia">New Caledonia</option>
<option value="New Zealand">New Zealand</option>
<option value="Oman">Oman</option>
<option value="Uganda">Uganda</option>
<option value="Uzbekistan">Uzbekistan</option>
<option value="Pakistan">Pakistan</option>
<option value="Palau">Palau</option>
<option value="Palestine">Palestine</option>
<option value="Panama">Panama</option>
<option value="Papua New Guinea">Papua New Guinea</option>
<option value="Paraguay">Paraguay</option>
<option value="Netherlands">Netherlands</option>
<option value="Peru">Peru</option>
<option value="Philippines">Philippines</option>
<option value="Pitcairn Islands">Pitcairn Islands</option>
<option value="Poland">Poland</option>
<option value="French Polynesia">French Polynesia</option>
<option value="Puerto Rico">Puerto Rico</option>
<option value="Portugal">Portugal</option>
<option value="Qatar">Qatar</option>
<option value="Central African Republic">Central African Republic</option>
<option value="Democratic Republic of the Congo">Democratic Republic of the Congo</option>
<option value="Dominican Republic">Dominican Republic</option>
<option value="Congo">Congo</option>
<option value="Czech Republic">Czech Republic</option>
<option value="Réunion">Réunion</option>
<option value="Romania">Romania</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Russia">Russia</option>
<option value="Rwanda">Rwanda</option>
<option value="Saint Helena">Saint Helena</option>
<option value="Saint Kitts and Nevis">Saint Kitts and Nevis</option>
<option value="Saint Lucia">Saint Lucia</option>
<option value="San Marino">San Marino</option>
<option value="Saint Pierre and Miquelon">Saint Pierre and Miquelon</option>
<option value="Vatican City">Vatican City</option>
<option value="Saint Vincent and the Grenadines">Saint Vincent and the Grenadines</option>
<option value="El Salvador">El Salvador</option>
<option value="Samoa">Samoa</option>
<option value="Sao Tome and Principe">Sao Tome and Principe</option>
<option value="Senegal">Senegal</option>
<option value="Serbia">Serbia</option>
<option value="Seychelles">Seychelles</option>
<option value="Sierra Leone">Sierra Leone</option>
<option value="Singapore">Singapore</option>
<option value="Slovakia">Slovakia</option>
<option value="Slovenia">Slovenia</option>
<option value="Somalia">Somalia</option>
<option value="Sudan">Sudan</option>
<option value="Sri Lanka">Sri Lanka</option>
<option value="Sweden">Sweden</option>
<option value="Switzerland">Switzerland</option>
<option value="Suriname">Suriname</option>
<option value="Svalbard and Jan Mayen">Svalbard and Jan Mayen</option>
<option value="Eswatini">Eswatini</option>
<option value="Syria">Syria</option>
<option value="Tajikistan">Tajikistan</option>
<option value="Taiwan">Taiwan</option>
<option value="Tanzania">Tanzania</option>
<option value="Chad">Chad</option>
<option value="French Southern Territories">French Southern Territories</option>
<option value="Thailand">Thailand</option>
<option value="Timor-Leste">Timor-Leste</option>
<option value="Togo">Togo</option>
<option value="Tonga">Tonga</option>
<option value="Trinidad and Tobago">Trinidad and Tobago</option>
<option value="Tunisia">Tunisia</option>
<option value="Turkmenistan">Turkmenistan</option>
<option value="Turks and Caicos Islands">Turks and Caicos Islands</option>
<option value="Turkey">Turkey</option>
<option value="Tuvalu">Tuvalu</option>
<option value="Ukraine">Ukraine</option>
<option value="Uruguay">Uruguay</option>
<option value="Vanuatu">Vanuatu</option>
<option value="Venezuela">Venezuela</option>
<option value="British Virgin Islands">British Virgin Islands</option>
<option value="United States Virgin Islands">United States Virgin Islands</option>
<option value="Vietnam">Vietnam</option>
<option value="Wallis and Futuna">Wallis and Futuna</option>
<option value="Yemen">Yemen</option>
<option value="Zambia">Zambia</option>
<option value="Zimbabwe">Zimbabwe</option>
</select>
<label for="departure-date">Proposed departure date:</label>
<select id="departure-date" name="departure-date" required>
<option value="1-month">Within 1 month</option>
<option value="1-3-months">In 1 to 3 months</option>
<option value="3-plus-months">Beyond 3 months</option>
<option value="under-consideration">Project under consideration</option>
</select>
<button type="button" id="prev-page-2-btn">Previous</button>
<button type="button" id="next-page-2-btn">Next</button>
</div>
<div id="page-3" class="page" style="display: none;">
<h2>Travel Conditions</h2>
<div id="travel-options-group">
<label for="travel-option">Do you want the pet to travel:</label>
<select id="travel-option" name="travel-option" required>
<option value="alone">Alone (Air Freight)</option>
<option value="with-you-cabin">With you - in cabin</option>
<option value="with-you-hold">With you - in hold</option>
</select>
<div id="context-field" style="display: block;">
<label for="context">Context:</label>
<select id="context" name="context" required>
<option value="breeding">Transport for breeding</option>
<option value="mobility">International mobility/expatriation</option>
<option value="joining-owner">Joining the owner at the destination</option>
<option value="others">Others</option>
</select>
<div id="other-means-field" style="display: none;">
<label for="other-means">Please mention other means:</label>
<input type="text" id="other-means" name="other-means">
</div>
</div>
</div>
<label for="additional-info">Additional Information:</label>
<textarea id="additional-info" name="additional-info" rows="4"></textarea>
<button type="button" id="prev-page-3-btn">Previous</button>
<button type="button" id="next-page-3-btn">Next</button>
</div>
<div id="page-4" class="page" style="display: none;">
<h2>Contact Information</h2>
<label for="first-name">First Name:</label>
<input type="text" id="first-name" name="first-name" required>
<label for="last-name">Last Name:</label>
<input type="text" id="last-name" name="last-name" required>
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" required>
<label for="phone">Phone Number:</label>
<input type="tel" id="phone" name="phone" required>
<label for="whatsapp">WhatsApp Number (Optional):</label>
<input type="tel" id="whatsapp" name="whatsapp">
<div class="checkbox-group">
<input type="checkbox" id="consent" name="consent" required>
<label for="consent">I have read and accept the Terms and Conditions and Privacy Policies.</label>
</div>
<button type="button" id="prev-page-4-btn">Previous</button>
<button type="submit">Submit</button>
</div>
</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/choices.js@10.2.0/public/assets/scripts/choices.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/intlTelInput.min.js"></script>
<script src="script.js"></script>
</body>
</html>
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
:root {
--primary-color: #93b697;
--primary-hover: #357abd;
--success-color: #00b894;
--danger-color: #ff7675;
--bg-gradient: linear-gradient(135deg, #fdfbfb 0%, #ebedee 100%);
--text-color: #2d3436;
}
body {
font-family: 'Poppins', sans-serif;
background: var(--bg-gradient);
color: var(--text-color);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 20px;
}
.form-container {
background: #ffffff;
padding: 2.5rem;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
width: 100%;
max-width: 650px;
}
h2 {
text-align: center;
color: var(--text-color);
margin-bottom: 1.5rem;
}
h3 {
color: var(--primary-color);
margin-top: 1.5rem;
border-bottom: 1px solid #eee;
padding-bottom: 10px;
}
/* Page transitions */
.page { display: none; }
#page-1 { display: block; } /* Ensure Page 1 is visible by default */
/* Input Styles */
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
width: 100%;
padding: 12px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 8px;
background-color: #f9f9f9;
box-sizing: border-box;
font-family: inherit;
}
/* Checkbox Group Styling for Page 4 */
.checkbox-group {
display: flex;
align-items: flex-start;
margin-bottom: 20px;
padding-top: 10px;
}
.checkbox-group input[type="checkbox"] {
width: auto;
margin-right: 10px;
margin-top: 5px;
flex-shrink: 0;
}
input.error, select.error, textarea.error {
border-color: var(--danger-color);
background-color: #fff0f0;
}
.checkbox-group label.error {
color: var(--danger-color);
font-weight: 500;
}
/* General Button Styles */
button, input[type="submit"] {
padding: 12px 24px;
border: none;
border-radius: 50px;
cursor: pointer;
font-weight: 600;
transition: transform 0.2s, box-shadow 0.2s;
margin-top: 10px;
}
button:hover { transform: translateY(-2px); }
/* Navigation & Submit Buttons */
button[id^="next"], button[type="submit"] {
background-color: var(--primary-color);
color: white;
float: right;
}
button[id^="prev"] {
background-color: #dfe6e9;
color: var(--text-color);
float: left;
}
/* --- Pet Action Buttons (Add/Remove inside card) --- */
.pet-action-buttons {
display: flex;
gap: 10px; /* Space between buttons */
margin-top: 15px;
align-items: center;
}
.remove-pet-btn {
background-color: white;
color: var(--danger-color);
border: 1px solid var(--danger-color);
font-size: 0.9rem;
padding: 8px 16px;
width: auto;
margin-top: 0;
}
.remove-pet-btn:hover {
background-color: var(--danger-color);
color: white;
}
.add-pet-btn {
background-color: #000000; /* Black background */
color: white;
font-size: 0.9rem;
padding: 8px 16px;
border: 1px solid #000000;
width: auto;
margin-top: 0;
border-radius: 50px;
}
.add-pet-btn:hover {
background-color: #333333;
transform: translateY(-2px);
}
/* Pet Form Card Container */
.pet-form {
border: 1px solid #eee;
padding: 1.5rem;
border-radius: 12px;
margin-bottom: 1.5rem;
background: #fff;
box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}
.pet-form h4 {
margin-top: 0;
color: var(--primary-color);
}
/* Clearfix for floating buttons */
.page::after {
content: "";
display: table;
clear: both;
}
/* --- Styles for Intl Tel Input --- */
.iti {
width: 100%;
margin-bottom: 10px;
}
.iti__tel-input {
width: 100%;
padding: 12px;
padding-left: 50px !important;
border: 1px solid #ddd;
border-radius: 8px;
background-color: #f9f9f9;
box-sizing: border-box;
font-family: inherit;
}
</style>
<script>
// --- Google Maps Place Autocomplete Functions (Global Scope) ---
function getCountry(place) {
if (!place.addressComponents) return null;
const countryComponent = place.addressComponents.find(c => c.types.includes('country'));
return countryComponent ? countryComponent.longText : null;
}
function findAndSelectCountry(choiceInstance, countryNameToFind) {
if (!countryNameToFind || !choiceInstance) return;
const normalizedCountry = countryNameToFind.toLowerCase().trim();
let bestMatch = null;
const countryMappings = {
"united states": "United States of America",
"usa": "United States of America",
"uk": "United Kingdom",
"great britain": "United Kingdom"
};
const mappedCountry = countryMappings[normalizedCountry];
if (mappedCountry) {
choiceInstance.setValue(mappedCountry);
return;
}
const selectElement = choiceInstance.passedElement.element;
for (const option of selectElement.options) {
const optionValue = option.value.toLowerCase().trim();
const optionText = option.textContent.toLowerCase().trim();
if (optionValue === normalizedCountry || optionText === normalizedCountry) {
bestMatch = option.value;
break;
}
if (!bestMatch && (optionValue.includes(normalizedCountry) || normalizedCountry.includes(optionValue))) {
bestMatch = option.value;
}
}
if (bestMatch) {
choiceInstance.setValue(bestMatch);
} else {
console.warn(`Could not find a matching country for: "${countryNameToFind}"`);
}
}
function initAutocomplete() {
const departureAutocomplete = document.getElementById('departure-address');
const destinationAutocomplete = document.getElementById('destination-address');
if (!departureAutocomplete || !destinationAutocomplete || !window.departureChoice || !window.destinationChoice) {
return;
}
departureAutocomplete.addEventListener('gmp-placeselect', (event) => {
const place = event.place;
const countryName = getCountry(place);
findAndSelectCountry(window.departureChoice, countryName);
});
destinationAutocomplete.addEventListener('gmp-placeselect', (event) => {
const place = event.place;
const countryName = getCountry(place);
findAndSelectCountry(window.destinationChoice, countryName);
});
}
document.addEventListener('DOMContentLoaded', () => {
const choiceOptions = {
searchEnabled: true,
itemSelectText: '',
shouldSort: false,
};
window.departureChoice = new Choices(document.getElementById('departure-country'), choiceOptions);
window.destinationChoice = new Choices(document.getElementById('destination-country'), choiceOptions);
const phoneInput = document.getElementById('phone');
const whatsappInput = document.getElementById('whatsapp');
const itiOptions = { utilsScript: "https://cdn.jsdelivr.net/npm/intl-tel-input@18.2.1/build/js/utils.js", preferredCountries: ['fr', 'us', 'gb', 'ca', 'au'], separateDialCode: true };
const phoneIti = window.intlTelInput(phoneInput, itiOptions);
const whatsappIti = window.intlTelInput(whatsappInput, itiOptions);
const qualifiedDogs = ["Affenpinscher", "American Akita", "Akita Inu", "American Bully", "American Staffordshire Terrier", "Beauceron", "Anatolian Shepherd", "Caucasian Shepherd Dog", "Old English Sheepdog (Bobtail)", "Boerboel", "Bull Terrier", "Bullmastiff", "Ca de Bou (Majorcan Mastiff)", "Cane Corso", "Dogo Argentino", "Dogue de Bordeaux", "Doberman", "Fila Brasileiro", "Mastiff", "Neapolitan Mastiff", "Rottweiler", "Saint Bernard", "Staffordshire Bull Terrier", "Tibetan Mastiff", "Tosa", "Boston Terrier", "English Bulldog", "French Bulldog", "Bernese Mountain Dog", "Bouvier des Flandres", "Bouvier des Ardennes", "Boxer", "Broholmer", "Brussels Griffon", "Cavalier King Charles Spaniel", "Chow Chow", "Dogue Canario (Presa Canario)", "Great Dane", "Greater Swiss Mountain Dog", "Komondor", "Leonberger", "Pekingese", "Pug", "Pyrenean Mastiff", "Pyrenean Mountain Dog", "Shar Pei", "Others"];
const qualifiedCats = ["Bengal", "British Longhair", "British Shorthair", "Burmese", "Exotic Fold", "Exotic Shorthair", "Himalayan", "Persian", "Savannah", "Scottish Fold", "Selkirk Rex", "Others"];
const nacBreeds = ["Chinchilla", "Guinea Pig", "Ferret", "Gecko", "Lizard", "Salamander", "Domestic Rat", "Snake", "Turtle", "Others"];
const dogBreeds = ["Affenpinscher", "Airedale Terrier", "Akita Inu", "Alaskan Klee Kai", "Alaskan Malamute", "American Akita", "American Bully", "American Pit Bull Terrier", "American Staffordshire Terrier", "Anatolian Shepherd", "Appenzeller Sennenhund", "Atlas Shepherd (Aidi)", "Australian Cattle Dog", "Australian Shepherd", "Australian Terrier", "Basenji", "Basset Hound", "Beagle", "Bearded Collie", "Beauceron", "Belgian Malinois", "Belgian Shepherd", "Bernese Mountain Dog", "Bichon Frise", "Bloodhound", "Blue Gascon", "Boerboel", "Border Collie", "Border Terrier", "Borzoi", "Boston Terrier", "Bouvier des Ardennes", "Bouvier des Flandres", "Boxer", "Briard", "Brittany Spaniel", "Broholmer", "Brussels Griffon", "Bull Terrier", "Bullmastiff", "Ca de Bou (Majorcan Mastiff)", "Cairn Terrier", "Cane Corso", "Catalan Sheepdog", "Caucasian Shepherd Dog", "Cavalier King Charles Spaniel", "Chihuahua", "Chow Chow", "Cocker Spaniel", "Collie", "Coton de Tulear", "Creole or Mangrove Shepherd", "Czechoslovakian Wolfdog", "Dachshund", "Dalmatian", "Doberman", "Dogo Argentino", "Dogue Canario (Presa Canario)", "Dogue de Bordeaux", "Dutch Smoushond (Kooikerhondje)", "English Bulldog", "English Pointer", "Fila Brasileiro", "Finnish Spitz", "Fox Terrier", "French Bulldog", "French Foxhound", "American Foxhound", "German Shepherd", "German Shorthaired Pointer", "German Wirehaired Pointer", "German Spitz", "Golden Retriever", "Great Dane", "Greater Swiss Mountain Dog", "Greyhound", "Icelandic Sheepdog", "Italian Greyhound", "Italian Spitz", "Jack Russell Terrier", "Japanese Spaniel (Japanese Chin)", "Japanese Spitz", "Japanese Terrier", "King Charles Spaniel", "Komondor", "Kooikerhondje", "Labrador Retriever", "Leonberger", "Lhasa Apso", "Maltese", "Mastiff", "Medium Poodle", "Toy Poodle", "Mudi", "Neapolitan Mastiff", "Newfoundland", "Norfolk Terrier", "Old English Sheepdog (Bobtail)", "Pekingese", "Picardy Shepherd", "Picardy Spaniel", "Pinscher", "Pointer", "Polish Lowland Sheepdog", "Pomeranian", "Poodle", "Portuguese Shepherd", "Portuguese Water Dog", "Pug", "Puli", "Pumi", "Pyrenean Mastiff", "Pyrenean Mountain Dog", "Pyrenean Shepherd", "Rhodesian Ridgeback", "Rottweiler", "Saint Bernard", "Saluki", "Samoyed", "Schnauzer", "Scottish Terrier", "Setter", "Shar Pei", "Shetland Sheepdog", "Shiba Inu", "Shih Tzu", "Siberian Husky", "Silky Terrier", "Spanish Mastiff", "Spitz", "Staffordshire Bull Terrier", "Tibetan Mastiff", "Tibetan Spaniel", "Tibetan Terrier", "Tosa", "Toy Terrier", "Weimaraner", "Welsh Corgi", "Welsh Terrier", "West Highland White Terrier", "Whippet", "White Swiss Shepherd", "Yorkshire Terrier", "Others"];
const catBreeds = ["Abyssinian", "American Bobtail", "American Curl", "American Shorthair", "American Wirehair", "Turkish Angora", "Asian", "Australian Mist", "Balinese", "Bengal", "Birman (Sacred Birman)", "Bohemian Rex", "Bombay", "British Longhair", "British Shorthair", "Burmese", "Burmilla", "Californian Rex", "Chartreux", "Domestic Cat", "Norwegian Forest Cat", "Cornish Rex", "Siamese", "Cymric", "Devon Rex", "Donskoy (Don Sphynx)", "Exotic Shorthair", "Exotic Fold", "German Rex", "Himalayan", "Highland Fold", "Korat", "Kurilian Bobtail", "LaPerm", "Lykoi", "Maine Coon", "Manx", "Egyptian Mau", "Mekong Bobtail", "Munchkin", "Nebelung", "Neva Masquerade", "Ocicat", "Oriental", "Persian", "Peterbald", "Ragamuffin", "Ragdoll", "Russian Blue", "Scottish Fold", "Selkirk Rex", "Savannah", "Siberian", "Singapura", "Snowshoe", "Sokoke", "Somali", "Sphynx", "Thai", "Tiffanie", "Tonkinese", "Toyger", "Turkish Van", "European", "Others"];
const breeds = {
'Cat': catBreeds, 'Dog': dogBreeds, 'NAC': nacBreeds, 'Bird': ["Ara", "Cockatoo", "Caique", "Canary", "Conure", "Eclectus", "African Grey", "Lory", "Lovebird", "Ring-necked Parakeet", "Budgerigar", "Amazon Parrot", "Others"],
'Rabbit': ["Holland Lop (lop-eared dwarf)", "Netherland Dwarf", "Angora Dwarf (long-haired)", "Lionhead Rabbit (mane around the head)", "Dutch Rabbit", "Burgundy Fawn", "Norman", "English Butterfly", "Flemish Giant", "White Giant Rabbit from Bouscat", "Others"], 'Others': []
};
const qualifiedCountries = ["France", "Mauritius", "Australia", "New Caledonia", "New Zealand", "South Africa", "Ireland", "Wallis and Futuna", "Bahrain", "Hong Kong", "Dubai", "United Kingdom", "French Polynesia"];
const page1 = document.getElementById('page-1');
const page2 = document.getElementById('page-2');
const page3 = document.getElementById('page-3');
const page4 = document.getElementById('page-4');
const nextPage1Btn = document.getElementById('next-page-1-btn');
const prevPage2Btn = document.getElementById('prev-page-2-btn');
const nextPage2Btn = document.getElementById('next-page-2-btn');
const prevPage3Btn = document.getElementById('prev-page-3-btn');
const nextPage3Btn = document.getElementById('next-page-3-btn');
const prevPage4Btn = document.getElementById('prev-page-4-btn');
const petFormsContainer = document.getElementById('pet-forms-container');
const form = document.getElementById('pet-form');
const conditionalQuestion = document.getElementById('travel-options-group');
const travelOption = document.getElementById('travel-option');
const contextField = document.getElementById('context-field');
const contextSelect = document.getElementById('context');
const otherMeansField = document.getElementById('other-means-field');
let petIdCounter = 0;
function renumberPets() {
const petForms = document.querySelectorAll('.pet-form');
petForms.forEach((petForm, index) => {
const petId = index + 1;
const heading = petForm.querySelector('h4');
if (heading) {
heading.textContent = `Pet ${petId}`;
}
});
}
function createPetForm() {
petIdCounter++;
const petForm = document.createElement('div');
petForm.classList.add('pet-form');
petForm.dataset.id = petIdCounter;
const animalTypeOptions = Object.keys(breeds).map(type_value =>
`<option value="${type_value}">${type_value}</option>`
).join('');
petForm.innerHTML = `
<h4>Pet ${petIdCounter}</h4>
<label for="animal-type-${petIdCounter}">What type of animal is it?</label>
<select id="animal-type-${petIdCounter}" name="animal-type-${petIdCounter}" required>
<option value="">--Please choose an option--</option>
${animalTypeOptions}
</select>
<div class="breed-container" style="display: none;">
<label for="breed-${petIdCounter}">What is its breed?</label>
<select id="breed-${petIdCounter}" name="breed-${petIdCounter}"></select>
</div>
<div class="custom-specification-container" style="display: none;">
<label for="custom-spec-${petIdCounter}" id="custom-spec-label-${petIdCounter}">Specify Animal Type & Breed:</label>
<input type="text" id="custom-spec-${petIdCounter}" name="custom-spec-${petIdCounter}">
</div>
<label for="age-${petIdCounter}">How old is he/she?</label>
<input type="text" id="age-${petIdCounter}" name="age-${petIdCounter}" required>
<label for="weight-${petIdCounter}">What is its weight?</label>
<input type="text" id="weight-${petIdCounter}" name="weight-${petIdCounter}" required>
<div class="pet-action-buttons">
<button type="button" class="remove-pet-btn">Remove Pet</button>
<button type="button" class="add-pet-btn">Add Pet</button>
</div>
`;
petFormsContainer.appendChild(petForm);
renumberPets();
const animalTypeSelect = petForm.querySelector(`#animal-type-${petIdCounter}`);
const breedContainer = petForm.querySelector('.breed-container');
const breedSelect = petForm.querySelector(`#breed-${petIdCounter}`);
const customSpecContainer = petForm.querySelector('.custom-specification-container');
const customSpecInput = petForm.querySelector(`#custom-spec-${petIdCounter}`);
const customSpecLabel = petForm.querySelector(`#custom-spec-label-${petIdCounter}`);
function updateCustomSpec(isCustom, isTypeOthers) {
customSpecContainer.style.display = isCustom ? 'block' : 'none';
customSpecInput.required = isCustom;
if (isCustom) {
customSpecLabel.textContent = isTypeOthers ? "Specify Animal Type & Breed:" : "Please specify the breed:";
}
}
let breedChoicesInstance = null;
animalTypeSelect.addEventListener('change', (e) => {
const selectedType = e.target.value;
if (breedChoicesInstance) {
breedChoicesInstance.destroy();
}
breedContainer.style.display = 'none';
breedSelect.required = false;
breedSelect.innerHTML = '';
updateCustomSpec(false, false);
if (selectedType === 'Others') {
updateCustomSpec(true, true);
} else if (selectedType && breeds[selectedType]) {
breedSelect.innerHTML = `<option value="">--Select Breed--</option>`;
breeds[selectedType].forEach(breed_value => {
const option = document.createElement('option');
option.value = breed_value;
option.textContent = breed_value;
breedSelect.appendChild(option);
});
breedContainer.style.display = 'block';
breedSelect.required = true;
breedChoicesInstance = new Choices(breedSelect, choiceOptions);
breedSelect.addEventListener('change', () => {
if (breedSelect.value === 'Others') {
updateCustomSpec(true, false);
} else {
updateCustomSpec(false, false);
}
});
}
});
const numericInputs = petForm.querySelectorAll('input[name^="age"], input[name^="weight"]');
numericInputs.forEach(input => {
input.addEventListener('input', () => {
if (input.name.startsWith('age')) {
input.value = input.value.replace(/[^0-9]/g, '');
} else if (input.name.startsWith('weight')) {
let value = input.value;
value = value.replace(/[^0-9.]/g, '');
const parts = value.split('.');
if (parts.length > 2) {
value = parts[0] + '.' + parts.slice(1).join('');
}
input.value = value;
}
});
});
petForm.querySelector('.remove-pet-btn').addEventListener('click', () => {
if (document.querySelectorAll('.pet-form').length <= 1) {
alert("Cannot remove the last pet. Please add another one before removing this one.");
return;
}
petForm.remove();
renumberPets();
});
petForm.querySelector('.add-pet-btn').addEventListener('click', createPetForm);
}
createPetForm();
function validatePage(pageElement) {
let isValid = true;
if (pageElement.id === 'page-4') {
const firstName = document.getElementById('first-name');
if (firstName.value.trim() === '') {
alert("Please enter your first name.");
return false;
}
const lastName = document.getElementById('last-name');
if (lastName.value.trim() === '') {
alert("Please enter your last name.");
return false;
}
const email = document.getElementById('email');
if (email.value.trim() === '') {
alert("Please enter your email address.");
return false;
}
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailRegex.test(email.value.trim())) {
alert("Please enter a valid email address.");
return false;
}
const phone = document.getElementById('phone');
if (phone.value.trim() === '') {
alert("Please enter your phone number.");
return false;
}
if (!phoneIti.isValidNumber()) {
alert("Please enter a valid phone number.");
return false;
}
const consent = document.getElementById('consent');
if (!consent.checked) {
alert("Please accept the terms and conditions.");
return false;
}
} else {
const requiredInputs = pageElement.querySelectorAll('[required]');
for (const input of requiredInputs) {
let isVisible = false;
const style = window.getComputedStyle(input);
if (style.display !== 'none' && style.visibility !== 'hidden' && style.opacity !== '0') {
isVisible = true;
}
if (isVisible) {
let parent = input.parentElement;
while (parent && parent !== pageElement) {
const parentStyle = window.getComputedStyle(parent);
if (parentStyle.display === 'none') {
isVisible = false;
break;
}
parent = parent.parentElement;
}
}
if (isVisible && (input.value === undefined || input.value.trim() === '')) {
input.classList.add('error');
isValid = false;
} else {
input.classList.remove('error');
}
}
if (!isValid) {
alert("Please fill in all required fields.");
}
}
return isValid;
}
if (nextPage1Btn) {
nextPage1Btn.addEventListener('click', () => {
if (validatePage(page1)) {
page1.style.display = 'none';
page2.style.display = 'block';
}
});
}
if (prevPage2Btn) {
prevPage2Btn.addEventListener('click', () => {
page2.style.display = 'none';
page1.style.display = 'block';
});
}
if (nextPage2Btn) {
nextPage2Btn.addEventListener('click', (e) => {
const departureCountryValue = window.departureChoice.getValue(true);
const destinationCountryValue = window.destinationChoice.getValue(true);
if (departureCountryValue === '' || departureCountryValue === null) {
alert("Please select a Departure Country.");
return;
}
if (destinationCountryValue === '' || destinationCountryValue === null) {
alert("Please select a Destination Country.");
return;
}
if (validatePage(page2)) {
page2.style.display = 'none';
page3.style.display = 'block';
checkQualification();
}
});
}
if (prevPage3Btn) {
prevPage3Btn.addEventListener('click', () => {
page3.style.display = 'none';
page2.style.display = 'block';
});
}
if (nextPage3Btn) {
nextPage3Btn.addEventListener('click', () => {
if (validatePage(page3)) {
page3.style.display = 'none';
page4.style.display = 'block';
}
});
}
if (prevPage4Btn) {
prevPage4Btn.addEventListener('click', () => {
page4.style.display = 'none';
page3.style.display = 'block';
});
}
function checkQualification() {
const destinationCountry = document.getElementById('destination-country').value;
const petForms = document.querySelectorAll('.pet-form');
let isAtLeastOnePetQualified = false;
petForms.forEach(petForm => {
const animalType = petForm.querySelector('select[name^="animal-type"]').value;
const breed = petForm.querySelector('select[name^="breed"]').value;
if (animalType === 'Dog' && qualifiedDogs.includes(breed)) isAtLeastOnePetQualified = true;
else if (animalType === 'Cat' && qualifiedCats.includes(breed)) isAtLeastOnePetQualified = true;
else if (['Bird', 'Rabbit', 'NAC', 'Others'].includes(animalType)) {
isAtLeastOnePetQualified = true;
}
});
const isCountryQualified = qualifiedCountries.includes(destinationCountry);
if (!isCountryQualified && !isAtLeastOnePetQualified) {
conditionalQuestion.style.display = 'block';
travelOption.required = true;
} else {
conditionalQuestion.style.display = 'none';
travelOption.required = false;
contextField.style.display = 'none';
contextSelect.required = false;
document.getElementById('other-means').required = false;
}
}
travelOption.addEventListener('change', (e) => {
if (e.target.value === 'alone') {
contextField.style.display = 'block';
contextSelect.required = true;
} else {
contextField.style.display = 'none';
contextSelect.required = false;
otherMeansField.style.display = 'none';
document.getElementById('other-means').required = false;
}
});
contextSelect.addEventListener('change', (e) => {
const otherMeansInput = document.getElementById('other-means');
if (e.target.value === 'others') {
otherMeansField.style.display = 'block';
otherMeansInput.required = true;
} else {
otherMeansField.style.display = 'none';
otherMeansInput.required = false;
}
});
form.addEventListener('submit', async (e) => {
e.preventDefault();
if (!validatePage(page4)) {
// The validatePage function now shows the specific error
return;
}
const formData = new FormData(form);
const data = { pets: [] };
document.querySelectorAll('.pet-form').forEach(pForm => {
const id = pForm.dataset.id;
const type = formData.get(`animal-type-${id}`);
let breedVal = formData.get(`breed-${id}`) || '';
const customSpecValue = formData.get(`custom-spec-${id}`);
if (type === 'Others' || breedVal === 'Others') {
breedVal = customSpecValue;
}
data.pets.push({
animal_type: type,
breed: breedVal,
age: formData.get(`age-${id}`),
weight: formData.get(`weight-${id}`)
});
});
data['departure-address'] = formData.get('departure-address');
data['departure-country'] = formData.get('departure-country');
data['destination-address'] = formData.get('destination-address');
data['destination-country'] = formData.get('destination-country');
data['departure-date'] = formData.get('departure-date');
data['travel-option'] = formData.get('travel-option') || '';
data['context'] = formData.get('context') || '';
data['other-means'] = formData.get('other-means') || '';
data['additional-info'] = formData.get('additional-info');
data['first-name'] = formData.get('first-name');
data['last-name'] = formData.get('last-name');
data['email'] = formData.get('email');
data['phone'] = phoneIti.getNumber();
data['whatsapp'] = whatsappInput.value ? whatsappIti.getNumber() : '';
const submitBtn = form.querySelector('button[type="submit"]');
const originalBtnText = submitBtn.textContent;
submitBtn.disabled = true;
submitBtn.textContent = "Sending...";
try {
const response = await fetch('https://forms.worldbaggagenetwork.com/wp-json/pet-transport/v1/request', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(data),
});
if (!response.ok) {
const err = await response.json();
throw new Error(err.message || 'Server error');
}
alert("Request submitted successfully!");
form.reset();
window.location.reload();
} catch (error) {
console.error(error);
alert(`Submission failed: ${error.message}`);
submitBtn.disabled = false;
submitBtn.textContent = originalBtnText;
}
});
});
</script>