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
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
Au menu :
- installation de l’extension CF7
- paramétrage du mail
- ajout du widget CF7
- balises du formulaire personnalisées
Installation de l’extension CF7
- 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
- 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
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
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 « <label> 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
| <a href = Votre url entre guillemets > nom du lien </a> | 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.