cette image représente le logo du formateur indépendant André Debaisieux

FORMATEUR DIGITAL WEB INDÉPENDANT

Installer le plugin Contact Form 7

 

Image 002

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.

 

Paramétrer Contact Form 7

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.

Image 003

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.

    Image 004

    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

Personnaliser Contact Form 7

Exemple 1 : ajout d'un champ « Texte »

Choisissez le marqueur « Texte »

Image 005

Copiez-Collez ce code à l'emplacement de votre choix dans la zone de gauche :

Image 006

Exemple 2 : ajout d'une liste déroulante

Image 007

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 :

Image 008

Placer le formulaire dans une page

Copiez-Collez le code (shortcode) en haut de la page :

Image 009

Créez une nouvelle page. Par exemple la page « Contact ». Collez ce code :

Image 010

Voici le résultat :

Image 011

André Debaisieux

Consultant formateur Web

06.30.00.91.44

andre.debaisieux@gmail.com

labe qualité region occitanie  datadock  certification cqp  

rgpd