widget.html

<!-- 👉 Bouton flottant "Aide ?" -->
<style>
  #helpBtn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #76789b;
    color: white;
    border: none;
    border-radius: 50px;
    padding: 12px 20px;
    font-size: 16px;
    cursor: pointer;
    z-index: 9999;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  }

  #supportFormContainer {
    display: none;
    position: fixed;
    bottom: 80px;
    right: 20px;
    width: 320px;
    background: white;
    border: 2px solid #76789b;
    border-radius: 12px;
    padding: 20px;
    z-index: 9999;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  }

  .form-group {
    margin-bottom: 15px;
  }

  #supportForm input,
  #supportForm textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    box-sizing: border-box;
    font-size: 16px;
    font-family: inherit;
  }

  #supportForm textarea {
    height: 150px;
    resize: vertical;
  }

  #supportForm button {
    background-color: #76789b;
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    width: 100%;
  }

  #supportForm button:hover {
    background-color: #65678a;
  }

  .message {
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 15px;
    word-wrap: break-word;
    white-space: normal;
    line-height: 1.4;
    font-size: 14px;
  }

  .success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
  }

  .error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
  }

  #supportFormContainer h3 {
    font-size: 18px;
    font-weight: normal;
    margin-bottom: 15px;
    color: #333;
  }
</style>

<!-- 👉 Formulaire de contact -->
<div id="supportFormContainer">
  <!-- Titre du formulaire -->
  <h3>Veuillez remplir ce formulaire et poser votre question.</h3>

  <div id="formSuccessMsg" class="message success" style="display: none;"></div>
  <div id="formErrorMsg" class="message error" style="display: none;"></div>

  <!-- CONFIGURE HERE YOUR GOOGLE APPS SCRIPT URL -->
  <form id="supportForm" action="https://script.google.com/macros/s/XYZ/exec" method="POST">
    <input type="hidden" name="pageUrl" id="pageUrl">
    <div class="form-group">
      <input type="text" name="name" placeholder="Prénom" required>
    </div>
    <div class="form-group">
      <input type="email" name="email" placeholder="Email" required>
    </div>
    <div class="form-group">
      <input type="text" name="subject" placeholder="Sujet" required>
    </div>
    <div class="form-group">
      <textarea name="message" rows="6" placeholder="Message" required></textarea>
    </div>

    <!-- reCAPTCHA v2 (replace YOUR_RECAPTCHA_SITE_KEY with your own site key) -->
    <div class="g-recaptcha" data-sitekey="YOUR_RECAPTCHA_SITE_KEY"></div>

    <button type="submit">Envoyer</button>
  </form>
</div>

<!-- 👉 Bouton flottant -->
<button id="helpBtn">Aide ?</button>

<!-- 👉 Scripts -->
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
  const form = document.getElementById('supportForm');
  const formContainer = document.getElementById('supportFormContainer');
  const successBox = document.getElementById('formSuccessMsg');
  const errorBox = document.getElementById('formErrorMsg');

  // Ajouter l'URL de la page au chargement
  document.getElementById('pageUrl').value = window.location.href;

  document.getElementById('helpBtn').addEventListener('click', () => {
    formContainer.style.display = (formContainer.style.display === 'block') ? 'none' : 'block';
    successBox.style.display = 'none';
    errorBox.style.display = 'none';
  });

  form.addEventListener('submit', async e => {
    e.preventDefault();

    // Réinitialiser les messages
    successBox.style.display = 'none';
    errorBox.style.display = 'none';

    // Vérification client reCAPTCHA (la vérification serveur reste obligatoire)
    if (typeof grecaptcha === 'undefined' || !grecaptcha.getResponse()) {
      errorBox.textContent = '❌ Veuillez valider le captcha avant d\'envoyer.';
      errorBox.style.display = 'block';
      return;
    }

    const submitBtn = form.querySelector('button[type="submit"]');
    submitBtn.disabled = true;

    try {
      const formData = new FormData(form);
      const result = await submitForm(formData);

      if (result.success) {
        successBox.textContent = '✅ ' + result.message;
        successBox.style.display = 'block';
        form.reset();
        grecaptcha.reset();
      } else {
        errorBox.textContent = '❌ ' + result.message;
        errorBox.style.display = 'block';
        grecaptcha.reset();
      }
    } catch (error) {
      errorBox.textContent = '❌ Une erreur est survenue lors de l\'envoi. Vérifiez votre connexion.';
      errorBox.style.display = 'block';
      console.error('Erreur :', error);
    } finally {
      submitBtn.disabled = false;
    }
  });

  // Envoi du formulaire : on tente d'abord une requête CORS normale pour
  // pouvoir lire la réponse du serveur (messages d'erreur exacts).
  // Si le navigateur bloque le CORS (type d'erreur TypeError), on retombe
  // sur un envoi no-cors qui délivre le formulaire mais dont la réponse est opaque.
  async function submitForm(formData) {
    try {
      const response = await fetch(form.action, {
        method: 'POST',
        body: formData
      });
      return await response.json();
    } catch (err) {
      if (err instanceof SyntaxError) {
        // Requête délivrée mais réponse non-JSON : succès générique
        return { success: true, message: 'Merci ! Votre message a été envoyé.' };
      }
      // TypeError : CORS bloqué ou réseau — nouvel envoi en mode no-cors
      await fetch(form.action, {
        method: 'POST',
        mode: 'no-cors',
        body: formData
      });
      return { success: true, message: 'Merci ! Votre message a été envoyé.' };
    }
  }
</script>