Formulaires

Système de formulaires complet : multi-steps, logique conditionnelle, champs custom, validation, toasts, webhooks.

Structure de base

<form class="form" data-form-webhook="https://votre-webhook.com"
      data-form-redirect="/merci"
      data-form-success="Merci !"
      data-form-error="Erreur, réessayez.">

  <div class="form__field">
    <label class="form__label">Nom</label>
    <input type="text" name="nom" class="form__input"
           required data-validate="required|min:2">
  </div>

  <div class="form__nav">
    <button type="submit" class="form__submit">Envoyer</button>
  </div>
</form>

Multi-Steps

<form class="form" data-form-webhook="...">
  <div class="form__step-indicators"></div>
  <div class="form__progress">
    <div class="form__progress-bar"></div>
  </div>

  <div class="form__step" data-step="1" data-step-label="Infos">
    <!-- Champs step 1 -->
  </div>

  <div class="form__step" data-step="2" data-step-label="Projet">
    <!-- Champs step 2 -->
  </div>

  <div class="form__nav">
    <button type="button" class="form__prev">Précédent</button>
    <button type="button" class="form__next">Suivant</button>
    <button type="submit" class="form__submit">Envoyer</button>
  </div>
</form>

• Barre de progression et indicateurs générés automatiquement
• Validation par step avant de passer au suivant
• Boutons Précédent/Suivant/Envoyer gérés automatiquement

Validation

Ajoutez data-validate sur un input avec les règles séparées par | :

<input data-validate="required|email">
<input data-validate="required|min:3|max:50">
<input data-validate="phone">

Logique conditionnelle

Affichez/masquez des champs en fonction de la valeur d'un autre champ :

<!-- Champ de référence -->
<div class="form__radio-group" data-name="type">
  <div class="form__radio-option" data-value="pro">Pro</div>
  <div class="form__radio-option" data-value="perso">Perso</div>
</div>

<!-- Visible uniquement si type = pro -->
<div class="form__field" data-condition="type=pro">
  <label class="form__label">Entreprise</label>
  <input name="entreprise" class="form__input">
</div>

Les champs masqués ne sont pas envoyés dans le webhook.

Champs custom (sans dépendances)

Des éléments de formulaire 100% stylisables en CSS, remplaçant les éléments natifs difficiles à styler :

Custom Select

<div class="form__select" data-name="pays">
  <div class="form__select-trigger" data-placeholder="Choisir...">Choisir...</div>
  <div class="form__select-options">
    <div class="form__select-option" data-value="fr">France</div>
    <div class="form__select-option" data-value="be">Belgique</div>
    <div class="form__select-option" data-value="ch">Suisse</div>
  </div>
</div>

Custom Number

<div class="form__number">
  <button type="button" class="form__number-minus">−</button>
  <input type="number" name="qty" class="form__number-input"
         value="1" min="1" max="100" step="1">
  <button type="button" class="form__number-plus">+</button>
</div>

Custom Radio Group

<div class="form__radio-group" data-name="taille">
  <div class="form__radio-option" data-value="s">S</div>
  <div class="form__radio-option" data-value="m">M</div>
  <div class="form__radio-option" data-value="l">L</div>
</div>

Custom Checkbox Group

<div class="form__checkbox-group" data-name="options">
  <div class="form__checkbox-option" data-value="opt1">Option 1</div>
  <div class="form__checkbox-option" data-value="opt2">Option 2</div>
  <div class="form__checkbox-option" data-value="opt3">Option 3</div>
</div>

Custom Multi Select

<div class="form__multiselect" data-name="competences">
  <div class="form__multiselect-trigger" data-placeholder="Choisir...">Choisir...</div>
  <div class="form__multiselect-options">
    <div class="form__multiselect-option" data-value="html">HTML</div>
    <div class="form__multiselect-option" data-value="css">CSS</div>
    <div class="form__multiselect-option" data-value="js">JavaScript</div>
  </div>
</div>

Webhook (payload)

Le formulaire envoie un POST JSON au webhook configuré. Le payload contient :

• Tous les champs visibles (respect de la logique conditionnelle)
• date_now : date française (ex: « 2 Février 2026, 10h52 »)
• url : URL de la page
• user_agent : navigateur de l'utilisateur
• utm_source, utm_medium, utm_campaign, utm_term, utm_content : UTMs depuis l'URL

Exemple de payload

{
  "nom": "Manon",
  "email": "manon@exemple.fr",
  "type_client": "entreprise",
  "entreprise": "Mon Agence",
  "projet": "site-vitrine",
  "services": "design,dev",
  "date_now": "26 Février 2026, 14h30",
  "url": "https://monsite.fr/contact?utm_source=google",
  "user_agent": "Mozilla/5.0...",
  "utm_source": "google",
  "utm_medium": "cpc"
}

Toasts

Les toasts sont automatiques (succès/erreur) mais utilisables aussi manuellement :

// Afficher un toast manuellement
showToast('Message ici', 'success');  // success, error, warning, info
showToast('Attention !', 'warning', 6000);  // durée en ms

Pré-remplissage par URL

Les paramètres d'URL correspondent aux attributs name des champs :

https://monsite.fr/contact?nom=Manon&email=manon@ex.fr&type_client=entreprise

Les inputs natifs, selects, radios et checkboxes sont pré-remplis automatiquement. Les champs custom (data-name) sont également supportés.