|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8" /> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"/> |
|
|
<title>Contact Us | Phoenix Pressure Washing | Oklahoma City</title> |
|
|
<meta name="description" content="Contact Phoenix Pressure Washing in OKC for a free quote. Call, text, or email us today for professional pressure washing services."> |
|
|
<link rel="icon" type="image/x-icon" href="/assets/img/favicon.ico"> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<link rel="stylesheet" href="/assets/css/styles.css"> |
|
|
</head> |
|
|
<body class="bg-gradient-to-br from-blue-50 to-blue-100 bg-[url('https://static.photos/blue/1200x630/42')] bg-fixed bg-cover bg-blend-overlay"> |
|
|
<custom-navbar></custom-navbar> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-white"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="contact-wrapper"> |
|
|
<div> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-8">Request a Quote</h2> |
|
|
|
|
|
<form id="contact-form" class="space-y-6" novalidate> |
|
|
<div id="form-success" class="hidden bg-green-50 border border-green-200 text-green-700 px-4 py-3 rounded mb-6"> |
|
|
Thank you! Your message has been sent. We'll contact you shortly. |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="name" class="block text-gray-700 font-medium mb-2">Name *</label> |
|
|
<input type="text" id="name" name="name" class="form-input" required> |
|
|
<div class="form-error">Please enter your name</div> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="email" class="block text-gray-700 font-medium mb-2">Email *</label> |
|
|
<input type="email" id="email" name="email" class="form-input" required> |
|
|
<div class="form-error">Please enter a valid email</div> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="phone" class="block text-gray-700 font-medium mb-2">Phone</label> |
|
|
<input type="tel" id="phone" name="phone" class="form-input"> |
|
|
<div class="form-error">Please enter a valid phone number</div> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="service" class="block text-gray-700 font-medium mb-2">Service Needed</label> |
|
|
<select id="service" name="service" class="form-input"> |
|
|
<option value="">Select a service</option> |
|
|
<option value="residential">Residential Washing</option> |
|
|
<option value="commercial">Commercial Cleaning</option> |
|
|
<option value="roof">Roof & Gutter Cleaning</option> |
|
|
<option value="driveway">Driveway/Walkway Cleaning</option> |
|
|
<option value="deck">Deck/Fence Cleaning</option> |
|
|
<option value="other">Other</option> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="form-group"> |
|
|
<label for="message" class="block text-gray-700 font-medium mb-2">Message *</label> |
|
|
<textarea id="message" name="message" rows="4" class="form-input" required></textarea> |
|
|
<div class="form-error">Please enter your message</div> |
|
|
</div> |
|
|
|
|
|
<input type="text" name="website" style="display:none" tabindex="-1" autocomplete="off"> |
|
|
|
|
|
|
|
|
<label style="display:block; margin-top:15px; font-size:16px;"> |
|
|
<input type="checkbox" id="smsConsent" name="smsConsent" required> |
|
|
I agree to receive text messages and service-related communications from Phoenix Pressure Washing at the phone number provided. I understand I can opt out at any time. |
|
|
</label> |
|
|
|
|
|
<button type="submit" class="w-full bg-primary text-white/90 font-bold py-3 px-6 rounded-lg hover:bg-red-600 transition duration-300 border-2 border-red-500"> |
|
|
<span id="submit-text" class="text-black/90">Send Request</span> |
|
|
<div id="spinner" class="hidden inline-block ml-2"> |
|
|
<svg class="animate-spin h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> |
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> |
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> |
|
|
</svg> |
|
|
</div> |
|
|
</button> |
|
|
<div id="form-status" aria-live="polite" class="mt-4 text-center"></div> |
|
|
</form> |
|
|
|
|
|
<div class="contact-info mt-16"> |
|
|
<h2 class="text-3xl font-bold text-black mb-8">Contact Information</h2> |
|
|
<div class="space-y-6 mb-8"> |
|
|
<div class="flex items-start gap-4"> |
|
|
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mt-1 flex-shrink-0"> |
|
|
<i data-feather="phone" class="text-primary"></i> |
|
|
</div> |
|
|
<div class="contact-form"> |
|
|
<h3 class="text-xl font-semibold text-black mb-1">Phone / SMS</h3> |
|
|
<p class="text-gray-600 mb-2">Text us for 24/7 Support</p> |
|
|
<a href="tel:+14053670008" class="text-primary font-medium hover:underline" onclick="return confirm('Call us at (405) 367-0008?')">(405) 367-0008</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start gap-4"> |
|
|
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mt-1 flex-shrink-0"> |
|
|
<i data-feather="mail" class="text-primary"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold text-black mb-1">Email</h3> |
|
|
<p class="text-gray-600 mb-2">Send us details about your project</p> |
|
|
<a href="mailto:[email protected]" class="text-primary font-medium hover:underline" onclick="return confirm('Email us at [email protected]?')">[email protected]</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start gap-4"> |
|
|
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mt-1 flex-shrink-0"> |
|
|
<i data-feather="map-pin" class="text-primary"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold text-black mb-1">Service Area</h3> |
|
|
<p class="text-gray-600">Serving Oklahoma City and surrounding areas including Edmond, Norman, and Moore</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex items-start gap-4"> |
|
|
<div class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center mt-1 flex-shrink-0"> |
|
|
<i data-feather="clock" class="text-primary"></i> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-xl font-semibold text-black mb-1">Business Hours</h3> |
|
|
<p class="text-gray-600">Monday - Saturday: 8:00 AM - 6:00 PM</p> |
|
|
<p class="text-gray-600">Closed Sundays</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-gray-50 p-6 rounded-lg"> |
|
|
<h3 class="text-xl font-semibold text-gray-800 mb-4">Why Choose Us?</h3> |
|
|
<ul class="space-y-3"> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="text-primary mr-2 mt-1 flex-shrink-0"></i> |
|
|
<span class="text-gray-700">Free, no-obligation quotes</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="text-primary mr-2 mt-1 flex-shrink-0"></i> |
|
|
<span class="text-gray-700">Fully insured and licensed</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="text-primary mr-2 mt-1 flex-shrink-0"></i> |
|
|
<span class="text-gray-700">Eco-friendly cleaning solutions</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="text-primary mr-2 mt-1 flex-shrink-0"></i> |
|
|
<span class="text-gray-700">Satisfaction guaranteed</span> |
|
|
</li> |
|
|
<li class="flex items-start"> |
|
|
<i data-feather="check" class="text-primary mr-2 mt-1 flex-shrink-0"></i> |
|
|
<span class="text-gray-700">Local, family-owned business</span> |
|
|
</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="thankyou-modal" class="fixed inset-0 z-50 hidden items-center justify-center px-4" aria-hidden="true" role="dialog" aria-modal="true"> |
|
|
<div class="fixed inset-0 bg-black/50" id="thankyou-modal-backdrop"></div> |
|
|
<div class="bg-white rounded-lg shadow-xl max-w-md w-full z-10 p-6 mx-auto"> |
|
|
<h3 class="text-xl font-bold text-gray-800 mb-2">Thank you!</h3> |
|
|
<p class="text-gray-600 mb-4">We received your request and will contact you shortly.</p> |
|
|
<div class="flex justify-end gap-2"> |
|
|
<button id="thankyou-ok" class="px-4 py-2 rounded bg-primary text-white font-semibold hover:bg-red-600">OK</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gray-50"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-bold text-gray-800 mb-4">Frequently Asked Questions</h2> |
|
|
<p class="text-gray-600 max-w-2xl mx-auto">Get answers to common questions about our pressure washing services</p> |
|
|
</div> |
|
|
|
|
|
<div class="max-w-3xl mx-auto"> |
|
|
<div class="faq-item"> |
|
|
<div class="faq-question"> |
|
|
<h3 class="text-xl font-semibold text-gray-800">How much does pressure washing cost?</h3> |
|
|
<i data-feather="chevron-down" class="text-primary transition-transform duration-300"></i> |
|
|
</div> |
|
|
<div class="faq-answer"> |
|
|
<p class="text-gray-600">Our prices vary depending on the size of the area, type of surface, and level of cleaning required. We offer free, no-obligation quotes so you'll know exactly what to expect before we begin work. Typical residential jobs range from $150-$500, while commercial properties may be more.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="faq-item"> |
|
|
<div class="faq-question"> |
|
|
<h3 class="text-xl font-semibold text-gray-800">Is pressure washing safe for all surfaces?</h3> |
|
|
<i data-feather="chevron-down" class="text-primary transition-transform duration-300"></i> |
|
|
</div> |
|
|
<div class="faq-answer"> |
|
|
<p class="text-gray-600">Our professional technicians are trained to adjust pressure and techniques based on the surface being cleaned. We use lower pressure for delicate surfaces like wood siding or roofs, and higher pressure for concrete and brick. We also use specialized cleaning solutions to safely remove stains without damaging your property.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="faq-item"> |
|
|
<div class="faq-question"> |
|
|
<h3 class="text-xl font-semibold text-gray-800">How often should I pressure wash my home?</h3> |
|
|
<i data-feather="chevron-down" class="text-primary transition-transform duration-300"></i> |
|
|
</div> |
|
|
<div class="faq-answer"> |
|
|
<p class="text-gray-600">We recommend annual cleaning for most homes in Oklahoma City to prevent buildup of dirt, mold, and mildew. Homes with significant tree coverage or in humid areas may benefit from cleaning every 6-9 months. Regular cleaning helps maintain your property's appearance and can prevent costly repairs from organic growth damage.</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="faq-item"> |
|
|
<div class="faq-question"> |
|
|
<h3 class="text-xl font-semibold text-gray-800">How long does a typical pressure washing job take?</h3> |
|
|
<i data-feather="chevron-down" class="text-primary transition-transform duration-300"></i> |
|
|
</div> |
|
|
<div class="faq-answer"> |
|
|
<p class="text-gray-600">The duration depends on the size of the area and type of service. A standard single-story home exterior typically takes 2-3 hours, while driveways or large commercial properties may take 4-6 hours. Roof cleaning usually takes 3-5 hours depending on roof size and pitch. We'll provide a time estimate with your quote.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-primary"> |
|
|
<div class="container mx-auto px-4 text-center"> |
|
|
<h2 class="text-3xl font-bold mb-6 text-gray-900">Have More Questions?</h2> |
|
|
<p class="text-xl mb-8 max-w-2xl mx-auto text-gray-900 font-bold">We're happy to answer any questions you have about our services. Contact us today!</p> |
|
|
<a href="mailto:[email protected]" class="inline-block bg-white text-gray-900 font-bold py-3 px-8 rounded-lg hover:bg-gray-100 transition duration-300 shadow-lg hover:shadow-xl flex items-center gap-2 border-2 border-red-500" onclick="return confirm('Email us at [email protected]?')"> |
|
|
<i data-feather="mail"></i> Email Us |
|
|
</a> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
<custom-footer></custom-footer> |
|
|
<script src="/components/navbar.js"></script> |
|
|
<script src="/components/footer.js"></script> |
|
|
<script src="/assets/js/main.js"></script> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
try { feather.replace(); } catch (e) { console.warn('feather replace failed', e); } |
|
|
}); |
|
|
</script> |
|
|
<script> |
|
|
document.addEventListener("DOMContentLoaded", function () { |
|
|
const form = document.querySelector("form"); |
|
|
if (!form) return; |
|
|
|
|
|
const consent = document.getElementById("smsConsent"); |
|
|
const submitButtons = form.querySelectorAll('button[type="submit"], input[type="submit"]'); |
|
|
|
|
|
|
|
|
if (consent) { |
|
|
consent.addEventListener("invalid", function () { |
|
|
this.setCustomValidity("Please check this box to allow us to message you."); |
|
|
}); |
|
|
|
|
|
consent.addEventListener("change", function () { |
|
|
|
|
|
this.setCustomValidity(""); |
|
|
}); |
|
|
} |
|
|
|
|
|
|
|
|
form.addEventListener('submit', function (e) { |
|
|
if (!consent.checked) { |
|
|
e.preventDefault(); |
|
|
e.stopImmediatePropagation(); |
|
|
|
|
|
consent.reportValidity(); |
|
|
return false; |
|
|
} |
|
|
}, true); |
|
|
}); |
|
|
</script> |
|
|
|
|
|
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@4/dist/email.min.js"></script> |
|
|
|
|
|
<script> |
|
|
|
|
|
const EMAILJS_PUBLIC_KEY = "-STpEkvpjlFgDqyUr"; |
|
|
const EMAILJS_SERVICE_ID = "service_e67jdbw"; |
|
|
const EMAILJS_TEMPLATE_ID = "template_xi2slgu"; |
|
|
const REDIRECT_URL = "/"; |
|
|
|
|
|
|
|
|
|
|
|
if (typeof emailjs !== 'undefined') { |
|
|
try { |
|
|
emailjs.init(EMAILJS_PUBLIC_KEY); |
|
|
console.log('[EmailJS] initialized'); |
|
|
} catch (err) { |
|
|
console.error('[EmailJS] init error', err); |
|
|
} |
|
|
} else { |
|
|
console.error('[EmailJS] SDK not loaded.'); |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('contact-form').addEventListener('submit', async function(e) { |
|
|
e.preventDefault(); |
|
|
const form = e.target; |
|
|
const submitBtn = form.querySelector('button[type="submit"]'); |
|
|
const submitText = document.getElementById('submit-text'); |
|
|
const spinner = document.getElementById('spinner'); |
|
|
const statusEl = document.getElementById('form-status'); |
|
|
|
|
|
|
|
|
if (form.website && form.website.value.trim() !== '') { |
|
|
statusEl.textContent = 'Submission received.'; |
|
|
statusEl.className = 'mt-4 text-center text-green-600'; |
|
|
form.reset(); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
submitText.textContent = 'Sending...'; |
|
|
spinner.classList.remove('hidden'); |
|
|
submitBtn.disabled = true; |
|
|
statusEl.textContent = ''; |
|
|
|
|
|
|
|
|
const templateParams = { |
|
|
name: form.name.value || '', |
|
|
email: form.email.value || '', |
|
|
phone: form.phone.value || '', |
|
|
service: form.service.value || '', |
|
|
message: form.message.value || '', |
|
|
sourcePage: window.location.pathname || '' |
|
|
}; |
|
|
|
|
|
try { |
|
|
console.log('[EmailJS] sending', templateParams); |
|
|
const res = await emailjs.send(EMAILJS_SERVICE_ID, EMAILJS_TEMPLATE_ID, templateParams); |
|
|
console.log('[EmailJS] response', res); |
|
|
|
|
|
statusEl.textContent = "Thanks! Your message has been sent. We'll contact you shortly."; |
|
|
statusEl.className = 'mt-4 text-center text-green-600'; |
|
|
form.reset(); |
|
|
|
|
|
|
|
|
const modal = document.getElementById('thankyou-modal'); |
|
|
if (modal) { |
|
|
modal.querySelector('p') && (modal.querySelector('p').textContent = statusEl.textContent); |
|
|
modal.classList.remove('hidden'); |
|
|
modal.classList.add('flex'); |
|
|
|
|
|
const doRedirect = () => { |
|
|
modal.classList.add('hidden'); |
|
|
modal.classList.remove('flex'); |
|
|
window.location.href = REDIRECT_URL; |
|
|
}; |
|
|
|
|
|
document.getElementById('thankyou-ok')?.addEventListener('click', doRedirect, { once: true }); |
|
|
document.getElementById('thankyou-modal-backdrop')?.addEventListener('click', doRedirect, { once: true }); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
if (!modal.classList.contains('hidden')) doRedirect(); |
|
|
}, 2500); |
|
|
} else { |
|
|
alert(statusEl.textContent); |
|
|
setTimeout(() => window.location.href = REDIRECT_URL, 1200); |
|
|
} |
|
|
|
|
|
} catch (err) { |
|
|
console.error('[EmailJS] error', err); |
|
|
statusEl.textContent = err?.text || err?.message || 'There was a problem sending your message. Please try again.'; |
|
|
statusEl.className = 'mt-4 text-center text-red-600'; |
|
|
} finally { |
|
|
spinner.classList.add('hidden'); |
|
|
submitBtn.disabled = false; |
|
|
submitText.textContent = 'Send Request'; |
|
|
} |
|
|
}); |
|
|
</script> |
|
|
|
|
|
</body> |
|
|
</html> |
