Voir la source de Mettre en place un formulaire de contact sur Wordpress

<span data-link_translate_es_title="Configurar un formulario de contacto en WordPress"  data-link_translate_es_url="Configurar un formulario de contacto en WordPress"></span>[[:es:Configurar un formulario de contacto en WordPress]][[es:Configurar un formulario de contacto en WordPress]]
<span data-link_translate_en_title="Set up a contact form 7 on Wordpress"  data-link_translate_en_url="Set up a contact form 7 on Wordpress"></span>[[:en:Set up a contact form 7 on Wordpress]][[en:Set up a contact form 7 on Wordpress]]
<span data-link_translate_fr_title="Mettre en place un formulaire de contact sur Wordpress"  data-link_translate_fr_url="Mettre en place un formulaire de contact sur Wordpress"></span>[[:fr:Mettre en place un formulaire de contact sur Wordpress]][[fr:Mettre en place un formulaire de contact sur Wordpress]]
<span data-link_translate_it_title="Imposta un modulo di Contact Form 7 su WordPress"  data-link_translate_it_url="Imposta un modulo di Contact Form 7 su WordPress"></span>[[:it:Imposta un modulo di Contact Form 7 su WordPress]][[it:Imposta un modulo di Contact Form 7 su WordPress]]

{{#seo:
|title=Mettre en place un formulaire de contact sur Wordpress
|titlemode=replace
|keywords=Wordpress contact
|description=Vous verrez dans cet article comment mettre en place un formulaire de contact sur '''Wordpress'''. A l'aide du plugins Contact Form 7
|og:image=https://fr-wiki.ikoula.com/resources/assets/logo_ikwiki.png
}}


==Introduction== <!--T:1-->

<br />
Vous verrez dans cet article comment mettre en place un formulaire de contact sur [https://www.ikoula.com/fr/cloud-public/oneclick/wordpress Wordpress]. 
Nous utiliserons les plugins suivants: 
<br/>

* Contact Form 7 : https://fr.wordpress.org/plugins/contact-form-7/
* WP Mail SMTP: https://fr.wordpress.org/plugins/wp-mail-smtp/

<br />

==Installation contact form 7 Wordpress==


<br />
Tout va se dérouler via la page d'administration Wordpress, connectez vous à votre page d'administration Wordpress. 
<br />


Allez dans "Plugins" et cliquez sur "Add New" : 
<br />

[[Fichier:01 ajoutextension.PNG|center|Recherche des plugins sur wordpress]]
<br />

Recherchez "Contact Form 7" et cliquez sur "Install Now" : 
<br />


[[Fichier:02 contactform7.PNG|center|Ajout de l'extension Contact Form 7]]
<br />


Faites exactement la même chose pour le plugin "WP Mail SMTP" 
<br />


Allez ensuite dans "Plugins" et activez les plugins que l'on vient d'installer via le bouton "Activate" :
<br />


[[Fichier:ActivatepluginsWP.PNG|center|Activer le plugins Wordpress contact]]
<br />


==Configuration de Contact Form 7==


Nous allons dans un premier temps, configurer le plugin "Contact Form 7" qui servira à la mise en page du formulaire. 
Pour cela, allez dans "Contact" et cliquez sur "Add new" 



[[Fichier:Addnewformwp.PNG|center|COnfiguration de contact form]]



Ici vous pourrez définir le formulaire que vous souhaitez : 



[[Fichier:Configgform.PNG|Ecriture du formulaire de contact]]



Pour plus d'informations au niveau de la syntaxe et les différents champs disponible, nous vous invitons à suivre ce lien: https://contactform7.com/editing-form-template/



Ici, la partie qui nous intéresse le + est l'onglet "Mail" , au niveau du champ "To" vous pouvez définir vers quelle adresse mail le mail sera envoyé: 



[[Fichier:Configgform2.PNG|center|Configuration du mail]]



Une fois votre formulaire configuré, allez tout en bas et sauvegardez via le bouton "Save" 
L'interface va alors vous renvoyez un code comme ceci: 



[[Fichier:SaveFormWP.PNG|center|Génération du short code pour le formulaire de contact]]



<pre> [contact-form-7 id="10" title="My Form"] </pre> 


Ce code sera a mettre sur une page Wordpress qu'il faudra créer ou bien dans une page que vous disposez déjà. 
Le formulaire s'affichera ensuite: 


[[Fichier:Testenvoiemailform.PNG|center|Aperçu du formulaire de contact]]



Le formulaire est crée, il ne reste plus qu'à configurer l'envoie de mail via le plugin "WP Mail SMTP".



==Configuration de WP Mail SMTP==



Rendez vous dans "WP Mail SMTP" > "Réglages" : 



[[Fichier:Wpmailsmtp1.PNG|center|Configuration de WP Mail SMTP]]



Voici la configuration à effectuer: 



[[Fichier:Wpmailsmtp2.PNG|center|Settings]]



[[Fichier:Wpmailsmtp3.PNG|center|Settings 2]]



* Adresse e-mail d'envoi: Indiquez votre adresse mail celle ci sera utilisée pour l'envoie de mail '''(cette boîte mail doit exister)'''
* Nom de l'expéditeur: Indiquez par quel nom sera envoyé le mail
* Service d'envoi: Choisissez "Autre SMTP" 
* Hébergeur SMTP: Indiquez votre serveur de mail donc si mon nom de domaine est toto.com : mail.toto.com
* Cryptage: Aucun
* Port SMTP: 25 ou 587
* Authentification: Activé
* Identifiant SMTP: votre adresse mail
* Mot de passe SMTP: le mot de passe de votre adresse mail



Vous avez ensuite la possibilité de tester un envoie de mail via "E-mail de test" : 



[[Fichier:Wpmailsmtp4.PNG|center|Envoie d'un email test]]



Une fois fait l'envoie de mail via votre formulaire devrait fonctionner sans problème.

==Sécurité==



Pour des raisons de sécurités, il est '''fortement recommandé''' de mettre en place un "captcha anti-robot" cela permettra comme son nom l'indique d'éviter que des robots viennent spammer votre formulaire et donc votre boîte mail. 



Pour cela il faut créer une clé publique et secrète avec google: https://contactform7.com/recaptcha/ (cela nécessite cependant un compte Google) et suivre la procédure indiquez : 



Copiez la paire de clés dans l'écran d'administration WordPress du site que vous avez enregistré.



* Allez dans le menu admin Contact > Intégration.
* Trouvez le panneau reCAPTCHA et cliquez sur Configure Keys.
* Copiez la clé de site et la clé secrète dans les champs et sauvegardez-les.
* Enfin, placez un tag reCAPTCHA ([recaptcha]) dans le contenu de votre formulaire de contact.

[[Catégorie: WordPress]]
[[Catégorie: Hébergement mutualisé]] [[Category:Hébergement Web]]