Barber Shop Booking Form Template | QuickCoder

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Barber Shop Booking Form</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Oswald:wght@400;500;600;700&family=Roboto+Condensed:wght@300;400;700&display=swap" rel="stylesheet">
    
</head>
<body>
    <div class="container">
        <div class="form-wrapper">
            
            <div class="shop-side">
                <div>
                    <div class="shop-header">
                        <div class="shop-logo">
                            <i class="fas fa-cut"></i>
                        </div>
                        <h1>The Gentleman's Cut</h1>
                        <h2>Premium Barber Shop</h2>
                        <p class="shop-tagline">Experience the art of traditional grooming with modern style. Since 1995, we've been providing precision cuts and exceptional service.</p>
                    </div>
                    
                    <ul class="features">
                        <li>
                            <i class="fas fa-check-circle"></i>
                            <div>
                                <strong>Expert Barbers</strong>
                                <span>Master barbers with 10+ years of experience in classic and modern styles.</span>
                            </div>
                        </li>
                        <li>
                            <i class="fas fa-star"></i>
                            <div>
                                <strong>Premium Products</strong>
                                <span>We use only high-quality grooming products from top brands.</span>
                            </div>
                        </li>
                        <li>
                            <i class="fas fa-clock"></i>
                            <div>
                                <strong>Flexible Hours</strong>
                                <span>Open 7 days a week with extended hours for your convenience.</span>
                            </div>
                        </li>
                        <li>
                            <i class="fas fa-chair"></i>
                            <div>
                                <strong>Comfortable Environment</strong>
                                <span>Relax in our classic barber chairs with complimentary beverages.</span>
                            </div>
                        </li>
                    </ul>
                </div>
                
                <div class="shop-info">
                    <h3>Shop Information</h3>
                    <div class="info-grid">
                        <div class="info-item">
                            <i class="fas fa-map-marker-alt"></i>
                            <span>123 Barber Street, Grooming City</span>
                        </div>
                        <div class="info-item">
                            <i class="fas fa-phone-alt"></i>
                            <span>(555) 123-4567</span>
                        </div>
                        <div class="info-item">
                            <i class="fas fa-clock"></i>
                            <span>Mon-Sat: 9AM-8PM</span>
                        </div>
                        <div class="info-item">
                            <i class="fas fa-clock"></i>
                            <span>Sun: 10AM-6PM</span>
                        </div>
                        <div class="info-item">
                            <i class="fas fa-wifi"></i>
                            <span>Free WiFi for Clients</span>
                        </div>
                        <div class="info-item">
                            <i class="fas fa-parking"></i>
                            <span>Free Parking Available</span>
                        </div>
                    </div>
                </div>
            </div>
            
            
            <div class="booking-side">
                <div class="booking-header">
                    <h3>Book Your Appointment</h3>
                    <p>Schedule your grooming session with our expert barbers</p>
                </div>
                
                <div class="booking-type">
                    <div class="booking-tab active" id="appointmentTab">
                        <i class="fas fa-calendar-alt"></i> Book Appointment
                    </div>
                    <div class="booking-tab" id="enquiryTab">
                        <i class="fas fa-question-circle"></i> General Enquiry
                    </div>
                </div>
                
                
                <form class="booking-form" id="appointmentForm">
                    <div class="form-grid">
                        <div class="form-group">
                            <label for="customerName" class="required"><i class="fas fa-user"></i> Full Name</label>
                            <input type="text" id="customerName" placeholder="Enter your name" required>
                            <div class="error-message" id="nameError">Please enter your name</div>
                        </div>
                        
                        <div class="form-group">
                            <label for="customerPhone" class="required"><i class="fas fa-phone"></i> Phone Number</label>
                            <input type="tel" id="customerPhone" placeholder="(555) 123-4567" required>
                            <div class="error-message" id="phoneError">Please enter a valid phone number</div>
                        </div>
                        
                        <div class="form-group">
                            <label for="customerEmail"><i class="fas fa-envelope"></i> Email (Optional)</label>
                            <input type="email" id="customerEmail" placeholder="you@example.com">
                        </div>
                        
                        <div class="form-group">
                            <label for="appointmentDate" class="required"><i class="fas fa-calendar-day"></i> Appointment Date</label>
                            <input type="date" id="appointmentDate" required>
                            <div class="error-message" id="dateError">Please select a date</div>
                        </div>
                        
                        <div class="form-group full-width">
                            <label class="required"><i class="fas fa-cut"></i> Select Service(s)</label>
                            <div class="services-grid">
                                <div class="service-option">
                                    <input type="checkbox" id="service1" name="service" value="classic-cut" data-price="35">
                                    <label for="service1">
                                        <span>Classic Haircut</span>
                                        <span class="service-price">$35</span>
                                    </label>
                                </div>
                                <div class="service-option">
                                    <input type="checkbox" id="service2" name="service" value="beard-trim" data-price="20">
                                    <label for="service2">
                                        <span>Beard Trim</span>
                                        <span class="service-price">$20</span>
                                    </label>
                                </div>
                                <div class="service-option">
                                    <input type="checkbox" id="service3" name="service" value="hot-towel" data-price="15">
                                    <label for="service3">
                                        <span>Hot Towel Shave</span>
                                        <span class="service-price">$15</span>
                                    </label>
                                </div>
                                <div class="service-option">
                                    <input type="checkbox" id="service4" name="service" value="hair-wash" data-price="10">
                                    <label for="service4">
                                        <span>Hair Wash & Style</span>
                                        <span class="service-price">$10</span>
                                    </label>
                                </div>
                                <div class="service-option">
                                    <input type="checkbox" id="service5" name="service" value="facial" data-price="40">
                                    <label for="service5">
                                        <span>Grooming Facial</span>
                                        <span class="service-price">$40</span>
                                    </label>
                                </div>
                                <div class="service-option">
                                    <input type="checkbox" id="service6" name="service" value="full-service" data-price="75">
                                    <label for="service6">
                                        <span>Full Service Package</span>
                                        <span class="service-price">$75</span>
                                    </label>
                                </div>
                            </div>
                            <div class="error-message" id="serviceError">Please select at least one service</div>
                        </div>
                        
                        <div class="form-group full-width">
                            <label><i class="fas fa-user-tie"></i> Preferred Barber (Optional)</label>
                            <div class="barber-grid">
                                <div class="barber-option">
                                    <input type="radio" id="barber1" name="barber" value="tony">
                                    <div class="barber-avatar">
                                        <i class="fas fa-user"></i>
                                    </div>
                                    <div class="barber-name">Tony</div>
                                    <div class="barber-specialty">Classic Cuts</div>
                                </div>
                                <div class="barber-option">
                                    <input type="radio" id="barber2" name="barber" value="marcus">
                                    <div class="barber-avatar">
                                        <i class="fas fa-user"></i>
                                    </div>
                                    <div class="barber-name">Marcus</div>
                                    <div class="barber-specialty">Modern Styles</div>
                                </div>
                                <div class="barber-option">
                                    <input type="radio" id="barber3" name="barber" value="any">
                                    <div class="barber-avatar">
                                        <i class="fas fa-users"></i>
                                    </div>
                                    <div class="barber-name">Any Available</div>
                                    <div class="barber-specialty">First Available</div>
                                </div>
                            </div>
                        </div>
                        
                        <div class="form-group full-width">
                            <label for="appointmentTime" class="required"><i class="fas fa-clock"></i> Preferred Time</label>
                            <div class="time-slots">
                                
                            </div>
                            <div class="error-message" id="timeError">Please select a time slot</div>
                        </div>
                        
                        <div class="form-group full-width">
                            <label for="specialRequests"><i class="fas fa-comment"></i> Special Requests / Notes</label>
                            <textarea id="specialRequests" placeholder="Any specific style requests, allergies, or additional information..."></textarea>
                        </div>
                    </div>
                    
                    <div class="form-footer">
                        <button type="reset" class="btn btn-secondary">
                            <i class="fas fa-redo btn-icon"></i> Clear Form
                        </button>
                        <button type="submit" class="btn btn-primary">
                            Book Appointment <i class="fas fa-calendar-check btn-icon"></i>
                        </button>
                    </div>
                </form>
                
                
                <form class="booking-form hidden" id="enquiryForm">
                    <div class="form-grid">
                        <div class="form-group">
                            <label for="enquiryName" class="required"><i class="fas fa-user"></i> Your Name</label>
                            <input type="text" id="enquiryName" placeholder="Enter your name" required>
                            <div class="error-message" id="enquiryNameError">Please enter your name</div>
                        </div>
                        
                        <div class="form-group">
                            <label for="enquiryPhone" class="required"><i class="fas fa-phone"></i> Phone Number</label>
                            <input type="tel" id="enquiryPhone" placeholder="(555) 123-4567" required>
                            <div class="error-message" id="enquiryPhoneError">Please enter a valid phone number</div>
                        </div>
                        
                        <div class="form-group">
                            <label for="enquiryEmail"><i class="fas fa-envelope"></i> Email Address</label>
                            <input type="email" id="enquiryEmail" placeholder="you@example.com">
                        </div>
                        
                        <div class="form-group">
                            <label for="enquirySubject"><i class="fas fa-tag"></i> Subject</label>
                            <select id="enquirySubject">
                                <option value="" selected>Select a subject</option>
                                <option value="services">Services & Pricing</option>
                                <option value="hours">Business Hours</option>
                                <option value="gift-cards">Gift Cards</option>
                                <option value="group-booking">Group/Corporate Booking</option>
                                <option value="other">Other</option>
                            </select>
                        </div>
                        
                        <div class="form-group full-width">
                            <label for="enquiryMessage" class="required"><i class="fas fa-comment-dots"></i> Your Message</label>
                            <textarea id="enquiryMessage" placeholder="How can we help you?" required></textarea>
                            <div class="error-message" id="enquiryMessageError">Please enter your message</div>
                        </div>
                        
                        <div class="form-group">
                            <label for="bestTime"><i class="fas fa-clock"></i> Best Time to Call</label>
                            <select id="bestTime">
                                <option value="" selected>Any time</option>
                                <option value="morning">Morning (9AM-12PM)</option>
                                <option value="afternoon">Afternoon (12PM-5PM)</option>
                                <option value="evening">Evening (5PM-8PM)</option>
                            </select>
                        </div>
                        
                        <div class="form-group">
                            <label for="preferredContact"><i class="fas fa-phone-volume"></i> Preferred Contact Method</label>
                            <select id="preferredContact">
                                <option value="phone" selected>Phone Call</option>
                                <option value="email">Email</option>
                                <option value="text">Text Message</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="form-footer">
                        <button type="reset" class="btn btn-secondary">
                            <i class="fas fa-redo btn-icon"></i> Clear Form
                        </button>
                        <button type="submit" class="btn btn-primary">
                            Send Enquiry <i class="fas fa-paper-plane btn-icon"></i>
                        </button>
                    </div>
                </form>
                
                
                <div class="success-screen" id="successScreen">
                    <div class="success-icon">
                        <i class="fas fa-check"></i>
                    </div>
                    <h2 id="successTitle">Appointment Booked!</h2>
                    <p id="successMessage">Your appointment has been confirmed. We look forward to seeing you!</p>
                    
                    <div class="booking-details" id="bookingDetails">
                        
                    </div>
                    
                    <p style="font-weight: 600; color: var(--barber-gold); margin-bottom: 10px;">Important Reminders:</p>
                    <p style="color: #aaa; font-size: 0.95rem; margin-bottom: 25px;">
                        <i class="fas fa-info-circle" style="color: var(--barber-gold); margin-right: 8px;"></i>
                        Please arrive 5-10 minutes before your appointment. Late arrivals may result in shortened service.
                    </p>
                    
                    <button class="btn-success" id="successBtn">
                        <i class="fas fa-print"></i> Print Confirmation
                    </button>
                </div>
            </div>
        </div>
    </div>

