@ -1,15 +1,17 @@
< div class = "tripnotes" collapse = "" collapse-status = "hide" data-target = "tripnotes" data-target-icon = "day4Icon" style = "font-size: 25px ;
< div class = "tripnotes" collapse = "" collapse-status = "hide" data-target = "tripnotes" data-target-icon = "day4Icon" style = "font-size: 25px ;
color: #ad1818;
color: #ad1818;
font-weight: 600;
font-weight: 600;
font-family: 'Goudy Old Style';">Your 1:1 travel consultant will reply within 1 working day.< span class = "OpenIcon" id = "day4Icon" > < / span > < / div >
font-family: 'Goudy Old Style';">Your 1:1 travel consultant will reply within 1 working day.< span class = "OpenIcon"
< div class = "tripnotescontent" collapse-content = "" id = "tripnotes" style = "display: none; box-sizing: border-box;" >
id="day4Icon">< / span > < / div >
< div class = "info_page_inquiry" >
< div class = "tripnotescontent" collapse-content = "" id = "tripnotes" style = "display: none; box-sizing: border-box;" >
< div class = "info_page_inquiry" >
< form action = "/forms/inquiry_save" id = "info_page_form" method = "post" >
< form action = "/forms/inquiry_save" id = "info_page_form" method = "post" >
< div class = "InquiryFormBox" >
< div class = "InquiryFormBox" >
< div class = "FieldSet" >
< div class = "FieldSet" >
< textarea id = "additionalrequirements" name = "additional_requirements"
< textarea id = "additionalrequirements" name = "additional_requirements"
placeholder="E.g.: This is a big trip for anniversary, honeymoon, birthday celebration..." style="margin-bottom:20px;">< / textarea >
placeholder="E.g.: This is a big trip for anniversary, honeymoon, birthday celebration..."
style="margin-bottom:20px;">< / textarea >
< div class = "selectionBlock" style = "margin-bottom: 0;" >
< div class = "selectionBlock" style = "margin-bottom: 0;" >
< p style = "margin-bottom: 0px;" >
< p style = "margin-bottom: 0px;" >
< strong > Number in your group< / strong >
< strong > Number in your group< / strong >
@ -45,9 +47,9 @@
< div id = "adultBlock" style = "display: none" >
< div id = "adultBlock" style = "display: none" >
< p style = "margin-bottom: 5px;" > < strong > Adults number (age ≥ 18 years old)< / strong > < / p >
< p style = "margin-bottom: 5px;" > < strong > Adults number (age ≥ 18 years old)< / strong > < / p >
< div class = "kids_age" >
< div class = "kids_age" >
< select class = "kids_number" id = "adult_18_plus" name = "adult_18_plus" >
< select class = "kids_number" id = "adult_18_plus" name = "adult_18_plus" >
< option value = "0" > 0< / option >
< option value = "0" > 0< / option >
< option value = "1" > 1< / option >
< option value = "1" > 1< / option >
< option value = "2" > 2< / option >
< option value = "2" > 2< / option >
@ -152,19 +154,19 @@
< div id = "date_error_msg" style = "display: none" >
< div id = "date_error_msg" style = "display: none" >
< div class = "requiredArea" style = "margin-top:-10px;" > Select your travel data.< / div >
< div class = "requiredArea" style = "margin-top:-10px;" > Select your travel data.< / div >
< / div >
< / div >
< div class = "travel_group date_select" >
< div class = "travel_group date_select" >
< input type = "radio" value = "exact travel dates" id = "exact" name = "trip_date" >
< input type = "radio" value = "exact travel dates" id = "exact" name = "trip_date" >
< label for = "exact" class = "updatedestination" style = "font-size: 18px;" >
< label for = "exact" class = "updatedestination" style = "font-size: 18px;" >
Exact dates
Exact dates
< / label >
< / label >
< / div >
< / div >
< div class = "travel_group date_select" >
< div class = "travel_group date_select" >
< input type = "radio" value = "approximate travel dates" id = "approximate" name = "trip_date" >
< input type = "radio" value = "approximate travel dates" id = "approximate" name = "trip_date" >
< label for = "approximate" class = "updatedestination" style = "font-size: 18px;" >
< label for = "approximate" class = "updatedestination" style = "font-size: 18px;" >
Approximate dates
Approximate dates
< / label >
< / label >
< / div >
< / div >
< div class = "travel_group date_select" >
< div class = "travel_group date_select" >
< input type = "radio" value = "haven't decided travel dates" id = "yet" name = "trip_date" >
< input type = "radio" value = "haven't decided travel dates" id = "yet" name = "trip_date" >
< label for = "yet" class = "updatedestination" style = "font-size: 18px;" >
< label for = "yet" class = "updatedestination" style = "font-size: 18px;" >
Undecided dates
Undecided dates
@ -175,7 +177,8 @@
< p style = "margin-bottom: 10px;" > Select your travel date.< / p >
< p style = "margin-bottom: 10px;" > Select your travel date.< / p >
< div id = 'dateSelectionBlock' >
< div id = 'dateSelectionBlock' >
< div id = 'flatpickrBlock' >
< div id = 'flatpickrBlock' >
< input type = "text" class = "arrivalDate datepicker" id = "starting_date" name = "date_start" value = "" placeholder = "mm/dd/yyyy" autocomplete = "off" style = "width: auto ; float: left ; margin-right: 15px ; height: 30px ;
< input type = "text" class = "arrivalDate datepicker" id = "starting_date" name = "date_start" value = ""
placeholder="mm/dd/yyyy" autocomplete="off" style="width: auto; float: left; margin-right: 15px; height: 30px;
margin-top: 5px;">
margin-top: 5px;">
< / div >
< / div >
< select class = "country_code" id = "expectedMonth" name = "expected_month" >
< select class = "country_code" id = "expectedMonth" name = "expected_month" >
@ -229,13 +232,16 @@
< input class = "FullName" data-required = "Please enter your fullname" id = "realname" name = "name"
< input class = "FullName" data-required = "Please enter your fullname" id = "realname" name = "name"
placeholder="Your name" required="" type="text">
placeholder="Your name" required="" type="text">
< span id = "realname_errmsg" style = "display: none" > < span class = "requiredArea" > Please enter your name.< / span > < / span >
< span id = "realname_errmsg" style = "display: none" > < span class = "requiredArea" > Please enter your
name.< / span > < / span >
< input class = "EmailAddress" data-required = "Please enter your e-mail address"
< input class = "EmailAddress" data-required = "Please enter your e-mail address"
data-pattern="Expecting an e-mail address" id="email" name="email" pattern="^[\w\-\.]+@[\w\-\.]+(\.\w+)+$"
data-pattern="Expecting an e-mail address" id="email" name="email" pattern="^[\w\-\.]+@[\w\-\.]+(\.\w+)+$"
placeholder="Email" required type="text">
placeholder="Email" required type="text">
< span id = "email_errmsg" style = "display: none" > < span class = "requiredArea" > Please enter your email.< / span > < / span >
< span id = "email_errmsg" style = "display: none" > < span class = "requiredArea" > Please enter your
< span id = "email_verify_errmsg" style = "display: none" > < span class = "requiredArea" > Please verify your email.< / span > < / span >
email.< / span > < / span >
< span id = "email_verify_errmsg" style = "display: none" > < span class = "requiredArea" > Please verify your
email.< / span > < / span >
<!-- <p><input class="InquiryCalendar" data - min - date="7" id="starting_date" name="date_start"
<!-- <p><input class="InquiryCalendar" data - min - date="7" id="starting_date" name="date_start"
placeholder="Starting date" required type="date">< / p > -->
placeholder="Starting date" required type="date">< / p > -->
@ -507,33 +513,22 @@
< option value = "Zimbabwe +263" > Zimbabwe +263< / option >
< option value = "Zimbabwe +263" > Zimbabwe +263< / option >
< option value = "Åland Islands +385" > Åland Islands +358< / option >
< option value = "Åland Islands +385" > Åland Islands +358< / option >
< / select >
< / select >
< input class = "Inquiryphone" name = "PhoneNo" placeholder = "Phone number *"
< input class = "Inquiryphone" name = "PhoneNo" placeholder = "Phone number *" type = "text" >
type="text">
< span id = "phone_errmsg" style = "display: none" > < span class = "requiredArea" > Please enter your phone
< span id = "phone_errmsg" style = "display: none" > < span class = "requiredArea" > Please enter your phone number.< / span > < / span >
number.< / span > < / span >
< p style = " margin-bottom: 5px ;
< p style = " margin-bottom: 5px ;
padding: 0;
padding: 0;
color: #000;
color: #000;
font-size: 19px;
font-size: 19px;">I am also available on:< / p >
}">I prefer to
< div class = "checkYes" style = "color:#000;" > < label for = "contact whatsapp" > < input class = "checkBorder "
be contacted via:< / p >
id="contact whatsapp" name="contact_via_WhatsApp" type="checkbox" value="yes"
< div class = "checkYes" style = "color:#000;" > < label for = "contact whatsapp" > < input
style="width:auto !important;">WhatsApp< / label >
class="checkBorder " id="contact whatsapp" name="contact_via_WhatsApp"
type="checkbox" value="yes" style="width:auto !important;">WhatsApp< / label >
< / div >
< / div >
< div class = "checkYes" style = "color:#000;" > < label for = "contact iMessage" > < input
< div class = "checkYes" style = "color:#000;" > < label for = "contact iMessage" > < input class = "checkBorder "
class="checkBorder " id="contact iMessage" name="contact_via_iMessage"
id="contact iMessage" name="contact_via_iMessage" type="checkbox" value="yes"
type="checkbox" value="yes" style="width:auto !important;">iMessage< / label >
style="width:auto !important;">iMessage< / label >
< / div >
< / div >
< div class = "checkYes" style = "color:#000;" > < label for = "contact_via_phone_call" > < input
class="checkBorder " id="contact_via_phone_call" name="contact_via_phone_call"
type="checkbox" value="yes" style="width:auto !important;">Phone call< / label > < / div >
< div class = "checkYes" style = "color:#000;" > < label for = "contact_via_email" > < input
class="checkBorder " id="contact_via_email" name="contact_via_email"
type="checkbox" value="yes" style="width:auto !important;">Email< / label > < / div >
< div class = "checkYes" style = "color:#000;" > < label for = "contact_via_video_appointment" > < input
class="checkBorder " id="contact_via_video_appointment" name="contact_via_video_appointment"
type="checkbox" value="yes" style="width:auto !important;">Video appointment< / label > < / div >
< input name = "nullemail" placeholder = "Your alternative email?" type = "hidden" >
< input name = "nullemail" placeholder = "Your alternative email?" type = "hidden" >
< input id = "url" name = "url" type = "hidden" >
< input id = "url" name = "url" type = "hidden" >
@ -546,10 +541,11 @@
< / div >
< / div >
< / form >
< / form >
< / div >
< / div >
< / div >
< / div >
< script src = "https://www.recaptcha.net/recaptcha/enterprise.js?render=6Lf828MhAAAAANNetijCXKwW5ARyhcJ-b1Hhslja" > < / script >
< script
< script src = "https://data.asiahighlights.com/min/?f=/js/jquery-1.8.2.min.js,/js/flatpickr-4.6.1.min.js" > < / script >
src="https://www.recaptcha.net/recaptcha/enterprise.js?render=6Lf828MhAAAAANNetijCXKwW5ARyhcJ-b1Hhslja">< / script >
< script >
< script src = "https://data.asiahighlights.com/min/?f=/js/jquery-1.8.2.min.js,/js/flatpickr-4.6.1.min.js" > < / script >
< script >
var selectedExpectedDate = '';
var selectedExpectedDate = '';
document.addEventListener('DOMContentLoaded', () => {
document.addEventListener('DOMContentLoaded', () => {
@ -564,15 +560,15 @@
var quick_inquiry_button = document.getElementById("info_page_form_btn");
var quick_inquiry_button = document.getElementById("info_page_form_btn");
var quick_inquiry_form = document.getElementById("info_page_form");
var quick_inquiry_form = document.getElementById("info_page_form");
quick_inquiry_button.addEventListener('click', function(event) {
quick_inquiry_button.addEventListener('click', function (event) {
var validateResult = validateQuickInquiryForm();
var validateResult = validateQuickInquiryForm();
if (validateResult) {
if (validateResult) {
if (typeof(grecaptcha) === "undefined") {
if (typeof (grecaptcha) === "undefined") {
console.warn('grecaptcha is disabled.');
console.warn('grecaptcha is disabled.');
quick_inquiry_form.submit();
quick_inquiry_form.submit();
} else {
} else {
grecaptcha.enterprise.ready(async () => {
grecaptcha.enterprise.ready(async () => {
const token = await grecaptcha.enterprise.execute('6Lf828MhAAAAANNetijCXKwW5ARyhcJ-b1Hhslja', {action: 'ADD_TO_CART'});
const token = await grecaptcha.enterprise.execute('6Lf828MhAAAAANNetijCXKwW5ARyhcJ-b1Hhslja', { action: 'ADD_TO_CART' });
var el = document.createElement("input");
var el = document.createElement("input");
el.type = "hidden";
el.type = "hidden";
el.name = "__grecaptcha_token__";
el.name = "__grecaptcha_token__";
@ -609,7 +605,7 @@
groupErrEl.style.display = 'none';
groupErrEl.style.display = 'none';
var travel_group_is_checked = false;
var travel_group_is_checked = false;
document.querySelectorAll('input[name="travel_group"]').forEach(function(groupNode) {
document.querySelectorAll('input[name="travel_group"]').forEach(function (groupNode) {
if (groupNode.checked) {
if (groupNode.checked) {
travel_group_is_checked = true;
travel_group_is_checked = true;
}
}
@ -655,8 +651,8 @@
}
}
return result;
return result;
}
}
< / script >
< / script >
< script >
< script >
$(function () {
$(function () {
var $adultBlock = $('#adultBlock');
var $adultBlock = $('#adultBlock');
@ -665,7 +661,7 @@
$(groupEle).click(function (e) {
$(groupEle).click(function (e) {
var currentTarget = e.currentTarget;
var currentTarget = e.currentTarget;
if (currentTarget.id === 'Family' || currentTarget.id === 'Other' ) {
if (currentTarget.id === 'Family' || currentTarget.id === 'Other') {
$adultBlock.show();
$adultBlock.show();
$childrenBlock.show();
$childrenBlock.show();
} else {
} else {
@ -721,8 +717,8 @@
}
}
});
});
})
})
< / script >
< / script >
< script >
< script >
// 折叠展开
// 折叠展开
document.querySelectorAll('div[collapse]').forEach(function ($collapseDiv, index) {
document.querySelectorAll('div[collapse]').forEach(function ($collapseDiv, index) {
@ -802,18 +798,33 @@
target.style.removeProperty('transition-property');
target.style.removeProperty('transition-property');
}, duration);
}, duration);
}
}
< / script >
< / script >
< style >
< style >
.date_select {width: 27.5% !important; margin-bottom: 10px;}
.date_select {
.age_range { margin-top: 0;}
width: 27.5% !important;
.InquiryFormBox input, textarea { margin-bottom: 15px;}
margin-bottom: 10px;
@media (max-width: 750px){
}
.date_select {width: 93% !important; margin-bottom: 0 !important;}
.age_range {
margin-top: 0;
}
.InquiryFormBox input,
textarea {
margin-bottom: 15px;
}
@media (max-width: 750px) {
.date_select {
width: 93% !important;
margin-bottom: 0 !important;
}
}
}
< / style >
< / style >
< script src = "https://data.globalhighlights.com/js/jquery.mailAutoComplete-4.0.min.js" > < / script > < script >
< script src = "https://data.globalhighlights.com/js/jquery.mailAutoComplete-4.0.min.js" > < / script >
< script >
$("#email").mailAutoComplete({
$("#email").mailAutoComplete({
email: ['gmail.com','outlook.com','yahoo.com','icloud.com','hotmail.com','live.com','aol.com']
email: ['gmail.com', 'outlook.com', 'yahoo.com', 'icloud.com', 'hotmail.com', 'live.com', 'aol.com']
});
});
< / script >
< / script >