Project Gallery
Explore Contact Our Team - Let's Connect in detail
1
/1
100%
Project Overview
Contact Our Team - Let's Connect
Project Description
Multiple ways to connect: Live chat, phone, email, or contact form. Choose what works best for you. Our average response time is under 4 hours.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Contact Us | Connect With Our Team</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<!-- Animate CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
<!-- Google Fonts -->
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
</head>
<body>
<!-- Header Section -->
<header class="contact-header">
<div class="container">
<div class="header-badge animate__animated animate__fadeInDown">
<i class="fas fa-headset me-2"></i>24/7 Customer Support
</div>
<h1 class="animate__animated animate__fadeInUp">Let's Start a Conversation</h1>
<p class="animate__animated animate__fadeInUp animate__delay-1s">We're here to help you succeed. Reach out to us with any questions, feedback, or partnership inquiries.</p>
</div>
</header>
<!-- Main Content -->
<main class="main-container">
<div class="row g-5">
<!-- Contact Form Column -->
<div class="col-lg-8">
<div class="contact-card animate-on-scroll" id="contactFormCard">
<div class="contact-form">
<div class="form-icon">
<i class="fas fa-paper-plane"></i>
</div>
<!-- Progress Indicator -->
<div class="progress-indicator">
<div class="progress-step active" data-step="1">
<div class="step-number">1</div>
<div class="step-label">Details</div>
</div>
<div class="progress-step" data-step="2">
<div class="step-number">2</div>
<div class="step-label">Message</div>
</div>
<div class="progress-step" data-step="3">
<div class="step-number">3</div>
<div class="step-label">Review</div>
</div>
</div>
<!-- Multi-step Form -->
<form id="contactForm">
<!-- Step 1: Personal Details -->
<div class="form-step active" id="step1">
<h3 class="mb-4">Personal Information</h3>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="form-label" for="firstName">
<i class="fas fa-user"></i> First Name *
</label>
<input type="text" class="form-control" id="firstName" placeholder="Enter your first name">
<div class="invalid-feedback">Please enter your first name</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label" for="lastName">
<i class="fas fa-user"></i> Last Name *
</label>
<input type="text" class="form-control" id="lastName" placeholder="Enter your last name">
<div class="invalid-feedback">Please enter your last name</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="form-label" for="email">
<i class="fas fa-envelope"></i> Email Address *
</label>
<input type="email" class="form-control" id="email" placeholder="Enter your email">
<div class="invalid-feedback">Please enter a valid email address</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="form-label" for="phone">
<i class="fas fa-phone"></i> Phone Number
</label>
<input type="tel" class="form-control" id="phone" placeholder="Enter your phone number">
</div>
</div>
</div>
<div class="d-flex justify-content-between mt-5">
<div></div> <!-- Empty div for spacing -->
<button type="button" class="btn btn-next" data-next="2">Next <i class="fas fa-arrow-right ms-2"></i></button>
</div>
</div>
<!-- Step 2: Message Details -->
<div class="form-step" id="step2">
<h3 class="mb-4">Your Message</h3>
<div class="form-group">
<label class="form-label" for="subject">
<i class="fas fa-tag"></i> Subject *
</label>
<select class="form-select" id="subject">
<option value="" selected disabled>Select a subject</option>
<option value="general">General Inquiry</option>
<option value="support">Technical Support</option>
<option value="sales">Sales Questions</option>
<option value="billing">Billing & Payments</option>
<option value="feedback">Feedback & Suggestions</option>
<option value="partnership">Partnership Opportunities</option>
<option value="other">Other</option>
</select>
<div class="invalid-feedback">Please select a subject</div>
</div>
<div class="form-group">
<label class="form-label" for="priority">
<i class="fas fa-flag"></i> Priority Level
</label>
<select class="form-select" id="priority">
<option value="low" selected>Low - General Question</option>
<option value="medium">Medium - Need help within 48 hours</option>
<option value="high">High - Urgent issue requiring immediate attention</option>
</select>
</div>
<div class="form-group">
<label class="form-label" for="message">
<i class="fas fa-comment-dots"></i> Message *
</label>
<textarea class="form-textarea" id="message" placeholder="Please provide details about your inquiry..."></textarea>
<div class="invalid-feedback">Please enter your message</div>
<div class="form-text mt-2">
<span id="charCount">0</span> / 500 characters
</div>
</div>
<div class="d-flex justify-content-between mt-5">
<button type="button" class="btn btn-prev" data-prev="1">
<i class="fas fa-arrow-left me-2"></i> Back
</button>
<button type="button" class="btn btn-next" data-next="3">Next <i class="fas fa-arrow-right ms-2"></i></button>
</div>
</div>
<!-- Step 3: Review & Submit -->
<div class="form-step" id="step3">
<h3 class="mb-4">Review & Submit</h3>
<div class="review-card p-4 mb-4" style="background-color: #f8fafc; border-radius: 12px;">
<h5 class="mb-3">Please review your information</h5>
<div class="row mb-3">
<div class="col-sm-6">
<strong>Name:</strong>
<div id="review-name">-</div>
</div>
<div class="col-sm-6">
<strong>Email:</strong>
<div id="review-email">-</div>
</div>
</div>
<div class="row mb-3">
<div class="col-sm-6">
<strong>Phone:</strong>
<div id="review-phone">-</div>
</div>
<div class="col-sm-6">
<strong>Subject:</strong>
<div id="review-subject">-</div>
</div>
</div>
<div class="mb-3">
<strong>Priority:</strong>
<div id="review-priority">-</div>
</div>
<div>
<strong>Message:</strong>
<div id="review-message" class="mt-2" style="max-height: 150px; overflow-y: auto;">-</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input class="form-check-input" type="checkbox" id="consent" required>
<label class="form-check-label" for="consent">
I agree to the <a href="#" class="text-primary">Terms of Service</a> and <a href="#" class="text-primary">Privacy Policy</a>. I consent to receiving communications regarding my inquiry.
</label>
<div class="invalid-feedback">You must agree before submitting</div>
</div>
</div>
<div class="d-flex justify-content-between mt-5">
<button type="button" class="btn btn-prev" data-prev="2">
<i class="fas fa-arrow-left me-2"></i> Back
</button>
<button type="submit" class="btn-submit" id="submitBtn">
<span id="btnText">Send Message</span>
<div class="loader" id="btnLoader"></div>
</button>
</div>
</div>
</form>
<!-- Success/Error Messages -->
<div class="alert-message" id="successMessage">
<i class="fas fa-check-circle me-2"></i>
<strong>Success!</strong> Your message has been sent. We'll get back to you within 24 hours.
</div>
<div class="alert-message alert-error" id="errorMessage">
<i class="fas fa-exclamation-circle me-2"></i>
<strong>Error!</strong> There was a problem sending your message. Please try again.
</div>
</div>
</div>
<!-- Interactive Map -->
<div class="map-container animate-on-scroll">
<!-- Map placeholder with interactive markers -->
<div id="map" style="width: 100%; height: 100%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);"></div>
<div class="map-overlay">
<div class="map-overlay-content">
<h5><i class="fas fa-map-marker-alt text-primary me-2"></i>Our Headquarters</h5>
<p class="mb-0">123 Innovation Drive, Suite 500<br>San Francisco, CA 94107</p>
<button class="btn btn-sm btn-primary mt-3" id="getDirections">
<i class="fas fa-directions me-2"></i>Get Directions
</button>
</div>
</div>
</div>
<!-- Team Section -->
<div class="team-section animate-on-scroll">
<h2 class="mb-4">Meet Our Support Team</h2>
<div class="row g-4">
<div class="col-md-4">
<div class="team-card">
<img src="https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" class="team-img" alt="Sarah Johnson">
<h5 class="mb-2">Sarah Johnson</h5>
<p class="text-muted mb-2">Customer Support Lead</p>
<p class="small">Sarah specializes in technical support and product inquiries.</p>
</div>
</div>
<div class="col-md-4">
<div class="team-card">
<img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" class="team-img" alt="Michael Chen">
<h5 class="mb-2">Michael Chen</h5>
<p class="text-muted mb-2">Sales & Partnerships</p>
<p class="small">Michael handles partnership inquiries and sales questions.</p>
</div>
</div>
<div class="col-md-4">
<div class="team-card">
<img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" class="team-img" alt="Jessica Williams">
<h5 class="mb-2">Jessica Williams</h5>
<p class="text-muted mb-2">Billing Specialist</p>
<p class="small">Jessica assists with billing, invoices, and payment questions.</p>
</div>
</div>
</div>
</div>
</div>
<!-- Contact Info Column -->
<div class="col-lg-4">
<div class="contact-card animate-on-scroll">
<div class="contact-info">
<div class="info-header">
<h3>Contact Information</h3>
<p>Reach out to us through any of these channels</p>
</div>
<div class="info-item">
<div class="info-icon">
<i class="fas fa-map-marker-alt"></i>
</div>
<div class="info-text">
<h5>Our Address</h5>
<p>123 Innovation Drive, Suite 500<br>San Francisco, CA 94107</p>
</div>
</div>
<div class="info-item">
<div class="info-icon">
<i class="fas fa-phone-alt"></i>
</div>
<div class="info-text">
<h5>Phone Numbers</h5>
<p>Sales: +1 (555) 123-4567<br>Support: +1 (555) 987-6543<br>Fax: +1 (555) 456-7890</p>
</div>
</div>
<div class="info-item">
<div class="info-icon">
<i class="fas fa-envelope"></i>
</div>
<div class="info-text">
<h5>Email Addresses</h5>
<p>General: hello@example.com<br>Support: support@example.com<br>Sales: sales@example.com</p>
</div>
</div>
<div class="info-item">
<div class="info-icon">
<i class="fas fa-clock"></i>
</div>
<div class="info-text">
<h5>Working Hours</h5>
<p>Monday - Friday: 8:00 AM - 8:00 PM EST<br>Saturday: 9:00 AM - 5:00 PM EST<br>Sunday: 10:00 AM - 4:00 PM EST</p>
</div>
</div>
<!-- Live Chat Widget -->
<div class="info-item mt-5">
<div class="info-icon bg-success">
<i class="fas fa-comments"></i>
</div>
<div class="info-text">
<h5>Live Chat Support</h5>
<p>Chat with our team in real-time</p>
<button class="btn btn-sm btn-success mt-2" id="liveChatBtn">
<i class="fas fa-comment me-2"></i>Start Live Chat
</button>
</div>
</div>
<!-- Social Media -->
<div class="mt-5">
<h5 class="mb-3">Follow Us</h5>
<div class="d-flex">
<a href="#" class="social-link me-3">
<i class="fab fa-facebook-f"></i>
</a>
<a href="#" class="social-link me-3">
<i class="fab fa-twitter"></i>
</a>
<a href="#" class="social-link me-3">
<i class="fab fa-linkedin-in"></i>
</a>
<a href="#" class="social-link me-3">
<i class="fab fa-instagram"></i>
</a>
<a href="#" class="social-link">
<i class="fab fa-youtube"></i>
</a>
</div>
</div>
</div>
</div>
<!-- Response Time Tracker -->
<div class="contact-card mt-4 animate-on-scroll">
<div class="contact-form">
<h5 class="mb-3">Current Response Times</h5>
<div class="mb-4">
<div class="d-flex justify-content-between mb-1">
<span>Email Support</span>
<span>2.5 hours</span>
</div>
<div class="progress" style="height: 8px;">
<div class="progress-bar bg-success" style="width: 65%"></div>
</div>
</div>
<div class="mb-4">
<div class="d-flex justify-content-between mb-1">
<span>Phone Support</span>
<span>4.1 minutes</span>
</div>
<div class="progress" style="height: 8px;">
<div class="progress-bar bg-primary" style="width: 85%"></div>
</div>
</div>
<div class="mb-0">
<div class="d-flex justify-content-between mb-1">
<span>Live Chat</span>
<span>1.2 minutes</span>
</div>
<div class="progress" style="height: 8px;">
<div class="progress-bar bg-warning" style="width: 95%"></div>
</div>
</div>
<div class="alert alert-info mt-4 mb-0 p-3 small">
<i class="fas fa-info-circle me-2"></i>
These are average response times based on the last 24 hours.
</div>
</div>
</div>
<!-- FAQ Section -->
<div class="contact-card mt-4 animate-on-scroll">
<div class="contact-form">
<h5 class="mb-4">Frequently Asked Questions</h5>
<div class="accordion" id="faqAccordion">
<div class="accordion-item border-0 mb-3">
<h2 class="accordion-header">
<button class="accordion-button collapsed rounded" type="button" data-bs-toggle="collapse" data-bs-target="#faqOne">
How quickly will I receive a response?
</button>
</h2>
<div id="faqOne" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
<div class="accordion-body">
We typically respond to all inquiries within 2-4 hours during business days. For urgent matters, please use our phone support or live chat.
</div>
</div>
</div>
<div class="accordion-item border-0 mb-3">
<h2 class="accordion-header">
<button class="accordion-button collapsed rounded" type="button" data-bs-toggle="collapse" data-bs-target="#faqTwo">
Do you offer 24/7 support?
</button>
</h2>
<div id="faqTwo" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
<div class="accordion-body">
Yes, our phone and live chat support are available 24/7. Email support responses may be slightly delayed during overnight hours.
</div>
</div>
</div>
<div class="accordion-item border-0 mb-3">
<h2 class="accordion-header">
<button class="accordion-button collapsed rounded" type="button" data-bs-toggle="collapse" data-bs-target="#faqThree">
Can I schedule a call with your team?
</button>
</h2>
<div id="faqThree" class="accordion-collapse collapse" data-bs-parent="#faqAccordion">
<div class="accordion-body">
Absolutely! After submitting your inquiry, you'll have the option to schedule a call at a time that works best for you.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</body>
</html>CSS
<style>
:root {
--primary-color: #6366f1;
--primary-dark: #4f46e5;
--secondary-color: #8b5cf6;
--accent-color: #10b981;
--danger-color: #ef4444;
--light-bg: #f8fafc;
--dark-bg: #1e293b;
--text-dark: #334155;
--text-light: #64748b;
--shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
--shadow-hover: 0 20px 40px rgba(0, 0, 0, 0.1);
--transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
--border-radius: 16px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
color: var(--text-dark);
line-height: 1.6;
background-color: #f1f5f9;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Poppins', sans-serif;
font-weight: 700;
}
/* Custom Scrollbar */
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
background: var(--primary-color);
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--primary-dark);
}
/* Header with animated gradient */
.contact-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 100px 0 70px;
margin-bottom: 60px;
text-align: center;
position: relative;
overflow: hidden;
}
.contact-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 60c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
}
.contact-header h1 {
font-size: 3.5rem;
margin-bottom: 20px;
position: relative;
z-index: 1;
}
.contact-header p {
font-size: 1.3rem;
max-width: 700px;
margin: 0 auto 30px;
opacity: 0.9;
position: relative;
z-index: 1;
}
.header-badge {
display: inline-block;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
padding: 8px 20px;
border-radius: 50px;
font-size: 0.9rem;
font-weight: 500;
margin-bottom: 20px;
}
/* Main Container */
.main-container {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
}
/* Contact Card */
.contact-card {
border-radius: var(--border-radius);
box-shadow: var(--shadow);
border: none;
transition: var(--transition);
margin-bottom: 30px;
overflow: hidden;
background: white;
}
.contact-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-hover);
}
.contact-form {
padding: 50px;
position: relative;
}
.form-icon {
position: absolute;
top: -25px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 60px;
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
}
/* Form Styling */
.form-group {
margin-bottom: 1.8rem;
position: relative;
}
.form-label {
font-weight: 600;
margin-bottom: 10px;
color: var(--text-dark);
display: flex;
align-items: center;
}
.form-label i {
margin-right: 8px;
color: var(--primary-color);
font-size: 0.9rem;
}
.form-control, .form-select, .form-textarea {
padding: 16px 20px;
border-radius: 12px;
border: 2px solid #e2e8f0;
font-size: 1rem;
transition: var(--transition);
background-color: #f8fafc;
}
.form-control:focus, .form-select:focus, .form-textarea:focus {
border-color: var(--primary-color);
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
background-color: white;
outline: none;
}
.form-textarea {
min-height: 150px;
resize: vertical;
}
/* Contact Info */
.contact-info {
padding: 50px;
background: linear-gradient(135deg, var(--dark-bg) 0%, #0f172a 100%);
color: white;
height: 100%;
position: relative;
overflow: hidden;
}
.contact-info::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.info-header {
margin-bottom: 40px;
position: relative;
z-index: 1;
}
.info-header h3 {
font-size: 1.8rem;
margin-bottom: 15px;
}
.info-header p {
opacity: 0.8;
}
.info-item {
display: flex;
align-items: flex-start;
margin-bottom: 30px;
position: relative;
z-index: 1;
transition: var(--transition);
padding: 15px;
border-radius: 12px;
}
.info-item:hover {
background: rgba(255, 255, 255, 0.05);
transform: translateX(5px);
}
.info-icon {
width: 60px;
height: 60px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 20px;
flex-shrink: 0;
font-size: 1.5rem;
color: white;
transition: var(--transition);
}
.info-item:hover .info-icon {
background: var(--primary-color);
transform: scale(1.1);
}
.info-text h5 {
margin-bottom: 8px;
font-size: 1.2rem;
}
.info-text p {
opacity: 0.8;
margin-bottom: 0;
}
/* Button Styling */
.btn-submit {
background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
color: white;
padding: 18px 40px;
border-radius: 12px;
border: none;
font-weight: 600;
font-size: 1.1rem;
transition: var(--transition);
width: 100%;
position: relative;
overflow: hidden;
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
.btn-submit::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--primary-dark), var(--primary-color));
transition: left 0.6s ease;
z-index: -1;
}
.btn-submit:hover::before {
left: 0;
}
.btn-submit:hover {
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(99, 102, 241, 0.3);
}
.btn-submit:active {
transform: translateY(0);
}
/* Map Container */
.map-container {
border-radius: var(--border-radius);
overflow: hidden;
box-shadow: var(--shadow);
margin-top: 40px;
height: 350px;
position: relative;
}
.map-overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(to bottom, rgba(30, 41, 59, 0.1), rgba(30, 41, 59, 0.3));
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
z-index: 1;
}
.map-overlay-content {
background: rgba(255, 255, 255, 0.95);
color: var(--text-dark);
padding: 20px 30px;
border-radius: 12px;
text-align: center;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
/* Team Members */
.team-section {
margin-top: 80px;
}
.team-card {
border-radius: var(--border-radius);
box-shadow: var(--shadow);
border: none;
transition: var(--transition);
overflow: hidden;
background: white;
text-align: center;
padding: 30px 20px;
}
.team-card:hover {
transform: translateY(-10px);
box-shadow: var(--shadow-hover);
}
.team-img {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
margin: 0 auto 20px;
border: 5px solid #f1f5f9;
}
/* FAQ Section */
.faq-section {
margin-top: 80px;
}
.faq-card {
border-radius: var(--border-radius);
box-shadow: var(--shadow);
border: none;
background: white;
overflow: hidden;
}
.accordion-button {
font-weight: 600;
padding: 20px;
background-color: white;
border: none;
}
.accordion-button:not(.collapsed) {
color: var(--primary-color);
background-color: rgba(99, 102, 241, 0.05);
box-shadow: none;
}
.accordion-button:focus {
box-shadow: none;
border-color: rgba(0,0,0,.125);
}
/* Success & Error Messages */
.alert-message {
padding: 20px;
border-radius: 12px;
margin-top: 20px;
text-align: center;
display: none;
animation: fadeIn 0.5s ease;
}
.alert-success {
background: #d1fae5;
color: #065f46;
border-left: 5px solid var(--accent-color);
}
.alert-error {
background: #fee2e2;
color: #991b1b;
border-left: 5px solid var(--danger-color);
}
/* Footer */
.contact-footer {
background: var(--dark-bg);
color: white;
padding: 60px 0 30px;
margin-top: 100px;
}
.footer-links a {
color: #cbd5e1;
text-decoration: none;
transition: var(--transition);
display: block;
margin-bottom: 10px;
}
.footer-links a:hover {
color: white;
transform: translateX(5px);
}
/* Animation Classes */
.animate-on-scroll {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.8s ease, transform 0.8s ease;
}
.animate-on-scroll.visible {
opacity: 1;
transform: translateY(0);
}
/* Loader */
.loader {
display: none;
width: 20px;
height: 20px;
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
border-top-color: white;
animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* Responsive Design */
@media (max-width: 992px) {
.contact-header h1 {
font-size: 2.8rem;
}
.contact-form, .contact-info {
padding: 30px;
}
}
@media (max-width: 768px) {
.contact-header {
padding: 80px 0 50px;
}
.contact-header h1 {
font-size: 2.2rem;
}
.contact-header p {
font-size: 1.1rem;
}
.form-icon {
width: 50px;
height: 50px;
font-size: 1.2rem;
top: -20px;
}
}
/* Progress Indicator */
.progress-indicator {
display: flex;
justify-content: space-between;
margin-bottom: 40px;
position: relative;
}
.progress-indicator::before {
content: '';
position: absolute;
top: 20px;
left: 0;
width: 100%;
height: 3px;
background: #e2e8f0;
z-index: 0;
}
.progress-step {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
z-index: 1;
}
.step-number {
width: 40px;
height: 40px;
border-radius: 50%;
background: #e2e8f0;
color: var(--text-light);
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
margin-bottom: 10px;
transition: var(--transition);
}
.progress-step.active .step-number {
background: var(--primary-color);
color: white;
box-shadow: 0 5px 15px rgba(99, 102, 241, 0.3);
}
.step-label {
font-size: 0.9rem;
font-weight: 500;
color: var(--text-light);
}
.progress-step.active .step-label {
color: var(--primary-color);
font-weight: 600;
}
.form-step {
display: none;
}
.form-step.active {
display: block;
animation: fadeIn 0.5s ease;
}
</style>JavaScript
<!-- Bootstrap JS Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Multi-step form functionality
const formSteps = document.querySelectorAll('.form-step');
const progressSteps = document.querySelectorAll('.progress-step');
const nextButtons = document.querySelectorAll('.btn-next');
const prevButtons = document.querySelectorAll('.btn-prev');
const contactForm = document.getElementById('contactForm');
const submitBtn = document.getElementById('submitBtn');
const btnText = document.getElementById('btnText');
const btnLoader = document.getElementById('btnLoader');
const successMessage = document.getElementById('successMessage');
const errorMessage = document.getElementById('errorMessage');
const charCount = document.getElementById('charCount');
const messageInput = document.getElementById('message');
// Live chat simulation
const liveChatBtn = document.getElementById('liveChatBtn');
const getDirectionsBtn = document.getElementById('getDirections');
// Animation on scroll
const animateElements = document.querySelectorAll('.animate-on-scroll');
// Character counter for message
messageInput.addEventListener('input', function() {
const length = this.value.length;
charCount.textContent = length;
if (length > 500) {
charCount.style.color = 'var(--danger-color)';
} else if (length > 400) {
charCount.style.color = 'orange';
} else {
charCount.style.color = 'var(--text-light)';
}
});
// Form step navigation
nextButtons.forEach(button => {
button.addEventListener('click', function() {
const currentStep = document.querySelector('.form-step.active');
const currentStepId = parseInt(currentStep.id.replace('step', ''));
const nextStepId = parseInt(this.getAttribute('data-next'));
// Validate current step before proceeding
if (validateStep(currentStepId)) {
// Update progress indicator
progressSteps.forEach(step => {
const stepNumber = parseInt(step.getAttribute('data-step'));
step.classList.remove('active');
if (stepNumber <= nextStepId) {
step.classList.add('active');
}
});
// Switch to next step
currentStep.classList.remove('active');
document.getElementById(`step${nextStepId}`).classList.add('active');
// Update review information if going to step 3
if (nextStepId === 3) {
updateReviewInfo();
}
}
});
});
prevButtons.forEach(button => {
button.addEventListener('click', function() {
const currentStep = document.querySelector('.form-step.active');
const currentStepId = parseInt(currentStep.id.replace('step', ''));
const prevStepId = parseInt(this.getAttribute('data-prev'));
// Update progress indicator
progressSteps.forEach(step => {
const stepNumber = parseInt(step.getAttribute('data-step'));
step.classList.remove('active');
if (stepNumber <= prevStepId) {
step.classList.add('active');
}
});
// Switch to previous step
currentStep.classList.remove('active');
document.getElementById(`step${prevStepId}`).classList.add('active');
});
});
// Step validation
function validateStep(stepNumber) {
let isValid = true;
if (stepNumber === 1) {
// Validate step 1 fields
const firstName = document.getElementById('firstName');
const lastName = document.getElementById('lastName');
const email = document.getElementById('email');
// Reset validation
[firstName, lastName, email].forEach(field => {
field.classList.remove('is-invalid');
});
// Check firstName
if (!firstName.value.trim()) {
firstName.classList.add('is-invalid');
isValid = false;
}
// Check lastName
if (!lastName.value.trim()) {
lastName.classList.add('is-invalid');
isValid = false;
}
// Check email
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!email.value.trim() || !emailRegex.test(email.value)) {
email.classList.add('is-invalid');
isValid = false;
}
} else if (stepNumber === 2) {
// Validate step 2 fields
const subject = document.getElementById('subject');
const message = document.getElementById('message');
// Reset validation
[subject, message].forEach(field => {
field.classList.remove('is-invalid');
});
// Check subject
if (!subject.value) {
subject.classList.add('is-invalid');
isValid = false;
}
// Check message
if (!message.value.trim()) {
message.classList.add('is-invalid');
isValid = false;
} else if (message.value.trim().length > 500) {
message.classList.add('is-invalid');
message.nextElementSibling.textContent = 'Message must be 500 characters or less';
isValid = false;
}
}
return isValid;
}
// Update review information
function updateReviewInfo() {
document.getElementById('review-name').textContent =
`${document.getElementById('firstName').value} ${document.getElementById('lastName').value}`;
document.getElementById('review-email').textContent =
document.getElementById('email').value;
document.getElementById('review-phone').textContent =
document.getElementById('phone').value || 'Not provided';
const subjectSelect = document.getElementById('subject');
const selectedOption = subjectSelect.options[subjectSelect.selectedIndex];
document.getElementById('review-subject').textContent =
selectedOption.text || 'Not selected';
const prioritySelect = document.getElementById('priority');
const priorityOption = prioritySelect.options[prioritySelect.selectedIndex];
document.getElementById('review-priority').textContent =
priorityOption.text;
document.getElementById('review-message').textContent =
document.getElementById('message').value;
}
// Form submission
contactForm.addEventListener('submit', function(e) {
e.preventDefault();
// Validate final step
if (!validateStep(3)) {
// Check consent
const consentCheckbox = document.getElementById('consent');
if (!consentCheckbox.checked) {
consentCheckbox.classList.add('is-invalid');
return;
}
return;
}
// Show loading state
btnText.textContent = 'Sending...';
btnLoader.style.display = 'block';
submitBtn.disabled = true;
// Simulate API call
setTimeout(function() {
// Hide loading state
btnText.textContent = 'Send Message';
btnLoader.style.display = 'none';
submitBtn.disabled = false;
// Randomly show success or error (for demo)
const isSuccess = Math.random() > 0.2; // 80% success rate for demo
if (isSuccess) {
// Show success message
successMessage.style.display = 'block';
errorMessage.style.display = 'none';
// Reset form
contactForm.reset();
charCount.textContent = '0';
// Reset form steps
formSteps.forEach(step => step.classList.remove('active'));
document.getElementById('step1').classList.add('active');
// Reset progress indicator
progressSteps.forEach(step => {
step.classList.remove('active');
if (step.getAttribute('data-step') === '1') {
step.classList.add('active');
}
});
// Scroll to success message
successMessage.scrollIntoView({ behavior: 'smooth', block: 'center' });
// Hide success message after 5 seconds
setTimeout(function() {
successMessage.style.display = 'none';
}, 5000);
} else {
// Show error message
errorMessage.style.display = 'block';
successMessage.style.display = 'none';
// Scroll to error message
errorMessage.scrollIntoView({ behavior: 'smooth', block: 'center' });
// Hide error message after 5 seconds
setTimeout(function() {
errorMessage.style.display = 'none';
}, 5000);
}
}, 2000);
});
// Live chat simulation
liveChatBtn.addEventListener('click', function() {
const isAvailable = Math.random() > 0.3; // 70% chance agent is available
if (isAvailable) {
alert('Connecting you with a live agent... Please wait.');
// In a real implementation, this would open a chat widget
} else {
alert('All agents are currently busy. Please try again in a few minutes or leave a message and we\'ll get back to you.');
}
});
// Get directions button
getDirectionsBtn.addEventListener('click', function() {
const address = encodeURIComponent("123 Innovation Drive, Suite 500, San Francisco, CA 94107");
window.open(`https://www.google.com/maps/dir/?api=1&destination=${address}`, '_blank');
});
// Animation on scroll
function checkScroll() {
animateElements.forEach(element => {
const elementTop = element.getBoundingClientRect().top;
const windowHeight = window.innerHeight;
if (elementTop < windowHeight - 100) {
element.classList.add('visible');
}
});
}
window.addEventListener('scroll', checkScroll);
window.addEventListener('load', checkScroll);
// Initialize
checkScroll();
// Add button styling
const style = document.createElement('style');
style.textContent = `
.btn-next, .btn-prev {
padding: 12px 30px;
border-radius: 10px;
font-weight: 600;
transition: var(--transition);
}
.btn-next {
background: var(--primary-color);
color: white;
border: none;
}
.btn-next:hover {
background: var(--primary-dark);
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(99, 102, 241, 0.3);
}
.btn-prev {
background: #f1f5f9;
color: var(--text-dark);
border: 2px solid #e2e8f0;
}
.btn-prev:hover {
background: #e2e8f0;
transform: translateY(-2px);
}
.social-link {
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
justify-content: center;
color: white;
text-decoration: none;
transition: var(--transition);
}
.social-link:hover {
background: var(--primary-color);
transform: translateY(-3px);
}
.review-card strong {
color: var(--text-dark);
}
#review-name, #review-email, #review-phone, #review-subject, #review-priority, #review-message {
color: var(--text-light);
margin-top: 5px;
}
`;
document.head.appendChild(style);
});
</script>