@inputdev/sdk 1.0.2 → 1.0.4

package/README.md

@@ -1,450 +1,462 @@
-# InputDev SDK
+# InputDev SDK Documentation �
 
-🚀 **SDK JavaScript ultra-simple pour la soumission de formulaires**
+> **Le backend de formulaires le plus simple et professionnel pour les développeurs modernes.**
 
-Un SDK moderne et intelligent qui facilite l'intégration de formulaires avec votre backend InputDev.
+[![Version](https://img.shields.io/badge/version-1.0.0-059669.svg?style=flat-square)](https://inputdev.dev)
+[![License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](LICENSE)
+[![Documentation](https://img.shields.io/badge/docs-latest-059669.svg?style=flat-square)](https://inputdev.pages.dev/documentation)
 
-## ✨ **Caractéristiques principales**
+---
+
+## 📖 Table des matières
+
+- [Introduction](#-introduction)
+- [Quick Start](#-quick-start-démarrage-rapide)
+- [Comment ça fonctionne](#-comment-ça-fonctionne)
+- [Installation](#-installation)
+- [Utilisation JavaScript](#-utilisation-javascript-pour-frameworks)
+- [SDK JavaScript Avancé](#-sdk-javascript-avancé)
+- [Validation Email](#-validation-email)
+- [Événements](#-événements)
+- [Codes d'erreur](#-codes-derreur)
+- [Sécurité](#-sécurité)
+- [Mode Silence](#-mode-silence)
+- [Limites](#-limites)
+- [Bonnes pratiques](#-bonnes-pratiques)
+- [Exemple complet](#-exemple-complet-réel)
+
+---
+
+## 🚀 Introduction
+
+InputDev permet de transformer un simple formulaire en système de collecte de données sécurisé et professionnel.
+
+### ✨ Avantages principaux
+
+- **Aucune configuration serveur nécessaire** - Déployez en minutes
+- **Aucune dépendance externe** - SDK ultra-léger et autonome  
+- **Installation en moins de 1 minute** - Intégration instantanée
+- **Validation automatique** - Emails et champs intégrés
+- **Sécurité de niveau entreprise** - HTTPS, CORS, anti-spam
+- **Filtrage intelligent des champs** - Ignore automatiquement les éléments non-pertinents
+- **Retour visuel immédiat** - Boutons verts/rouges selon succès/erreur
+- **Deux versions disponibles** - Minifiée (8.3KB) et complète (10.3KB)
 
-- 🎯 **Installation instantanée** - Un simple attribut HTML
-- 📧 **Validation emails automatique** 
-- 🔇 **Mode silencieux** pour la production
-- 🎨 **Messages d'erreur intelligents**
-- 📊 **Logs détaillés et configurables**
-- ⚡ **Compatible avec tous les frameworks**
+---
+
+## ⚡ Quick Start (Démarrage rapide)
 
-## 🚀 **Installation**
+### Étape 1 — Ajouter le script
+
+#### Via CDN (recommandé)
 
-### **CDN (recommandé)**
 ```html
-<!-- UNPKG -->
 <script src="https://unpkg.com/@inputdev/sdk@latest/inputdev-sdk.prod.js"></script>
-
-<!-- JSDelivr -->
-<script src="https://cdn.jsdelivr.net/npm/@inputdev/sdk@latest/inputdev-sdk.prod.js"></script>
 ```
 
-### **NPM**
+> ⚡ **Note importante** : Utilisez la version `.prod.js` qui est la seule version fonctionnelle actuellement
+
+#### Via NPM
+
 ```bash
 npm install @inputdev/sdk
+import InputDev from "@inputdev/sdk";
 ```
 
-## 📖 **Utilisation rapide**
+### Étape 2 — Ajouter votre clé API
 
-### **1. Formulaire automatique** 
 ```html
-<form data-inputdev="votre-clé-api">
-    <input type="text" name="name" required>
-    <input type="email" name="email" required>
-    <textarea name="message" required></textarea>
-    <button type="submit">Envoyer</button>
+<form data-inputdev="grts_VotreCleApiDeCeSite">
+  <input type="text" name="name" required />
+  <input type="email" name="email" required />
+  <button type="submit">Envoyer</button>
 </form>
 ```
 
-### **2. Mode silencieux** (pas de logs)
+> 🎉 **C'est terminé !** Le formulaire est maintenant connecté à InputDev.
+
+---
+
+## 🔧 Comment ça fonctionne
+
+1. **Navigateur** - L'utilisateur soumet le formulaire
+2. **InputDev API** - Les données sont validées et envoyées en HTTPS  
+3. **Stockage sécurisé** - Elles sont enregistrées dans votre tableau de bord
+
+---
+
+## 📦 Installation
+
+### Via CDN (recommandé pour production)
+
+> **Deux versions disponibles :**
+> - **Version minifiée (8.3KB)** : Pour production - chargement ultra-rapide
+> - **Version complète (10.3KB)** : Pour développement - avec commentaires
+
+#### Version Minifiée (Production)
 ```html
-<form data-inputdev-silence="votre-clé-api">
-    <input type="text" name="name" required>
-    <input type="email" name="email" required>
-    <textarea name="message" required></textarea>
-    <button type="submit">Envoyer</button>
-</form>
+<script src="https://unpkg.com/@inputdev/sdk@latest/inputdev-sdk.min.js"></script>
 ```
 
-**🔇 Mode silencieux =** 
-- ❌ **Aucun log dans la console**
-- ❌ **Pas de messages d'erreur visibles**
-- ✅ **Uniquement les événements personnalisés**
-- ✅ **Idéal pour la production**
+#### Version Complète (Développement)
+```html
+<script src="https://unpkg.com/@inputdev/sdk@latest/inputdev-sdk.prod.js"></script>
+```
 
-### **3. Appel manuel (avec logs)**
-```javascript
-const dev = new InputDevSDK();
+#### CDN Alternative (JSDelivr)
+```html
+<script src="https://cdn.jsdelivr.net/npm/@inputdev/sdk@latest/inputdev-sdk.min.js"></script>
+```
 
-await dev.submit("votre-clé-api", {
-    name: "John Doe",
-    email: "john@example.com",
-    message: "Hello!"
-});
+### Via NPM
+
+```bash
+npm install @inputdev/sdk
+import InputDev from "@inputdev/sdk";
 ```
 
-**📊 Mode normal =**
-- ✅ **Logs détaillés dans la console**
-- ✅ **Messages d'erreur intelligents**
-- ✅ **Instructions pour les erreurs courantes**
-- ✅ **Idéal pour le développement**
+---
+
+## 💻 Utilisation JavaScript (Pour Frameworks)
+
+Idéal pour les frameworks JavaScript (React, Vue, Angular, etc.) où vous contrôlez déjà les données du formulaire :
 
-### **4. Appel manuel silencieux**
 ```javascript
-await dev.submit("votre-clé-api", "silence", {
-    name: "John Doe", 
-    email: "john@example.com",
-    message: "Hello!"
+const sdk = new InputDev();
+
+await sdk.submit("grts_VotreCleApiDeCeSite", {
+  name: "John",
+  email: "john@email.com", 
+  plan: "premium"
 });
 ```
 
-**🔇 Mode silencieux manuel =**
-- ❌ **Aucun log dans la console**
-- ❌ **Pas de messages d'erreur**
-- ✅ **Uniquement les événements personnalisés**
-- ✅ **Parfait pour la production**
+### Paramètres
 
-## 🎨 **Fonctionnalités avancées**
+| Paramètre | Type | Obligatoire | Description |
+|-----------|------|-------------|-------------|
+| `apiKey` | string | Oui | Clé publique fournie par InputDev |
+| `data` | object | Oui | Données à envoyer |
 
-### **Validation emails automatique**
-Le SDK valide automatiquement les champs `<input type="email">` et les données contenant "email" :
-
-- ✅ **Validation en temps réel** sur les champs HTML
-- ✅ **Validation des données JSON** dans `submit()`
-- ✅ **Feedback visuel** avec messages d'erreur
-- ✅ **Messages console** détaillés
+---
 
-### **Gestion des erreurs intelligente**
-Messages d'aide contextuels pour les erreurs courantes :
+## 🚀 SDK JavaScript Avancé
 
-- **DOM_001** : Erreur de domaine non autorisé
-- **API_003** : Clé API désactivée  
-- **EMAIL_INVALID** : Email invalide
+Pour le HTML classique avec un contrôle total des champs et une gestion personnalisée :
 
-### **Logs configurables**
-```javascript
-const dev = new InputDevSDK();
+```html
+<form id="contact-form">
+  <!-- ... vos champs ici ... -->
+  <button type="button" onclick="submitFormulaire()">Envoyer</button>
+</form>
 
-// Contrôler les logs
-dev.disableLogs();  // Désactiver tous les logs
-dev.enableLogs();   // Réactiver les logs
+<script src="https://unpkg.com/@inputdev/sdk@latest/inputdev-sdk.prod.js"></script>
+<script>
+  // Fonction réutilisable, contrôle total des champs
+  function submitFormulaire() {
+    const dev = new InputDevSDK();
+    const data = {
+      email: "exemple@test.com",
+      message: "Message par défaut",
+      telephone: "+22990000000",
+      plan: "free"
+    };
+    dev.submit("grts_VotreCleApiDeCeSite", data); // SDK gère erreurs et succès automatiquement
+  }
+</script>
 ```
 
-## 🔧 **Configuration**
+### Avantages du SDK avancé
 
-### **Modes de fonctionnement**
+- **Contrôle total des données** - Gérez chaque champ manuellement
+- **Validation personnalisée** - Appliquez vos règles métier
+- **Gestion d'erreurs avancée** - Messages d'erreur sur mesure
+- **Performance optimisée** - Envoi asynchrone et optimisé
 
-#### **📊 Mode normal (développement)**
-```javascript
-const dev = new InputDevSDK();
-// Par défaut : logs activés, messages activés
-```
+---
 
-**Avantages :**
-- ✅ **Logs complets** pour le débogage
-- ✅ **Messages d'erreur détaillés**
-- ✅ **Instructions contextuelles** (DOM_001, API_003)
-- ✅ **Validation emails** avec feedback visuel
+## 📧 Validation Email
 
-#### **🔇 Mode silencieux (production)**
-```javascript
-// Attribut HTML
-<form data-inputdev-silence="votre-clé-api">
+InputDev valide automatiquement les adresses email pour garantir la qualité des données collectées. La validation fonctionne en deux temps : affichage des messages et blocage de la soumission si nécessaire.
 
-// Ou appel manuel
-await dev.submit("votre-clé-api", "silence", data);
-```
+### Comment ça fonctionne ?
 
-**Avantages :**
-- ❌ **Aucun log** dans la console
-- ❌ **Pas de messages d'erreur** visibles
-- ✅ **Console propre** pour les utilisateurs
-- ✅ **Uniquement les événements** personnalisés
+Le SDK détecte automatiquement les champs email de deux manières :
+1. **Type d'input** : Tous les `<input type="email">` sont validés
+2. **Nom du champ** : Tous les champs dont le nom contient "email" (insensible à la casse)
 
-### **Contrôle manuel des logs**
-```javascript
-const dev = new InputDevSDK();
+> ⚠️ **Important** : Les **names** sont très importants ! Ils déterminent quels champs seront validés et comment les données seront stockées.
 
-// Désactiver tous les logs
-dev.disableLogs();
+#### Messages dans la console (pour le débogage)
 
-// Réactiver les logs
-dev.enableLogs();
+```
+📧 VALIDATION EMAIL
+⚠️ Erreurs trouvées:
+• L'email "email" est invalide: test@invalid
+💡 Corrigez les emails avant de soumettre à nouveau
 ```
 
-### **Contrôle manuel des messages**
-```javascript
-// Désactiver les notifications visuelles
-dev.disableMessages();
+#### Messages sous le formulaire (pour l'expérience utilisateur)
 
-// Réactiver les notifications
-dev.enableMessages();
+```html
+<div class="inputdev-email-error-message" data-inputdev-error-for="email">
+  <span style="text-decoration: underline; font-weight: bold;">InputDev SDK</span> : 
+  <span style="font-weight: bold;">Veuillez entrer une adresse email valide</span>
+</div>
 ```
 
-### **Quand utiliser quel mode ?**
+### Processus de validation
 
-| Situation | Mode recommandé | Pourquoi ? |
-|-----------|-----------------|-----------|
-| **Développement** | 📊 **Normal** | Débogage facile avec logs complets |
-| **Production** | 🔇 **Silencieux** | Console propre pour les utilisateurs |
-| **Tests** | 🔇 **Silencieux** | Pas de pollution des logs de test |
-| **Débogage client** | 📊 **Normal** | Instructions d'erreur détaillées |
+1. **Détection** : Le SDK identifie les champs avec "email" dans le nom (insensible à la casse)
+2. **Validation en temps réel** : Vérification lors de la perte de focus (blur event)  
+3. **Feedback visuel** : Bordure rouge et message d'erreur sous le champ
+4. **Blocage de soumission** : Empêche l'envoi si un email est invalide
+5. **Nettoyage automatique** : Supprime l'erreur quand l'utilisateur corrige
 
-## 📋 **Événements personnalisés**
-
-```javascript
-// Écouter les succès
-document.addEventListener('inputdev:success', (event) => {
-    console.log('Formulaire envoyé!', event.detail);
-});
+### Exemple de validation
 
-// Écouter les erreurs
-document.addEventListener('inputdev:error', (event) => {
-    console.log('Erreur:', event.detail);
-});
+```html
+<form data-inputdev="grts_VotreCleApiDeCeSite">
+  <input type="text" name="name" placeholder="Nom" required>
+  
+  <!-- ✅ Sera validé (type="email") -->
+  <input type="email" name="contact" placeholder="Contact" required>
+  
+  <!-- ✅ Aussi validé (type="email" + name contient "email") -->
+  <input type="email" name="email" placeholder="Email" required>
+  
+  <!-- ✅ Validé (name contient "email") -->
+  <input type="text" name="user_email" placeholder="Email utilisateur">
+  
+  <!-- ❌ Non validé (ni type="email", ni name avec "email") -->
+  <input type="text" name="phone" placeholder="Téléphone">
+  
+  <button type="submit">Envoyer</button>
+</form>
 ```
 
-## 🌍 **Compatibilité**
+### Types de validation
 
-- ✅ **Vanilla JavaScript**
-- ✅ **React**
-- ✅ **Vue.js**
-- ✅ **Angular**
-- ✅ **Svelte**
-- ✅ **Tous les navigateurs modernes**
+#### ✅ Champs qui seront validés
+- `<input type="email" name="quelconque">` (peu importe le name)
+- `<input type="text" name="email">` (name contient "email")
+- `<input type="text" name="user_email">` (name contient "email")
+- `<input type="email" name="EMAIL_ADDRESS">` (les deux conditions)
 
-## 📦 **Taille et performance**
+#### ❌ Champs qui ne seront PAS validés
+- `<input type="text" name="contact">` (ni type email, ni name avec "email")
+- `<input type="tel" name="phone">` (ni type email, ni name avec "email")
+- `<input type="text" name="message">` (ni type email, ni name avec "email")
 
-- 📊 **~5KB** minifié et gzippé
-- ⚡ **Chargement instantané**
-- 🔄 **Aucune dépendance**
-- 📱 **Mobile-friendly**
+### Types de validation
 
-## 🔐 **Sécurité**
+#### ✅ Emails valides
+- user@domain.com
+- test.email+tag@example.co.uk  
+- user123@sub.domain.org
 
-- 🔒 **Clés API masquées** dans les logs
-- 🛡️ **Validation côté client**
-- 🚫 **Pas de données sensibles** exposées
+#### ❌ Emails invalides
+- email@
+- user.domain.com
+- user@domain
 
-## 📚 **Exemples complets**
+### Importance des names (noms de champs)
 
-### **React**
-```jsx
-import { InputDevSDK } from '@inputdev/sdk';
+Les **names** sont cruciaux pour le fonctionnement d'InputDev :
 
-const dev = new InputDevSDK();
+1. **Validation** : Les names déterminent quels champs sont validés automatiquement
+2. **Stockage** : Les names deviennent les clés dans votre base de données
+3. **Identification** : Les names permettent d'identifier chaque champ de manière unique
 
-const handleSubmit = async (data) => {
-    try {
-        await dev.submit("votre-clé-api", data);
-        alert("Message envoyé !");
-    } catch (error) {
-        console.error("Erreur:", error);
-    }
-};
-```
+#### Bonnes pratiques pour les names
+- ✅ Utilisez des names descriptifs : `name="email_utilisateur"` 
+- ✅ Utilisez des names simples : `name="telephone"`
+- ✅ Soyez cohérent : `name="email"` et `name="confirmation_email"`
+- ❌ Évitez les names vides ou manquants
+- ❌ Évitez les caractères spéciaux : `name="email-utilisateur"` (préférer `_`)
 
-### **Vanilla JS**
-```html
-<script src="https://unpkg.com/@inputdev/sdk@latest/inputdev-sdk.prod.js"></script>
-<script>
-    const dev = new InputDevSDK();
-    
-    document.getElementById('myForm').addEventListener('submit', async (e) => {
-        e.preventDefault();
-        
-        const data = {
-            name: document.getElementById('name').value,
-            email: document.getElementById('email').value
-        };
-        
-        await dev.submit("votre-clé-api", "silence", data);
-    });
-</script>
+### Styles appliqués automatiquement
+
+```css
+.inputdev-email-error {
+    border: 2px solid #ef4444 !important;
+    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
+    outline: none !important;
+}
+
+.inputdev-email-error-message {
+    color: #ef4444;
+    font-size: 12px;
+    margin-top: 4px;
+    display: block;
+}
 ```
 
-## 🤝 **Contribution**
+> ⚠️ **Important** : Si un email est invalide, la soumission du formulaire est complètement bloquée. L'utilisateur doit corriger l'email avant de pouvoir envoyer le formulaire.
 
-Contributions bienvenues ! 
-- Fork le projet
-- Créez une branche (`git checkout -b feature/amazing-feature`)
-- Committez (`git commit -m 'Add amazing feature'`)
-- Push (`git push origin feature/amazing-feature`)
-- Ouvrez une Pull Request
+> 💡 **Astuce** : La validation fonctionne en mode normal et en mode silence. En mode silence, seul le message sous le formulaire s'affiche (pas de logs console).
 
-## 📄 **Licence**
+---
 
-MIT License - libre pour usage commercial et personnel
+## 📡 Événements
 
-## 🔗 **Liens utiles**
+Vous pouvez écouter les événements globaux pour personnaliser l'expérience utilisateur :
 
-- 📖 **Documentation complète** : [docs.inputdev.com](https://inputdev.pages.dev/documentation)
+```javascript
+document.addEventListener("inputdev:success", (event) => {
+  console.log("Succès :", event.detail);
+  // Rediriger, afficher un message, etc.
+});
 
+document.addEventListener("inputdev:error", (event) => {
+  console.error("Erreur :", event.detail);
+  // Afficher une notification, logger l'erreur, etc.
+});
+```
 
 ---
 
-**Made with ❤️ by InputDev Team**
+## 🔄 Comportement de Soumission (Important)
 
-## API Reference
+### ⚠️ **Le SDK bloque temporairement le rechargement de la page**
 
-### `dev.submit(apiKey, data)`
+Le SDK InputDev utilise un comportement moderne de type SPA (Single Page Application) pour garantir une meilleure expérience utilisateur :
 
-Envoie les données du formulaire vers l'API InputDev.
+#### 📋 **Ce qui se passe lors de la soumission**
 
-**Paramètres :**
-- `apiKey` (string): Votre clé API InputDev
-- `data` (object): Données du formulaire
+1. **`e.preventDefault()`** : Le rechargement automatique de la page est bloqué
+2. **Bouton désactivé** : Le bouton submit est désactivé pendant 3 secondes pour éviter les double-soumissions
+3. **Texte changé** : Le bouton affiche "Envoi en cours..." pendant le traitement
+4. **Requête asynchrone** : L'envoi se fait en AJAX sans rechargement
+5. **Gestion des résultats** : Succès ou erreur sont gérés via les événements
 
-**Retour :**
-- `Promise`: Résolution avec la réponse de l'API
+#### ✅ **Avantages de ce comportement**
 
-**Exemple :**
-```javascript
-const data = {
-  email: "contact@example.com",
-  message: "Bonjour, j'aimerais en savoir plus...",
-  telephone: "+33612345678",
-  plan: "free"
-};
-
-dev.submit("grts_VotreCleApiDeCeSite", data)
-  .then(response => {
-    console.log('Formulaire soumis:', response);
-  })
-  .catch(error => {
-    console.error('Erreur:', error.message);
-  });
-```
+- 🔄 **Évite les soumissions multiples** - Protection contre les doubles clics
+- 📱 **Meilleure UX** - Pas de rechargement brutal de la page
+- 🔧 **Gestion d'erreur améliorée** - Messages d'erreur sans perdre le formulaire
+- 📊 **Feedback visuel** - Indicateur de chargement clair
+- 🎯 **Compatible SPA** - Fonctionne parfaitement avec React, Vue, Angular
 
-## Événements personnalisés
+> 💡 **Note** : Ce comportement est **intentionnel** et **professionnel**. Il garantit que vos utilisateurs ne perdent jamais leurs données et offre une expérience moderne et fluide.
 
-Le SDK émet des événements que vous pouvez écouter :
+---
 
-```javascript
-// Succès de la soumission
-document.addEventListener('inputdev:success', (event) => {
-  const { form, response } = event.detail;
-  console.log('Formulaire envoyé avec succès:', response);
-});
+## � Codes d'erreur
 
-// Erreur de soumission
-document.addEventListener('inputdev:error', (event) => {
-  const { form, error } = event.detail;
-  console.error('Erreur lors de l\'envoi:', error);
-});
-```
+| Code | Signification | Solution |
+|------|---------------|----------|
+| `API_001` | Clé API invalide | Vérifiez votre clé |
+| `DOM_001` | Domaine non autorisé | Ajoutez le domaine autorisé |
+| `QUO_001` | Quota dépassé | Passez à un plan supérieur |
+| `NET_001` | Erreur réseau | Vérifiez la connexion |
+| `VAL_001` | Validation échouée | Vérifiez les champs |
 
-## Codes d'erreur
+---
 
-| Code | Message | Description |
-|------|---------|-------------|
-| API_001 | Clé API invalide | La clé API n'existe pas ou est mal formatée |
-| API_003 | Clé API désactivée | La clé API a été désactivée |
-| DOM_001 | Domaine non autorisé | Le domaine n'est pas autorisé pour cette clé |
-| QUO_001 | Quota de soumissions épuisé | Vous avez atteint votre limite de soumissions |
-| STO_001 | Quota de stockage épuisé | Vous avez atteint votre limite de stockage |
-| SRV_001 | Erreur serveur | Erreur interne du serveur |
-| SRV_004 | Trop de requêtes | Rate limit dépassé (10 req/min par clé) |
+## 🔐 Sécurité
 
-## Configuration
+- **Requêtes envoyées en HTTPS** - Chiffrement de bout en bout
+- **Validation côté client et serveur** - Double couche de sécurité
+- **Domaine autorisé configurable** - Protection contre l'usage non autorisé
+- **Anti-spam intégré** - Protection automatique
 
-### Configuration actuelle
+> ℹ️ **Sécurité** : La clé API est publique et conçue pour rester dans le frontend. Elle est sécurisée par validation de domaine et quotas automatiques.
 
-Le SDK utilise une configuration de production optimisée :
+---
 
-```javascript
-// Voir la configuration actuelle (lecture seule)
-console.log(dev.getConfig());
+## � Mode Silence
+
+Pour désactiver les logs en production :
+
+```html
+<form data-inputdev-silence="grts_VotreCleApiDeCeSite">
 ```
 
+---
+
+## 📊 Limites
+
+- **Nombre de soumissions par mois** - Dépend du plan choisi
+- **Nombre maximum de formulaires** - Variable selon le plan  
+- **Nombre de sites/clés actives** - Une clé, un site
+- **SSL obligatoire** - HTTPS requis pour la sécurité
+- **Domaines autorisés** - Configurable par clé
+
+---
+
+## ⭐ Bonnes pratiques
+
+- ✅ Toujours utiliser HTTPS
+- ✅ Toujours définir des champs name
+- ✅ Toujours gérer les événements erreur
+- ✅ Surveiller votre quota
+- ✅ Tester en environnement de développement
 
-**Note :** La configuration est optimisée pour la production et n'est pas modifiable pour garantir la sécurité et la stabilité.
+---
 
-## Exemples pratiques
+## 📋 Exemple complet réel
 
-### Formulaire de contact
 ```html
-<form data-inputdev="grts_VotreCleApi">
-  <div>
-    <label for="name">Nom:</label>
+<!DOCTYPE html>
+<html>
+<head>
+  <script src="https://unpkg.com/@inputdev/sdk@latest/inputdev-sdk.prod.js"></script>
+</head>
+<body>
+
+<form data-inputdev="grts_VotreCleApiDeCeSite">
+  <div class="form-group">
+    <label for="name">Nom complet</label>
     <input type="text" id="name" name="name" required>
   </div>
   
-  <div>
-    <label for="email">Email:</label>
+  <div class="form-group">
+    <label for="email">Email</label>
     <input type="email" id="email" name="email" required>
   </div>
   
-  <div>
-    <label for="subject">Sujet:</label>
-    <input type="text" id="subject" name="subject">
-  </div>
-  
-  <div>
-    <label for="message">Message:</label>
+  <div class="form-group">
+    <label for="message">Message</label>
     <textarea id="message" name="message" required></textarea>
   </div>
   
   <button type="submit">Envoyer</button>
 </form>
 
-<script src="https://unpkg.com/@inputdev/sdk@latest/inputdev-sdk.prod.js"></script>
+<script>
+  // Écouter les événements pour une meilleure UX
+  document.addEventListener('inputdev:success', (event) => {
+    alert('Message envoyé avec succès !');
+    // Réinitialiser le formulaire
+    document.querySelector('form').reset();
+  });
+  
+  document.addEventListener('inputdev:error', (event) => {
+    console.error('Erreur lors de l\'envoi :', event.detail);
+    alert('Une erreur est survenue. Veuillez réessayer.');
+  });
+</script>
+
+</body>
+</html>
 ```
 
-### Formulaire avec validation personnalisée
-```javascript
-document.addEventListener('inputdev:success', (event) => {
-  // Rediriger après succès
-  window.location.href = '/merci.html';
-});
+---
 
-document.addEventListener('inputdev:error', (event) => {
-  // Afficher une notification personnalisée
-  showNotification('Erreur: ' + event.detail.error.message, 'error');
-});
-```
+## � Support & Liens
 
-### Intégration React
-```jsx
-import { InputDevSDK } from "@inputdev/sdk";
+- 📖 **Documentation Complète** : [docs.inputdev.dev](https://inputdev.pages.dev/documentation)
+- 💬 **Discord** : [Rejoindre la communauté]
+- 🐛 **Issues** : [Signaler un bug]
 
-function ContactForm() {
-  const [formData, setFormData] = useState({
-    email: '',
-    message: ''
-  });
-  const [loading, setLoading] = useState(false);
-  const dev = new InputDevSDK();
-
-  const handleSubmit = async (e) => {
-    e.preventDefault();
-    setLoading(true);
-    
-    try {
-      await dev.submit("grts_VotreCleApi", formData);
-      alert('Message envoyé avec succès!');
-      setFormData({ email: '', message: '' });
-    } catch (error) {
-      alert('Erreur: ' + error.message);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  return (
-    <form onSubmit={handleSubmit}>
-      <input
-        type="email"
-        value={formData.email}
-        onChange={(e) => setFormData({...formData, email: e.target.value})}
-        placeholder="Votre email"
-        required
-      />
-      <textarea
-        value={formData.message}
-        onChange={(e) => setFormData({...formData, message: e.target.value})}
-        placeholder="Votre message"
-        required
-      />
-      <button type="submit" disabled={loading}>
-        {loading ? 'Envoi...' : 'Envoyer'}
-      </button>
-    </form>
-  );
-}
-```
 
-## Support
+---
+
+## 📄 Licence
 
-- 📖 Documentation complète : [docs.inputdev.dev](https://docs.inputdev.dev)
-- 🐛 Rapports de bugs : [GitHub Issues](https://github.com/inputdev/sdk/issues)
-- 💬 Communauté : [Discord](https://discord.gg/inputdev)
+MIT License - voir le fichier [LICENSE](LICENSE) pour plus de détails.
 
-## Licence
+---
 
-MIT License - voir le fichier LICENSE pour les détails.
+<p align="center">Made with ❤️ by <b>InputDev Team</b></p>