添加预算板块

master
candice 2 years ago
parent 4855d63e0b
commit a876870e4d

@ -457,7 +457,12 @@
background: #fff;
border: 1px solid #d1d1d1
}
.trip_date_length { clear: both; padding-top: 5px;}
.trip_date_length {
clear: both;
padding-top: 5px;
}
#inquiryBox label {
font-weight: normal
}
@ -523,7 +528,8 @@
height: 130px;
}
.checkboxLabel input[type="checkbox"]+label, .checkboxLabel input[type="radio"]+label {
.checkboxLabel input[type="checkbox"]+label,
.checkboxLabel input[type="radio"]+label {
font-size: 21px;
padding: 5px 0;
border: 1px solid #d1d1d1;
@ -539,7 +545,8 @@
font-family: Calibri;
}
.checkboxLabel input[type="checkbox"]:checked+label, .checkboxLabel input[type="radio"]:checked+label {
.checkboxLabel input[type="checkbox"]:checked+label,
.checkboxLabel input[type="radio"]:checked+label {
border: 1px solid #ad1818;
color: #fff;
width: 100%;
@ -556,7 +563,11 @@
.checkboxLabel input {
display: none
}
.destination { width: 23.6%;}
.destination {
width: 23.6%;
}
#name_error_msg,
#email_error_msg,
#nation_error_msg,
@ -608,7 +619,8 @@
background: #ad1818;
}
.checkboxLabel input[type="checkbox"]+label:hover, .checkboxLabel input[type="radio"]+label:hover {
.checkboxLabel input[type="checkbox"]+label:hover,
.checkboxLabel input[type="radio"]+label:hover {
border: 1px solid #ad1818;
cursor: pointer;
color: #fff;
@ -782,7 +794,8 @@
.formNote {
color: #777;
font-size: 18px
font-size: 18px;
display: block;
}
.minaddBtn:hover {
@ -842,7 +855,8 @@
top: -3px;
}
#Date_Start, #expectedMonth {
#Date_Start,
#expectedMonth {
float: left;
margin-right: 20px;
font-size: 19px;
@ -1114,7 +1128,10 @@ margin-top: 5px;
background-size: 70px !important;
}
label.hotelText { font-size:18px !important;}
label.hotelText {
font-size: 18px !important;
}
#destination_error_msg,
#hotel_error_msg,
#number_error_msg,
@ -1124,7 +1141,8 @@ margin-top: 5px;
#date_error_msg,
#contact_error_msg,
#email_verify_msg,
#requirement_error_msg, #group_error_msg {
#requirement_error_msg,
#group_error_msg {
color: #ad1818;
font-size: 19px;
border-bottom: 2px dashed #ad1818;
@ -1132,7 +1150,9 @@ margin-top: 5px;
font-weight: 600;
padding-bottom: 3px;
}
.destination_category { font-size: 20px;
.destination_category {
font-size: 20px;
width: fit-content;
clear: both;
padding-top: 20px;
@ -1140,7 +1160,9 @@ margin-top: 5px;
font-weight: 600;
color: #ad1818;
text-align: center;
margin: 0 auto;}
margin: 0 auto;
}
.budget {font-size: 19px; margin-bottom: 10px;}
</style>
</head>
@ -1171,7 +1193,8 @@ margin: 80px auto 10px auto;
font-style: italic;
">* means required.</p>
<div id="inquiryBox" style="position: relative;">
<img alt="Asia Highlights' Trust Pilot rating" src="https://data.asiahighlights.com/image/forms/ah-tm-form-tp-rating.png" style="position: absolute;
<img alt="Asia Highlights' Trust Pilot rating"
src="https://data.asiahighlights.com/image/forms/ah-tm-form-tp-rating.png" style="position: absolute;
width: 150px;
top: 0px;
right: 5px;">
@ -1179,7 +1202,9 @@ right: 5px;">
<h3 id="destination_select" style=" margin-top: 30px;">
<em>*</em> Where would you go?
</h3>
<p style="padding-right: 80px;">A vast majority of our esteemed clients opt to explore 23 captivating Asian destinations in a single, awe-inspiring trip. The most popular duos and trios are:</p>
<p style="padding-right: 80px;">A vast majority of our esteemed clients opt to explore 23
captivating Asian destinations in a single, awe-inspiring trip. The most popular duos and trios
are:</p>
<ul class="InfoList">
<li>Japan, China (1525 days)</li>
<li>Thailand, Vietnam, Cambodia (1220 days)</li>
@ -1267,7 +1292,8 @@ right: 5px;">
</div>
<div class="selectionBlock">
<p style="margin-bottom: 5px; margin-top: 30px;">Let us know here if you'd like to visit any other places not listed above, e.g. South Korea, Myanmar…</p>
<p style="margin-bottom: 5px; margin-top: 30px;">Let us know here if you'd like to visit any other
places not listed above, e.g. South Korea, Myanmar…</p>
<input name="other_destinations" style="height: 35px;
width: 92%;
@ -1278,35 +1304,84 @@ right: 5px;">
font-family: Calibri;">
</div>
</div>
<div id="inquiryBox">
<div class="selectionBlock">
<h3>Do you have a general idea of the budget for your tour?</h3>
<p>Asia Highlights is dedicated to providing a premium private guided tour service, including
hand-picked hotels, the must-sees and unique local experiences, a local English-speaking guide,
and a comfortable private vehicle with a driver. <br>
Our prices below are for a group of 26 people excluding pre- and post-tour flights:</p>
<div class="budget">
<label for="Mid-range">
<input type="checkbox" value="Mid-range: about US$250 per person per day (about US$500 in Japan)" name="budget_range" id="Mid-range"
class="checkBorder" style="margin-right: 10px;"><strong>Mid-range:</strong> about US$250 per person per day (about US$500 in Japan)</label>
</div>
<div class="budget">
<label for="Comfort">
<input type="checkbox" value="Comfort: about US$300 per person per day (about US$700 in Japan)" name="budget_range" id="Comfort"
class="checkBorder" style="margin-right: 10px;"><strong>Comfort:</strong> about US$300 per person per day (about US$700 in Japan)</label>
</div>
<div class="budget">
<label for="Standard">
<input type="checkbox" value="Standard: about US$200 per person per day (about US$400 in Japan)" name="budget_range" id="Standard"
class="checkBorder" style="margin-right: 10px;"><strong>Standard:</strong> about US$200 per person per day (about US$400 in Japan)</label>
</div>
<div class="budget">
<label for="higher">
<input type="checkbox" value="pay more for a higher level of travel service" name="budget_range" id="higher"
class="checkBorder" style="margin-right: 10px;">I'm willing to pay more for a higher level of travel service.</label>
<div id="budgetTipsBlock" style="display: none;">
<span class="formNote">Please let us know your expectations, for example: I usually stay in hotels costing from US$xxx per room per night; I want to take business/first class flights...</span>
<div class="inputTerm">
<input type="text" name="name" required="">
</div>
</div>
</div>
<div class="budget">
<label for="specific">
<input type="checkbox" value="I don't have a specific budget in mind." name="contact_via_WhatsApp" id="specific"
class="checkBorder" style="margin-right: 10px;">I don't have a specific budget in mind.</label>
</div>
<h4>Any additional information you'd like to share about your budget?</h4>
<textarea id="budget_requirements" name="budget_requirements" style="resize:none;"></textarea>
</div>
</div>
<div id="inquiryBox">
<div class="selectionBlock">
<h3 id="dateselect">
<em>*</em> When would you travel?
</h3><div id="date_error_msg" class="hidden">(select at least one option.)</div>
<em>*</em> What's your arrival date?
</h3>
<div id="date_error_msg" class="hidden">(select at least one option.)</div>
<div class="checkboxLabel">
<input type="radio" value="exact travel dates" id="exact" name="trip_date">
<input type="radio" value="exact arrival date" id="exact" name="trip_date">
<label for="exact" class="updatedestination" style="font-size: 20px;">
Exact travel dates
Exact arrival date
</label>
</div>
<div class="checkboxLabel">
<input type="radio" value="approximate travel dates" id="approximate" name="trip_date">
<input type="radio" value="approximate arrival dates" id="approximate" name="trip_date">
<label for="approximate" class="updatedestination" style="font-size: 20px;">
Approximate travel dates
Approximate arrival dates
</label>
</div>
<div class="checkboxLabel">
<input type="radio" value="Undecided travel dates" id="yet" name="trip_date">
<input type="radio" value="undecided arrival dates" id="yet" name="trip_date">
<label for="yet" class="updatedestination" style="font-size: 20px;">
Undecided travel dates
Undecided arrival dates
</label>
</div>
<div class="trip_date_length" id="tripDateBlock" style="display: none">
<h4>Select your travel date and trip length (days).</h4>
<div id="dateSelectionBlock">
<input type="text" class="arrivalDate datepicker" id="Date_Start" name="date_start" value="" placeholder="mm/dd/yyyy" autocomplete="off">
<input type="month" id="expectedMonth" name="expected_month" placeholder="Select your expected travel date.">
<input type="text" class="arrivalDate datepicker" id="Date_Start" name="date_start" value=""
placeholder="mm/dd/yyyy" autocomplete="off">
<input type="month" id="expectedMonth" name="expected_month"
placeholder="Select your expected travel date.">
</div>
<div class="peopleSelect">
<div class="numberBtn">
@ -1316,9 +1391,11 @@ right: 5px;">
</div>
</div>
<div id="expectedTravelDateBlock" style="display: none">
<p style="margin-bottom:5px;">Any additional information about your anticipated travel dates?</p>
<p style="margin-bottom:5px;">Any additional information about your anticipated travel
dates?</p>
<span class="formNote">
E.g.: I want to start my trip when the weather at its best/during the local festival/during the off season/on the first week of the November…
E.g.: I want to start my trip when the weather at its best/during the local
festival/during the off season/on the first week of the November…
</span>
<textarea id="date_requirements" name="date_requirements" style="resize:none;"></textarea>
</div>
@ -1333,7 +1410,9 @@ right: 5px;">
<h3 id="travelGroupHeader">
<em>*</em> How would you travel?
</h3>
<span class="formNote">Please select 'Family' / 'Couple' even if you are traveling with other families/couples, as this will help us tailor your itinerary to your specific family/couple requirements.</span>
<span class="formNote">Please select 'Family' / 'Couple' even if you are traveling with other
families/couples, as this will help us tailor your itinerary to your specific family/couple
requirements.</span>
<div id="group_error_msg" class="hidden">(Please
select at least one option.)</div>
<div class="genderSelection">
@ -1390,27 +1469,32 @@ right: 5px;">
</p>
<div class="checkYes">
<label for="65+">
<input type="checkbox" value="yes" name="age_65_plus" id="65+" class="checkBorder">65+
<input type="checkbox" value="yes" name="age_65_plus" id="65+"
class="checkBorder">65+
</label>
</div>
<div class="checkYes">
<label for="51-64">
<input type="checkbox" value="yes" name="age_51_64" id="51-64" class="checkBorder">51-64
<input type="checkbox" value="yes" name="age_51_64" id="51-64"
class="checkBorder">51-64
</label>
</div>
<div class="checkYes">
<label for="41-50">
<input type="checkbox" value="yes" name="age_41_50" id="41-50" class="checkBorder">41-50
<input type="checkbox" value="yes" name="age_41_50" id="41-50"
class="checkBorder">41-50
</label>
</div>
<div class="checkYes">
<label for="31-40">
<input type="checkbox" value="yes" name="age_31_40" id="31-40" class="checkBorder">31-40
<input type="checkbox" value="yes" name="age_31_40" id="31-40"
class="checkBorder">31-40
</label>
</div>
<div class="checkYes">
<label for="18-30">
<input type="checkbox" value="yes" name="age_18_30" id="18-30" class="checkBorder">18-30
<input type="checkbox" value="yes" name="age_18_30" id="18-30"
class="checkBorder">18-30
</label>
</div>
</div>
@ -1425,7 +1509,8 @@ right: 5px;">
</span>
<div class="numberBtn">
<input class="minaddBtn reducechild" id="minusTeenager" type="button" value="-">
<input class="kidNum" type="text" id="teenagerNumber" value="0" name="teenager_10_17_yrs">
<input class="kidNum" type="text" id="teenagerNumber" value="0"
name="teenager_10_17_yrs">
<input class="minaddBtn addchild" id="plusTeenager" type="button" value="+">
</div>
</div>
@ -1460,7 +1545,8 @@ right: 5px;">
</h3>
<span class="formNote">
Japan and Singapore are renowned for relatively higher hotel costs compared to other Asian destinations.
Japan and Singapore are renowned for relatively higher hotel costs compared to other Asian
destinations.
</span>
<div id="hotel_error_msg" class="hidden">(Please select
one option. It can be changed later.)</div>
@ -1505,7 +1591,8 @@ right: 5px;">
<h4>Any specific preferences or requests for your hotel stay?</h4>
<span class="formNote">E.g.:
1. Family room for 2 adults and 2 children<br>
2. Interested in spending a few nights in local boutique hotels, like floating houses in Southeast
2. Interested in spending a few nights in local boutique hotels, like floating houses in
Southeast
3. Asia, ryokans in Japan, small villa with private pool…<br>
4. Adult-only hotels<br>
5. Hotel location: near city center/at the seaside/convenient for exploring the nearby area…<br>
@ -1516,14 +1603,7 @@ right: 5px;">
<div id="inquiryBox">
<div class="selectionBlock">
<h3>This is a big trip for:</h3>
<div class="travelStyle" id="trip4Bucket">
<input type="checkbox" value="Bucket list trip" id="Bucket" name="interests[]">
<label for="Bucket" data-clickable="">
<div class="smallTag">
<div class="styleText">Bucket list trip</div>
</div>
</label>
</div>
<div class="travelStyle" id="trip4Retirement">
<input type="checkbox" value="Enjoying retirement" id="enjoying retirement" name="interests[]">
<label for="enjoying retirement" data-clickable="">
@ -1547,14 +1627,6 @@ right: 5px;">
<div class="styleText">Retirement gift</div>
</div>
</label>
</div>
<div class="travelStyle" id="trip4Work">
<input type="checkbox" value="Career break" id="break" name="interests[]">
<label for="break" data-clickable="">
<div class="smallTag">
<div class="styleText">Career break</div>
</div>
</label>
</div>
<div class="travelStyle" id="trip4Birthday">
<input type="checkbox" value="Birthday" id="Birthday" name="interests[]">
@ -1610,13 +1682,17 @@ right: 5px;">
</div>
</label>
</div>
</div></div>
</div>
</div>
<div id="inquiryBox">
<h3 id="TellUsaboutYou">
<em>*</em> Your contact information
</h3>
<span class="formNote">By using WhatsApp, we can provide a more interactive and personalized experience, allowing us to cater to your needs and address any concerns in real-time.<br> We will keep your phone number and other data secure. See our <a href="/privacy" target="_blank" style="color: #000; text-decoration:none;"><em>Privacy Policy</em></a>.</span>
<span class="formNote">By using WhatsApp, we can provide a more interactive and personalized experience,
allowing us to cater to your needs and address any concerns in real-time.<br> We will keep your
phone number and other data secure. See our <a href="/privacy" target="_blank"
style="color: #000; text-decoration:none;"><em>Privacy Policy</em></a>.</span>
<span id="name_error_msg" class="hidden">(Please fill out this
field.)</span>
@ -1640,7 +1716,8 @@ right: 5px;">
<div class="inputTerm" style="margin-bottom: -10px;">
<select class="country_code" name="country_code">
<option style="font-weight: 600;" value="United States +1">United States&nbsp; &nbsp;+1</option>
<option style="font-weight: 600;" value="United Kingdom +44">United Kingdom&nbsp; &nbsp;+44</option>
<option style="font-weight: 600;" value="United Kingdom +44">United Kingdom&nbsp; &nbsp;+44
</option>
<option style="font-weight: 600;" value="Australia +61">Australia&nbsp; &nbsp;+61</option>
<option style="font-weight: 600;" value="Canada +1">Canada&nbsp; &nbsp;+1</option>
<option style="font-weight: 600;" value="France +33">France&nbsp; &nbsp;+33</option>
@ -1678,7 +1755,8 @@ right: 5px;">
<option value="Bosnia and Herzegovina +387">Bosnia and Herzegovina&nbsp; &nbsp;+387</option>
<option value="Botswana +267">Botswana&nbsp; &nbsp;+267</option>
<option value="Brazil +55">Brazil&nbsp; &nbsp;+55</option>
<option value="British Indian Ocean Territory +246">British Indian Ocean Territory&nbsp; &nbsp;+246</option>
<option value="British Indian Ocean Territory +246">British Indian Ocean Territory&nbsp;
&nbsp;+246</option>
<option value="British Virgin Islands +1">British Virgin Islands&nbsp; &nbsp;+1284</option>
<option value="Brunei +673">Brunei&nbsp; &nbsp;+673</option>
<option value="Bulgaria +359">Bulgaria &nbsp; &nbsp;+359</option>
@ -1832,8 +1910,10 @@ right: 5px;">
<option value="Saint Kitts and Nevis +1">Saint Kitts and Nevis&nbsp; &nbsp;+1869</option>
<option value="Saint Lucia +1">Saint Lucia&nbsp; &nbsp;+1758</option>
<option value="Saint Martin +590">Saint Martin&nbsp; &nbsp;+590</option>
<option value="Saint Pierre and Miquelon +508">Saint Pierre and Miquelon&nbsp; &nbsp;+508</option>
<option value="Saint Vincent and the Grenadines +1">Saint Vincent and the Grenadines&nbsp; &nbsp;+1784</option>
<option value="Saint Pierre and Miquelon +508">Saint Pierre and Miquelon&nbsp; &nbsp;+508
</option>
<option value="Saint Vincent and the Grenadines +1">Saint Vincent and the Grenadines&nbsp;
&nbsp;+1784</option>
<option value="Samoa +685">Samoa&nbsp; &nbsp;+685</option>
<option value="San Marino +378">San Marino&nbsp; &nbsp;+378</option>
<option value="São Tomé and Príncipe +239">São Tomé and Príncipe&nbsp; &nbsp;+239</option>
@ -1903,14 +1983,16 @@ right: 5px;">
">I prefer to be contacted via:</p>
<div class="checkYes">
<label for="whatsapp">
<input type="checkbox" value="yes" name="contact_via_WhatsApp" id="whatsapp" class="checkBorder" style="
<input type="checkbox" value="yes" name="contact_via_WhatsApp" id="whatsapp" class="checkBorder"
style="
margin-right: 10px;
">WhatsApp
</label>
</div>
<div class="checkYes">
<label for="iMessage">
<input type="checkbox" value="yes" name="contact_via_iMessage" id="iMessage" class="checkBorder" style="
<input type="checkbox" value="yes" name="contact_via_iMessage" id="iMessage" class="checkBorder"
style="
margin-right: 5px;
margin-right: 10px;
">iMessage
@ -1918,14 +2000,16 @@ margin-right: 10px;
</div>
<div class="checkYes">
<label for="Phone call">
<input type="checkbox" value="yes" name="contact_via_phone_call" id="Phone call" class="checkBorder" style="
<input type="checkbox" value="yes" name="contact_via_phone_call" id="Phone call"
class="checkBorder" style="
margin-right: 10px;
">Phone call
</label>
</div>
<div class="checkYes">
<label for="Video appointment">
<input type="checkbox" value="yes" name="contact_via_video_appointment" id="Video appointment" class="checkBorder" style="
<input type="checkbox" value="yes" name="contact_via_video_appointment" id="Video appointment"
class="checkBorder" style="
margin-right: 10px;
">Video appointment
</label>
@ -1939,14 +2023,16 @@ margin-right: 10px;
</h3>
<span class="formNote">E.g.: 1. My budget range for this big trip is around…
<br>2. This is a big trip for my husband's birthday, our 20-year anniversary, honeymoon, retirement, kid's graduation, bucket list…
<br>2. This is a big trip for my husband's birthday, our 20-year anniversary, honeymoon,
retirement, kid's graduation, bucket list…
<br>3. Our must-dos/must-sees for this big trip are…
<br>4. This will be my first/second/… visit to…
</span>
<div id="requirement_error_msg" class="hidden">(Please
specify your requests.)</div>
<textarea id="additionalrequirements" name="additional_requirements" style="resize:none;"></textarea>
<textarea id="additionalrequirements" name="additional_requirements"
style="resize:none;"></textarea>
</div>
@ -2127,6 +2213,17 @@ margin-right: 10px;
var childrenNumber = $childrenNumberInput.val();
var $infantNumberInput = $('#infantNumber');
var infantNumber = $infantNumberInput.val();
var budgetTipsBlock = $('#budgetTipsBlock');
$('input[name="budget_range"]').each((i, budgetEle) => {
$(budgetEle).click(function (e) {
var currentTarget = e.currentTarget;
if (currentTarget.id === 'higher') {
const noMatter = currentTarget.checked ? budgetTipsBlock.show() : budgetTipsBlock.hide();
}
})
});
$('input[name="travel_group"]').each((i, groupEle) => {
$(groupEle).click(function (e) {

Loading…
Cancel
Save