formulaire

Formulaire de contact

WordPress est livré sans formulaire de contact !

Est-ce un défaut ? ... un oubli ? ... non, cela va dans l'esprit de WordPress.

En effet, il existe une multitude d'extensions proposant la création de formulaires, du plus simple au plus complexe aux 1000 possibilités. Par conséquent, chacun choisira juste selon ses besoins, ni plus ni moins.

Cas d'utilisation de formulaires :
  • Formulaires d'inscription
  • Formulaires de contact
  • Sondages
  • QCM
  • Compte-rendus d'activité
  • Rapports
  • etc.
Cette fiche vous présente le meilleur compromis qui soit :
  • En français (traduit en plus de 60 langues)
  • Téléchargé plus de 26 millions de fois
  • Simple d'emploi
  • Avec anti-spam
  • Permet la création de formulaires spécifiques
  • Captcha, etc.

Le plugin nommé est Contact Form 7 ...

Formulaire de contact : Contact Form 7

... et voici le formulaire fourni par défaut :

Formulaire de base

Après avoir rempli les champs le visiteur clique sur le bouton 'Envoyer'

  • WordPress crée un email avec les informations.
  • Puis il l'envoie au destinataire.
    Par défaut, l'adresse du destinataire est celle mentionnée dans les réglages généraux du site.

Comment ça marche ?

Plusieurs formulaires peuvent être créés.
Création du formulaire, 3 étapes :

  1. Coder le formulaire
  2. Coder et mettre en forme l'email qui sera envoyé.
  3. Enregistrer.

Utilisation du formulaire :

  1. Copier le shortcode associé au formulaire désiré.
  2. Le coller dans le contenu d'une page, d'un article, d'un widget.

Exemple de shortcode : [contact−form−7 id="725" title="Votre Profil"]


Étude de code du formulaire :

Nous allons analyser celui de ce formulaire :

<h3>Contactez-nous</h3>
 <p>Votre nom (obligatoire)<br />
  [text* your-name] </p>
<p>Votre email (obligatoire)<br />
 [email* your-email] </p>
<p>Sujet<br />
  [text your-subject] </p>
<p>Votre message<br />
  [textarea your-message] </p>
<p>[submit "Envoyer"]</p>

Reprenons ce code ligne par ligne :

<h3>Contactez-nous</h3>
<h3> et </h3> sont des balises html, elles ne seront donc pas affichées à l'écran.
"h3" signifie que le texte contenu (ici 'Contactez-nous'), sera en taille 'h3' (header N°3)
HTML accepte 6 tailles de headers du h1 (très grande) à h6 (petite).
<p>Votre nom (obligatoire)<br />
La balise "<p>" signifie : début de paragraphe.
"Votre nom (obligatoire)" est du simple texte standard.
"<br />" (ou "<br>" en html5) = retour à la ligne.
[text* your-name] </p>
"[text* your-name]" : tout ce qui est entre crochets sera interprété par l'extension Contact Form 7. Ici, il faut comprendre :
- "text" = zone de saisie de texte standard.
- "*" astérisque = saisie obligatoire.
- "your-name = nom d'une variable. La valeur de cette variable sera la saisie de l'utilisateur.
- Enfin, la balise "</p>" signifie : Fin de paragraphe.
<p>Votre email (obligatoire)<br />
"<p>" = début de paragraphe.
"Votre email (obligatoire)" = simple texte standard.
"<br />" = retour à la ligne.
[email* your-email] </p>
"[email* your-email]" = interprété par l'extension :
- "email" = zone de saisie de texte formatée en email.
- "*" astérisque = saisie obligatoire.
- "your-email = nom d'une variable. La valeur de cette variable sera la saisie de l'utilisateur.
- "</p>" = Fin de paragraphe.
<p>Sujet<br />
"<p>" = début de paragraphe.
"Sujet" = simple texte standard.
"<br />" = retour à la ligne.
[text your-subject] </p>
"[text your-subject]" = interprété par l'extension :
- "text" = zone de saisie de texte standard.
- "your-subject = nom d'une variable. La valeur de cette variable sera la saisie de l'utilisateur.
"</p>" = Fin de paragraphe.
<p>Votre message<br />
"<p>" = début de paragraphe.
"Votre message" = simple texte standard.
"<br />" = retour à la ligne
[textarea your-message] </p>
"[textarea your-message]" = interprété par l'extension :
- "textarea" = zone de saisie de texte multilignes.
- "your-message = nom d'une variable. La valeur de cette variable sera la saisie de l'utilisateur.
"</p>" = Fin de paragraphe.
<p>[submit "Envoyer"]</p>
"<p>" = début de paragraphe.
"[submit "Envoyer"]" = interprété par l'extension :
- "submit" = bouton de validation et d'envoi.
- "Envoyer" : Texte avec guillemets = Libellé du bouton.
"</p>" = Fin de paragraphe.
 Construction de l'email :

Le contenu des champs est très simple car intuitif. Il utilise les variables définies à l'étape précédente.
On utilise les crochets [ et ]. Par exemple, "Votre nom est [your-name]" affichera "Votre nom est Martin"

  • À = email du destinataire.
    Par défaut à l'adresse du destinataire est celle mentionnée dans les réglages généraux du site.
  • De = Texte standard ou variable, identifiant l'expéditeur, par exemple [your-name]
  • Sujet = Objet de l'email.
  • Corps du message = Mélange de texte standard et de variables.

2 applications pratiques :

Installer et activer le plugin Contact Form 7

AP N°1 :

  • Créer une page de contact.
  • Titre = 'Contactez-nous'
  • Contenu = Copier-coller le shortcode du formulaire ci-dessus, fourni par défaut.
    Il doit ressembler à ceci : [contact−form−7 id="630" title="Contactez-nous"]
  • Placer cette page dans le menu principal.
  • Afficher la page depuis le site.
  • Tester :
    • En observant que le formulaire est bien affiché.
    • En l'utilisant : compléter les champs, valider puis consulter ses emails.

AP N°2 :

  • Créer une page de profil.
  • Titre = 'Votre profil'.
  • Contenu = ceci :

    Votre profil

    Prénom

    Nom*

    Téléphone

    Age

    Je me présente

  • Placer cette page dans le menu principal.
  • Tester.

Découvrez les types de champs pouvant être utilisés dans le formulaire : Menu déroulant, cases à cocher, boutons radio, Captcha, Upload de fichier (pièces jointes), etc.


 

0 réponses

Un commentaire, une suggestion ?

Participez à la discussion.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *