Si l’ajout d’un formulaire à votre site vous semble être une évidence – c’est effectivement un grand classique de la page contact d’un site web – WordPress vous surprend peut être en ne proposant pas cette fonction par défaut. Dans cet article, nous verrons comment configurer Contact Form 7, l’extension de formulaire sans doute la plus ancienne de l’écosystème WordPress. Elle est Open source et gratuite, largement utilisée, dispose d’extensions complémentaires qui lui sont dédiées, et permet d’insérer dans vos pages des formulaires personnalisés et sécurisés.
Contact Form 7
Création et édition des formulaires
Une fois l’extension Contact Form 7 installée, il suffit de se rendre dans le menu Contact qui apparaît dans l’administration de WordPress pour créer un nouveau formulaire – ou modifier le premier formulaire par défaut.
Au clic sur le titre du formulaire, l’écran d’édition du formulaire est affiché :
On y retrouve :
- Le titre du formulaire – pour référence, il ne sera pas affiché aux visiteurs.
- Le shortcode (code court) sur fond bleu, à coller dans la/les page(s) où vous souhaitez faire apparaître le formulaire.
- 4 onglets qui vous permettent d’éditer le formulaire : les champs, l’email et les messages après l’envoi. Le dernier onglet pourra être utilisé pour quelques fonctions avancées mais le plus souvent, il reste vide.
Contact Form 7
Afficher le formulaire
Créez une nouvelle page ou éditez une page existante, puis collez dedans le Shortcode du formulaire. Exemple :
Affichez la page : le formulaire est présent. Un visiteur peut maintenant le remplir pour vous envoyer ses informations.
Contact Form 7
Créer des nouveaux champs de formulaire
Rendez-vous dans l’onglet Formulaire de Contact Form 7 pour l’éditer.
Ce qui est attendu dans cette zone :
- du texte au format HTML
- des Mails Tags spécifiques à l’extension (les codes entre crochets) qui sont remplacés par les champs du formulaire sur la page publique.
Par exemple, dans le formulaire par défaut, le premier champ est le suivant :
<label>Nom : [text* your-name autocomplete:name]</label>
- Le code entre crochets sera remplacé par un champ de type texte à l’affichage.
- Le libellé est situé dans la balise <label> et est nécessaire pour des raisons d’accessibilité.
L’ensemble est modifiable en éditant directement le texte.
Ajouter un champ dans CF7 : la méthode facile
Pour ajouter facilement un champ dans un formulaire de Contact Form 7, il suffit de placer le curseur à l’emplacement où l’on souhaite ajouter ce nouveau champ et de cliquer dans le menu sur le type d’élément que l’on veut insérer :
La fenêtre qui s’affiche dépend du type de champ sélectionné. Des options supplémentaires sont présentes pour les champs de type select, les boutons radio et les case à cocher, par exemple.
Exemple : insertion d’un champ de type texte
- Le type de champ est présélectionné et non éditable.
Une case à cocher optionnelle permet de rendre ce champ obligatoire. - le nom du champ est éditable. C’est le seul qui sera utilisé dans l’email.
Une case à cocher optionnelle permet de spécifier que c’est un nom complet qui est attendu (submitter name). - La valeur par défaut peut être définie.
Une case à cocher optionnelle permet de la rendre provisoire (placeholder).
Insérez les champs qui vous intéressent tout en affichant en parallèle le formulaire dans une page pour vérifier vos modifications. Le tout est relativement intuitif pour une prise en main rapide. Vous pouvez vous référer au manuel de l’extension pour avoir des précisions sur chaque type de champ.
La seule valeur à renseigner avec soin est celle du field-name puisqu’elle est à utiliser dans l’onglet E-mail.
Paramétrer
l’envoi des emails avec Contact Form 7
Le second onglet est crucial pour la réussite du formulaire : si on ne renseigne pas cette partie avec les bonnes informations, les emails ne partirons pas, arriverons sans aucune donnée intéressante à exploiter, ou le formulaire pourra être utilisé pour envoyer du spam.
Pour que les données renseignées dans le formulaire vous arrivent dans un email, il faut que les champs créés dans le premier onglet soient référencés ici.
Contact Form 7 utilise pour cela un système de Mail Tag (étiquette d’e-mail) : pour chaque champ ajouté dans le formulaire, un Mail Tag correspondant est utilisable.
Ci-dessous : une liste d’étiquettes d’e-mail (Mail Tags). Celles qui n’ont pas encore été utilisées sont en gras.
- Pour : le formulaire est envoyé à cette adresse email.
[_site_admin_email] est un Mail Tag qui affichera l’adresse e-mail de l’administrateur du site. Cette adresse est éditable dans le menu réglages > Général du panneau d’administration de WordPress. La documentation fournit la liste des mails tags spéciaux liés aux variables générales du site WordPress. - De : c’est l’expéditeur de l’email.
Par exemple :[_site_title] <info@supersite.fr>
(ou Gregoire Dupond <info@supersite.fr>). La configuration ci-dessus n’est valide que si :- l’adresse info@supersite.fr existe
- le domaine du site WordPress est supersite.fr
- Objet : c’est (on s’en doute) l’objet de l’email, dans lequel on peut inclure des Mail Tags.
Exemple : [your-name] via [_site_title]- affichera par exemple : Grégoire Dupond via supersite.fr
- Dans cet exemple, le Mail Tag est valable seulement si un champ qui a pour field name : your-name est bien présent dans l’onglet formulaire.
- L’objet est affiché dans la liste des mails reçus, mieux vaut éviter les noms sans intérêts comme « formulaire de contact » afin que l’objet ait une utilité.
- En-têtes additionnelles : une en-tête par ligne peut être ajoutée ici.
On peut laisser ce champ vide, mais par défaut un Reply-to: est suggéré, pratique pour répondre directement à l’expéditeur.
Exemple d’en-têtes :
Reply-to:[your-email]
Cc:supersitefr@gmail.com
Dans cet exemple, les entêtes permettent d’envoyer une copie de l’email à supersitefr@gmail.com et d’avoir une adresse de réponse dans l’email. - Corps du message :
Vous pouvez mélanger ici du texte ou du code HTML avec les Mails Tags.
Exemple :
Les Mails Tags en caractère gras ne sont pas encore utilisés dans l’E-mail : les informations renseignées par un utilisateur qui n’ont pas été référencées sur cet écran seront perdues. - Fichiers joints : si vous permettez à vos visiteurs de vous envoyer des
VirusPJ, ajoutez le champs nécessaire dans le formulaire et le Mail Tag correspondant dans l’E-mail. - Les dernières options sont des cases à cocher qui permettent
- d’envoyer le mail au format HTML
- de ne pas insérer dans l’email les lignes lorsque les champs n’ont pas été renseignés par l’utilisateur qui envoie le formulaire.
Paramétrer
les messages retournés par CF7
L’onglet Messages vous permet de paramétrer les messages affichés par le formulaire (par exemple en cas d’erreurs, mais aussi quand un formulaire a bien été envoyé – par exemple)
Vous pouvez choisir de personnaliser ces messages pour chaque formulaire créé.
Si le travail des traducteurs est très soigné, lorsqu’une formulation ne vous semble pas adaptée à votre formulaire, ou qu’elle sonne étrangement à vos oreilles, n’hésitez pas à l’éditer…
Veillez néanmoins à avoir une bonne compréhension du contexte et des raisons de l’affichage du message que vous reformulez.
Contact Form 7
Les réglages additionnels
Le dernier onglet permet d’utiliser quelques commandes spécifiques à Contact Form 7. Par exemple :
- id:un-nouvel-id
permet attribuer une id spécifique au formulaire - Classe:une-nouvelle-classe
permet d’attribuer une classe au formulaire - mail:off
pour que les mails ne partent plus.
L’onglet est le plus souvent laissé vide, à moins de besoins (très) spécifiques. Si vous souhaitez ajouter du javascript à votre formulaire pour le rediriger vers une nouvelle page une fois la soumission réussie, ce n’est pas ici que ça se passe, par exemple.
Configuration avancée de Contact Form 7
Ne charger les fichiers js et css que sur les pages où se trouve un formulaire.
Contact Form 7 est, comme à peu près toutes les extensions WordPress, livrée avec des liens vers des ressources aux formats javascript et css. Par défaut, ces Assets (ressources) sont disponibles sur toutes les pages du site. Qui peut le plus peut le moins… Il est possible de ne charger ces fichiers que dans les pages où ils sont vraiment nécessaires.
Pour cela, on édite le fichier wp-config.php (après backup) et on ajoute :
define('WPCF7_LOAD_JS', false);
define('WPCF7_LOAD_CSS', false);
Ainsi, ces Assets ne sont plus chargées par défaut sur toutes les pages.
Il faut néanmoins les appeler lorsqu’une page ou un block contient un formulaire. Pour cela, on ajoute une nouvelle fonction au fichier function.php du thème :
function load_cf7_assets() {
if (is_singular()) {
global $post;
if (
isset($post->post_content) &&
(
has_shortcode($post->post_content, 'contact-form-7') ||
has_block('contact-form-7/contact-form-selector', $post)
)
) {
if (function_exists('wpcf7_enqueue_styles')) {
wpcf7_enqueue_styles();
}
if (function_exists('wpcf7_enqueue_scripts')) {
wpcf7_enqueue_scripts();
}
}
}
}
add_action('wp_enqueue_scripts', 'load_cf7_assets');
Les pages contenant un shortcode de CF7 ou le Block Gutenberg de CF7 appelleront les ressources nécessaires. Notez que ce script diffère légèrement de celui proposé par l’auteur de l’extension.
S’assurer que les ressources sont bien appelées
En cas d’erreur de chargement d’une ressource, le formulaire peut avoir des fonctionnements incohérents ou inattendus. Vérifiez en jetant un oeil au code source ou via l’inspecteur du navigateur web que la classe no-js n’est pas présente dans la balise form. Si c’est le cas, les ressources js ne sont pas chargées et un certain nombre de fonctions ne seront pas supportées.
Rediriger le formulaire CF7 après l’envoi
Il est courant après l’envoi d’un formulaire de rediriger l’utilisateur vers une page de remerciement qui confirme la soumission et le bon enregistrement du message soumis.Un utilisateur pourrait même être surpris de ne pas être redirigé et de rester sur la page d’édition du formulaire qu’il vient d’envoyer. Quand c’est le cas, c’est souvent qu’il y a une erreur à corriger.
Rassurons notre utilisateur : dans la page où se trouve le shortcode du formulaire, ajoutons un Block HTML dans lequel nous collons ce script :
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
setTimeout( () => {
location = 'https://votre-site.com/merci';
}, 800 );
}, false );
</script>
La page « merci » doit bien entendu être publiée.
Enregistrer les données des formulaires dans sa base
Un formulaire rempli et soumis sans générer d’erreurs ne garanti pas le bon acheminement de l’email. Une erreur peut survenir si un domaine est mal configuré ou en cas de difficultés temporaires… Pour éviter de perdre un message, le mieux est d’enregistrer les données des formulaires en base de donnée. Les emails seront ensuite consultables depuis l’administration de WordPress. Plusieurs extensions existent pour cela : Flamingo est du même auteur que Contact Form 7 et fonctionne très bien, pa exemple.
Erreur lors de l’envoi du formulaire, ré-essayez plus tard…
- Vérifiez vos règles anti-spam. Elles sont appliquées à tous les formulaires de WordPress, pas seulement aux commentaires. Cela peut mener à des erreurs de configuration. Exemple : vous demandez l’adresse de son site à l’utilisateur avec un champ « URL », tout en marquant comme Spam les commentaires qui incluent « https » ; le formulaire sera considéré par WordPress comme du Spam et renverra une erreur. Si une classe spam est ajoutée au formulaire, vérifiez vos règles antispam.
- Vérifiez qu’aucune erreur de configuration n’est présente, ni dans l’onglet Formulaire, ni dans l’onglet E-mail de Contact Form 7. Les erreurs de configuration sont indiquées clairement depuis l’interface d’administration de CF7, et des liens vers la documentation sont fournis pour chaque erreur.
- Vérifiez que les champs destinataire et expéditeur sont bien renseignés : l’expéditeur doit être une adresse email valide dont le nom de domaine est aussi celui du site. Le destinataire doit être l’administrateur du site, et pas le visiteur qui rempli le formulaire : il pourrait l’utiliser pour envoyer des spams.
Gestion du SPAM
Si vous recevez trop de Spam depuis votre formulaire, il est possible d’ajouter un honeypot (pot de miel) ou une solution qui test l’envoi du formulaire pour s’assurer que ce n’est pas un robot qui le remplit. Préférez dans ce cas des solutions conformes RGPD (pour l’Europe) et compatibles avec CF7.
Si vous utilisez reCaptcha (solution supportée par le plugin) vérifiez bien vos obligations légales liées à la collecte des données des internautes : ceux-ci doivent accepter la collecte de données personnelles et leur envoi vers des serveurs situés aux USA avant de passer le test…
Comment WordPress envoie les emails
Mail() vs SMTP
Si la façon dont les mails sont envoyé par le serveur n’est pas gérée par l’extension, une bonne configuration dans ce domaine contribue largement à l’efficacité de vos formulaires.
Par défaut, WordPress envoie les emails avec la fonction mail() de PHP. Si techniquement le mail est bien envoyé par le serveur, il y a de fortes chances qu’il ne soit pas reçu. Si vos emails ne sont pas réceptionnés, passez au SMTP.
SMTP – Secure Mail Transfert Protocol
C’est une solution plus sure : les serveurs qui réceptionnent les emails acceptent davantage le courrier qu’un utilisateur authentifié a envoyé depuis un serveur connu.
Le principe est le suivant : WordPress envoie le mail comme un utilisateur lambda utilise son compte pour envoyer un courrier. Il faut donc :
- créer ou utiliser un compte mail existant dont vous avez les coordonnées de connexion
- enregistrer ces coordonnées dans WordPress :
nom d’utilisateur, mot de passe, port utilisé…
Il est possible de configurer l’envoie de mail via SMTP en ajoutant la fonction qui suit au fichier function.php de son thème :
add_action( 'phpmailer_init', 'set_phpmailer_details' );
function set_phpmailer_details( $phpmailer ) {
$phpmailer->isSMTP();
$phpmailer->Host = 'smtp.host.com'; // adresse du serveur mail
$phpmailer->SMTPAuth = true;
$phpmailer->Port = '465'; //25 or 465
$phpmailer->Username = 'info@votre-site.com';
$phpmailer->Password = 'VotreMotDePasse';
$phpmailer->SMTPSecure = 'ssl'; //ssl ou tls
}
Les informations ci-dessus sont à adapter en fonction de votre fournisseur de boite mail. Une autre solution est d’utiliser un plugin, par exemple le très bon fluentSMTP (Licence GPL).
Pour conclure
Un formulaire Contact Form 7 bien paramétré vous permettra de recueillir les informations des visiteurs qui acceptent de les remplir. Pour cela :
- Limitez le nombre de champs de votre formulaire.
- Proposez une bonne raison à vos visiteurs de remplir vos formulaires*.
- Respectez les lois concernant la collecte de données personnelles : c’est le moment de vérifier que votre Politique de confidentialité et que vos CGU sont bien publiés.
CF7 est un plugin GPL et gratuit, largement validé et qui permet d’aller au-delà du simple formulaire de contact. Apprendre à le paramétrer et l’utiliser vous permettra d’ajouter des fonctions importantes à votre site Internet. Vous n’avez pas le temps, préférez déléguer ? *Contactez-nous pour recevoir de l’aide !
Laisser un commentaire