</body>
</html>

CSS

:root {
            --barber-dark: #1a1a1a;
            --barber-gold: #d4af37;
            --barber-red: #c41e3a;
            --barber-brown: #8b4513;
            --barber-light: #f5f5f5;
            --barber-gray: #333333;
            --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
            --radius: 10px;
            --transition: all 0.3s ease;
        }

* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

body {
            font-family: 'Poppins', sans-serif;
            background-color: #0a0a0a;
            color: #e0e0e0;
            line-height: 1.6;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            background-image: 
                radial-gradient(circle at 10% 20%, rgba(212, 175, 55, 0.05) 0%, transparent 20%),
                radial-gradient(circle at 90% 80%, rgba(196, 30, 58, 0.05) 0%, transparent 20%);
        }

.container {
            width: 100%;
            max-width: 1100px;
            animation: fadeIn 0.8s ease-out;
        }

.form-wrapper {
            display: flex;
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow-lg);
            transition: var(--transition);
            background: var(--barber-dark);
            border: 1px solid rgba(212, 175, 55, 0.2);
        }

.form-wrapper:hover {
            box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
        }

.shop-side {
            flex: 1;
            background: linear-gradient(135deg, var(--barber-dark) 0%, #2a2a2a 100%);
            padding: 40px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            position: relative;
            overflow: hidden;
            border-right: 1px solid rgba(212, 175, 55, 0.1);
        }

.shop-side::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M20,20 L80,20 L80,80 L20,80 Z" fill="none" stroke="rgba(212,175,55,0.03)" stroke-width="1"/><path d="M30,30 L70,30 L70,70 L30,70 Z" fill="none" stroke="rgba(212,175,55,0.03)" stroke-width="1"/></svg>');
            opacity: 0.3;
        }

