📘 InputDev Documentation

Documentation

InputDev est une solution légère permettant de collecter les données de formulaires web sans créer de backend.

1 - Introduction

InputDev permet de transformer un simple formulaire en système de collecte de données sécurisé.

Aucune configuration serveur nécessaire

Aucune dépendance externe

Installation en moins de 1 minute

2 - Quick Start (Démarrage rapide)

Étape 1 — Ajouter le script

Via CDN 
<script src="https://unpkg.com/@inputdev/sdk@latest/inputdev-sdk.prod.js"></script>

Étape 2 — Ajouter votre clé API

Formulaire HTML 
<form data-inputdev="grts_VotreCleApiDeCeSite">
  <input type="text" name="name" required />
  <input type="email" name="email" required />
  <button type="submit">Envoyer</button>
</form>
C'est terminé ! Le formulaire est maintenant connecté à InputDev.

3 - Comment ça fonctionne

Navigateur

L'utilisateur soumet le formulaire

InputDev API

Les données sont validées et envoyées en HTTPS

Stockage sécurisé

Elles sont enregistrées dans votre tableau de bord

Accès aux formulaires : Les formulaires soumis sont disponibles dans votre compte utilisateur en vous connectant à https://inputdev.pages.dev

4 - 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
CDN - Version Minifiée (Production) 
<script src="https://unpkg.com/@inputdev/sdk@latest/inputdev-sdk.min.js"></script>
CDN - Version Complète (Développement) 
<script src="https://unpkg.com/@inputdev/sdk@latest/inputdev-sdk.prod.js"></script>
CDN Alternative (JSDelivr) 
<script src="https://cdn.jsdelivr.net/npm/@inputdev/sdk@latest/inputdev-sdk.min.js"></script>

Via NPM

NPM 
npm install @inputdev/sdk
import InputDev from "@inputdev/sdk";

5 - 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 :

API JavaScript 
const sdk = new InputDev();

await sdk.submit("grts_VotreCleApiDeCeSite", {
  name: "John",
  email: "john@email.com",
  plan: "premium"
});

Paramètres

Paramètre Type Obligatoire Description
apiKey string Oui Clé publique fournie par InputDev
data object Oui Données à envoyer

5.1 - SDK JavaScript Avancé

Pour le HTML classique avec un contrôle total des champs et une gestion personnalisée :

SDK avec contrôle total 
<form id="contact-form">
  <!-- ... vos champs ici ... -->
  <button type="button" onclick="submitFormulaire()">Envoyer</button>
</form>

<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>

Avantages du SDK avancé

Contrôle total des données

Validation personnalisée

Gestion d'erreurs avancée

Performance optimisée

6 - Validation Email

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.

Comment ça fonctionne ?

Le SDK détecte automatiquement les champs email de deux manières :

Type d'input

Tous les <input type="email"> sont validés automatiquement, peu importe le name

Nom du champ

Tous les champs dont le name contient "email" (insensible à la casse) sont validés

Important : Les names sont très importants ! Ils déterminent quels champs seront validés et comment les données seront stockées.

Messages dans la console

Pour le débogage et le développement

📧 VALIDATION EMAIL
⚠️ Erreurs trouvées:
• L'email "email" est invalide: test@invalid
💡 Corrigez les emails avant de soumettre à nouveau

Messages sous le formulaire

Pour l'expérience utilisateur finale

<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>

Processus de validation

Étapes automatiques

  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

Exemple de validation

Formulaire avec validation email 
<form data-inputdev="grts_VotreCleApiDeCeSite">
  <input type="text" name="name" placeholder="Nom" required>
  
  <!-- Validé (type="email") -->
  <input type="email" name="contact" placeholder="Contact" required>
  
  <!-- 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>

Types de champs validés

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)

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")

Importance des names (noms de champs)

Pourquoi les names sont cruciaux

Les names sont essentiels pour le fonctionnement d'InputDev :

  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

Bonnes pratiques pour les names

Recommandé

  • name="email_utilisateur"
  • name="telephone"
  • name="email" et name="confirmation_email"

Éviter

  • Names vides ou manquants
  • name="email-utilisateur" (préférer _)
  • Caractères spéciaux ou espaces

Types de validation

Emails valides

  • user@domain.com
  • test.email+tag@example.co.uk
  • user123@sub.domain.org

Emails invalides

  • email@
  • user.domain.com
  • user@domain

Styles appliqués automatiquement

CSS généré par le SDK 
.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;
}
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.
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).

7 - Événements

Vous pouvez écouter les événements globaux :

