Mettre en place un formulaire de contact sur Wordpress

De Ikoula Wiki
Jump to navigation Jump to search

es:Configurar un formulario de contacto en WordPress


Introduction


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


Installation contact form 7 Wordpress


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

Recherche des plugins sur wordpress


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


Ajout de l'extension Contact Form 7



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


Activer le plugins Wordpress contact



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"


COnfiguration de contact form


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


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


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:


Génération du short code pour le formulaire de contact


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


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


Configuration de WP Mail SMTP


Voici la configuration à effectuer:


Settings


Settings 2


  • 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" :


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.