.shop-header {
            position: relative;
            z-index: 1;
        }

.shop-logo {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 80px;
            height: 80px;
            background: var(--barber-gold);
            border-radius: 50%;
            margin-bottom: 25px;
            animation: rotate 20s linear infinite;
            box-shadow: 0 0 20px rgba(212, 175, 55, 0.3);
        }

.shop-logo i {
            font-size: 36px;
            color: var(--barber-dark);
        }

.shop-header h1 {
            font-family: 'Oswald', sans-serif;
            font-size: 2.5rem;
            font-weight: 700;
            margin-bottom: 10px;
            color: var(--barber-gold);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

.shop-header h2 {
            font-family: 'Roboto Condensed', sans-serif;
            font-size: 1.5rem;
            font-weight: 400;
            color: #ccc;
            margin-bottom: 25px;
            text-transform: uppercase;
            letter-spacing: 2px;
        }

.shop-tagline {
            font-size: 1.1rem;
            color: #aaa;
            margin-bottom: 30px;
            line-height: 1.8;
            border-left: 3px solid var(--barber-red);
            padding-left: 15px;
        }

.features {
            list-style: none;
            margin-top: 30px;
            position: relative;
            z-index: 1;
        }

.features li {
            margin-bottom: 20px;
            display: flex;
            align-items: center;
        }

.features i {
            margin-right: 15px;
            color: var(--barber-gold);
            font-size: 1.2rem;
            width: 24px;
        }

.features span {
            font-size: 1rem;
            color: #ccc;
        }

.features strong {
            color: white;
            font-weight: 600;
            display: block;
            margin-bottom: 5px;
        }

.shop-info {
            margin-top: 40px;
            padding-top: 30px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            position: relative;
            z-index: 1;
        }

.shop-info h3 {
            font-family: 'Oswald', sans-serif;
            font-size: 1.3rem;
            margin-bottom: 20px;
            color: var(--barber-gold);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

.info-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }

.info-item {
            display: flex;
            align-items: center;
        }

.info-item i {
            margin-right: 10px;
            color: var(--barber-red);
            font-size: 1rem;
            width: 20px;
        }

.info-item span {
            font-size: 0.95rem;
            color: #bbb;
        }

.booking-side {
            flex: 1.2;
            padding: 40px;
            background: var(--barber-dark);
            border-left: 1px solid rgba(212, 175, 55, 0.1);
        }

.booking-header {
            margin-bottom: 30px;
            text-align: center;
        }

.booking-header h3 {
            font-family: 'Oswald', sans-serif;
            font-size: 1.8rem;
            color: white;
            margin-bottom: 10px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

.booking-header p {
            color: #aaa;
            font-size: 1rem;
        }

.booking-type {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 30px;
        }

.booking-tab {
            padding: 12px 24px;
            background: rgba(255, 255, 255, 0.05);
            border: 2px solid transparent;
            border-radius: 30px;
            font-family: 'Oswald', sans-serif;
            font-size: 1rem;
            font-weight: 600;
            color: #999;
            cursor: pointer;
            transition: var(--transition);
            text-transform: uppercase;
            letter-spacing: 1px;
        }

.booking-tab.active {
            background: var(--barber-gold);
            color: var(--barber-dark);
            border-color: var(--barber-gold);
            box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2);
        }

.booking-tab:hover:not(.active) {
            background: rgba(255, 255, 255, 0.1);
            color: white;
        }

.booking-form {
            display: block;
            animation: slideIn 0.5s ease-out;
        }

.booking-form.hidden {
            display: none;
        }

.form-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            margin-bottom: 25px;
        }

