TUTORIEL – Installer un formulaire Divi avec compteur de places et bouton Reset

Étape 1 – Accéder à votre page Divi

1. Connectez-vous à votre tableau de bord WordPress.
2. Ouvrez la page où vous souhaitez ajouter votre formulaire.
3. Cliquez sur « Activer le Visual Builder ».

Étape 2 – Ajouter un Formulaire de contact Divi

1. Cliquez sur « + » Ajouter un nouveau module.
2. Sélectionnez « Formulaire de Contact » dans la liste.
3. Configurez les champs que vous souhaitez (Nom, Email, Téléphone, etc.).
4. Cliquez sur l’onglet Avancé > ID et Classes CSS.
5. Dans la case ID CSS, entrez un identifiant unique, par exemple :

formulaire-gymnaste

⚠️ Règles :

Pas d’espaces
Pas d’accents
Chaque formulaire doit avoir un ID différent

Étape 3 – Ajouter le Compteur de places

1. Juste au-dessus ou en-dessous de votre formulaire, ajoutez un Module Code.
2. Collez dans ce module le code du compteur correspondant au formulaire.

🔵 Le code ci-dessous (exemple pour « Gymnaste »).
Assurez-vous que les IDs dans le code correspondent bien à l’ID CSS donné au formulaire.

<!-- Bloc Compteur Gymnaste -->
<div id="compteur-formulaire-gymnaste" class="compteur-box">
  <p><strong>Places restantes :</strong> <span id="places-formulaire-gymnaste">10</span></p>
  <p id="waitlist-formulaire-gymnaste" style="display:none;">Plus de places disponibles. Inscription sur liste d'attente.</p>

  <!-- BOUTON RESET (caché au début) -->
  <button id="reset-formulaire-gymnaste" style="display:none;">🔄 Réinitialiser ce compteur</button>
</div>

<style>
/* 🎨 Style simple */
.compteur-box {
  margin: 20px 0;
  font-family: 'Arial', sans-serif;
  text-align: left;
}

.compteur-box p {
  margin: 5px 0;
  font-size: 16px;
  color: #333;
}

/* Message liste d'attente */
#waitlist-formulaire-gymnaste {
  font-size: 16px;
  color: red;
  margin-top: 8px;
}

/* Bouton reset */
#reset-formulaire-gymnaste {
  margin-top: 15px;
  padding: 8px 15px;
  background-color: #e74c3c;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 14px;
  cursor: pointer;
}
</style>

<script>
// 🎯 Paramètres personnalisables
const placesMaxFormulaireGymnaste = 10;
const messageListeAttenteGymnaste = "Plus de places disponibles. Inscription sur liste d'attente.";

let placesFormulaireGymnaste = localStorage.getItem('placesFormulaireGymnaste') !== null
  ? parseInt(localStorage.getItem('placesFormulaireGymnaste'))
  : placesMaxFormulaireGymnaste;

// Mise à jour de l'affichage
function majAffichageFormulaireGymnaste() {
  document.getElementById('places-formulaire-gymnaste').innerText = placesFormulaireGymnaste;
  if (placesFormulaireGymnaste <= 0) {
    document.getElementById('places-formulaire-gymnaste').parentElement.style.display = 'none';
    document.getElementById('waitlist-formulaire-gymnaste').innerText = messageListeAttenteGymnaste;
    document.getElementById('waitlist-formulaire-gymnaste').style.display = 'block';
  } else {
    document.getElementById('places-formulaire-gymnaste').parentElement.style.display = 'block';
    document.getElementById('waitlist-formulaire-gymnaste').style.display = 'none';
  }
}

document.addEventListener('DOMContentLoaded', function() {
  majAffichageFormulaireGymnaste();

  // Cibler le bon formulaire via son ID CSS personnalisé
  const formulaireGymnaste = document.querySelector('#formulaire-gymnaste form');
  
  if (formulaireGymnaste) {
    formulaireGymnaste.addEventListener('submit', function() {
      setTimeout(() => {
        if (placesFormulaireGymnaste > 0) {
          placesFormulaireGymnaste--;
          localStorage.setItem('placesFormulaireGymnaste', placesFormulaireGymnaste);
          majAffichageFormulaireGymnaste();
        }
      }, 500);
    });
  }

  // Gestion du bouton Reset
  const boutonReset = document.getElementById('reset-formulaire-gymnaste');

  if (window.location.search.includes('admin=1')) {
    boutonReset.style.display = 'inline-block';
  }

  boutonReset.addEventListener('click', function() {
    if (confirm("Voulez-vous vraiment remettre ce compteur à zéro ?")) {
      localStorage.removeItem('placesFormulaireGymnaste');
      placesFormulaireGymnaste = placesMaxFormulaireGymnaste;
      majAffichageFormulaireGymnaste();
      alert('Compteur Gymnaste réinitialisé !');
      boutonReset.style.display = 'none'; // cacher après reset
    }
  });
});
</script>

Étape 4 – Modifier les paramètres (messages, couleurs, police…)

Dans votre Module Code, vous pouvez facilement personnaliser :

