Files

162 lines
8.7 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Contact Happy Tails Pet Care - Get in touch with Happy Tails Pet Care to schedule dog walking, grooming, or any of our caring pet services in Springfield.">
<title>Contact | Happy Tails Pet Care</title>
<link rel="stylesheet" href="css/style.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=Playfair+Display:wght@400;600;700&family=Nunito+Sans:wght@400;500;600&display=swap" rel="stylesheet">
<script async src="https://www.googletagmanager.com/gtag/js?id=G-Z15EG3SFPD"></script>
<script src="js/analytics.js"></script>
</head>
<body>
<header class="site-header">
<div class="container">
<a href="/" class="logo" aria-label="Happy Tails Pet Care - Home">
<span class="logo-text">Happy Tails</span>
</a>
<nav class="main-nav" aria-label="Main navigation">
<button class="nav-toggle" aria-expanded="false" aria-controls="nav-menu" aria-label="Toggle navigation">
<span class="hamburger"></span>
</button>
<ul id="nav-menu" class="nav-list">
<li><a href="/" class="nav-link">Home</a></li>
<li><a href="/about.html" class="nav-link">About</a></li>
<li><a href="/services.html" class="nav-link">Services</a></li>
<li><a href="/contact.html" class="nav-link active">Contact</a></li>
</ul>
</nav>
</div>
</header>
<main class="site-main">
<section class="page-hero" aria-labelledby="page-heading">
<div class="container">
<h1 id="page-heading">Contact Us</h1>
<p class="page-subheadline">We would love to hear from you. Reach out to schedule a visit or ask us anything about our dog care services.</p>
</div>
</section>
<section class="contact-section" aria-labelledby="contact-heading">
<div class="container">
<div class="contact-grid">
<div class="contact-info">
<h2 id="contact-heading">Get in Touch</h2>
<p>Whether you need daily walks, a fresh groom, or overnight care, we are here to help. Fill out the form below or reach us directly and we will get back to you within one business day.</p>
<div class="contact-methods">
<div class="contact-method">
<div class="method-icon" aria-hidden="true">📍</div>
<div class="method-content">
<h3>Visit Us</h3>
<address>742 Evergreen Terrace, Springfield, IL 62704</address>
</div>
</div>
<div class="contact-method">
<div class="method-icon" aria-hidden="true">📞</div>
<div class="method-content">
<h3>Call Us</h3>
<p><a href="tel:(555) 742-9283">(555) 742-9283</a></p>
<p class="method-note">Mon-Fri 7am-6pm CST</p>
</div>
</div>
<div class="contact-method">
<div class="method-icon" aria-hidden="true">✉️</div>
<div class="method-content">
<h3>Email Us</h3>
<p><a href="mailto:hello@3031023.xyz">hello@3031023.xyz</a></p>
<p class="method-note">Within 24 business hours</p>
</div>
</div>
</div>
</div>
<div class="contact-form-wrapper">
<h2>Send Us a Message</h2>
<form id="contact-form" class="contact-form" action="https://formsubmit.co/hello@3031023.xyz" method="POST">
<input type="hidden" name="_subject" value="New Inquiry from Happy Tails Pet Care">
<input type="hidden" name="_next" value="">
<div class="form-group">
<label for="name">Name <span class="required" aria-hidden="true">*</span></label>
<input type="text" id="name" name="name" required autocomplete="name">
</div>
<div class="form-group">
<label for="email">Email <span class="required" aria-hidden="true">*</span></label>
<input type="email" id="email" name="email" required autocomplete="email">
</div>
<div class="form-group">
<label for="phone">Phone</label>
<input type="tel" id="phone" name="phone" autocomplete="tel">
</div>
<div class="form-group">
<label for="subject">Subject</label>
<select id="subject" name="subject">
<option value="">Select a topic</option>
<option value="Dog Walking">Dog Walking</option>
<option value="Grooming">Grooming</option>
<option value="Overnight Care">Overnight Care</option>
<option value="Puppy Training">Puppy Training</option>
<option value="General Inquiry">General Inquiry</option>
<option value="Scheduling">Scheduling</option>
</select>
</div>
<div class="form-group">
<label for="message">Message <span class="required" aria-hidden="true">*</span></label>
<textarea id="message" name="message" rows="6" required placeholder="How can we help you?"></textarea>
</div>
<button type="submit" class="btn btn-primary btn-full-width">Send Message</button>
<p class="form-note" aria-live="polite"></p>
</form>
</div>
</div>
</div>
</section>
</main>
<footer class="site-footer" role="contentinfo">
<div class="container">
<div class="footer-grid">
<div class="footer-brand">
<p class="footer-logo">Happy Tails</p>
<p class="footer-tagline">Devoted care for happy dogs every single day</p>
</div>
<nav class="footer-nav" aria-label="Footer navigation">
<h3>Quick Links</h3>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about.html">About</a></li>
<li><a href="/services.html">Services</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</nav>
<address class="footer-contact" aria-label="Contact information">
<h3>Contact</h3>
<p>742 Evergreen Terrace, Springfield, IL 62704</p>
<p><a href="tel:(555) 742-9283">(555) 742-9283</a></p>
<p><a href="mailto:hello@3031023.xyz">hello@3031023.xyz</a></p>
</address>
</div>
<div class="footer-bottom">
<p>&copy; 2026 Happy Tails Pet Care. All rights reserved.</p>
<p class="footer-credits">Hosted by <a href="https://sloanops.com" target="_blank" rel="noopener">SloanOps</a> · Photos by <a href="https://unsplash.com" target="_blank" rel="noopener">Unsplash</a></p>
</div>
</div>
</footer>
<script src="js/main.js"></script>
</body>
</html>