.form-group {
            display: flex;
            flex-direction: column;
        }

.form-group.full-width {
            grid-column: span 2;
        }

label {
            font-weight: 600;
            margin-bottom: 8px;
            color: #ccc;
            font-size: 0.95rem;
            display: flex;
            align-items: center;
        }

label i {
            margin-right: 8px;
            color: var(--barber-gold);
            width: 18px;
        }

.required::after {
            content: " *";
            color: var(--barber-red);
        }

input, select, textarea {
            width: 100%;
            padding: 14px 16px;
            background: rgba(255, 255, 255, 0.05);
            border: 2px solid rgba(255, 255, 255, 0.1);
            border-radius: 6px;
            font-family: 'Poppins', sans-serif;
            font-size: 1rem;
            transition: var(--transition);
            color: white;
        }

input:focus, select:focus, textarea:focus {
            outline: none;
            border-color: var(--barber-gold);
            box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.1);
            background: rgba(255, 255, 255, 0.08);
        }

textarea {
            resize: vertical;
            min-height: 100px;
        }

.services-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
            margin-top: 8px;
        }

.service-option {
            display: flex;
            align-items: center;
            padding: 12px 15px;
            background: rgba(255, 255, 255, 0.05);
            border: 2px solid transparent;
            border-radius: 6px;
            cursor: pointer;
            transition: var(--transition);
        }

.service-option:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(212, 175, 55, 0.3);
        }

.service-option.selected {
            background: rgba(212, 175, 55, 0.1);
            border-color: var(--barber-gold);
        }

.service-option input {
            width: auto;
            margin-right: 10px;
            transform: scale(1.2);
        }

.service-option label {
            margin-bottom: 0;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            width: 100%;
        }

.service-price {
            color: var(--barber-gold);
            font-weight: 700;
            font-size: 0.95rem;
        }

.barber-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin-top: 8px;
        }

.barber-option {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 15px 10px;
            background: rgba(255, 255, 255, 0.05);
            border: 2px solid transparent;
            border-radius: 6px;
            cursor: pointer;
            transition: var(--transition);
            text-align: center;
        }

.barber-option:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(212, 175, 55, 0.3);
        }

.barber-option.selected {
            background: rgba(212, 175, 55, 0.1);
            border-color: var(--barber-gold);
        }

