WordPress | Formulaires Contact Form 7

St9ph — Sun, 31 Jan 2021 16:22:24 +0000

Donner à vos visiteurs un moyen de vous contacter sans divulguer votre adresse mail en mailto: à l’intérieur de vos balises permet de fournir un moyen de contact privé et anti-spam à l’intérieur de votre blog

Plan de l’article

Au menu :
Installation de l'extension CF7
Paramétrages du mail
Ajout du Widget
Personnaliser les balises du formulaire
Vers l'épreuve E5B

L’intérêt est moins flagrant que pour PrestaShop où un formulaire de contact existe dans le modèle natif (gestion du SAV, par exemple). De plus, dans WordPress, il vous faudra ajouter une extension pour proposer cet outil.

Même si l’extension JetPack est souvent ajoutée par défaut dans les configurations en ligne fournie par les hébergeurs comme WordPress.com, elle n’est pas préconfigurée dans les plateformes Educintel que la plupart des étudiants NDRC utilisent durant leur BTS. Cette extension est d’ailleurs limitée (certaines options sont payantes). C’est pourquoi nous utiliserons dans ce tuto une extension gratuite et sécurisable. J’ai nommé Contact Form 7

Installation de l’extension CF7

revenir au menu

en backoffice, aller sur “extensions” puis sur ajouter
Dans le moteur de recherche, tapez “Contact Form 7“
Vérifiez qu’il s’agit bien de celle de Takayuki Miyoshi et cliquez sur “installer“

Un nouvel item est apparu dans la liste des rubriques du bandeau du back Office

Paramétrages du mail

revenir au menu

Cliquer sur Contact puis sur “formulaire de contact 1” (il a été créé par défaut mais vous pouvez en créez d’autres correspondant à vos différents besoins de contact sur votre blog)
cliquer sur l’onglet “E-Mail” afin de paramétrer la manière dont vous recevrez les demandes

définissez dans la zone POUR, l’adresse mail à laquelle vous souhaitez recevoir la réponse (ou laisser par défaut pour la recevoir à l’adresse mail du compte administrateur du site)
donnez la zone DE l’indication d’expéditeur (par exemple : “lien de contact de la rubrique logiciels”, si vous avez plusieurs formulaires sur votre blog) ou laissez par défaut (le titre que vous avez donné à votre blog)
Corrigez éventuellement l’objet (par défaut, le titre de votre site suivi de l’objet renseigné par l’interlocuteur dans le formulaire)

Ajout du Widget

revenir au menu

Vous pouvez maintenant insérer le formulaire dans la page ou l’article de votre choix.

Positionnez vous sur le bloc précédent l’insertion
Cliquez sur le plus”+” d’ajout de bloc
dans la section “widgets”, choisissez “contact form 7”

choisissez (éventuellement) le formulaire à afficher (si vous en avez créé plusieurs)

C’est en affichage front office que vous verrez le formulaire.

enregistrez votre article ou votre page puis cliquez sur “visualiser”
Remplissez le formulaire pour l’essayer

après avoir cliqué sur envoyé, si vous avez rempli les champs correctement (adresse mail dans un format valide, nom et objet non vides), vous verrez apparaitre le bandeau de transmission :

rendez-vous dans votre boite mail (celle de l’administrateur du site ou celle que vous avez défini plus haut)

Personnaliser les balises du formulaire

revenir au menu

Nous prendrons deux exemples courants : transformer l’objet en menu déroulant de choix préétablis et l’ajout d’une case à cocher d’acceptation des CGU du site.

transformer l’objet en menu déroulant

cliquez sur contact, choisissez le formulaire à modifier et cliquez sur modifier
Cliquez sous la ligne “ objet”
glisser tout le texte “[texte” your-subject”]” et appuyez sur suppr
Cliquez sur formulaire et choisissez le bouton “menu déroulant“
Cliquez sur options et entrez les différentes valeurs de la liste (entrée pour passez à la ligne)

cliquez sur insérer la balise puis sur enregistrer

cliquez sur l’onglet mail
Dans la zone objet, remplacez [your-object] par [menu-xxx] – xxx étant le numéro de votre menu (visible sur la liste des champs entre crochets en haut du formulaire)
faites la même chose à l’intérieur de la zone “corps du message“

revenez en front office et testez le résultat

le résultat devrait ressembler à ceci :

La gestion des objets par menus vous permettra d’automatiser les règles de réception de votre logiciel de courrier (comme classer automatiquement les sujets dans des dossiers appropriés).

Ajout d’une case à cocher

Dans cet exemple, ce sera juste l’opt-in mais cela peut vous permettre de recueillir les choix d’options à l’intérieur de votre formulaire.

Dans la zone de code du formulaire, cliquez juste au dessus de “[submit “Envoyer”]“
cliquez sur le bouton “case à cocher”
cochez l’option “champ obligatoire” (pour l’opt-in)
écrivez “j’ai lu et j’accepte les CGU du site” dans la zone “options
Cliquez sur insérer la balise

C’est déjà fini. Rendez vous en front office pour constater l’apparition d’une case à cocher incontournable en fin de formulaire

En cas d’oubli, il est impossible de “poster” le formulaire.

Il est recommandé d’ajouter un lien afin de permettre de consulter les fameuses CGU avant de donner son accord ou pas :

affichez en front office votre page de cgu et copiez l’adresse URL dans la barre d’adresse de votre navigateur.
placez-vous dans l’onglet formulaire juste entre la balise CHECKBOX et la balise SUBMIT
saisissez le texte ci-dessous (en remplaçant l’url de google par celle que vous avez copiée

Votre url entre guillemets > nom du lien	insère le lien réactif avec le nom choisi
target = _blank	permet d’afficher la page sollicitée dans un nouvel onglet (afin de ne pas perdre le formulaire (target= _self ou rien pour l’affiche à la place)

la réception des données des formulaires par mail est évidemment insuffisante en marketing omnicanal. Le même développeur a donc complété son travail par une extension qui permet de collecter ces données directement dans WordPress ! Il s’agit d’un plug-in nommé Flamingo.

J’ai donc également consacré un article à ce complément. cliquer pour le lire.

Vers l’épreuve E5B

Attention, depuis la directive pour l’épreuve 2025, la gestion de formulaire se fait obligatoirement via Spectra. Cet article n’a donc plus d’intérêt pour l’épreuve mais reste une alternative pour vos créations personnelles

Dans la même catégorie :