Formulaire de contact WordPress : copiez, collez, c’est prêt
Support de formation site web · Stage 1 · Page d’accueil
Créer le formulaire de contact « Book – accueil » (version détaillée)
Pour chaque champ : lisez l’explication, cliquez sur Copier, puis collez dans WordPress (Contact → Ajouter). Tous les textes sont affichés à l’écran, vous pouvez aussi les sélectionner à la main.
Vivre de la céramique sans CAP : découvrez en 3 minutes les 5 compétences à maîtriser en priorité
Je fais le quiz (3 min) →1Créer le formulaire et le nommer
Dans l’administration WordPress, ouvrez Contact puis cliquez sur Ajouter. Le grand champ en haut de la page est le titre : il sert uniquement à vous repérer dans la liste des formulaires.
Book – accueil
2Onglet « Formulaire » : les champs que voit la visiteuse
Dans la zone de code, effacez tout ce qui s’y trouve, puis collez le modèle complet ci-dessous.
<div class="cm-book"> <div class="cm-title">Recevez le book</div> <div class="cm-sub">Laissez-nous vos coordonnées, nous vous l'envoyons très vite.</div> <div class="cm-row"><label><span class="cm-lab">Prénom</span>[text* prenom autocomplete:given-name placeholder "Votre prénom"]</label></div> <div class="cm-row"><label><span class="cm-lab">Email</span>[email* votre-email autocomplete:email placeholder "[email protected]"]</label></div> <div class="cm-row"><label><span class="cm-lab">Téléphone</span>[tel* telephone autocomplete:tel placeholder "06 12 34 56 78"]</label></div> <label class="cm-consent">[acceptance consentement] <span>J'accepte d'être recontacté(e) pour recevoir le book.</span></label> [submit "Recevoir le book"] <div class="cm-note">Vos coordonnées ne servent qu'à vous envoyer le book et à vous recontacter.</div> </div>
Que contient ce modèle ?
Il y a 4 éléments « interactifs » entre crochets. Chacun peut aussi être créé avec les boutons de la barre d’outils, au-dessus de la zone de code (texte, e-mail, tél., confirmation, envoyer) : cliquez sur le bouton, validez la fenêtre, et la balise s’insère à l’endroit du curseur.
| Champ | Bouton de la barre d’outils | Balise | Nom | Obligatoire | Texte d’exemple (placeholder) | Autocomplétion |
|---|---|---|---|---|---|---|
| Prénom | « texte » | [text* prenom …] |
prenom |
Oui | Votre prénom | given-name |
| « e-mail » | [email* votre-email …] |
votre-email |
Oui | [email protected] | email |
|
| Téléphone | « tél. » | [tel* telephone …] |
telephone |
Oui | 06 12 34 56 78 | tel |
| Consentement | « confirmation » | [acceptance consentement] |
consentement |
Oui (étape 5) | — | — |
| Envoi | « envoyer » | [submit "Recevoir le book"] |
— | — | — | — |
[text* prenom autocomplete:given-name placeholder "Votre prénom"], text est le type de champ, l’étoile * rend le champ obligatoire, prenom est son nom (réutilisé à l’étape 3), autocomplete aide le navigateur à pré-remplir, et placeholder est le texte gris d’exemple.Les classes de mise en forme
Les div autour des champs portent des classes CSS qui servent à la mise en page du formulaire. Copiez-les telles quelles.
| Classe CSS | Rôle (ne pas renommer) |
|---|---|
cm-book |
Conteneur de tout le formulaire |
cm-title |
Titre « Recevez le book » |
cm-sub |
Sous-titre d’accroche |
cm-row |
Une ligne de champ (libellé + saisie) |
cm-lab |
Libellé au-dessus du champ |
cm-consent |
Ligne de la case de consentement |
cm-note |
Note de confidentialité |
Construire le formulaire ligne par ligne (10 lignes)
À coller dans l’ordre, une ligne sous l’autre.
<div class="cm-book">
<div class="cm-title">Recevez le book</div>
<div class="cm-sub">Laissez-nous vos coordonnées, nous vous l'envoyons très vite.</div>
<div class="cm-row"><label><span class="cm-lab">Prénom</span>[text* prenom autocomplete:given-name placeholder "Votre prénom"]</label></div>
<div class="cm-row"><label><span class="cm-lab">Email</span>[email* votre-email autocomplete:email placeholder "[email protected]"]</label></div>
<div class="cm-row"><label><span class="cm-lab">Téléphone</span>[tel* telephone autocomplete:tel placeholder "06 12 34 56 78"]</label></div>
<label class="cm-consent">[acceptance consentement] <span>J'accepte d'être recontacté(e) pour recevoir le book.</span></label>
[submit "Recevoir le book"]
<div class="cm-note">Vos coordonnées ne servent qu'à vous envoyer le book et à vous recontacter.</div>
</div>
Vivre de la céramique sans CAP : découvrez en 3 minutes les 5 compétences à maîtriser en priorité
Je fais le quiz (3 min) →3Onglet « E-mail » : le message que vous recevez
Cet onglet règle l’e-mail envoyé à vous chaque fois que quelqu’un remplit le formulaire. Les étiquettes entre crochets sont remplacées par les réponses de la personne.
[_site_admin_email]
Nouveau lead - [prenom] - accueil
Nouveau contact via le formulaire "Recevoir le book" (accueil) Prénom : [prenom] Email : [votre-email] Téléphone : [telephone] Consentement : donné (case obligatoire) Page : [_post_title] ([_url]) Date : [_date] à [_time] -- Envoyé depuis [_site_title] ([_site_url])
Que signifient les étiquettes ?
| Étiquette | Remplacée automatiquement par |
|---|---|
[prenom] |
Prénom saisi par la personne |
[votre-email] |
Email saisi |
[telephone] |
Téléphone saisi |
[consentement] |
Case de consentement |
[_site_admin_email] |
Email administrateur du site (destinataire) |
[_site_title] |
Nom du site |
[_site_url] |
Adresse du site |
[_post_title] |
Titre de la page où le formulaire a été rempli |
[_url] |
Adresse de cette page |
[_date] |
Date de l’envoi (l’heure est dans [_time]) |
4Onglet « Messages » : ce que voit la visiteuse après l’envoi
Remplacez uniquement le premier message, « Le message de l’expéditeur a bien été envoyé ». Les autres messages (échec d’envoi, champ obligatoire, etc.) restent par défaut.
Merci ! Vous allez recevoir notre book dans la prochaine minute. Pensez à vérifier vos spams.
5Onglet « Réglages additionnels » : consentement obligatoire
Cette ligne empêche l’envoi tant que la case de consentement n’est pas cochée.
acceptance_as_validation: on
6Enregistrer et afficher le formulaire
- Cliquez sur Enregistrer (en haut à droite de la page).
- Contact Form 7 affiche le shortcode du formulaire, sous le titre. Copiez-le.
- Ouvrez la page d’accueil et collez le shortcode à l’endroit où le formulaire doit apparaître.
- Testez en remplissant le formulaire : vous devez recevoir l’e-mail « Nouveau lead » et la visiteuse voit le message de l’étape 4.
Vivre de la céramique sans CAP : découvrez en 3 minutes les 5 compétences à maîtriser en priorité
Je fais le quiz (3 min) →