En 2024, il est très important de rester en contact avec son public. La création d’une liste de diffusion avec un service comme MailChimp vous aide à fournir du contenu directement à vos abonnés.
Les listes de diffusion sont très utiles, mais que faire si un lecteur ou un client potentiel souhaite entrer en contact avec vous directement ? C’est là qu’interviennent les formulaires de contact ! Dans cet article, nous verrons comment configurer l’extension populaire Contact Form 7 pour votre site WordPress.
Comment installer Contact Form 7
Contact Form 7 existe depuis 2009 et a été téléchargé plus de 5 millions de fois au cours de la dernière décennie. Contact Form 7 peut être installé directement depuis le répertoires des extensions WordPress. Si vous recherchez « contact form 7 », vous pourrez trouver l’extension ainsi qu’une série de modules.
Une fois l’extension installée, vous verrez un élément de menu intitulé « Contact » dans la colonne latérale de votre tableau de bord WordPress. C’est là que tous les réglages de Contact Form 7 peuvent être configurés.
Les avantages et les inconvénients d’un formulaire de contact
Avant de nous plonger dans la configuration de Contact Form 7 pour votre site WordPress, passons rapidement en revue les avantages et les inconvénients de l’ajout d’un formulaire de contact sur votre site.
Avantages d’un formulaire de contact
- Un formulaire de contact permet aux lecteurs, clients et fans de vous contacter directement. Selon l’objectif de votre site WordPress, la possibilité pour un visiteur de communiquer avec vous peut être très importante. Par exemple, ne pas ajouter un formulaire de contact sur un site de eCommerce peut être financièrement préjudiciable pour votre entreprise car les parties intéressées ne pourront pas vous contacter si elles ont des questions sur votre produit.
- Un formulaire de contact ajoute une légitimité à votre site WordPress ou à votre entreprise. De nombreuses personnes considèrent la présence d’un formulaire de contact comme une sorte de facteur de confiance. L’idée de pouvoir vous contacter, en tant que propriétaire du site, rend votre contenu plus fiable.
Les inconvénients d’un formulaire de contact
- Le spam peut être un problème pour les formulaires publics comme les boîtes de commentaires et les formulaires de contact. Heureusement, avec Contact Form 7, vous pouvez filtrer les spams avec reCAPTCHA. Vous pouvez même configurer une règle de page Cloudflare pour vous protéger encore plus. Nous verrons plus loin dans cet article comment mettre en place une protection anti-spam dans Contact Form 7.
- Après avoir ajouté un formulaire de contact sur votre site, vous devrez probablement consacrer du temps à répondre aux messages. Ce n’est pas nécessairement une mauvaise chose, selon la façon dont vous le voyez. Certaines personnes redoutent le processus de réponse aux e-mails, tandis que d’autres l’apprécient vraiment. D’après notre expérience, les relations qui se manifestent par la présence d’un formulaire de contact sur votre site l’emportent généralement sur le coût de la modération, c’est pourquoi nous vous recommandons d’en profiter !
Vue globale des réglages de Contact Form 7
Créer un formulaire de contact avec l’extension Contact Form 7 est super facile. Pour commencer, cliquez sur Contact > Formulaires de contact dans votre colonne latérale WordPress. Sur cette page, vous pouvez visualiser tous vos formulaires de contact ainsi que les détails de leurs métadonnées associées.
Lorsque Contact Form 7 est installé pour la première fois, il crée également un exemple de formulaire. Avant d’entrer dans la création d’un formulaire de contact personnalisé, jetons d’abord un coup d’œil à l’exemple de formulaire pour avoir une meilleure idée du fonctionnement de Contact Form 7. Cliquez sur le formulaire de contact 1 pour voir les réglages du formulaire.
La page « Modifier le formulaire de contact » est divisée en quatre sections.
- Formulaire – Personnalisez votre modèle de formulaire de contact HTML avec une variété d’options de champs comme « texte », « e-mail », « cases à cocher », etc. Vous pouvez également écrire du HTML personnalisé dans la zone de personnalisation du formulaire.
- E-mail – Personnalisez le modèle d’e-mail et les réglages utilisés pour les e-mails de notification.
- Messages – Personnalisez les messages qui sont affichés après des actions spécifiques. Par exemple, vous pouvez définir un message unique à afficher après que quelqu’un a envoyé un formulaire de contact.
- Réglages supplémentaires – Spécifiez des extraits de code pour activer des fonctions supplémentaires comme le mode réservé aux abonnés, le mode démo et le saut d’e-mail.
Examinons maintenant de plus près chaque section et créons un formulaire de contact personnalisé !
Comment créer un formulaire de contact WordPress
Pour créer un nouveau formulaire de contact, cliquez sur Ajouter à côté de « Formulaires de contact ».
Donnez un nom au nouveau formulaire de contact, puis cliquez sur « Enregistrer ».
Dans la section « Formulaire », ajoutez le code HTML nécessaire pour votre formulaire de contact. Vous pouvez utiliser les différents boutons prédéfinis pour générer des codes courts pour les balises de formulaire les plus courantes. Pour vous faciliter la tâche, consultez les descriptions ci-dessous des balises de formulaire prédéfinies qui sont fournies avec Contact Form 7.
- Texte – Créez une balise de formulaire pour une seule ligne de texte. Les champs de texte sont utiles pour les prénoms, les noms de famille et autres textes qui ne nécessitent pas plusieurs lignes.
- E-mail – Créez une balise de formulaire pour une adresse e-mail.
- URL – Créer une balise de formulaire pour une URL.
- Tel – Créer une balise de formulaire pour un numéro de téléphone.
- Nombre – Créez une balise de formulaire pour un nombre. Contrairement aux champs de saisie « texte » ou « zone de texte », les champs « nombre » n’autorisent que des chiffres.
- Date – Créez une balise de formulaire pour une date.
- Zone de texte – Créez une balise de formulaire pour une zone de texte. Contrairement au champ de saisie normal « texte », un champ « zone de texte » permet de saisir plusieurs lignes de texte. Il est idéal pour saisir le corps du message.
- Menu déroulant – Créez une balise de formulaire pour un menu déroulant.
- Cases à cocher – Créez une balise de formulaire pour les cases à cocher.
- Boutons radio – Créez une étiquette de formulaire pour les boutons radio.
- Acceptation – Créez une balise de formulaire pour une case à cocher d’acceptation.
- Quiz – Créez une balise de formulaire pour une paire question-réponse.
- Fichier – Créez une balise de formulaire pour un champ de téléversement de fichier.
- Envoyer – Créer une balise de formulaire pour un bouton d’envoi.
Allons de l’avant et personnalisons un formulaire de contact. Dans un souci d’exhaustivité, nous allons créer un formulaire de contact qui utilise toutes les balises de formulaire prédéfinies dans Contact Form 7.
La balise de formulaire « Texte »
Lorsque vous cliquez sur une balise de formulaire prédéfinie dans Contact Form 7, vous verrez apparaître un menu contextuel comme celui ci-dessous. Dans ce menu, vous pouvez configurer les réglages de la balise de formulaire. En bas, vous verrez un code court qui peut être intégré dans votre modèle de formulaire de contact.
Pour la balise de formulaire « texte », nous utilisons les réglages ci-dessous pour créer un champ de saisie pour un nom.
- Type de champ – Champ nécessaire
- Nom – text-711 (généré automatiquement)
- Valeur par défaut – Your Name (utilisé comme texte de remplacement par défaut)
- Akismet – Non coché
- Attribut d’identification (CSS) – cf7-your-name
- Attribut de classe (CSS) – cf7-your-name
Ces réglages génèrent le code court ci-dessous.
[text* text-711 id:cf7-your-name class:cf7-your-name placeholder "Your Name"]Pour l’instant, il suffit de cliquer sur le bouton Insérer la balise pour ajouter la balise de formulaire au modèle de formulaire de contact. Nous ajouterons plus tard d’autres balises HTML pour structurer le formulaire.
La balise de formulaire « E-mail »
Ensuite, nous allons créer une balise de formulaire e-mail qui permettra à notre formulaire de contact de collecter des e-mails.
Pour la balise de formulaire « e-mail », nous avons configuré les réglages ci-dessous.
- Type de champ – Champ nécessaire
- Nom – email-632 (généré automatiquement)
- Valeur par défaut – Votre adresse e-mail
- Akismet – Non coché.
- Attribut d’identification (CSS) – your-email
- Attribut de classe (CSS) – your-email
Ces réglages génèrent le code court ci-dessous.
[email* email-632 id:email class:email placeholder "Your Email"]La balise de formulaire « URL »
Dans certains cas, vous souhaiterez peut-être ajouter un champ de saisie dans votre formulaire de contact pour récupérer le site web de quelqu’un. Bien que vous puissiez techniquement utiliser une balise normale de formulaire « texte » dans Contact Form 7, nous vous recommandons d’utiliser la balise de formulaire « URL » à la place. La balise de formulaire « URL » génère un champ de saisie qui valide les URL afin de s’assurer qu’elles sont correctement formatées.
Pour la balise de formulaire « url », nous avons configuré les réglages ci-dessous.
- Nom – url-601 (généré automatiquement)
- Valeur par défaut – Votre site web
- Akismet – Non coché.
- Attribut d’identification (CSS) – cf7-your-website
- Attribut de classe (CSS) – cf7-your-website
Ces réglages génèrent le code court ci-dessous.
[url url-601 id:cf7-your-website class:cf7-your-website "Your Website"]La balise de formulaire « Tel »
Comme pour les URL, vous pouvez également utiliser une balise de formulaire « texte » standard pour collecter des numéros de téléphone. Cependant, il est préférable d’utiliser la balise de formulaire « tel » pour s’assurer que le numéro de téléphone est valide.
Pour la balise de formulaire « tel », nous avons configuré les réglages ci-dessous.
- Nom – tel-842 (généré automatiquement)
- Valeur par défaut – Votre numéro de téléphone
- Attribut d’identification (CSS) – cf7-votre-numéro de téléphone
- Attribut de classe (CSS) – cf7-votre-numéro de téléphone
Ces réglages génèrent le code court ci-dessous.
[url url-601 id:cf7-your-website class:cf7-your-website "Your Website"]La balise de formulaire « Date »
La balise de formulaire « date » de Contact Form 7 vous permet de générer un sélecteur de date de type calendrier. Ce champ de saisie « date » est utile pour spécifier les dates de rendez-vous dans un formulaire de contact.
Pour la balise de formulaire « date », nous avons configuré les réglages ci-dessous.
- Nom – date-389 (généré automatiquement)
- Valeur par défaut – Votre date de rendez-vous
- Intervalle – Notre intervalle de date personnalisée.
- Attribut d’identification (CSS) – cf7-nomination-date
- Attribut de classe (CSS) – cf7-nomination-date
Ces réglages génèrent le code court ci-dessous.
[date* date-389 min:2020-09-15 max:2020-10-24 id:cf7-appointment-date class:cf7-appointment-date placeholder "Your Appointment Date"]La balise du formulaire « Zone de texte »
La balise de formulaire « zone de texte » vous permet de créer une zone de texte de plusieurs lignes qui permet aux visiteurs d’envoyer des messages plus longs. Les zones de texte sont surtout utiles pour saisir le corps d’un message.
Pour la balise de formulaire « zone de texte », nous avons configuré les réglages ci-dessous.
- Nom – textarea-795 (généré automatiquement)
- Valeur par défaut – Votre message
- Attribut d’identification (CSS) – cf7-votre-message
- Attribut de classe (CSS) – cf7-votre-message
Ces réglages génèrent le code court ci-dessous.
[textarea* textarea-795 id:cf7-your-message class:cf7-your-message placeholder "Your Message"]La balise de formulaire « Menu déroulant »
La balise de formulaire « menu déroulant » de Contact Form 7 vous permet de créer un menu déroulant avec plusieurs options. Les menus déroulants sont utiles dans les situations où vous souhaitez qu’un visiteur sélectionne une option spécifique à envoyer avec le formulaire. Par exemple, si vous dirigez une société de maintenance WordPress, vous pouvez configurer un menu déroulant qui permet à un visiteur de choisir entre les services que vous offrez.
Pour la balise de formulaire « menu déroulant », nous avons configuré les réglages ci-dessous.
- Nom – menu-24 (généré automatiquement)
- Options – Option 1, Option 2, Option 3, Option 4
- Permettre les sélections multiples – Coché
- Insérer un choix vide comme première option – coché
- Attribut ID – cf7-drop-down-menu
- Attribut de classe – cf7-drop-down-menu
Ces réglages génèrent le code court ci-dessous.
[checkbox* checkbox-948 id:cf7-checkbox class:cf7-checkbox use_label_element "Option 1" "Option 2" "Option 3"]La balise de formulaire « Cases à cocher »
La balise de formulaire « cases à cocher » vous permet de créer des cases à cocher HTML. Tout comme les menus déroulants, les cases à cocher peuvent également être utilisées pour sélectionner des options prédéfinies. Selon la nature de votre formulaire de contact, les cases à cocher peuvent mieux fonctionner que les menus déroulants. Par exemple, si vous avez un petit nombre d’options à choisir, une case à cocher réduit le nombre de clics nécessaires pour faire une sélection. En revanche, si votre formulaire de contact comporte un grand nombre d’options, un menu déroulant peut mieux fonctionner car il prend moins de place verticalement.
Pour la balise de formulaire « cases à cocher », nous avons configuré les réglages ci-dessous.
- Nom – checkbox-948 (généré automatiquement)
- Options – Option 1, Option 2, Option 3
- Entourer chaque élément avec un libellé – Vérifié
- Attribut ID – cf7-checkbox
- Attribut de classe – cf7-checkbox
Ces réglages génèrent le code court ci-dessous.
[checkbox* checkbox-948 id:cf7-checkbox class:cf7-checkbox use_label_element "Option 1" "Option 2" "Option 3"]La balise de formulaire « Boutons radio »
La balise de formulaire « boutons radio » vous permet de créer des boutons radio avec plusieurs options. Contrairement aux cases à cocher et aux menus déroulants, les boutons radio ne vous permettent de sélectionner qu’une seule option.
Pour la balise de formulaire « boutons radio », nous avons configuré les réglages ci-dessous.
- Nom – radio-708 (généré automatiquement)
- Options – Option 1, Option 2, Option 3
- Entourer chaque élément avec un libellé – Coché
- Attribut ID – cf7-radio
- Attribut de classe – cf7-radio
Ces réglages génèrent le code court ci-dessous.
[radio radio-708 id:cf7-radio class:cf7-radio use_label_element default:1 "Option 1" "Option 2" "Option 3"]La balise de formulaire « Confirmation »
La balise de formulaire « Confirmation » de Contact Form 7 peut être utilisée pour générer une seule case à cocher afin d’accepter les conditions générales. Avec les réglages de la balise de confirmation du formulaire, vous pouvez spécifier un message à afficher.
Pour la balise de « confirmation du formulaire, nous avons configuré les réglages ci-dessous.
- Nom – acceptation-545 (généré automatiquement)
- Condition – Cochez cette case pour accepter les conditions.
- Attribut ID – cf7-acceptation
- Attribut de classe – cf7-acceptation
Ces réglages génèrent le code court ci-dessous.
[acceptance acceptance-545 id:cf7-acceptance class:cf7-acceptance] Check this box to accept the terms. [/acceptance]La balise de formulaire « Quiz »
La balise de formulaire « quiz » peut être utilisée pour créer des questionnaires basiques avec questions et réponses dans votre formulaire de contact. Pour créer une question de quiz, utilisez le format suivant pour séparer la question et la réponse – Question|Réponse. Dans la capture d’écran ci-dessous, notre question est « En quelle année WordPress a-t-il été lancé ? » et la réponse (séparée par un caractère « | ») est 2003.
Pour la balise de formulaire « quiz », nous avons configuré les réglages ci-dessous.
- Nom – quiz-461 (généré automatiquement)
- Condition – Cochez cette case pour accepter les conditions.
- Attribut ID – cf7-quiz
- Attribut de classe – cf7-quiz
Ces réglages génèrent le code court ci-dessous.
[quiz quiz-461 id:cf7-quiz class:cf7-quiz "What year was WordPress released?|2003"]La balise de formulaire « Fichier »
La balise de formulaire « fichier » de Contact Form 7 vous permet d’ajouter une fonctionnalité de téléversement de fichier à un formulaire de contact. Cette fonctionnalité est utile dans les cas où vous souhaitez qu’un visiteur puisse téléverser une image ou un fichier PDF à envoyer avec le formulaire. Par exemple, si vous gérez un blog de photographie qui publie des contributions d’invités, vous pouvez ajouter une fonctionnalité de téléversement de fichiers pour que les gens puissent téléverser des images.
Dans les réglages de la balise de formulaire, vous pouvez spécifier divers réglages pour sécuriser votre formulaire. Nous vous recommandons de toujours fixer une limite de taille de fichier afin d’éviter que des utilisateurs malveillants ne téléversent des fichiers volumineux. De même, la spécification de « formats de fichiers acceptés » vous aide à verrouiller votre formulaire aux formats de fichiers que vous souhaitez et que vous attendez. En gardant à l’esprit l’exemple du blog de photographie, vous pouvez limiter la taille des fichiers à 1 Mo (1024 Ko) et les formats de fichiers acceptables aux formats d’image connus comme JPG et PNG.
Pour la balise de formulaire « fichier », nous avons configuré les réglages ci-dessous.
- Nom – fichier-658 (généré automatiquement)
- Limite taille maximale – 1024kb
- Formats de fichiers acceptés – jpg|png|gif
- Attribut ID – cf7-file
- Attribut de classe – cf7-file
Ces réglages génèrent le code court ci-dessous.
[file file-658 limit:1024kb filetypes:jpg|png|gif id:cf7-file class:cf7-file]La balise de formulaire « Envoyer »
Enfin, le dernier élément, mais non le moindre, est la balise « envoyer » de Contact Form 7. Comme vous l’avez peut-être deviné, cette balise de formulaire vous permet de générer un bouton « envoyer » pour un formulaire de contact.
Pour la balise de formulaire « envoyer », nous avons configuré les réglages ci-dessous.
- Libellé – Envoyer
- Attribut ID – cf7-submit
- Attribut de classe – cf7-submit
Ces réglages génèrent le code court ci-dessous.
[submit id:cf7-submit class:cf7-submit "Submit"]Comment structurer un formulaire de contact avec des balises de formulaire
Maintenant que tous nos formulaires ont été configurés, il est temps de créer le formulaire de contact. À ce stade, les réglages de votre formulaire de contact devraient ressembler à la capture d’écran ci-dessous. Prenez note de toutes les balises de formulaire que nous avons créées ci-dessus. Une fois les balises de formulaire en place, vous pouvez utiliser le code court [contact-form-7] pour intégrer le formulaire dans un article ou une page WordPress.
Dans l’éditeur WordPress, collez le code court dans un bloc vide.
Si vous utilisez l’éditeur classique de WordPress, vous pouvez coller le code court n’importe où dans l’éditeur de contenu.
Vous devriez maintenant pouvoir voir le formulaire de contact sur la page où vous avez ajouté le code court de Contact Form 7. Voici à quoi ressemble notre formulaire de contact avec les réglages mentionnés ci-dessus. Comme vous pouvez le voir, le Contact Form 7 convertit automatiquement les balises de formulaire en HTML valide qui se rend avec les styles CSS par défaut inclus avec votre thème WordPress.
Notre formulaire de contact, dans son état actuel, est un bon point de départ, mais il lui manque une caractéristique essentielle. Les balises de formulaire comme « texte », « e-mail » et « URL » supportent les caractères de remplacement, mais d’autres éléments comme les « cases à cocher » et les « boutons radio » ne le font pas. Sans libellés appropriés, les cases à cocher et les boutons radio ne seront pas très utiles aux visiteurs car ils n’ont pas de contexte. Heureusement, il est très facile d’ajouter des libellés dans Contact Form 7 !
Comment ajouter des libellés de formulaire dans Contact Form 7
Il y a deux façons d’ajouter des libellés aux balises de Contact Form 7. Pour les balises de formulaire ci-dessous, vous pouvez simplement envelopper la balise de formulaire avec un libellé.
- Texte
- URL
- Tel
- Nombre
- Date
- Zone de texte
- Confirmation
- Quiz
- Fichier
Regardez l’exemple de balise de formulaire « texte » ci-dessous.
[text* text-711 id:cf7-your-name class:cf7-your-name placeholder "Your Name"]Pour ajouter un libellé à cette balise, nous pouvons remplacer la balise par l’extrait ci-dessous. Notez l’occurrence supplémentaire de « Your Name » juste après la balise <label> d’ouverture.
<label> Your Name
[text* text-711 id:cf7-your-name class:cf7-your-name placeholder "Your Name"]
</label>
Voici à quoi ressemble ce changement sur notre formulaire de contact. Dans ce cas, le libellé nouvellement créé sert le même objectif que le texte de remplacement. Toutefois, si nous ne voulons pas spécifier de texte de remplacement dans la balise de formulaire, le libellé aidera à identifier l’objectif d’une zone de saisie spécifique.
Pour les balises de formulaire qui rendent plusieurs contrôles de formulaire comme les cases à cocher, les boutons radio et les menus déroulants, le fait d’entourer la balise de formulaire dans une balise entraîne une erreur. Cela se produit parce qu’une balise <label> n’est censée être utilisée qu’avec un seul contrôle de formulaire. La nature des cases à cocher, des boutons radio et des menus déroulants implique de multiples contrôles de formulaire, de sorte qu’ils sont incompatibles avec la solution de libellé par défaut.
Pour les cases à cocher, les boutons radio et les menus déroulants, vous avez dû ajouter un paramètre use_label_element dans le code court. Regardez l’exemple de balise de formulaire de case à cocher ci-dessous où use_label_element est en gras.
[checkbox* checkbox-948 id:cf7-checkbox class:cf7-checkbox use_label_element "Option 1" "Option 2" "Option 3"]Une fois que le paramètre use_label_element a été ajouté, vous pouvez ajouter un libellé directement au-dessus de la balise du formulaire dans l’éditeur de formulaire de contact.
Dans un souci d’exhaustivité, nous avons ajouté des libellés à toutes les balises de notre formulaire de contact. Vous n’aurez probablement pas besoin de faire cela pour un site en production, car certains formulaires comportent déjà des textes de remplacement. Quoi qu’il en soit, nous avons voulu montrer comment fonctionnent les libellés.
Voici à quoi ressemble notre formulaire de contact :
Configuration des réglages d’e-mail dans Contact Form 7
Maintenant que nous avons configuré la structure de notre formulaire de contact, il est temps de jeter un coup d’œil aux réglages de délivrabilité des e-mails dans Contact Form 7. Si les réglages de délivrabilité d’e-mail par défaut devraient fonctionner parfaitement pour la plupart des sites, il est néanmoins important de comprendre les différents réglages au cas où votre site ou votre cas d’utilisation nécessiterait une configuration particulière.
Pour accéder aux réglages de délivrabilité d’e-mail, allez dans l’éditeur du formulaire de contact et sélectionnez l’onglet « E-mail ».
Les réglages de délivrabilité d’e-mail de Contact Form 7 vous permettent de personnaliser les modèles et les réglages utilisés pour générer et envoyer une notification après que quelqu’un a envoyé un formulaire. Si vous utilisez des réglages incorrects, il est possible que vous ne soyez pas notifié de l’envoi d’un formulaire. Il est donc important de tester la délivrabilité du formulaire après avoir créé un formulaire de contact et modifié les réglages.
Contact Form 7 vous permet de configurer les réglages de délivrabilité d’e-mail suivants.
- Pour – l’adresse e-mail à laquelle envoyer une notification.
- De – l’adresse e-mail à partir de laquelle envoyer une notification.
- Objet – le sujet de l’e-mail de notification.
- En-têtes additionnelles – spécifiez des en-têtes d’e-mail additionnelles comme « reply-to ».
- Corps du message – le corps de l’e-mail de notification.
- Fichiers joints – indiquez les pièces jointes à inclure dans l’e-mail de notification.
Maintenant, passons en revue chaque réglage pour mieux comprendre comment il peut avoir un impact sur la délivrabilité d’e-mail dans Contact Form 7.
Le champ « Pour »
Assurez-vous de spécifier une adresse e-mail réelle pour le réglage « Pour ». Par défaut, Contact Form 7 affectera l’adresse e-mail associée à votre compte d’utilisateur WordPress au réglage « Pour ». Si votre e-mail WordPress n’est pas valide, veillez à la mettre à jour dans les réglages de votre profil et à modifier également l’adresse e-mail dans Contact Form 7.
Le champ « De »
Le réglage « De » doit utiliser le format suivant – Your Name. Pour les réglages de messagerie de notre formulaire de contact, nous utilisons kinstalife <[email protected]>.
Par défaut, Contact Form 7 remplira ce champ avec [email protected]. Vous devez vous assurer que cette adresse e-mail est valide, car certains hébergeurs WordPress bloquent l’e-mail sortant vers des adresses non valides. Vous pouvez soit créer un compte d’e-mail dédié pour [email protected], soit activer la fonctionnalité « catch-all » chez votre fournisseur de services de courrier électronique. Si vous ne parvenez pas à configurer cette adresse e-mail, nous vous recommandons de la changer pour une adresse de messagerie valide afin d’éviter les problèmes de délivrabilité.
Le champ « Objet »
Le réglage « Objet » peut être utilisé pour spécifier une ligne d’objet pour les e-mails de notification. Par défaut, le Contact Form 7 définit le sujet comme Nom du site “[your-subject]” – le nom du sujet dans le modèle de formulaire par défaut de Contact Form 7.
Si vous n’avez pas de balise de formulaire nommée « [your-subject] » idans votre formulaire, assurez-vous de la changer pour autre chose. Par exemple, si vous n’avez qu’une balise de formulaire pour saisir le nom d’un visiteur (par exemple [your-name]), vous pouvez changer la ligne d’objet en Vous avez reçu un message de [your-name].
Le champ « En-têtes additionnelles »
Sous « En-têtes additionnelles », vous pouvez spécifier des en-têtes d’e-mail « reply-to », « CC » et « BCC ». Par défaut, Contact Form 7 ajoute l’en-tête suivant – Reply-To: [your-email]. Cet en-tête vous permet de répondre à l’adresse e-mail spécifiée dans un formulaire de contact envoyé.
L’en-tête de réponse par défaut est parfait si vous utilisez la balise de formulaire de contact par défaut de Contact Form 7. Si ce n’est pas le cas, veillez à le modifier pour qu’il corresponde au nom de votre balise e-mail de formulaire. Pour notre formulaire de contact, le nom de la balise du formulaire de courrier électronique est « email-632 », donc la balise du formulaire de réponse devrait être changée pour Reply-To: [email-632].
Le « corps de message »
Ensuite, le « corps du message », qui détermine le contenu du corps de l’e-mail de notification. Le modèle par défaut de Contact Form 7 utilise les balises de formulaire [your-name], [your-email], [your-subject], et [your-message] et ressemble à ceci :
From: [your-name]
Subject: [your-subject]
Message Body:
[your-message]
--
This e-mail was sent from a contact form on kinstalife (http://kinstalife.com)Veillez à changer ces balises de formulaire si vous ne les utilisez pas dans votre modèle de formulaire de contact. Comme le formulaire de contact que nous avons créé recueille beaucoup d’informations, nous pouvons configurer le corps du message avec des balises de formulaire supplémentaires de cette manière :
Hello Brian, you’ve received a message from [text-711] ([email-632]).
Website: [url-601]
Phone Number: Tel-842
Appointment Date: date-389
Message: textarea-795
Réglages d’e-mail Contact Form 7 – Fichiers joints
Si votre formulaire de contact implique le téléversement d’un fichier, vous pouvez inclure ce fichier dans l’e-mail de notification. Dans notre formulaire de contact, nous avons une balise de téléversement de fichier appelée « [file-658] ». Ainsi, nous pouvons ajouter cette balise de formulaire sous « Fichiers joints » pour nous assurer que le fichier sera inclus dans l’e-mail de notification.
Problèmes de délivrabilité de Contact Form 7
Si vous constatez que le Contact Form 7 n’envoie pas d’e-mails, il y a quelques points que vous pouvez vérifier avant de contacter un développeur WordPress pour obtenir de l’aide.
- Vérifiez si votre serveur envoie d’autres types d’e-mails. Pour le tester, vous pouvez déclencher une autre action d’envoi d’e-mail en faisant un commentaire de test sur un article de blog ou en envoyant une demande de réinitialisation de mot de passe sur votre page de connexion WordPress. Si vous recevez un e-mail après avoir effectué l’une de ces actions, le problème est probablement lié à la configuration de Contact Form 7. Si vous ne recevez pas d’e-mail, contactez l’équipe de support de votre hébergeur et faites-lui savoir que vous avez un problème avec l’envoi d’em-ail.
- Assurez-vous que les champs « Pour » et « De » dans les réglages d’envoi d’e-mail de votre formulaire de contact sont correctement configurés. Pour que le Contact Form 7 fonctionne correctement, ces deux champs doivent être remplis avec des adresses e-mails réelles.
Messages d’envoi de Contact Form 7
Contact Form 7 vous permet de personnaliser divers messages d’envoi de formulaires. Ces messages s’affichent une fois qu’une certaine condition est remplie. Par exemple, si un visiteur oublie de remplir un champ nécessaire, Contact Form 7 affichera un message « Le champ est nécessaire ». Dans la plupart des cas d’utilisation, les messages par défaut devraient fonctionner parfaitement. Toutefois, si vous souhaitez personnaliser les messages, vous pouvez le faire en cliquant sur l’onglet « Messages » dans l’éditeur du formulaire de contact.
Comment sécuriser votre formulaire de contact
Les robots étant devenus plus intelligents et plus répandus au fil des ans, le spam est devenu un problème majeur pour les formulaires de contact. Comme les formulaires de contact sont généralement ouverts au public sur Internet, il est assez facile pour les robots de les détecter et d’envoyer des messages de spam dans votre boîte de réception. Heureusement, il existe plusieurs moyens de se prémunir contre les spammeurs et de protéger votre formulaire de contact.
Sécurisez Contact Form 7 avec reCAPTCHA
Si vous avez déjà envoyé un formulaire sur Internet, vous connaissez probablement déjà la technologie reCAPTCHA, développée par Google pour identifier le comportement automatisé des robots. Les anciennes versions de reCAPTCHA (V2) exigeaient des utilisateurs qu’ils passent un puzzle ou un défi.
La dernière version de reCAPTCHA (V3) ne nécessite aucune interaction de la part des utilisateurs. Au lieu de cela, elle surveille de manière transparente l’activité des utilisateurs en arrière-plan pour distinguer les visiteurs humains des visiteurs robots. Comme Contact Form 7 prend en charge reCAPTCHA V3, nous recommandons d’utiliser cette dernière version car elle offre une meilleure expérience utilisateur aux visiteurs.
Pour mettre en place reCAPTCHA, vous devez d’abord générer une clé API. Pour ce faire, connectez-vous à votre compte Google et allez sur la page de configuration du reCAPTCHA.
Passez par le formulaire d’inscription pour créer votre reCAPTCHA.
- Libellé – Précisez le libellé de votre choix.
- Type de reCAPTCHA – Contact Form 7 prend en charge la version 3 de reCAPTCHA, sélectionnez donc cette version.
- Domaines – Si votre site utilise un domaine racine, ajoutez la version non-www et www de votre domaine. Si votre site utilise un sous-domaine, ajoutez simplement le sous-domaine.
- Propriétaires – L’adresse e-mail associée à votre compte Google sera ajoutée par défaut en tant que propriétaire. N’hésitez pas à ajouter des adresses e-mail supplémentaires si nécessaire.
Une fois que vous avez rempli toutes les options, cliquez sur « Envoyer ». On vous présentera alors votre « clé de site » et votre « clé secrète » spécifiques au site. Veillez à conserver ces clés dans un endroit sûr, car vous devrez les ajouter à Contact Form 7.
Ensuite, cliquez sur « Contact » dans la colonne latérale de votre tableau de bord WordPress, puis cliquez sur Intégration. Sélectionnez l’option reCAPTCHA, et collez votre clé de site et votre clé secrète dans leurs champs respectifs. Enfin, cliquez sur Enregistrer les changements pour finaliser l’intégration de reCAPTCHA.
Après avoir configuré reCAPTCHA dans Contact Form 7, vous verrez un logo reCAPTCHA dans le coin inférieur droit de votre page de formulaire de contact. Cela signifie que le reCAPTCHA est actif et protège votre formulaire de contact contre les envois de spam.
Sécurisez votre formulaire de contact avec Cloudflare (facultatif)
Si vous utilisez Cloudflare pour protéger votre site, vous pouvez définir une règle spéciale pour votre page de formulaire de contact afin de réduire les envois de formulaires de contact non sollicités.
Pour ajouter une règle de page, cliquez sur l’onglet « Règles de page » et utilisez les réglages suivants pour sécuriser votre page de contact.
- Si l’URL correspond – *votre-domaine.com/votre-page de contact/*
- Contrôle de l’intégrité du navigateur – On
- Niveau de sécurité – élevé
La fonction « Contrôle d’intégrité du navigateur » de Cloudflare analyse les en-têtes HTTP. Si elle détecte un en-tête HTTP couramment utilisé par les robots et les spammeurs, elle refuse la demande à votre site. En fixant le « niveau de sécurité » à un niveau élevé, vous pourrez mettre au défi tous les visiteurs qui ont fait preuve d’un comportement malveillant au cours des deux dernières semaines.
En limitant ces réglages pour votre page de contact avec la règle de correspondance d’URL, les autres pages de votre site ne seront pas affectées par ces règles de page. Nous recommandons cette configuration parce que les pages normales en lecture seule de votre site ne nécessitent généralement pas un niveau de sécurité plus élevé.
Résumé
Contact Form 7 est l’extension de formulaire de contact la plus populaire, et pour cause ! Elle peut être utilisée pour créer des formulaires de contact basiques, des quizz de questions-réponses, des formulaires complexes qui prennent en charge les fichiers joints et les menus déroulants.
Mieux encore, elle intègre le support de reCAPTCHA pour vous aider à protéger votre formulaire de contact contre les spammeurs.
Utilisez-vous Contact Form 7 sur votre site WordPress ? Si ce n’est pas le cas, quel est votre choix préféré ? Faites-le nous savoir dans la section des commentaires ci-dessous !
Brian has been a WordPress user for over 10 years, and enjoys sharing his knowledge with the community. In his free time, Brian enjoys playing the piano and exploring Tokyo with his camera. Connect with Brian on his website at brianli.com.
Laisser un commentaire