Booking Prompt & HTML

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)
Email
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>

<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>

Amenities HTML Code

<!DOCTYPE html>

<head>

<title>Amenities</title>

<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>

<span>High-Speed Internet</span>

</div>

<span>Secure Parking</span>

</div>

<span>24/7 Security Camera</span>

</div>

<span>Air Conditioner</span>

</div>

</div>

<span>Smart LED TV</span>

</div>

<span>Refrigerator</span>

</div>

<span>Microwave Oven</span>

</div>

<span>Geyser</span>

</div>

<span>Washing Machine</span>

</div>

</body>

</html>