landing/templates/contact.html

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