feat: added lots of work to landing page
This commit is contained in:
171
templates/contact.html
Normal file
171
templates/contact.html
Normal file
@@ -0,0 +1,171 @@
|
||||
{{define "contact"}}
|
||||
|
||||
<div class="contact-about-page">
|
||||
<div class="hero-section">
|
||||
<h1>Get in Touch</h1>
|
||||
<p>We'd love to hear from you. Send us a message!</p>
|
||||
</div>
|
||||
|
||||
<div class="about-content">
|
||||
<div class="about-text">
|
||||
<h2>Let's Connect</h2>
|
||||
<p>
|
||||
Have a question about RideAware? Want to collaborate?
|
||||
Reach out and let us know how we can help.
|
||||
</p>
|
||||
<ul>
|
||||
<li>Fast response times</li>
|
||||
<li>Friendly support team</li>
|
||||
<li>Multiple contact options</li>
|
||||
<li>Always here to help</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<form class="contact-form" id="contactForm">
|
||||
<div class="form-success" id="successMessage">
|
||||
<strong>Thank you!</strong> We've received your message
|
||||
and will get back to you soon.
|
||||
</div>
|
||||
|
||||
<h2>Send us a message</h2>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="name">
|
||||
Full Name <span class="required">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
id="name"
|
||||
name="name"
|
||||
required
|
||||
autocomplete="name"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="email">
|
||||
Email Address <span class="required">*</span>
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
id="email"
|
||||
name="email"
|
||||
required
|
||||
autocomplete="email"
|
||||
/>
|
||||
<small>We'll respond to this email address</small>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="subject">Subject <span class="required">*</span></label>
|
||||
<select id="subject" name="subject" required>
|
||||
<option value="">-- Select a subject --</option>
|
||||
<option value="general">General Inquiry</option>
|
||||
<option value="support">Support</option>
|
||||
<option value="partnership">Partnership</option>
|
||||
<option value="feedback">Feedback</option>
|
||||
<option value="other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="message">
|
||||
Message <span class="required">*</span>
|
||||
</label>
|
||||
<textarea
|
||||
id="message"
|
||||
name="message"
|
||||
required
|
||||
placeholder="Your message here..."
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="newsletter-opt-in">
|
||||
<label for="subscribe" class="checkbox-label">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="subscribe"
|
||||
name="subscribe"
|
||||
class="checkbox-input"
|
||||
/>
|
||||
<span class="checkbox-text">
|
||||
<i class="fas fa-bell"></i>
|
||||
Subscribe to our newsletter for training tips and updates
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="form-submit">
|
||||
<i class="fas fa-paper-plane"></i>
|
||||
Send Message
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="contact-info">
|
||||
<div class="info-card">
|
||||
<div class="info-card-icon">
|
||||
<i class="fas fa-envelope"></i>
|
||||
</div>
|
||||
<h3>Email</h3>
|
||||
<p>
|
||||
<a href="mailto:hello@rideaware.com"
|
||||
>hello@rideaware.com</a
|
||||
>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="info-card">
|
||||
<div class="info-card-icon">
|
||||
<i class="fas fa-map-marker-alt"></i>
|
||||
</div>
|
||||
<h3>Address</h3>
|
||||
<p>1909 W Owen K Garriott Rd<br />Enid, OK 73703</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.getElementById('contactForm').addEventListener(
|
||||
'submit',
|
||||
async (e) => {
|
||||
e.preventDefault();
|
||||
const form = e.target;
|
||||
const formData = new FormData(form);
|
||||
|
||||
console.log('Form submitted');
|
||||
console.log('Form data:', Object.fromEntries(formData));
|
||||
|
||||
try {
|
||||
const response = await fetch('/contact', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/x-www-form-urlencoded',
|
||||
},
|
||||
body: new URLSearchParams(formData),
|
||||
});
|
||||
|
||||
console.log('Response status:', response.status);
|
||||
const data = await response.json();
|
||||
console.log('Response data:', data);
|
||||
|
||||
if (response.ok) {
|
||||
document.getElementById('successMessage')
|
||||
.classList.add('show');
|
||||
form.reset();
|
||||
setTimeout(() => {
|
||||
document.getElementById('successMessage')
|
||||
.classList.remove('show');
|
||||
}, 5000);
|
||||
} else {
|
||||
alert('Error: ' + (data.error || 'Failed to send message'));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error:', error);
|
||||
alert('Failed to send message: ' + error.message);
|
||||
}
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
{{end}}
|
||||
Reference in New Issue
Block a user