Booking Form & Checkout

Copy & Paste

<!DOCTYPE html>

<head>

<style>

/* --- GLOBAL STYLES --- */

body {

background-color: #f4f4f4;

font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;

margin: 0;

padding: 20px;

}

/* --- BOOKING BAR STYLES --- */

.booking-bar-container {

background-color: #ffffff;

padding: 20px;

border-radius: 8px;

box-shadow: 0 4px 15px rgba(0,0,0,0.1);

max-width: 1000px;

margin: 0 auto 30px auto;

}

.booking-form {

display: flex;

flex-wrap: wrap;

align-items: flex-end;

gap: 15px;

justify-content: space-between;

}

.booking-input-group {

display: flex;

flex-direction: column;

flex: 1;

min-width: 120px;

}

.booking-input-group label {

font-size: 12px;

font-weight: 600;

color: #555;

margin-bottom: 5px;

text-transform: uppercase;

}

.booking-input-group input {

padding: 12px 10px;

border: 1px solid #ddd;

border-radius: 4px;

font-size: 14px;

background-color: #f9f9f9;

width: 100%;

box-sizing: border-box;

}

/* "Check Availability" Button in Top Bar */

.check-btn {

padding: 12px 25px;

background-color: #007BFF;

color: white;

border: none;

border-radius: 4px;

font-size: 16px;

font-weight: 600;

cursor: pointer;

height: 43px;

min-width: 120px;

}

/* --- CHECKOUT FORM STYLES --- */

.checkout-container {

max-width: 800px;

margin: 0 auto;

background-color: #ffffff;

padding: 30px;

border-radius: 8px;

box-shadow: 0 4px 15px rgba(0,0,0,0.05);

display: none; /* Hidden until top button clicked */

}

.checkout-container.visible {

display: block;

animation: fadeIn 0.5s ease-in-out;

}

@keyframes fadeIn {

from { opacity: 0; transform: translateY(20px); }

to { opacity: 1; transform: translateY(0); }

}

h2 { border-bottom: 1px solid #eee; padding-bottom: 15px; margin-top: 0; color: #333; }

h3 { font-size: 18px; color: #007BFF; margin-top: 30px; margin-bottom: 15px; }

.form-row { display: flex; gap: 20px; margin-bottom: 15px; }

.checkout-input-group { flex: 1; display: flex; flex-direction: column; }

.checkout-input-group label { font-weight: 600; font-size: 13px; color: #555; margin-bottom: 5px; }

.checkout-input-group input,

.checkout-input-group select,

.checkout-input-group textarea {

padding: 12px;

border: 1px solid #ccc;

border-radius: 4px;

width: 100%;

box-sizing: border-box;

}

/* Phone Layout */

.phone-row { display: flex; gap: 10px; }

.phone-prefix { width: 130px; }

/* Payment Box */

.payment-box {

border: 1px solid #ddd;

border-radius: 6px;

padding: 15px;

background-color: #f9f9f9;

display: flex;

align-items: flex-start;

gap: 10px;

}

/* Price & WhatsApp Button Section */

.price-section {

background-color: #e9ecef;

padding: 20px;

border-radius: 6px;

margin-top: 30px;

text-align: center;

}

.total-price { font-size: 22px; font-weight: bold; color: #333; margin-bottom: 15px; }

/* WHATSAPP BUTTON STYLE */

.whatsapp-btn {

width: 100%;

padding: 15px;

background-color: #25D366; /* WhatsApp Green */

color: white;

border: none;

border-radius: 6px;

font-size: 18px;

font-weight: bold;

cursor: pointer;

transition: background-color 0.3s;

display: flex;

align-items: center;

justify-content: center;

gap: 10px;

}

.whatsapp-btn:hover {

background-color: #1ebe57;

}

.legal-text { font-size: 12px; color: #777; margin-bottom: 20px; line-height: 1.5; }

.legal-text a { color: #007BFF; text-decoration: none; }

/* Mobile */

@media (max-width: 768px) {

.booking-form, .form-row { flex-direction: column; }

.booking-input-group, .check-btn { width: 100%; }

}

</style>

</head>

<body>

<label>Check-in</label>

</div>

<label>Check-out</label>

</div>

<label>Adults</label>

</div>

<label>Children</label>

</div>

</form>

</div>

<h2>Your Details</h2>

<h3>1. Contact information</h3>

<label>First name</label>

</div>

</div>

<label>Country</label>

<option value="Pakistan" selected>Pakistan</option>

</select>

</div>

<label>Email</label>

</div>

<label>Phone</label>

</select>

</div>

<label>Special requests (optional)</label>

</div>

<h3>2. How would you like to pay?</h3>

<p>Pay upon arrival at the property.</p>

</div>

<div class="total-price">Total: PKR 10,000</div>

By booking, I acknowledge the <a href="#">Terms and Conditions</a>.

</p>

<i class="fa-brands fa-whatsapp"></i> Complete Booking via WhatsApp

</button>

</div>

</form>

</div>

// 1. Reveal Checkout

function showCheckout() {

const section = document.getElementById('checkout-section');

section.classList.add('visible');

section.scrollIntoView({ behavior: 'smooth' });

}

// 2. Send to WhatsApp

function sendToWhatsapp() {

// A. Get Data from Top Bar

const checkin = document.getElementById('checkin').value;

const checkout = document.getElementById('checkout').value;

const adults = document.getElementById('adults').value;

const children = document.getElementById('children').value;

// B. Get Data from Checkout Form

const fname = document.getElementById('fname').value;

const lname = document.getElementById('lname').value;

const phone = document.getElementById('phone').value;

const country = document.getElementById('country').value;

// Basic Validation

if(!checkin || !checkout || !fname || !phone) {

alert("Please fill in the required fields (Dates, Name, Phone).");

return;

}

// C. Construct Message

// %0a creates a new line

let message = `*NEW BOOKING REQUEST* %0a`;

message += `---------------------------%0a`;

message += `*Name:* ${fname} ${lname} %0a`;

message += `*Phone:* ${phone} (${country}) %0a`;

message += `*Check-in:* ${checkin} %0a`;

message += `*Check-out:* ${checkout} %0a`;

message += `*Guests:* ${adults} Adults, ${children} Children %0a`;

message += `*Payment:* Cash on Arrival %0a`;

message += `*Total:* PKR 10,000 %0a`;

message += `---------------------------`;

// D. Open WhatsApp

// Number: 923095307911

const whatsappUrl = `https://wa.me/923095307911?text=${message}`;

window.open(whatsappUrl, '_blank');

}

</script>

</body>

</html>