Event Listeners 
document.addEventListener("inputdev:success", (event) => {
  console.log("Succès :", event.detail);
});

document.addEventListener("inputdev:error", (event) => {
  console.error("Erreur :", event.detail);
});

7.1 - Comportement de Soumission (Important)

⚠️ Le SDK bloque temporairement le rechargement de la page

Le SDK InputDev utilise un comportement moderne de type SPA (Single Page Application) pour garantir une meilleure expérience utilisateur.

📋 Ce qui se passe lors de la soumission

e.preventDefault()

Le rechargement automatique de la page est bloqué

Bouton désactivé

Le bouton submit est désactivé pendant 3 secondes

Texte changé

Le bouton affiche "Envoi en cours..."

Requête asynchrone

L'envoi se fait en AJAX sans rechargement

✅ Avantages de ce comportement

Anti double-clic

Évite les soumissions multiples

Meilleure UX

Pas de rechargement brutal

Gestion d'erreur

Messages sans perdre le formulaire

📝 Exemple de comportement

Formulaire avec gestion d'événements 
<form data-inputdev="grts_VotreCleApiDeCeSite">
  <input type="email" name="email" required>
  <button type="submit">Envoyer</button>
</form>

<script>
document.addEventListener('inputdev:success', (event) => {
  // ✅ Le formulaire est envoyé SANS rechargement
  alert('Message envoyé avec succès !');
  event.detail.form.reset(); // Réinitialiser manuellement
});

document.addEventListener('inputdev:error', (event) => {
  // ❌ En cas d'erreur, le formulaire reste intact
  console.error('Erreur:', event.detail.error);
});
</script>
💡 Note importante : 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, parfaitement compatible avec React, Vue, Angular et autres frameworks JavaScript.

8 - Codes d'erreur

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

9 - Sécurité

Requêtes envoyées en HTTPS

Validation côté client et serveur

Domaine autorisé configurable

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.

10 - Mode Production

Pour désactiver les logs :

Mode Silence 
<form data-inputdev-silence="grts_VotreCleApiDeCeSite">

11 - 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

Domaines autorisés

configuerer par clé

12 - 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

13 - Exemple complet réel

Exemple complet 
<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/@inputdev/sdk@latest/inputdev-sdk.prod.js"></script>
</head>
<body>

<form data-inputdev="grts_VotreCleApiDeCeSite">
  <input type="text" name="name" placeholder="Nom" required />
  <input type="email" name="email" placeholder="Email" required />
  <textarea name="message" placeholder="Message"></textarea>
  <button type="submit">Envoyer</button>
</form>

<script>
  document.addEventListener("inputdev:success", () => {
    alert("Message envoyé !");
  });

  document.addEventListener("inputdev:error", (e) => {
    alert("Erreur : " + e.detail.code);
  });
</script>

</body>
</html>

14 - FAQ

Puis-je utiliser InputDev sans backend ?

Oui.

Est-ce compatible mobile ?

Oui.

Puis-je l'utiliser avec React ou Vue ?

Oui via la méthode submit().

Puis-je envoyer des fichiers ?

(À préciser selon ton système)

15 - Changelog

v1.0.0

  • Version initiale
  • Validation automatique
  • API JavaScript
  • Gestion d'erreurs

16 - Tarifs

Choisissez le plan qui correspond à vos besoins :

Free

0 € /mo
  • 3 formulaires & 200 soumissions/mois
  • 50 formulaire maximale a enregistrer pour enregistrer plus il faut supprime et libere de l espace
  • Export CSV/JSON
  • Webhooks
  • API basic & Validation basic
  • Branding obligatoire
  • Support communautaire
POPULAIRE

Starter

5 € /mo
  • 7 formulaires & 1 500 soumissions/mois
  • 325 formulaire
  • Export CSV
  • Export JSON
  • Webhooks (1 URL/form)
  • API basic & Validation avancée
  • Branding amovible & Support email

Scale

30 € /mo
  • 100 formulaires & 30 000 soumissions/mois
  • 8000 formulaire
  • Export CSV/JSON & API bulk
  • Webhooks (10 URLs/form)
  • Retry auto & HMAC & Délais perso
  • API full & Validation avancée
  • Branding amovible & Support premium

6 - Exemples de Code Simple

Formulaires prêts à l'emploi : 6 exemples numérotés avec mode silence/non-silence pour tous les cas d'usage. Le mode silence désactive les logs console pour la production.

1 Landing Page Normal

