Booking Form & Checkout Prompt
Please generate a modern and responsive booking form for a rental website with all fields displayed in one row, including:
Check-in
Check-out
Adults
Children
Book Now button
After the booking form, generate a complete checkout form with the following structure and fields:
Your Details
1. Contact Information
First Name
Last Name
Country (dropdown with “Choose Country” option)
Phone Number (default country code: Pakistan +92)
Special Requests (optional text area)
2. Payment Method
Heading: How would you like to pay?
Badge/Text: 100% Secure Booking
Payment Option: Cash
Description: This payment option allows the guest to pay upon arrival at the property.
Booking Summary
Display text: The amount to be charged is PKR 10,000
Confirmation
Checkbox with text:
“By selecting to complete this booking, I acknowledge that I have read and accept the Rules & Conditions.”
Complete Booking Button
Add a WhatsApp button that opens WhatsApp on click
WhatsApp number: 03095307911
The design should be clean, user-friendly, and suitable for a rental/property booking website.
Booking Form HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<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>
<div class="booking-bar-container">
<form class="booking-form" onsubmit="event.preventDefault(); showCheckout();">
<div class="booking-input-group">
<label>Check-in</label>
<input type="date" id="checkin" required>
</div>
<div class="booking-input-group">
<label>Check-out</label>
<input type="date" id="checkout" required>
</div>
<div class="booking-input-group">
<label>Adults</label>
<input type="number" id="adults" min="1" value="1" required>
</div>
<div class="booking-input-group">
<label>Children</label>
<input type="number" id="children" min="0" value="0">
</div>
<button type="submit" class="check-btn">Book Now</button>
</form>
</div>
<div class="checkout-container" id="checkout-section">
<form id="finalForm">
<h2>Your Details</h2>
<h3>1. Contact information</h3>
<div class="form-row">
<div class="checkout-input-group">
<label>First name</label>
<input type="text" id="fname" required>
</div>
<div class="checkout-input-group">
<label>Last name</label>
<input type="text" id="lname" required>
</div>
</div>
<div class="checkout-input-group" style="margin-bottom: 15px;">
<label>Country</label>
<select id="country">
<option value="Pakistan" selected>Pakistan</option>
<option value="USA">USA</option>
<option value="UK">UK</option>
<option value="UAE">UAE</option>
</select>
</div>
<div class="form-row">
<div class="checkout-input-group">
<label>Email</label>
<input type="email" id="email" required>
</div>
<div class="checkout-input-group">
<label>Phone</label>
<div class="phone-row">
<select class="phone-prefix" id="phone_prefix">
<option value="+92">PK +92</option>
<option value="+1">US +1</option>
<option value="+44">UK +44</option>
</select>
<input type="tel" id="phone" required>
</div>
</div>
</div>
<div class="checkout-input-group">
<label>Special requests (optional)</label>
<textarea id="special" rows="3"></textarea>
</div>
<h3>2. How would you like to pay?</h3>
<div class="payment-box">
<input type="radio" checked>
<div class="payment-text">
<label style="margin:0; font-size:16px;"><strong>Cash</strong></label>
<p>Pay upon arrival at the property.</p>
</div>
</div>
<div class="price-section">
<div class="total-price">Total: PKR 10,000</div>
<p class="legal-text">
By booking, I acknowledge the <a href="#">Terms and Conditions</a>.
</p>
<button type="button" class="whatsapp-btn" onclick="sendToWhatsapp()">
<i class="fa-brands fa-whatsapp"></i> Complete Booking via WhatsApp
</button>
</div>
</form>
</div>
<script>
// 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>
Amenities HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Amenities</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
/* Container for the amenities */
.amenities-container {
display: flex;
flex-wrap: wrap; /* Allows items to wrap to the next line */
justify-content: center; /* Centers items */
gap: 30px; /* Space between items */
padding: 20px;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
max-width: 1000px;
margin: 0 auto;
}
/* Individual amenity card */
.amenity-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
width: 140px; /* Fixed width ensures alignment */
padding: 10px;
transition: transform 0.2s;
}
/* Hover effect (optional) */
.amenity-item:hover {
transform: translateY(-5px);
color: #007BFF; /* Change color on hover */
}
/* Icon styling */
.amenity-item i {
font-size: 32px; /* Icon size */
color: #333; /* Default icon color */
margin-bottom: 12px;
}
/* Text styling */
.amenity-item span {
font-size: 14px;
font-weight: 500;
color: #444;
line-height: 1.3;
}
/* Make icon inherit hover color */
.amenity-item:hover i, .amenity-item:hover span {
color: #007BFF;
}
</style>
</head>
<body>
<div class="amenities-container">
<div class="amenity-item">
<i class="fa-solid fa-wifi"></i>
<span>High-Speed Internet</span>
</div>
<div class="amenity-item">
<i class="fa-solid fa-square-parking"></i>
<span>Secure Parking</span>
</div>
<div class="amenity-item">
<i class="fa-solid fa-video"></i>
<span>24/7 Security Camera</span>
</div>
<div class="amenity-item">
<i class="fa-solid fa-snowflake"></i>
<span>Air Conditioner</span>
</div>
<div class="amenity-item">
<i class="fa-solid fa-couch"></i>
<span>Sofa Cum Bed</span>
</div>
<div class="amenity-item">
<i class="fa-solid fa-tv"></i>
<span>Smart LED TV</span>
</div>
<div class="amenity-item">
<i class="fa-solid fa-temperature-low"></i>
<span>Refrigerator</span>
</div>
<div class="amenity-item">
<i class="fa-solid fa-fire-burner"></i>
<span>Microwave Oven</span>
</div>
<div class="amenity-item">
<i class="fa-solid fa-hot-tub-person"></i>
<span>Geyser</span>
</div>
<div class="amenity-item">
<i class="fa-solid fa-shirt"></i>
<span>Washing Machine</span>
</div>
</div>
</body>
</html>