| |
| <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> |
| |
