SiteWebAstrolabe/src/_includes/partials/components/contact-form.njk

{% from "macros/form.njk" import label, field, select, option, textarea, checkboxes, button, hidden_field %}

<section class="[ form-container ]">
  {% if not removeWave %}
    <svg aria-hidden="true" viewBox="0 0 1440 131" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill="#fff" d="M0 0h1440v131H0z"/><path d="M0 4.643l40-2.326c40-2.5 120-6.888 200 11.67 80 18.735 160 60.854 240 74.894 80 14.04 160 0 240-16.365 80-16.54 160-34.968 240-28.08 80 7.152 160 39.619 240 39.75 80-.131 160-32.598 200-49.139l40-16.365V131H0V4.643z" fill="#D6F253"/></svg>
  {% endif %}
  <div class="[ inner-wrapper ]">
    {% if not contactMember %}
      <h2 id="contact-form" class="[ contact-heading ]">Nous contacter</h2>
    {% elif contactTitle %}
      <h2 id="contact-form" class="[ contact-heading ]">{{ contactTitle }}</h2>
    {% endif %}
    
    <div class="form-messages" aria-live="polite"></div>
    
    <form name="contact" method="POST" action="/form/contact-form-handler.php" class="contact-form">
      <ol class="[ field-list ]">
        <li class="[ field-list__field-group ]">
          {{ label("Nom", "namezzz") }}
          {{ field( "text", "namezzz", { required: true, placeholder: "", autocomplete: "name", autocorrect: "off", autocapitalize: "off" } ) }}
        </li>
        <li class="[ field-list__field-group ]">
          {{ label("Email", "emailzzz") }}
          {{ field( "email", "emailzzz", { required: true, placeholder: "", autocomplete: "email" } ) }}
        </li>
        <li class="[ field-list__field-group ] [ full-width ]">
          {{ label("Je vous contacte pour :", "select") }}
          {% if contactMember %}
            {{ select( "select", [ 
              {label: "Obtenir un rendez-vous (décrivez votre projet en quelques lignes)", value: "option 1"},
              {label: "Proposer une mission à un coopérateur", value: "option 3"}
            ], { required: true, options_before: [""], options_after: ["Autre demande"] } ) }}
          {% else %}
            {{ select( "select", [ 
              {label: "Obtenir un rendez-vous (décrivez votre projet en quelques lignes)", value: "option 1"},
              {label: "Obtenir des précisions sur le statut d'entrepreneur salarié", value: "option 2"},
              {label: "Proposer une mission à un coopérateur", value: "option 3"},
              {label: "Proposer un partenariat", value: "option 4"}
            ], { required: true, options_before: [""], options_after: ["Autre demande"] } ) }}
          {% endif %}
        </li>
        <li class="[ field-list__field-group ] [ full-width ]">
          {{ label("Votre message", "message") }}
          {{ textarea( "message", { required: true, autocapitalize: "sentences", spellcheck: "true" } ) }}
        </li>
        {% if contactMember %}
          {{ hidden_field('subscribe', '') }}
        {% else %}
          <li class="[ field-list__field-group ] [ full-width ]">
            {{ checkboxes("", "subscribe", [ "Je souhaite être tenu au courant de l'actualité Astrolabe"], { description: "" } ) }}
          </li>
        {% endif %}
        <!-- H o n e y p o t -->
        <li aria-hidden="true">
          <label class="ohnohoney" for="name"></label>
          <input tabindex="-1" class="ohnohoney" autocomplete="off" type="text" id="name" name="name" placeholder="Your name here">
        </li>
        <li aria-hidden="true">
          <label class="ohnohoney" for="email"></label>
          <input tabindex="-1" class="ohnohoney" autocomplete="off" type="email" id="email" name="email" placeholder="Your e-mail here">
        </li>

        <div class="h-captcha" data-sitekey="b07c49fe-50ee-4432-af0a-96d675c6326a"></div>
        <script src="https://js.hcaptcha.com/1/api.js" async defer></script>
      </ol>
      {% if contactMember %}
        {{ hidden_field('contactTo', contactMember) }}
      {% endif %}
      {{ button("Envoyer") }}
    </form>
  </div>
</section>

<style>
.form-messages {
  margin-bottom: 1rem;
}

.form-messages .error {
  color: #dc3545;
  margin-bottom: 0.5rem;
}

.form-messages .success {
  color: #28a745;
}

.field-error {
  color: #dc3545;
  font-size: 0.875rem;
  margin-top: 0.25rem;
}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
  const form = document.querySelector('.contact-form');
  const messagesContainer = document.querySelector('.form-messages');

  form.addEventListener('submit', async function(e) {
    e.preventDefault();
    
    // Clean previous messages
    messagesContainer.innerHTML = '';
    
    // Get form data
    const formData = new FormData(form);

    try {
      const response = await fetch(form.action, {
        method: 'POST',
        body: formData
      });

      const data = await response.json();

      if (data.success) {
        // Display success message
        messagesContainer.innerHTML = `<div class="success">${data.message}</div>`;
        form.reset();
        // Redirect to thank you page
        window.location.href = '/thank-you/index.html';
      } else {
        // Display errors
        const errorHtml = data.errors.map(error => 
          `<div class="error">${error}</div>`
        ).join('');
        messagesContainer.innerHTML = errorHtml;
        
        // Scroll to error messages
        messagesContainer.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
      }
    } catch (error) {
      messagesContainer.innerHTML = `
        <div class="error">Une erreur est survenue lors de l'envoi du formulaire. Veuillez réessayer.</div>
      `;
    }
  });
});
</script>