<form data-inputdev="grts_VotreCleApiDeCeSite">
  <input type="email" name="email" placeholder="Email" required>
  <button type="submit">Démarrer</button>
</form>
2 Landing Page Silence 
<!-- Mode production : désactive les logs console -->
<form data-inputdev-silence="grts_VotreCleApiDeCeSite">
  <!-- Champ email obligatoire -->
  <input type="email" name="email" placeholder="Email" required>
  <!-- Bouton d'action -->
  <button type="submit">Démarrer</button>
</form>
<!-- Aucun log console en mode production -->
3 Contact Pro Normal 
<!-- Formulaire de contact avec validation et debug -->
<form data-inputdev="grts_VotreCleApiDeCeSite">
  <!-- Champ nom obligatoire -->
  <input type="text" name="name" placeholder="Nom" required>
  <!-- Champ email avec validation automatique -->
  <input type="email" name="email" placeholder="Email" required>
  <!-- Zone de message pour les détails -->
  <textarea name="message" placeholder="Message"></textarea>
  <!-- Bouton d'envoi -->
  <button type="submit">Envoyer</button>
</form>
<!-- Le SDK gère automatiquement la soumission et les erreurs -->
4 Contact Pro Silence 
<form data-inputdev-silence="grts_VotreCleApiDeCeSite">
  <input type="text" name="name" placeholder="Nom" required>
  <input type="email" name="email" placeholder="Email" required>
  <textarea name="message" placeholder="Message"></textarea>
  <button type="submit">Envoyer</button>
</form>
5 Newsletter Normal 
<form data-inputdev="grts_VotreCleApiDeCeSite">
  <input type="email" name="email" placeholder="votre@email.com" required>
  <label>
    <input type="checkbox" name="consent" required>
    J'accepte les emails
  </label>
  <button type="submit">S'inscrire</button>
</form>
6 Newsletter Silence 
<form data-inputdev-silence="grts_VotreCleApiDeCeSite">
  <input type="email" name="email" placeholder="votre@email.com" required>
  <label>
    <input type="checkbox" name="consent" required>
    J'accepte les emails
  </label>
  <button type="submit">S'inscrire</button>
</form>


HTML + CDN (Mode Normal) 
<!-- Aucun JavaScript nécessaire - Le SDK gère tout automatiquement -->
<form data-inputdev="grts_VotreCleApiDeCeSite">
  <!-- Ajoutez vos champs personnalisés ici -->
  <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.prod.js"></script>
<!-- Script unique - Toutes les erreurs sont gérées automatiquement -->

JavaScript + CDN (Contrôle total) 
<form id="contact-form">
  <!-- Récupérez vos champs depuis le formulaire -->
  <button type="button" onclick="submitFormulaire()">Envoyer</button>
</form>

<script src="https://unpkg.com/@inputdev/sdk@latest/inputdev-sdk.prod.js"></script>
<script>
  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);
  }
</script>

NPM (Pour frameworks modernes) 
import { InputDevSDK } from "@inputdev/sdk"

function submitFormulaire() {
  const data = {
    email: "exemple@test.com",
    message: "Message par défaut",
    telephone: "+22990000000",
    plan: "free"
  };
  dev.submit("grts_VotreCleApiDeCeSite", data);
}

Backend de formulaires pour les développeurs modernes.

2026 InputDev · Fabriqué par grts

Mode Silence - Production Optimisée

Le mode silence est une fonctionnalité avancée d'InputDev SDK conçue pour les environnements de production où vous souhaitez éliminer complètement les logs console pour une expérience utilisateur propre et professionnelle.

Important : Le mode silence est idéal pour les sites en production. En développement, utilisez le mode normal pour bénéficier des logs de débogage.

Qu'est-ce que le Mode Silence ?

Le mode silence (data-inputdev-silence) désactive temporairement tous les logs console d'InputDev pendant la soumission du formulaire, tout en maintenant la même fonctionnalité de collecte de données.

Implémentation

Mode Silence - HTML 
<!-- Mode silence : pas de logs console -->
<form data-inputdev-silence="grts_VotreCleApiDeCeSite">
  <input type="email" name="email" placeholder="Email" required>
  <textarea name="message" placeholder="Message" required></textarea>
  <button type="submit">Envoyer</button>
</form>

Mode Normal vs Mode Silence

Mode Normal

  • Logs console détaillés
  • Débogage facile
  • Messages d'erreur explicites
  • Idéal pour développement
  • Utilise data-inputdev
Logs visibles dans la console :
🚀 INPUTDEV SDK CHARGÉ
📤 Envoi du formulaire...
✅ Formulaire envoyé avec succès !

Mode Silence

  • Aucun log console
  • Interface utilisateur propre
  • Production optimisée
  • Idéal pour site en ligne
  • Utilise data-inputdev-silence
Aucun log dans la console
(silence total)

Sécurité et Performance

Caractéristiques du Mode Silence

  • Logs désactivés : Aucun message console pendant la soumission
  • Même sécurité : Validation emails et chiffrement identiques
  • Performance : Légère amélioration des performances
  • Professionalisme : Console propre pour utilisateurs avancés
  • Debugging : Erreurs critiques toujours visibles en cas de problème

Bonnes Pratiques

Quand utiliser le Mode Silence

Recommandé pour :
  • Sites en production
  • Applications professionnelles
  • Landing pages marketing
  • E-commerce
  • Formulaires clients
Éviter pour :
  • Phase de développement
  • Débogage actif
  • Tests techniques
  • Formation équipe
  • Démonstrations techniques

Migration vers le Mode Silence

Pour passer du mode normal au mode silence, il suffit de modifier un attribut :

Migration Simple - HTML 
<!-- Avant : Mode normal -->
<form data-inputdev="grts_VotreCleApiDeCeSite">
  ... champs du formulaire ...
</form>

<!-- Après : Mode silence -->
<form data-inputdev-silence="grts_VotreCleApiDeCeSite">
  ... mêmes champs du formulaire ...
</form>
Migration Simple - JavaScript 
// Avant : Mode normal
const dev = new InputDevSDK();
dev.submit("grts_VotreCleApiDeCeSite", data);

// Après : Mode silence
const dev = new InputDevSDK();
dev.submit("grts_VotreCleApiDeCeSite", "silence", data);
Astuce : Ajoutez le mode silence en production et enlevez-le en développement. Par exemple, mode normal sur la page de contact (pour débogage) et mode silence sur les formulaires d'inscription (pour production).

Capacités de Collecte

InputDev est adapté pour collecter tous les types de données via formulaire, offrant une flexibilité complète pour vos besoins de collecte de données.

Exemples de Collecte

Formulaire Complet - Tous Types 
<form data-inputdev="grts_VotreCleApiDeCeSite">
  <!-- Informations personnelles -->
  <input type="text" name="nom" placeholder="Votre nom" required>
  <input type="email" name="email" placeholder="votre@email.com" required>
  
  <!-- Contact professionnel -->
  <input type="tel" name="telephone" placeholder="+33 1 23 45 67 89">
  
  <!-- Préférences -->
  <input type="checkbox" name="newsletter">
  <label>
    Je souhaite recevoir la newsletter
  </label>
  
  <!-- Message détaillé -->
  <textarea name="message" placeholder="Votre message..."rows="4"></textarea>
  
  <button type="submit">Envoyer</button>
</form>
Flexibilité Totale : InputDev collecte automatiquement tous les champs du formulaire, quel que soit leur type, sans configuration supplémentaire.

Aide IA

Pour une compréhension optimale et une assistance personnalisée, utilisez notre documentation structurée spécialement conçue pour les intelligences artificielles.

Télécharger la documentation structurée

Pour une compréhension optimale par les IA (ChatGPT, Claude, Gemini, etc.), téléchargez notre fichier JSON structuré qui contient toutes les informations techniques d'InputDev.

⚠️ Important pour les IA

Utilisez de préférence le fichier documentation.json plutôt que cette page HTML. Le JSON est structuré spécifiquement pour le traitement par les IA.

Comment utiliser :

Option 1 - Donner l'URL

Donnez simplement l'URL copiée à votre IA et posez vos questions :

  • "Explique-moi cette documentation"
  • "Comment intégrer InputDev ?"
  • "Pourquoi j'ai l'erreur X ?"
Option 2 - Télécharger

Téléchargez le fichier JSON et demandez à votre IA :

  • "Explique-moi ce fichier"
  • "Aide-moi avec mes erreurs"
  • "Montre-moi des exemples"

Avantages du JSON

  • Structure optimisée pour les IA
  • Informations techniques complètes
  • Exemples de code précis
  • Codes d'erreur détaillés
  • Validation email expliquée
  • Configuration API claire

Contenu technique

  • Documentation complète
  • Exemples d'utilisation
  • Guide d'intégration
  • Référence API

Conclusion

InputDev permet de connecter rapidement un formulaire HTML à une API sécurisée, sans écrire de backend.

Prêt à commencer ? Intégrez InputDev en quelques minutes et transformez vos formulaires en puissance de collecte de données.