<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Book Your Tour</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 20px;
font-family: Arial, Helvetica, sans-serif;
background: #f5f7f6;
color: #222;
}
.booking-container {
width: 100%;
max-width: 720px;
margin: 0 auto;
background: #ffffff;
padding: 35px;
border-radius: 16px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
}
.booking-header {
text-align: center;
margin-bottom: 30px;
}
.booking-header h1 {
margin: 0 0 10px;
font-size: 32px;
font-weight: 700;
color: #222;
}
.booking-header p {
margin: 0;
color: #666;
font-size: 16px;
line-height: 1.6;
}
.section-title {
margin: 28px 0 18px;
padding-bottom: 8px;
border-bottom: 1px solid #e5e5e5;
font-size: 18px;
font-weight: 700;
color: #333;
}
.form-group {
margin-bottom: 20px;
}
label {
display: block;
margin-bottom: 8px;
font-size: 15px;
font-weight: 600;
color: #333;
}
input,
select,
textarea {
width: 100%;
padding: 13px 14px;
border: 1px solid #d8d8d8;
border-radius: 8px;
background: #fff;
color: #222;
font-family: inherit;
font-size: 16px;
outline: none;
transition: border-color 0.2s, box-shadow 0.2s;
}
input:focus,
select:focus,
textarea:focus {
border-color: #25D366;
box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.12);
}
textarea {
min-height: 130px;
resize: vertical;
line-height: 1.5;
}
.required {
color: #d93025;
}
.submit-button {
width: 100%;
margin-top: 10px;
padding: 15px 20px;
border: none;
border-radius: 8px;
background: #25D366;
color: #ffffff;
font-size: 17px;
font-weight: 700;
cursor: pointer;
transition: background 0.2s, transform 0.1s;
}
.submit-button:hover {
background: #1ebe5d;
}
.submit-button:active {
transform: scale(0.99);
}
@media (max-width: 600px) {
body {
padding: 12px;
}
.booking-container {
padding: 24px 18px;
border-radius: 12px;
}
.booking-header h1 {
font-size: 27px;
}
.booking-header p {
font-size: 15px;
}
.section-title {
font-size: 17px;
}
input,
select,
textarea {
font-size: 16px;
}
.submit-button {
font-size: 16px;
padding: 15px;
}
}
</style>
</head>
<body>
<div class="booking-container">
<div class="booking-header">
<h1>Book Your Tour</h1>
<p>Send us your booking request directly via WhatsApp.</p>
</div>
<form id="bookingForm">
<div class="section-title">CUSTOMER INFORMATION</div>
<div class="form-group">
<label for="fullName">
Full Name <span class="required">*</span>
</label>
<input
type="text"
id="fullName"
name="fullName"
required
>
</div>
<div class="form-group">
<label for="email">Email</label>
<input
type="email"
id="email"
name="email"
>
</div>
<div class="form-group">
<label for="customerWhatsApp">
WhatsApp Number <span class="required">*</span>
</label>
<input
type="tel"
id="customerWhatsApp"
name="customerWhatsApp"
required
>
</div>
<div class="section-title">BOOKING INFORMATION</div>
<div class="form-group">
<label for="tourPackage">
Tour / Package <span class="required">*</span>
</label>
<select
id="tourPackage"
name="tourPackage"
required
>
<option value="">Please select</option>
<option>Custom Photo Tour – 1 Day</option>
<option>Ethnographic Photography Expedition</option>
<option>Mountain Tribe Photography Expedition</option>
<option>3 Days 2 Nights Photography Expedition</option>
<option>Custom Private Tour</option>
</select>
</div>
<div class="form-group">
<label for="travelDate">
Preferred Travel Date <span class="required">*</span>
</label>
<input
type="date"
id="travelDate"
name="travelDate"
required
>
</div>
<div class="form-group">
<label for="guests">
Number of Guests <span class="required">*</span>
</label>
<select
id="guests"
name="guests"
required
>
<option value="">Please select</option>
<option>1 Guest</option>
<option>2 Guests</option>
<option>3 Guests</option>
<option>4 Guests</option>
<option>5 Guests</option>
<option>6 Guests</option>
<option>More than 6 Guests</option>
</select>
</div>
<div class="section-title">PHOTOGRAPHY / TRAVEL INTEREST</div>
<div class="form-group">
<label for="interest">
Photography / Travel Interest
</label>
<select
id="interest"
name="interest"
>
<option value="">Please select</option>
<option>Ethnic Communities</option>
<option>Portrait Photography</option>
<option>Village Life</option>
<option>Documentary Photography</option>
<option>Landscape & Nature</option>
<option>Local Food & Culture</option>
<option>Custom Experience</option>
</select>
</div>
<div class="section-title">ADDITIONAL INFORMATION</div>
<div class="form-group">
<label for="specialRequest">
Special Request
</label>
<textarea
id="specialRequest"
name="specialRequest"
placeholder="Tell us about your trip or anything you would like us to know..."
></textarea>
</div>
<button
type="submit"
class="submit-button"
>
💬 SEND BOOKING REQUEST
</button>
</form>
</div>
<script>
// WhatsApp number of the shop
const shopWhatsApp = "66823127811";
const bookingForm = document.getElementById("bookingForm");
bookingForm.addEventListener("submit", function(event) {
event.preventDefault();
// Use native HTML5 validation
if (!bookingForm.checkValidity()) {
bookingForm.reportValidity();
return;
}
const fullName =
document.getElementById("fullName").value.trim();
const email =
document.getElementById("email").value.trim();
const customerWhatsApp =
document.getElementById("customerWhatsApp").value.trim();
const tourPackage =
document.getElementById("tourPackage").value.trim();
const travelDate =
document.getElementById("travelDate").value;
const guests =
document.getElementById("guests").value.trim();
const interest =
document.getElementById("interest").value.trim();
const specialRequest =
document.getElementById("specialRequest").value.trim();
// Convert YYYY-MM-DD to DD/MM/YYYY
let formattedDate = "Not provided";
if (travelDate) {
const dateParts = travelDate.split("-");
if (dateParts.length === 3) {
formattedDate =
dateParts[2] + "/" +
dateParts[1] + "/" +
dateParts[0];
}
}
const message =
`📸 NEW BOOKING REQUEST
👤 Customer:
${fullName || "Not provided"}
📧 Email:
${email || "Not provided"}
📱 Customer WhatsApp:
${customerWhatsApp || "Not provided"}
━━━━━━━━━━━━━━━━━━
📍 TOUR DETAILS
📸 Tour:
${tourPackage || "Not provided"}
📅 Travel Date:
${formattedDate}
👥 Guests:
${guests || "Not provided"}
🎯 Interest:
${interest || "Not provided"}
📝 Special Request:
${specialRequest || "Not provided"}
━━━━━━━━━━━━━━━━━━
Please check availability. Thank you!`;
const whatsappURL =
"https://wa.me/" +
shopWhatsApp +
"?text=" +
encodeURIComponent(message);
// Open WhatsApp Click-to-Chat
window.location.href = whatsappURL;
});
</script>
</body>
</html>
