Mettre en place un formulaire de contact sur Wordpress

De Ikoula Wiki
Jump to navigation Jump to search

Introduction


Vous verrez dans cet article comment mettre en place un formulaire de contact sur Wordpress. Nous utiliserons les plugins suivants:


Installation


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


Allez dans "Plugins" et cliquez sur "Add New" :

01 ajoutextension.PNG

Recherchez "Contact Form 7" et cliquez sur "Install Now" :


02 contactform7.PNG


Faites exactement la même chose pour le plugin "WP Mail SMTP"


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


ActivatepluginsWP.PNG


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"


Addnewformwp.PNG


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


Configgform.PNG


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é:


Configgform2.PNG


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:


SaveFormWP.PNG 


 [contact-form-7 id="10" title="My Form"]


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:


Testenvoiemailform.PNG


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 "Settings" > "WP Mail SMTP" :


06 WPmailSMTP.PNG


Voici la configuration à effectuer:


07 configureWPMailSMTP.PNG


08 configureWP2.PNG


  • From Email: Indiquez votre adresse mail celle ci sera utilisée pour l'envoie de mail (cette boîte mail doit exister)
  • From Name: Indiquez par quel nom sera envoyé le mail
  • Mailer: Choisissez "Other SMTP"
  • SMTP Host: Indiquez votre serveur de mail donc si mon nom de domaine est toto.com : mail.toto.com
  • Encryption: None
  • SMTP Port: 25
  • Authentication: ON
  • SMTP Username: votre adresse mail
  • SMTP Password: le mot de passe de votre adresse mail


Vous avez ensuite la possibilité de tester un envoie de mail via "Email Test" :


Testconfig.PNG


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.
Récupérée de « https://fr-wiki.ikoula.com/index.php?title=Mettre_en_place_un_formulaire_de_contact_sur_Wordpress&oldid=26161 »