Ce que vous souhaitez changer	Où le changer
Nombre de places	Dans la ligne : `const placesMaxFormulaireGymnaste = 10;` (modifiez le chiffre `10`)
Message liste d’attente	Dans la ligne : `const messageListeAttenteGymnaste = "Plus de places disponibles. Inscription sur liste d'attente.";` (modifiez le texte entre guillemets)
Couleur du texte principal	Dans le bloc `<style>`, ligne : `color: #333;` (modifiez `#333` par la couleur souhaitée, exemple : `#000000` pour noir)
Couleur du message de liste d’attente	Dans la ligne CSS : `#waitlist-formulaire-gymnaste { color: red; }` (modifiez `red` par la couleur de votre choix)
Police d’écriture	Dans : `font-family: 'Arial', sans-serif;` (remplacez `'Arial'` par la police désirée, par exemple `'Roboto'`, `'Open Sans'`, etc.)
Taille du texte	Dans : `font-size: 16px;` (modifiez `16px` à votre convenance, par exemple `18px`, `20px`…)

Étape 5 – Afficher le bouton Reset uniquement pour vous (Admin)

1. Par défaut, le bouton Reset est invisible pour tout le monde.
2. Pour vous permettre d’afficher ce bouton :

Il suffit d’ajouter ?admin=1 à la fin de votre URL.

Exemple :

URL normale ➔

https://fsg-carouge.anouchkamoritz-studio.ch/formulaire-dinscription-parents-enfants/

URL Admin (affiche le bouton Reset) ➔

https://fsg-carouge.anouchkamoritz-studio.ch/formulaire-dinscription-parents-enfants/?admin=1

✅ En utilisant cette URL, le bouton Reset deviendra visible uniquement pour vous.

Étape 6 – Réinitialiser le compteur

1. Ouvrez votre page avec l’URL incluant ?admin=1.
2. Cliquez sur le bouton « 🔄 Réinitialiser ce compteur » qui apparaît sous votre formulaire.
3. Confirmez votre choix dans la boîte de dialogue qui s’affiche.
4. Le compteur sera immédiatement remis à son nombre initial.

Remarques importantes

Un ID CSS unique est nécessaire pour chaque formulaire. (Ex : formulaire-gymnaste, formulaire-responsable, etc.)
Vous pouvez ajouter autant de formulaires que vous souhaitez sur une même page, il suffit de dupliquer le code et de changer les IDs correspondants.
Le bouton Reset reste totalement invisible pour les visiteurs classiques, garantissant la sécurité du système.

Remplacer une partie du code

1. Ouvrez le Module Code Divi dans lequel vous avez déjà inséré le script (lié à votre formulaire Zumba).
2. Repérez dans le code la fonction nommée :

https://fsg-carouge.anouchkamoritz-studio.ch/formulaire-function majAffichageFormulaireZumba() {
  ...
}

3 Supprimez tout le contenu de cette fonction, puis remplacez-le par le code suivant :

function majAffichageFormulaireZumba() {
  const compteurSpan = document.getElementById('places-formulaire-zumba');
  const boutonEnvoyer = document.querySelector('#formulaire-zumba button[type="submit"]');

  compteurSpan.innerText = placesFormulaireZumba;

  if (placesFormulaireZumba <= 0) {
    compteurSpan.parentElement.style.display = 'none';
    document.getElementById('waitlist-formulaire-zumba').innerText = messageListeAttenteFormulaireZumba;
    document.getElementById('waitlist-formulaire-zumba').style.display = 'block';

    // 🔴 Désactiver le bouton d’envoi
    if (boutonEnvoyer) {
      boutonEnvoyer.disabled = true;
      boutonEnvoyer.style.opacity = '0.6';
      boutonEnvoyer.style.cursor = 'not-allowed';
      boutonEnvoyer.innerText = "Inscriptions closes";
    }
  } else {
    compteurSpan.parentElement.style.display = 'block';
    document.getElementById('waitlist-formulaire-zumba').style.display = 'none';

    // ✅ Réactiver le bouton s’il a été désactivé
    if (boutonEnvoyer) {
      boutonEnvoyer.disabled = false;
      boutonEnvoyer.style.opacity = '1';
      boutonEnvoyer.style.cursor = 'pointer';
      boutonEnvoyer.innerText = "Envoyer";
    }
  }
}

Que fait ce code exactement ?

🎯 Action	✅ Résultat
Le quota est atteint (ex. 10 inscriptions)	Le bouton « Envoyer » devient inactif, grisé, et le texte change en « Inscriptions closes »
Un utilisateur tente d’envoyer le formulaire après quota	❌ Le bouton est bloqué, aucune action possible
L’administrateur utilise le bouton Reset	✅ Le compteur revient à la valeur initiale et le bouton devient à nouveau actif automatiquement

Important à savoir

- Cette méthode ne bloque que l’envoi du formulaire côté utilisateur.
- Elle est fiable pour empêcher des inscriptions sur un même appareil, mais ne synchronise pas le quota entre utilisateurs (car cela nécessiterait un stockage côté serveur ou une base de données).