<link rel="stylesheet" href="{{asset "css/contact.css"}}">

{{#is "page" url="/contact/"}}

  <div class="contact-form">
      <form action="mailto:anydev.anyway@gmail.com" method="post" enctype="text/plain" id="contactForm">
          <div class="form-row">
              <div class="form-field">
                  <label for="name">Name:</label>
                  <input type="text" id="name" name="name" placeholder="Your name" required>
              </div>
              <div class="form-field">
                  <label for="email">Email:</label>
                  <input type="email" id="email" name="email" placeholder="Your email" required>
              </div>
          </div>
          <div class="form-field">
              <label for="message">Message:</label>
              <textarea id="message" name="message" placeholder="Your message" required></textarea>
          </div>
          <button type="submit" class="submit-button" id="submitBtn" disabled>Send Message</button>
      </form>
  </div>

  <script>
      const form = document.getElementById('contactForm');
      const submitBtn = document.getElementById('submitBtn');
      
      form.addEventListener('input', () => {
          const isFormFilled = form.name.value && form.email.value && form.message.value;
          submitBtn.disabled = !isFormFilled;
      });
  </script>

{{/is}}