Les formulaires WordPress
Créer un formulaire de contact ou de pré-inscription avec WPForms : chaque type de champ, le bouton d’envoi, les messages d’erreur et la conformité RGPD, avec un aperçu interactif de chaque champ.
Créer des formulaires
WPForms › Ajouter un nouveau
WordPress ne propose pas de formulaire de contact en natif : on utilise une extension. WPForms (installé sur ce site) fonctionne par glisser-déposer ; Contact Form 7 s’appuie sur des balises courtes à écrire soi-même.
| Extension | Points forts | Limites |
|---|---|---|
| WPForms Lite | Éditeur visuel, modèles prêts, anti-spam intégré | Envoi de fichiers et logique conditionnelle en version payante |
| Contact Form 7 | Gratuit, léger, très répandu | Mise en forme et balises à écrire à la main |
| Bloc Formulaire (Jetpack) | Directement dans Gutenberg | Nécessite Jetpack |
- Ouvrir WPForms › Ajouter un nouveau et nommer le formulaire (« Contact formation »).
- Choisir un modèle (Formulaire de contact simple) ou partir d’un formulaire vierge.
- Glisser les champs de la colonne de gauche vers l’aperçu, puis cliquer sur un champ pour régler ses Options.
- Régler Paramètres › Notifications (e-mail reçu) et Confirmations (message affiché au visiteur).
- Cliquer sur Enregistrer, puis insérer le formulaire dans une page avec le bloc WPForms ou le code court
.
input, select, textarea) chacun associé à une étiquette label. Les extensions génèrent ce code pour vous ; le connaître aide à comprendre les options proposées.
Exercice 1 · Découverte
Créez un formulaire « Contact formation » à partir du modèle simple, insérez-le dans une page Contact et envoyez un message de test.
Voir le corrigé
WPForms › Ajouter un nouveau › nom « Contact formation » › modèle Formulaire de contact simple › Enregistrer. Pages › Contact › bloc WPForms › choisir le formulaire › Mettre à jour. Le message arrive à l’adresse définie dans Paramètres › Notifications ; il est aussi visible dans WPForms › Entrées (version payante).
La liste déroulante
WPForms › Champs standards › Liste déroulante
La liste déroulante propose un choix unique parmi une liste longue, sans encombrer le formulaire.
Aperçu
<label for="formation">Formation souhaitée</label> <select id="formation" name="formation" required> <option value="">— Choisir —</option> <option>Excel débutant</option> <option>Word</option> </select>
- Choix : un par ligne dans les options du champ ; le bouton + en ajoute.
- Espace réservé : texte « — Choisir — » qui oblige à faire un choix conscient.
- Sélection multiple : option avancée, à éviter sur mobile (préférer des cases à cocher).
Exercice 2 · Application
Ajoutez une liste « Formation souhaitée » avec 6 formations, un espace réservé et le caractère obligatoire.
Voir le corrigé
Glisser Liste déroulante › Libellé « Formation souhaitée » › saisir les 6 choix › onglet Avancé › Texte de l’espace réservé « — Choisir — » › onglet Général › cocher Obligatoire. Enregistrer.
Le champ texte
WPForms › Texte sur une ligne · Nom · E-mail · Téléphone
Le champ texte reçoit une saisie courte sur une ligne. WPForms propose des variantes qui contrôlent automatiquement le format.
Aperçu
| Champ WPForms | Type HTML | Contrôle |
|---|---|---|
| Texte sur une ligne | type="text" | Limite de caractères possible |
| Nom | 2 champs Prénom / Nom | Format simple ou prénom + nom |
type="email" | Présence d’un @ et d’un domaine | |
| Téléphone | type="tel" | Format national ou international |
| Nombres | type="number" | Chiffres uniquement |
Exercice 3 · Application
Ajoutez les champs Nom (prénom + nom), E-mail avec confirmation et Téléphone, ce dernier facultatif.
Voir le corrigé
Champ Nom › Format Prénom Nom › Obligatoire. Champ E-mail › cocher Activer la confirmation de l’e-mail › Obligatoire. Champ Téléphone › Format National, laisser Obligatoire décoché.
Le champ textarea
WPForms › Texte sur plusieurs lignes
La zone de texte (textarea) accueille un message long sur plusieurs lignes : demande, besoin de formation, question.
Aperçu
500 caractères maximum
<label for="besoin">Votre besoin</label> <textarea id="besoin" name="besoin" rows="4" maxlength="500" required></textarea>
- Taille du champ : petite, moyenne ou grande (hauteur affichée).
- Limite : en caractères ou en mots, avec compteur visible.
- Description : texte d’aide sous le champ, pour guider la réponse.
Exercice 4 · Application
Ajoutez un champ « Votre besoin » obligatoire, limité à 500 caractères, avec la description « Indiquez votre niveau et vos objectifs ».
Voir le corrigé
Glisser Texte sur plusieurs lignes › Libellé « Votre besoin » › Description › Obligatoire. Onglet Avancé › Limiter la longueur › 500 caractères.
Les boutons radio
WPForms › Choix multiple
Les boutons radio imposent un seul choix parmi quelques options, toutes visibles.
Aperçu
<fieldset> <legend>Modalité</legend> <label><input type="radio" name="modalite" value="presentiel"> Présentiel</label> <label><input type="radio" name="modalite" value="distanciel"> Distanciel</label> </fieldset>
name identique : cocher l’un décoche les autres. WPForms le gère automatiquement.Exercice 5 · Application
Ajoutez un choix « Modalité » à trois options disposées sur une ligne, avec « Présentiel » coché par défaut.
Voir le corrigé
Glisser Choix multiple › Libellé « Modalité » › saisir les 3 choix › cliquer sur le rond à gauche de « Présentiel » pour le définir par défaut. Onglet Avancé › Disposition des choix › En ligne.
La case à cocher
WPForms › Cases à cocher · Consentement RGPD
Les cases à cocher permettent plusieurs choix simultanés, ou une acceptation unique (consentement).
Aperçu
Exercice 6 · Application
Ajoutez une question « Financement envisagé » à choix multiples, puis une case de consentement RGPD obligatoire avec un lien vers la politique de confidentialité.
Voir le corrigé
Glisser Cases à cocher › 3 choix. Activer WPForms › Réglages › Améliorations RGPD, puis glisser le champ Accord RGPD : il est obligatoire par défaut. Dans son texte, sélectionner « politique de confidentialité » et ajouter le lien.
Le champ de fichiers
WPForms › Champs avancés › Envoi de fichier (version Pro)
Le champ fichier permet au visiteur de joindre un document : CV, attestation, devis signé.
Aperçu
<input type="file" name="cv" accept=".pdf,.docx"> <!-- le formulaire doit avoir enctype="multipart/form-data" -->
- Extensions autorisées : limiter strictement (pdf, docx, jpg).
- Taille maximale : 2 à 5 Mo, sans dépasser la limite de l’hébergeur.
- Nombre de fichiers : un seul, sauf besoin précis.
.php, .exe ou .js, et activez l’anti-spam du formulaire. Avec Contact Form 7, le champ fichier est gratuit ([file cv limit:2mb filetypes:pdf]).Exercice 7 · Maîtrise
Paramétrez un champ « Attestation employeur » acceptant uniquement PDF et JPG, 3 Mo maximum, un seul fichier.
Voir le corrigé
WPForms Pro : glisser Envoi de fichier › Extensions autorisées « pdf,jpg » › Taille maximale 3 › Nombre maximum de fichiers 1. Contact Form 7 : [file attestation limit:3mb filetypes:pdf|jpg].
Le bouton d’envoi
WPForms › Paramètres › Général › Texte du bouton d’envoi
Aperçu
- Texte : un verbe d’action précis (« Recevoir mon devis ») plutôt que « Envoyer ».
- Texte pendant l’envoi : « Envoi en cours… » évite les doubles clics.
- Notifications : e-mail envoyé à l’organisme, avec l’adresse du visiteur en Répondre à.
- Confirmation : message à l’écran, page de remerciement ou redirection.
Exercice 8 · Application
Renommez le bouton « Recevoir mon devis », réglez la notification vers votre adresse avec le visiteur en Répondre à, et une confirmation par page de remerciement.
Voir le corrigé
Paramètres › Général › Texte du bouton « Recevoir mon devis », texte de traitement « Envoi en cours… ». Notifications › Envoyer à : votre adresse › Répondre à : {field_id="2"} (le champ E-mail). Confirmations › Type Afficher la page › page « Merci ».
Les messages d’erreurs
WPForms › Réglages › Validation
Un message d’erreur s’affiche quand un champ obligatoire est vide ou mal rempli. Il doit dire précisément quoi corriger.
Aperçu
Saisissez une adresse e-mail valide, par exemple prenom.nom@exemple.fr
| Message par défaut | Message amélioré |
|---|---|
| Ce champ est obligatoire. | Indiquez votre nom pour que nous puissions vous répondre. |
| Veuillez saisir une adresse e-mail valide. | Saisissez une adresse e-mail valide, par exemple prenom.nom@exemple.fr |
| Le fichier dépasse la taille maximale. | Votre fichier dépasse 2 Mo : compressez-le ou envoyez un PDF. |
- Les messages se modifient dans WPForms › Réglages › Validation, pour tous les formulaires.
- Le contrôle se fait en direct dans le navigateur, puis à nouveau sur le serveur à l’envoi.
- Le message s’affiche en rouge sous le champ concerné, qui est aussi encadré.
Exercice 9 · Application
Personnalisez les messages « obligatoire » et « e-mail invalide », puis testez le formulaire vide et avec l’adresse « dupont.exemple.fr ».
Voir le corrigé
WPForms › Réglages › onglet Validation › modifier Obligatoire et E-mail › Enregistrer. À l’envoi du formulaire vide, chaque champ obligatoire affiche le nouveau message ; avec « dupont.exemple.fr », seul le champ E-mail est en erreur.
Atelier : le formulaire de pré-inscription
WPForms · Pages
Contexte : l’organisme veut recevoir les demandes de pré-inscription à ses formations, avec les informations utiles au montage du dossier CPF.
Livrable attendu
- Nom, E-mail (avec confirmation), Téléphone facultatif.
- Liste déroulante « Formation souhaitée » et boutons radio « Modalité ».
- Cases à cocher « Financement envisagé » et zone de texte « Votre besoin » limitée à 500 caractères.
- Case de consentement RGPD obligatoire, bouton « Envoyer ma pré-inscription ».
- Notification vers l’organisme, page de remerciement, messages d’erreur personnalisés.
| Critère d’évaluation | Points |
|---|---|
| Tous les champs présents avec le bon type | 5 |
| Champs obligatoires pertinents | 3 |
| Consentement RGPD conforme | 3 |
| Notification et confirmation testées | 4 |
| Messages d’erreur clairs | 3 |
| Formulaire lisible sur mobile | 2 |
| Total | 20 |
Voir la structure corrigée
Nom (Prénom Nom, obligatoire) · E-mail (confirmation, obligatoire) · Téléphone (facultatif)Liste déroulante Formation souhaitée (obligatoire) · Choix multiple Modalité (en ligne)Cases à cocher Financement · Texte sur plusieurs lignes Votre besoin (500 caractères)Accord RGPD (obligatoire) · bouton « Envoyer ma pré-inscription »
Paramètres : notification à l’adresse de l’organisme, Répondre à = e-mail du visiteur, confirmation = page « Merci pour votre pré-inscription ».
A3iformations · Organisme certifié Qualiopi · Centre de passage TOSA · Support stagiaire « Les formulaires WordPress »