Installer le plugin Contact Form 7
Dans la liste proposée choisissez « Contact Form 7 » Puis cliquez sur « installer »
Et enfin sur « activer maintenant »
Le Plugin est alors fonctionnel. Il ne reste plus qu'à le paramétrer.
Un nouveau menu est apparu dans la bande latérale gauche. C'est le menu « Contact ». Cliquez dessus
WordPress vous propose alors un formulaire nommé « Formulaire de contact 1 »
Nous allons personnaliser ce formulaire et nous l'introduirons ensuite à l'intérieur d'une page.
Par défaut WordPress place les champs suivants dans le formulaire :
-
Votre nom (obligatoire) • Votre email (obligatoire) • Sujet
-
Votre Message
-
Envoyer
Ce qui correspond à ce qui est visualisé dans la zone de gauche.
<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>
Dans la majorité des cas, le formulaire par défaut devrait vous suffire et vous n’aurez pas
à modifier la structure mais si cela ne vous convient pas, vous pouvez supprimer directement un élément en l’effaçant du formulaire et vous avez aussi la possibilité d’ajouter différents éléments grâce au bouton “générer un marqueur” situé sur la droite du formulaire.
Les options supplémentaires mises à votre disposition sont :
-
Champ texte
-
Champ email
-
Zone de texte
-
Menu déroulant
-
Cases à cocher
-
Boutons radio
-
Acceptation
-
Quiz
-
CAPTCHA (fonctionne avec le plugin really simple capcha)
-
Upload de fichier
-
Bouton de soumission
-
Exemple 1 : ajout d'un champ « Texte »
Choisissez le marqueur « Texte »
Copiez-Collez ce code à l'emplacement de votre choix dans la zone de gauche :
Exemple 2 : ajout d'une liste déroulante
Choisissez le marqueur «Menu déroulant»
Tapez l'un en dessous de l'autre les différents items de votre liste. Copiez-Collez ce code à l'emplacement de votre choix dans la zone de gauche :
Placer le formulaire dans une page
Copiez-Collez le code (shortcode) en haut de la page :
Créez une nouvelle page. Par exemple la page « Contact ». Collez ce code :
Voici le résultat :
