Plugin — Formulaire Logger

Formulaire Logger est un plugin WordPress sur mesure (version 1.2.0, auteur : Eliott) qui enregistre en temps réel tous les événements liés aux formulaires Elementor : soumissions, validations, erreurs, envois d'email, et interactions JavaScript côté client.

Vue d'ensemble

flowchart TD
    A[Utilisateur interagit avec le formulaire] --> B{Origine de l'événement}
    B -- PHP / Elementor --> C[Hook WordPress]
    B -- JavaScript --> D[AJAX fl_log_event]
    C --> E[fl_log écrit dans formulairelogs.txt]
    D --> E
    E --> F[Page admin WordPress : Form Logs]

1. Fichier de log

Tous les événements sont écrits dans :

/wp-content/formulairelogs.txt

Chaque ligne suit ce format :

[YYYY-MM-DD HH:MM:SS] [TYPE] User: <login> | IP: <ip> | Page: <referrer> | <message> | Data: {...}

User : login WordPress si connecté, sinon Visiteur anonyme
IP : adresse IP du client
Page : URL de provenance (HTTP_REFERER)
Data : JSON des données complémentaires (champs, erreurs, fichiers…)

2. Hooks PHP — événements Elementor

Hook	Type de log	Données enregistrées
`elementor_pro/forms/new_record`	`ELEMENTOR_SUBMIT`	Nom du formulaire, état de chaque champ (renseigné / vide / [MASQUÉ] pour les mots de passe)
`elementor_pro/forms/mail_sent`	`ELEMENTOR_EMAIL_SENT`	Nom du formulaire, destinataire, sujet
`elementor_pro/forms/mail_error`	`ELEMENTOR_EMAIL_FAILED`	Nom du formulaire, destinataire
`elementor_pro/forms/validation_error`	`ELEMENTOR_INVALID`	Nom du formulaire, liste des erreurs
`wp_mail_failed`	`EMAIL_FAILED`	Message d'erreur WP

Confidentialité

Les valeurs des champs ne sont jamais loguées — seul leur état (renseigné / vide) est enregistré.

3. Endpoint AJAX — logs côté JavaScript

Le plugin expose un endpoint AJAX sécurisé pour recevoir les événements JavaScript :

Paramètre POST	Description
`action`	`fl_log_event`
`nonce`	Nonce WordPress (généré côté serveur via `wp_create_nonce('fl_nonce')`)
`event`	Nom de l'événement (ex. `field_focus`, `file_too_large`)
`field`	Nom du champ concerné
`message`	Message descriptif
`extra`	Tableau de données complémentaires

Le type de log généré est JS_<EVENT> (ex. JS_FIELD_FOCUS).

4. Script JavaScript (wp_footer)

Le script est injecté en pied de page sur toutes les pages du site. Il surveille les formulaires Elementor et envoie des logs via AJAX pour chaque interaction.

Événements loggés

Événement JS	Déclencheur	Type de log
`field_focus`	Focus sur un champ	`JS_FIELD_FOCUS`
`field_change`	Modification d'un champ	`JS_FIELD_CHANGE`
`field_empty_blur`	Champ quitté vide	`JS_FIELD_EMPTY_BLUR`
`field_invalid`	Validation HTML5 échouée	`JS_FIELD_INVALID`
`file_bad_format`	Fichier avec extension non autorisée	`JS_FILE_BAD_FORMAT`
`file_too_large`	Fichier dépassant la taille maximale	`JS_FILE_TOO_LARGE`
`reset`	Formulaire réinitialisé	`JS_RESET`
`elementor_submit`	Soumission du formulaire	`JS_ELEMENTOR_SUBMIT`
`elementor_success`	Soumission réussie	`JS_ELEMENTOR_SUCCESS`
`elementor_error`	Erreur serveur Elementor	`JS_ELEMENTOR_ERROR`
`elementor_invalid`	Champs invalides (client)	`JS_ELEMENTOR_INVALID`
`step_error`	Erreur sur un step multi-étapes	`JS_STEP_ERROR`
`js_error`	Erreur JavaScript globale (`window.onerror`)	`JS_JS_ERROR`

Validation des fichiers (côté client)

Le script valide les fichiers uploadés avant soumission :

Formats autorisés : jpg, jpeg, png, pdf, doc, docx, odt, tiff
Taille maximale : lue depuis l'attribut data-max-size du champ Elementor (défaut : 50 MB)

En cas de fichier invalide :

Une alert() informe l'utilisateur
Le champ est réinitialisé
Les boutons "Suivant" et "Soumettre" sont désactivés
L'événement est logué

5. Page d'administration

Accessible depuis Tableau de bord WordPress → Form Logs.

Fonctionnalités :

Action	Description
Affichage	Logs affichés en ordre chronologique inverse, avec coloration syntaxique
Téléchargement	Export du fichier `formulairelogs.txt` via `?fl_download=1`
Vidage	Effacement de tous les logs (confirmation requise + nonce CSRF)

Coloration des logs

Couleur	Types de logs
Vert `#4ec94e`	`_EMAIL_SENT`, `_SUCCESS`
Rouge `#f44747`	`_FAILED`, `_INVALID`, `_ERROR`, `STEP_ERROR`
Orange `#ff8c00`	`FILE_TOO_LARGE`, `FILE_BAD_FORMAT`, `[SECURITY]`
Bleu `#9cdcfe`	`[JS_*]` (tous les événements JavaScript)
Gris `#d4d4d4`	Autres

6. Sécurité

Chaque requête AJAX est vérifiée par un nonce WordPress (fl_nonce). Un nonce invalide génère un log de type SECURITY et retourne une erreur.
La page admin est protégée par current_user_can('manage_options').
Le vidage des logs est protégé par un nonce CSRF (fl_clear_logs).
Les valeurs des champs formulaire ne sont jamais loguées en clair.

Vue d'ensemble​

1. Fichier de log​

2. Hooks PHP — événements Elementor​

3. Endpoint AJAX — logs côté JavaScript​

4. Script JavaScript (wp_footer)​

Événements loggés​

Validation des fichiers (côté client)​

5. Page d'administration​

Coloration des logs​

6. Sécurité​