.barber-option input {
            width: auto;
            margin-bottom: 10px;
            transform: scale(1.2);
        }

.barber-avatar {
            width: 50px;
            height: 50px;
            background: var(--barber-brown);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 10px;
            font-size: 1.2rem;
            color: white;
        }

.barber-name {
            font-weight: 600;
            color: white;
            font-size: 0.9rem;
        }

.barber-specialty {
            font-size: 0.8rem;
            color: #aaa;
            margin-top: 5px;
        }

.time-slots {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 8px;
        }

.time-slot {
            padding: 10px 15px;
            background: rgba(255, 255, 255, 0.05);
            border: 2px solid transparent;
            border-radius: 6px;
            cursor: pointer;
            transition: var(--transition);
            font-weight: 500;
            color: #ccc;
            flex: 1;
            min-width: 100px;
            text-align: center;
        }

.time-slot:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(212, 175, 55, 0.3);
        }

.time-slot.selected {
            background: rgba(212, 175, 55, 0.1);
            border-color: var(--barber-gold);
            color: var(--barber-gold);
            font-weight: 600;
        }

.time-slot.booked {
            background: rgba(196, 30, 58, 0.1);
            border-color: rgba(196, 30, 58, 0.3);
            color: #666;
            cursor: not-allowed;
            text-decoration: line-through;
        }

.form-footer {
            display: flex;
            justify-content: space-between;
            margin-top: 30px;
            padding-top: 25px;
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            gap: 20px;
        }

.btn {
            padding: 16px 32px;
            border-radius: 6px;
            font-family: 'Oswald', sans-serif;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            transition: var(--transition);
            border: none;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

.btn-primary {
            background: linear-gradient(135deg, var(--barber-gold) 0%, #b8941f 100%);
            color: var(--barber-dark);
            box-shadow: 0 4px 12px rgba(212, 175, 55, 0.3);
        }

.btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(212, 175, 55, 0.4);
        }

.btn-secondary {
            background: rgba(255, 255, 255, 0.05);
            color: #ccc;
            border: 2px solid rgba(255, 255, 255, 0.1);
        }

.btn-secondary:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(212, 175, 55, 0.3);
            color: white;
        }

.btn-icon {
            font-size: 1rem;
            transition: transform 0.3s ease;
        }

.btn-primary:hover .btn-icon {
            transform: translateX(5px);
        }

.success-screen {
            text-align: center;
            padding: 40px 20px;
            display: none;
            animation: fadeIn 0.8s ease-out;
        }

