S’il y a quelque chose que tous les sites ont en commun, c’est bien le formulaire de contact.
Même s’il y a encore des irréductibles qui ne veulent pas être dérangés, on peut dire que la quasi-totalité des sites ont une page de contact.
Dès lors, pour mettre cela en place sur un site WordPress, il y a deux possibilités :
- Votre thème possède un modèle de page « Contact » ou un autre moyen d’inclure un formulaire et, dans ce cas, c’est tout bon.
- Passer par une extension pour inclure un formulaire dans votre page Contact.
Dans cet article, nous allons voir comment utiliser un plugin téléchargé plus d’1 milliard 300 millions de fois (au moment d’écrire ces lignes) ! J’ai nommé Contact Form 7 (CF7).
Bien qu’il soit assez simple d’utilisation, je tenais à rédiger une « recette » pour vous montrer comment intégrer des formulaires de contact plus ou moins évolués sur votre site.
Voyons de quoi se compose cet article dans le…
Contact Form 7 est une extension WordPress gratuite pour créer des formulaires de contact simplement et rapidement.
Flexible grâce à la présence de nombreux champs personnalisables, elle permet aussi de lutter contre le spam.
Configurer un formulaire de base
Une fois que vous aurez installé et activé Contact Form 7 (jetez un œil à ce tuto pour découvrir comment installer un plugin), vous verrez qu’un élément Contact a été ajouté dans le menu (sous Commentaires).
Comme vous pouvez le voir, le plugin a été traduit en français par de gentils contributeurs 🙂
D’entrée de jeu Contact Form 7 vous informe que vous êtes protégés du spam via Akismet ou reCAPTCHA.
Flamingo, également conçue par Takayuki Miyoshi, le créateur de CF7.
Grâce à elle, vous pouvez sauvegarder en base de données tous les messages soumis dans vos formulaires. Sans ça, vous ne les auriez que dans votre boîte de réception (mais ça vous suffira peut-être).
Vous arrivez sur la page suivante qui comporte 4 onglets différents :
- Formulaire
- Messages
- Réglages additionnels
Il y en a un formulaire présent par défaut. Voyons à quoi correspondent les différentes options :
Saisissez le titre de votre formulaire
Cette première section sert à donner un nom à votre formulaire. Appelez-le « Contact », ou comme bon vous semble.
Vous pouvez aussi lui donner un nom particulier, si le formulaire que vous créez doit être placé sur une page spécifique (formulaire de support, de demande de devis, etc).
Un bouton Enregistrer est également présent. N’oubliez pas de vous en servir une fois que vous aurez apporté vos modifications.
Onglet « Formulaire »
Cette section contient le code HTML de votre formulaire de contact. Plusieurs paragraphes sont présents (balises
Détaillons tout cela pour mieux comprendre.
Le code ci-dessus affichera le texte « Votre nom (obligatoire) » puis le champ texte associé au nom.
Dans la seconde partie de ce tutoriel, nous verrons comment créer des marqueurs. Vous verrez que leur syntaxe n’est pas très importante.
Les champs email, sujet et message sont structurés de la même façon. Le dernier élément entre crochets – – embarque le marqueur du bouton de validation du formulaire.
Utilisations des marqueurs
Les boutons au-dessus du formulaire vous permettent d’ajouter toutes sortes de champs dans les formulaires que vous créez : texte, email, date, menu déroulant, boutons radios, quiz et même envoyer des fichiers.
Nous verrons comment les configurer dans la partie « Ajouter des champs supplémentaires » de cet article.
Onglet « Email »
Etudions les champs de cette section et ce qu’ils contiennent :
Pour : L’email vers lequel le message doit être envoyé (votre email ou celui de votre client).
De : Email de l’expéditeur. Le nom est indiqué avant l’email par le marqueur.
Il est important de bien garder la structure NOM
Objet : Dans notre cas, le formulaire récupère le sujet indiqué par l’expéditeur grâce au marqueur. Cela dit vous n’êtes pas obligé de vous en servir. Si j’utilisais CF7 pour WPMarmite, je pourrais choisir le sujet suivant « Message de « .
En-têtes additionnelles : Ce champ est utile pour spécifier des personnes à mettre en copie et en copie cachée. Vous pouvez par exemple envoyer une copie de l’email à la personne qui vous contacte (on verra que nous pouvons le faire d’une autre manière juste après).
comcom>
com. Comme pour la copie normale, la structure NOM
Corps du message : Ce champ va servir à mettre en page le message que vous allez recevoir. Dans la capture d’écran, on voit que les marqueurs sont réutilisés.
Pour y voir plus clair, insérez uniquement le marqueur afin de n’avoir que le message de l’expéditeur (l’email et le nom étant déjà dans le champ De). En procédant ainsi, le message reçu ressemblera davantage à un message envoyé directement.
Une signature est ajoutée automatiquement par Contact Form 7 pour indiquer à partir de quel formulaire le message a été envoyé. Elle n’est peut-être pas optimale mais je vous conseille de la conserver pour vous rappeler de la provenance de l’email. Vous pouvez l’éditer à votre guise pour la rendre plus pertinente.
Cette option sert à exclure les lignes pour lesquelles le marqueur n’a pas été indiqué par l’expéditeur. Par exemple, si vous avez un champ Ville et que la personne ne remplit pas ce champ, la ligne devant afficher le marqueur Ville ne sera pas affiché. Vous voyez où je veux en venir ?
Envoyer cet email au format HTML :, cochez la case pour recevoir les emails de contact au format HTML. Dans la plupart des cas, ce n’est pas nécessaire.
Pièces jointes : Dans le cas où vous donnerez la possibilité d’envoyer des pièces jointes. Il faudra indiquer le ou les marqueurs correspondants dans ce champ pour les recevoir (ne vous étonnez pas de rien recevoir si vous avez laissé ce champ vide).
Email (2)
À partir du moment où l’on a la possibilité de mettre des personnes en copie, on peut se demander à quoi sert un second champ d’email.
Ce champ est utile si vous désirez envoyer un message structuré différemment.
Onglet « Messages »
Ensuite viennent les messages d’erreur et de réussite qui s’afficheront en retour lors de l’envoi de l’email.
Si tout se passe bien, le message de réussite s’affichera (le premier), sinon un des messages d’erreur sera affiché selon le problème.
À vous de voir ce que vous désirez modifier. Vous pouvez personnaliser le message de réussite et d’erreur pour être moins froid. Voilà ce que j’ai mis à l’époque pour WPMarmite :
Onglet « Réglages additionnels »
La dernière section de cette page concerne des utilisations un peu plus avancées. Nous en verrons quelques une dans les 5 astuces proposées à la fin de l’article.
Vous voilà désormais en possession d’un formulaire de contact basique (n’oubliez pas de le sauvegarder grâce au bouton Enregistrer, situé en haut à droite de la page). Voyons maintenant comment le personnaliser…
Ajouter des champs supplémentaires
Après la découverte des différentes sections de la page d’édition d’un formulaire, intéressons-nous à l’utilisation des marqueurs, ce qui va nous permettre d’insérer de nouveaux champs.
Commençons par cliquer sur le premier élément :
Le champ texte
Une zone de configuration du champ texte s’affichera. Vous pouvez lui attribuer :
- Une obligation de le remplir ;
- Un nom ;
- Une valeur par défaut (que vous pouvez placer en filigrane) ;
- Une vérification antispam via le plugin Akismet (seulement utile si le champ texte est un nom) ;
- Un identifiant (pour le CSS) ;
- Une classe (toujours pour le CSS).
Dans l’exemple ci-dessous, j’ai rendu le champ obligatoire et ajouté du texte en filigrane (placeholder).
Une fois que le champ est configuré, on obtient un marqueur qu’il faut placer dans le code du formulaire.
Pour conserver un affichage classique, j’ai repris la structure en label des autres champs.
Maintenant que ce champ est dans le formulaire, il faut pouvoir le récupérer lorsqu’une personne enverra un message. D’où la présence d’un second marqueur.
Comme le plugin l’indique, il faut le placer dans le corps du message de l’email qui nous sera envoyé.
Enfin, vous pouvez aussi le placer dans le sujet si cela a un intérêt pour vous.
La procédure est la même pour tous les autres champs. Regardons en tout de même certains d’entres-eux.
Je vais passer sur le champ email, URL et les différents nombres pour vous parler du…
Champ date
Admettons que vous créez un formulaire de réservation : avoir une date d’arrivée et une date de départ est impératif. De la même manière que le champ texte, on peut configurer une date :
Pour la date d’arrivée, j’ai défini une date minimale et une date maximale afin d’éviter aux gens d’inclure de mauvaises valeurs.
La zone de texte
Pour rédiger leur message, les expéditeurs auront besoin d’une zone de texte.
Comme pour les autres champs, il faut insérer le premier marqueur dans le code du formulaire, et le second dans le corps du message.
Si votre formulaire permet à vos visiteurs de vous contacter au sujet d’une de vos offres, un menu déroulant peut s’avérer utile pour connaître l’offre sur laquelle le visiteur veut des informations.
Indiquez un choix par ligne et cochez éventuellement des options :
Note : Les boutons radios et les cases à cocher ont des fonctionnements similaires.
Confirmation
Avec ce champ, vous pouvez ajouter un bouton d’acceptation. Si le bouton n’est pas coché par votre visiteur, l’email ne pourra pas être envoyé.
Pour vous conformer en partie au RGPD, vous pouvez vous servir de ce champ pour demander à vos visiteurs d’accepter de votre Politique de confidentialité.
Dans ce cas, pensez à ajouter un petit texte dans ce style “En cochant cette case, j’accepte la Politique de confidentialité de ce site” au milieu de deux balises Au niveau des options, notez qu’il est possible de rendre cette case à cocher facultative. Si vous voulez filtrer les emails que l’on vous envoie, vous pouvez utiliser un quiz (je vous parle un peu plus tard d’une autre solution). Même si le spam est généralement bien traité par Contact Form 7, ajouter une question subsidiaire permet d’être certain que ses interlocuteurs sont bien humains. Dans ce cas, j’ai demandé quelle était la capitale de la France mais vous pouvez tout à fait demander la solution d’un petit calcul. Vos interlocuteurs peuvent aussi vous envoyer des fichiers. Cela peut être un cahier des charges, des images, etc. Bref, tout ce que vous voulez : Pour éviter de recevoir n’importe quel type de fichiers, il est recommandé de définir une taille maximale. Indiquez 1, 2, 3 ou 10mb, voire plus selon les fichiers que vous attendez. Dernière chose à savoir, il ne faut pas mettre le second marqueur ( ) dans le corps du message mais dans le champ Pièces jointes de l’email. Afin d’envoyer son message, votre interlocuteur devra cliquer sur un bouton Envoyer. Comme pour les champs étudiés précédemment, il est possible d’ajouter un identifiant et une classe afin de le personnaliser avec du CSS. Le libellé correspond au texte du bouton, il est donc important de le spécifier. Collez ensuite le marqueur dans le code du formulaire sur la gauche. Nous avons terminé notre tour des marqueurs proposés par Contact Form 7. Mais avant de passer à l’intégration de votre formulaire sur votre site, j’aimerais m’arrêter quelques instants sur les captchas. Tout à l’heure, pour pouvoir filtrer les emails, je vous ai indiqué qu’il était possible d’utiliser un quiz avec Contact Form 7. Mais il existe aussi une solution non native sur CF7, mais plus conseillée : l’utilisation d’un captcha. Un captcha est un test qui permet notamment de lutter contre le spam en différenciant les humains des robots. création d’un compte mail, valider un commentaire, envoyer un formulaire, etc.). Eh bien avant la mise à jour de cet article, je vous avais détaillé comment faire grâce à une autre extension conçue par le créateur de CF7 : Really Simple Captcha. Elle permet notamment de choisir la taille et le thème du captcha (couleur de fond et couleur des caractères). Entre temps (pour les versions de CF7 supérieures à la 4.3), Takayuki Miyoshi a viré sa cuti et recommande désormais l’utilisation de reCAPTCHA. Il s’agit d’un service de Google qui permet de prouver que vous n’êtes pas un robot en cochant une seule case. Si l’ordinateur a un doute sur votre état d’humain, il vous fait passer un petit test. Sur la page suivante, on vous invite à saisir une Clé du site et une Clé secrète. en haut à droite de la page. Renseignez les informations demandées en choisissant le captcha de votre choix (version 3 ou version 2). Google vous présente les différents types de captchas sur cette ressource. Une fois les infos remplies, Google vous affichera votre Clé du site et votre Clé secrète. Il ne vous reste plus qu’à les copier-coller dans les cases prévues à cet effet, cliquer sur Enregistrer les changements et vous êtes bon pour le service. Et pour tout savoir sur les captchas, WPMarmite a le guide qu’il vous faut, au sein duquel on vous présente notamment 6 extensions dédiées. Allez, comme promis, il est temps de passer à l’intégration de votre formulaire dans votre contenu. en haut à droite de l’écran. Pour insérer votre formulaire, il vous suffit de coller le code court (en anglais on parle de shortcode) dans l’article, la page ou le widget de votre choix. Bien sûr, ce ne sont pas les seules choses qu’il est possible de faire avec cette extension. Jetez un œil aux autres plugins qui se couplent à Contact Form 7 pour voir ce qu’ils peuvent faire. Pour donner la possibilité à vos visiteurs de contacter une personne ou un service particulier de votre entreprise, procédez de la façon suivante : com). Afin que cela fonctionne, il faut impérativement mettre le marqueur dans le champ Pour. Si, pour une quelconque raison, vous désirez obtenir l’IP de la personne qui vous contacte, insérez le marqueur dans le corps du message (par exemple sous la signature). De même, il est possible d’avoir la date et l’heure d’envoi de l’email. Vous allez me dire que cela correspond à la date et l’heure de réception de l’email et vous aurez raison. Mais bon, si vous en avez besoin, insérez les marqueurs et dans le corps du message. Si vous avez intégré votre formulaire dans un widget ou quelque par dans votre thème, connaitre la page exacte depuis laquelle le formulaire a été envoyé peut être intéressant. Pour cela, insérez le marqueur dans le corps du message ( retournera le permalien de l’article, à vous de voir donc). Je ne comprends pas trop pourquoi l’auteur a intégré ces fonctionnalités de cette manière mais bon, c’est comme ça. Il s’agit de : org cumulant plus de 5 millions d’installations actives. Il permet de créer des formulaires simples mais il ne sera pas toujours facile de créer des choses complexes avec lui. Vous devrez avoir quelques connaissances en HTML pour avoir un rendu correct. Si vous avez des bases en CSS, vous pourrez pousser la personnalisation grâce aux classes et identifiants qu’il est possible d’ajouter à chaque élément. je vous recommande plutôt Gravity Forms. Il permet notamment d’élaborer des formulaires grâce à de simples glisser-déposer. Ce qui – il faut le dire – place Contact Form 7 loin derrière. Mailchimp ou encore Paypal). Il y a vraiment de quoi faire. Exprimez-vous en publiant un commentaire ci-dessous. À propos de l’auteur Alex Créateur de WPMarmite et co-fondateur de WPChef, il a à coeur de vous proposer des ressources de qualité pour vous aider à créer, personnaliser et promouvoir des sites avec WordPress.Quiz
Et dans le formulaire :
Réponse
Envoi de fichiers
Bouton Envoyer
CAPTCHA
Pour insérer un captcha avec CF7, comment on fait ?
Intégrer un formulaire sur votre site
Sous le titre, vous constaterez la présence d’un shortcode :
Et oui, ce n’est pas plus compliqué 🙂
Je vous propose de terminer ce tutoriel par…
5 astuces pour personnaliser vos formulaires
Insérer un formulaire n’importe où
Laisser le visiteur choisir le destinataire
Obtenir l’IP du visiteur
Obtenir la date et l’heure de l’envoi
Obtenir l’adresse de la page d’envoi