|
|
|
|
|
<div class="w-full flex flex-col items-center mb-8"> |
|
|
<a href="tel:+17154219792" |
|
|
class="text-2xl font-extrabold text-accent-yellow hover:text-accent-red transition-colors tracking-wide drop-shadow">Call |
|
|
Hooper Automotive: (715) 421-9792</a> |
|
|
<span class="text-automotive-200 text-sm mt-1">2020 4th Street South, Wisconsin Rapids, WI 54494 • Wood |
|
|
County</span> |
|
|
</div> |
|
|
|
|
|
<form action="https://formsubmit.co/hooperautorepair70@gmail.com" method="POST" |
|
|
class="max-w-lg mx-auto bg-automotive-700/90 p-8 rounded-2xl shadow-2xl border-4 border-accent-red space-y-6"> |
|
|
<input type="hidden" name="_cc" value="dondlingergeneralcontracting@gmail.com"> |
|
|
<input type="hidden" name="_captcha" value="false"> |
|
|
<input type="hidden" name="_template" value="table"> |
|
|
<h2 class="text-3xl font-extrabold text-accent-red mb-4 tracking-wide">Request Service Estimate</h2> |
|
|
<p class="text-automotive-100 mb-4 font-semibold">Get a fast, friendly estimate from Hooper Automotive!<br>Address: |
|
|
2020 4th Street South, Wisconsin Rapids, WI 54494<br>Phone: <span class="text-accent-yellow">(715) |
|
|
421-9792</span><br>Email: <a href="mailto:hooperautorepair70@gmail.com" |
|
|
class="underline text-accent-yellow">hooperautorepair70@gmail.com</a></p> |
|
|
<div> |
|
|
<label for="name" class="block text-accent-yellow font-semibold mb-1">Name</label> |
|
|
<input type="text" id="name" name="name" required |
|
|
class="w-full px-4 py-2 rounded-lg bg-white/10 border border-automotive-400 text-automotive-50" |
|
|
placeholder="Your Name"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="email" class="block text-accent-yellow font-semibold mb-1">Email</label> |
|
|
<input type="email" id="email" name="email" required |
|
|
class="w-full px-4 py-2 rounded-lg bg-white/10 border border-automotive-400 text-automotive-50" |
|
|
placeholder="you@email.com"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="phone" class="block text-accent-yellow font-semibold mb-1">Phone</label> |
|
|
<input type="tel" id="phone" name="phone" |
|
|
class="w-full px-4 py-2 rounded-lg bg-white/10 border border-automotive-400 text-automotive-50" |
|
|
placeholder="(optional)"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="service" class="block text-accent-yellow font-semibold mb-1">Service Requested</label> |
|
|
<select id="service" name="service" required |
|
|
class="w-full px-4 py-2 rounded-lg bg-white/10 border border-automotive-400 text-automotive-50"> |
|
|
<option value="">Select a service</option> |
|
|
<option value="Oil Change">Oil Change</option> |
|
|
<option value="Brake Service">Brake Service</option> |
|
|
<option value="Transmission Service">Transmission Service</option> |
|
|
<option value="Engine Diagnostics">Engine Diagnostics</option> |
|
|
<option value="Tire Service">Tire Service</option> |
|
|
<option value="Battery Replacement">Battery Replacement</option> |
|
|
<option value="Air Conditioning">Air Conditioning</option> |
|
|
<option value="Coolant Service">Coolant Service</option> |
|
|
<option value="Tune-up">Tune-up</option> |
|
|
<option value="Exhaust System">Exhaust System</option> |
|
|
<option value="Suspension Repair">Suspension Repair</option> |
|
|
<option value="Electrical Diagnosis">Electrical Diagnosis</option> |
|
|
<option value="Check Engine Light">Check Engine Light</option> |
|
|
<option value="Pre-purchase Inspection">Pre-purchase Inspection</option> |
|
|
<option value="State Inspection">State Inspection</option> |
|
|
<option value="General Repair">General Repair</option> |
|
|
<option value="Emergency Service">Emergency Service</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label for="vehicle" class="block text-accent-yellow font-semibold mb-1">Vehicle Make/Model/Year</label> |
|
|
<input type="text" id="vehicle" name="vehicle" |
|
|
class="w-full px-4 py-2 rounded-lg bg-white/10 border border-automotive-400 text-automotive-50" |
|
|
placeholder="e.g. 2018 Honda Civic, 2015 Ford F-150"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="mileage" class="block text-accent-yellow font-semibold mb-1">Mileage</label> |
|
|
<input type="text" id="mileage" name="mileage" |
|
|
class="w-full px-4 py-2 rounded-lg bg-white/10 border border-automotive-400 text-automotive-50" |
|
|
placeholder="e.g. 85,000 miles"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="details" class="block text-accent-yellow font-semibold mb-1">Problem Description</label> |
|
|
<textarea id="details" name="details" rows="4" |
|
|
class="w-full px-4 py-2 rounded-lg bg-white/10 border border-automotive-400 text-automotive-50" |
|
|
placeholder="Describe the issue, symptoms, or service needed..."></textarea> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-accent-yellow font-semibold mb-1">Preferred Contact Method</label> |
|
|
<div class="flex gap-4 mb-2"> |
|
|
<label class="inline-flex items-center"><input type="radio" name="contact_method" value="Phone" |
|
|
class="mr-2">Phone</label> |
|
|
<label class="inline-flex items-center"><input type="radio" name="contact_method" value="Email" |
|
|
class="mr-2">Email</label> |
|
|
<label class="inline-flex items-center"><input type="radio" name="contact_method" value="Text" |
|
|
class="mr-2">Text</label> |
|
|
<label class="inline-flex items-center"><input type="radio" name="contact_method" value="Any" |
|
|
class="mr-2">Any</label> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label for="best_time" class="block text-accent-yellow font-semibold mb-1">Best Time to Contact</label> |
|
|
<select id="best_time" name="best_time" |
|
|
class="w-full px-4 py-2 rounded-lg bg-white/10 border border-automotive-400 text-automotive-50"> |
|
|
<option value="">Select a time</option> |
|
|
<option value="Morning">Morning</option> |
|
|
<option value="Afternoon">Afternoon</option> |
|
|
<option value="Evening">Evening</option> |
|
|
<option value="Any">Any</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label for="hear_about" class="block text-accent-yellow font-semibold mb-1">How did you hear about us?</label> |
|
|
<select id="hear_about" name="hear_about" |
|
|
class="w-full px-4 py-2 rounded-lg bg-white/10 border border-automotive-400 text-automotive-50"> |
|
|
<option value="">Select an option</option> |
|
|
<option value="Google Search">Google Search</option> |
|
|
<option value="Facebook">Facebook</option> |
|
|
<option value="Instagram">Instagram</option> |
|
|
<option value="Friend/Family">Friend/Family</option> |
|
|
<option value="Repeat Customer">Repeat Customer</option> |
|
|
<option value="Event/Show">Event/Show</option> |
|
|
<option value="Other">Other</option> |
|
|
</select> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-accent-yellow font-semibold mb-1">How soon do you need this?</label> |
|
|
<div class="flex gap-2 mb-2"> |
|
|
<label class="inline-flex items-center"><input type="radio" name="urgency" value="ASAP" |
|
|
class="mr-2">ASAP</label> |
|
|
<label class="inline-flex items-center"><input type="radio" name="urgency" value="1-2 Weeks" |
|
|
class="mr-2">1-2 Weeks</label> |
|
|
<label class="inline-flex items-center"><input type="radio" name="urgency" value="1 Month" class="mr-2">1 |
|
|
Month</label> |
|
|
<label class="inline-flex items-center"><input type="radio" name="urgency" value="Flexible" |
|
|
class="mr-2">Flexible</label> |
|
|
</div> |
|
|
</div> |
|
|
<div class="flex items-center mb-2"> |
|
|
<input type="checkbox" id="newsletter" name="newsletter" value="Yes" class="mr-2"> |
|
|
<label for="newsletter" class="text-accent-yellow">Sign me up for news, tips, and special offers!</label> |
|
|
</div> |
|
|
<button type="submit" |
|
|
class="w-full bg-accent-red hover:bg-accent-yellow text-white hover:text-automotive-700 font-extrabold py-4 rounded-lg transition-colors shadow-xl uppercase tracking-wider">Send |
|
|
Request</button> |
|
|
</form> |
|
|
|