.success-icon {
            width: 100px;
            height: 100px;
            background: linear-gradient(135deg, var(--barber-gold) 0%, #b8941f 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 30px;
            animation: scaleIn 0.5s ease-out 0.3s both;
            box-shadow: 0 8px 24px rgba(212, 175, 55, 0.3);
        }

.success-icon i {
            font-size: 45px;
            color: var(--barber-dark);
        }

.success-screen h2 {
            font-family: 'Oswald', sans-serif;
            font-size: 2rem;
            color: var(--barber-gold);
            margin-bottom: 15px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

.success-screen p {
            color: #aaa;
            margin-bottom: 30px;
            font-size: 1.1rem;
            line-height: 1.6;
            max-width: 500px;
            margin-left: auto;
            margin-right: auto;
        }

.booking-details {
            background: rgba(255, 255, 255, 0.05);
            padding: 25px;
            border-radius: var(--radius);
            margin: 30px 0;
            text-align: left;
            border-left: 5px solid var(--barber-gold);
        }

.booking-details h4 {
            color: var(--barber-gold);
            margin-bottom: 15px;
            font-size: 1.2rem;
            font-family: 'Oswald', sans-serif;
            text-transform: uppercase;
        }

.booking-details p {
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
        }

.booking-details strong {
            color: white;
            font-weight: 600;
        }

.booking-details span {
            color: #ccc;
        }

.btn-success {
            background: linear-gradient(135deg, var(--barber-red) 0%, #a01930 100%);
            color: white;
            padding: 16px 40px;
            border-radius: 6px;
            font-family: 'Oswald', sans-serif;
            font-weight: 600;
            border: none;
            cursor: pointer;
            transition: var(--transition);
            margin-top: 10px;
            font-size: 1.1rem;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

.btn-success:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(196, 30, 58, 0.4);
        }

/* Animations */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

@keyframes slideIn {
            from { transform: translateY(20px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }

@keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

@keyframes scaleIn {
            0% { transform: scale(0); opacity: 0; }
            100% { transform: scale(1); opacity: 1; }
        }

/* Responsive design */
        @media (max-width: 900px) {
            .form-wrapper {
                flex-direction: column;
            }
            
            .shop-side {
                border-right: none;
                border-bottom: 1px solid rgba(212, 175, 55, 0.1);
            }
            
            .form-grid {
                grid-template-columns: 1fr;
                gap: 15px;
            }
            
            .form-group.full-width {
                grid-column: span 1;
            }
            
            .services-grid, .barber-grid {
                grid-template-columns: 1fr;
            }
            
            .info-grid {
                grid-template-columns: 1fr;
            }
        }

@media (max-width: 600px) {
            .shop-header h1 {
                font-size: 2rem;
            }
            
            .shop-header h2 {
                font-size: 1.2rem;
            }
            
            .booking-header h3 {
                font-size: 1.5rem;
            }
            
            .form-footer {
                flex-direction: column;
            }
            
            .btn {
                width: 100%;
            }
            
            .booking-type {
                flex-direction: column;
                align-items: center;
            }
            
            .time-slots {
                flex-direction: column;
            }
        }

/* Validation styles */
        .error-message {
            color: var(--barber-red);
            font-size: 0.85rem;
            margin-top: 8px;
            display: none;
            font-weight: 500;
        }

.error input, .error select, .error textarea {
            border-color: var(--barber-red);
            box-shadow: 0 0 0 3px rgba(196, 30, 58, 0.1);
        }

.success input, .success select, .success textarea {
            border-color: var(--barber-gold);
        }

JavaScript

// DOM Elements
        const appointmentTab = document.getElementById('appointmentTab');
        const enquiryTab = document.getElementById('enquiryTab');
        const appointmentForm = document.getElementById('appointmentForm');
        const enquiryForm = document.getElementById('enquiryForm');
        const successScreen = document.getElementById('successScreen');
        const successTitle = document.getElementById('successTitle');
        const successMessage = document.getElementById('successMessage');
        const bookingDetails = document.getElementById('bookingDetails');
        const timeSlotsContainer = document.querySelector('.time-slots');
        
        // Generate time slots
        function generateTimeSlots() {
            const timeSlots = [
                '9:00 AM', '9:30 AM', '10:00 AM', '10:30 AM', '11:00 AM', '11:30 AM',
                '12:00 PM', '12:30 PM', '1:00 PM', '1:30 PM', '2:00 PM', '2:30 PM',
                '3:00 PM', '3:30 PM', '4:00 PM', '4:30 PM', '5:00 PM', '5:30 PM',
                '6:00 PM', '6:30 PM', '7:00 PM'
            ];
            
            // Mark some slots as booked for demonstration
            const bookedSlots = ['10:00 AM', '1:30 PM', '4:00 PM', '6:30 PM'];
            
            timeSlotsContainer.innerHTML = '';
            
            timeSlots.forEach(slot => {
                const timeSlot = document.createElement('div');
                timeSlot.className = 'time-slot';
                if (bookedSlots.includes(slot)) {
                    timeSlot.classList.add('booked');
                    timeSlot.textContent = `${slot} (Booked)`;
                } else {
                    timeSlot.textContent = slot;
                    timeSlot.addEventListener('click', function() {
                        // Remove selected class from all time slots
                        document.querySelectorAll('.time-slot:not(.booked)').forEach(s => {
                            s.classList.remove('selected');
                        });
                        
                        // Add selected class to clicked time slot
                        this.classList.add('selected');
                    });
                }
                timeSlotsContainer.appendChild(timeSlot);
            });
        }
        
        // Tab switching
        appointmentTab.addEventListener('click', () => {
            appointmentTab.classList.add('active');
            enquiryTab.classList.remove('active');
            appointmentForm.classList.remove('hidden');
            enquiryForm.classList.add('hidden');
            successScreen.style.display = 'none';
            appointmentForm.style.display = 'block';
        });
        
        enquiryTab.addEventListener('click', () => {
            enquiryTab.classList.add('active');
            appointmentTab.classList.remove('active');
            enquiryForm.classList.remove('hidden');
            appointmentForm.classList.add('hidden');
            successScreen.style.display = 'none';
            enquiryForm.style.display = 'block';
        });
        
        // Service selection
        document.querySelectorAll('.service-option').forEach(option => {
            option.addEventListener('click', function(e) {
                if (e.target.type !== 'checkbox') {
                    const checkbox = this.querySelector('input[type="checkbox"]');
                    checkbox.checked = !checkbox.checked;
                    this.classList.toggle('selected', checkbox.checked);
                }
            });
            
            const checkbox = option.querySelector('input[type="checkbox"]');
            checkbox.addEventListener('change', function() {
                option.classList.toggle('selected', this.checked);
            });
        });
        
        // Barber selection
        document.querySelectorAll('.barber-option').forEach(option => {
            option.addEventListener('click', function() {
                // Remove selected class from all barber options
                document.querySelectorAll('.barber-option').forEach(o => {
                    o.classList.remove('selected');
                    o.querySelector('input[type="radio"]').checked = false;
                });
                
                // Add selected class to clicked barber option
                this.classList.add('selected');
                this.querySelector('input[type="radio"]').checked = true;
            });
        });
        
        // Appointment form validation
        function validateAppointmentForm() {
            let isValid = true;
            
            // Name validation
            const name = document.getElementById('customerName');
            const nameError = document.getElementById('nameError');
            if (!name.value.trim()) {
                name.parentElement.classList.add('error');
                nameError.style.display = 'block';
                isValid = false;
            } else {
                name.parentElement.classList.remove('error');
                nameError.style.display = 'none';
            }
            
            // Phone validation
            const phone = document.getElementById('customerPhone');
            const phoneError = document.getElementById('phoneError');
            const phoneRegex = /^[\+]?[1-9][\d]{0,15}$/;
            if (!phoneRegex.test(phone.value.replace(/[\s\-]/g, ''))) {
                phone.parentElement.classList.add('error');
                phoneError.style.display = 'block';
                isValid = false;
            } else {
                phone.parentElement.classList.remove('error');
                phoneError.style.display = 'none';
            }
            
            // Date validation
            const date = document.getElementById('appointmentDate');
            const dateError = document.getElementById('dateError');
            if (!date.value) {
                date.parentElement.classList.add('error');
                dateError.style.display = 'block';
                isValid = false;
            } else {
                date.parentElement.classList.remove('error');
                dateError.style.display = 'none';
            }
            
            // Service validation
            const services = document.querySelectorAll('input[name="service"]:checked');
            const serviceError = document.getElementById('serviceError');
            if (services.length === 0) {
                serviceError.style.display = 'block';
                isValid = false;
            } else {
                serviceError.style.display = 'none';
            }
            
            // Time validation
            const selectedTime = document.querySelector('.time-slot.selected:not(.booked)');
            const timeError = document.getElementById('timeError');
            if (!selectedTime) {
                timeError.style.display = 'block';
                isValid = false;
            } else {
                timeError.style.display = 'none';
            }
            
            return isValid;
        }
        
        // Enquiry form validation
        function validateEnquiryForm() {
            let isValid = true;
            
            // Name validation
            const name = document.getElementById('enquiryName');
            const nameError = document.getElementById('enquiryNameError');
            if (!name.value.trim()) {
                name.parentElement.classList.add('error');
                nameError.style.display = 'block';
                isValid = false;
            } else {
                name.parentElement.classList.remove('error');
                nameError.style.display = 'none';
            }
            
            // Phone validation
            const phone = document.getElementById('enquiryPhone');
            const phoneError = document.getElementById('enquiryPhoneError');
            const phoneRegex = /^[\+]?[1-9][\d]{0,15}$/;
            if (!phoneRegex.test(phone.value.replace(/[\s\-]/g, ''))) {
                phone.parentElement.classList.add('error');
                phoneError.style.display = 'block';
                isValid = false;
            } else {
                phone.parentElement.classList.remove('error');
                phoneError.style.display = 'none';
            }
            
            // Message validation
            const message = document.getElementById('enquiryMessage');
            const messageError = document.getElementById('enquiryMessageError');
            if (!message.value.trim()) {
                message.parentElement.classList.add('error');
                messageError.style.display = 'block';
                isValid = false;
            } else {
                message.parentElement.classList.remove('error');
                messageError.style.display = 'none';
            }
            
            return isValid;
        }
        
        // Calculate total price
        function calculateTotal() {
            let total = 0;
            const selectedServices = document.querySelectorAll('input[name="service"]:checked');
            
            selectedServices.forEach(service => {
                const price = parseFloat(service.getAttribute('data-price')) || 0;
                total += price;
            });
            
            return total;
        }
        
        // Format date for display
        function formatDate(dateString) {
            const date = new Date(dateString);
            return date.toLocaleDateString('en-US', { 
                weekday: 'long', 
                year: 'numeric', 
                month: 'long', 
                day: 'numeric' 
            });
        }
        
        // Get service names from selected checkboxes
        function getSelectedServices() {
            const selectedServices = [];
            document.querySelectorAll('input[name="service"]:checked').forEach(checkbox => {
                const label = checkbox.closest('.service-option').querySelector('span:first-child').textContent;
                selectedServices.push(label);
            });
            return selectedServices.join(', ');
        }
        
        // Get selected barber name
        function getSelectedBarber() {
            const selectedBarber = document.querySelector('input[name="barber"]:checked');
            if (!selectedBarber) return 'Any Available';
            
            if (selectedBarber.value === 'any') return 'Any Available';
            
            const barberOption = selectedBarber.closest('.barber-option');
            return barberOption.querySelector('.barber-name').textContent;
        }
        
        // Appointment form submission
        appointmentForm.addEventListener('submit', (e) => {
            e.preventDefault();
            
            if (validateAppointmentForm()) {
                // Calculate total
                const total = calculateTotal();
                
                // Get selected time
                const selectedTime = document.querySelector('.time-slot.selected:not(.booked)').textContent;
                
                // Show success screen
                appointmentForm.style.display = 'none';
                enquiryForm.style.display = 'none';
                successScreen.style.display = 'block';
                
                // Update success title and message
                successTitle.textContent = 'Appointment Booked!';
                successMessage.textContent = 'Your appointment has been confirmed. We look forward to seeing you!';
                
                // Populate booking details
                bookingDetails.innerHTML = `
                    <h4>Appointment Details</h4>
                    <p><strong>Name:</strong> <span>${document.getElementById('customerName').value}</span></p>
                    <p><strong>Phone:</strong> <span>${document.getElementById('customerPhone').value}</span></p>
                    <p><strong>Email:</strong> <span>${document.getElementById('customerEmail').value || 'Not provided'}</span></p>
                    <p><strong>Date:</strong> <span>${formatDate(document.getElementById('appointmentDate').value)}</span></p>
                    <p><strong>Time:</strong> <span>${selectedTime}</span></p>
                    <p><strong>Services:</strong> <span>${getSelectedServices()}</span></p>
                    <p><strong>Preferred Barber:</strong> <span>${getSelectedBarber()}</span></p>
                    <p><strong>Special Requests:</strong> <span>${document.getElementById('specialRequests').value || 'None'}</span></p>
                    <p><strong>Estimated Total:</strong> <span style="color: var(--barber-gold); font-weight: 700;">$${total.toFixed(2)}</span></p>
                `;
            }
        });
        
        // Enquiry form submission
        enquiryForm.addEventListener('submit', (e) => {
            e.preventDefault();
            
            if (validateEnquiryForm()) {
                // Show success screen
                appointmentForm.style.display = 'none';
                enquiryForm.style.display = 'none';
                successScreen.style.display = 'block';
                
                // Update success title and message
                successTitle.textContent = 'Enquiry Sent!';
                successMessage.textContent = 'Thank you for your enquiry. Our team will get back to you within 24 hours.';
                
                // Populate booking details with enquiry info
                const subject = document.getElementById('enquirySubject');
                const subjectText = subject.options[subject.selectedIndex].text;
                
                bookingDetails.innerHTML = `
                    <h4>Enquiry Details</h4>
                    <p><strong>Name:</strong> <span>${document.getElementById('enquiryName').value}</span></p>
                    <p><strong>Phone:</strong> <span>${document.getElementById('enquiryPhone').value}</span></p>
                    <p><strong>Email:</strong> <span>${document.getElementById('enquiryEmail').value || 'Not provided'}</span></p>
                    <p><strong>Subject:</strong> <span>${subjectText}</span></p>
                    <p><strong>Best Time to Call:</strong> <span>${document.getElementById('bestTime').options[document.getElementById('bestTime').selectedIndex].text}</span></p>
                    <p><strong>Preferred Contact:</strong> <span>${document.getElementById('preferredContact').options[document.getElementById('preferredContact').selectedIndex].text}</span></p>
                    <p><strong>Message:</strong> <span>${document.getElementById('enquiryMessage').value}</span></p>
                `;
            }
        });
        
        // Success button
        document.getElementById('successBtn').addEventListener('click', () => {
            alert('Confirmation details have been sent to your device for printing. Thank you!');
            
            // Reset forms and go back to appointment tab
            appointmentForm.reset();
            enquiryForm.reset();
            successScreen.style.display = 'none';
            appointmentForm.style.display = 'block';
            appointmentTab.classList.add('active');
            enquiryTab.classList.remove('active');
            appointmentForm.classList.remove('hidden');
            enquiryForm.classList.add('hidden');
            
            // Reset UI states
            document.querySelectorAll('.service-option').forEach(option => {
                option.classList.remove('selected');
            });
            
            document.querySelectorAll('.barber-option').forEach(option => {
                option.classList.remove('selected');
            });
            
            document.querySelectorAll('.time-slot:not(.booked)').forEach(slot => {
                slot.classList.remove('selected');
            });
        });
        
        // Clear form button
        document.querySelectorAll('button[type="reset"]').forEach(button => {
            button.addEventListener('click', () => {
                // Reset UI states
                document.querySelectorAll('.service-option').forEach(option => {
                    option.classList.remove('selected');
                });
                
                document.querySelectorAll('.barber-option').forEach(option => {
                    option.classList.remove('selected');
                });
                
                document.querySelectorAll('.time-slot:not(.booked)').forEach(slot => {
                    slot.classList.remove('selected');
                });
                
                // Clear error states
                document.querySelectorAll('.error').forEach(el => {
                    el.classList.remove('error');
                });
                
                document.querySelectorAll('.error-message').forEach(error => {
                    error.style.display = 'none';
                });
            });
        });
        
        // Set minimum date to today
        const today = new Date().toISOString().split('T')[0];
        document.getElementById('appointmentDate').min = today;
        
        // Set maximum date to 60 days from today
        const maxDate = new Date();
        maxDate.setDate(maxDate.getDate() + 60);
        document.getElementById('appointmentDate').max = maxDate.toISOString().split('T')[0];
        
        // Initialize time slots
        generateTimeSlots();

Barber Shop Booking Form Template Preview

Download Options