Quick-Tutoriel.com Network & System Admin.
Contact Form 7 permet de gérer une multitude de formulaires de contact, de demande de renseignements ou autres de manière très flexible et très simplement. Ce plugin supporte les CAPTCHA, les filtres anti-spam, … . Découvrons ensemble comment l’utiliser sur son blog WordPress.
Tout d’abord, vous pouvez télécharger la dernière version du plugin ici.
Son installation est très classique, télécharger l’archive du plugin sur votre bureau.
Ensuite connecter-vous à l’interface d’administration de WordPress et aller dans Extensions -> Ajouter -> Envoyer puis choisissez votre plugin.
Cliquer sur Installer Maintenant et Activer l’extension.
Voilà pour ce rappel rapide sur l’installation d’une extension. Normalement un nouveau Menu appelé Contact a dû se créer dans le menu.
Un menu de contact par défaut s’affiche, celui-ci contient toutes les informations nécessaires comme le nom, l’adresse mail, le sujet, le message et le bouton envoyer.
Pour tester ce formulaire par défaut vous devez copier le code affiché en haut du formulaire (1) dans une nouvelle page.
Le squelette du formulaire avec les champs se trouve dans la partie Editeur du formulaire (2).
Vous devez créer une nouvelle page généralement nommée Contact, puis coller le code de votre formulaire dedans.
Enregistrer votre page de Contact, puis ensuite cliquer sur le bouton Prévisualiser les modifications.
En quelques minutes vous avez généré un formulaire de contact tout à fait opérationnel pour votre blog.
Voyons maintenant comment ajouter des informations dans notre formulaire. Par exemple je veux rajouter 2 champs supplémentaires, 1 champ pour la saisie non obligatoire du site internet et un autre pour donner la possibilité à l’utilisateur de joindre un fichier.
Revenez à l’interface de création du formulaire et cliquer dans la liste Générer un marqueur (tous les types de champs sont proposés ici). Sélectionner le champ texte de la liste.
Vous pouvez maintenant créer le champ, en saisissant les différentes informations pour son paramétrage.
En fonction des éléments saisis un code est généré, le code de couleur marron est le code à insérer dans le squelette du formulaire (notre cas ici). Le code de couleur verte est le code à insérer dans le squelette du mail (que nous verrons plus tard).
Voilà ce que donne le code :
Si nous publions le formulaire, pour l’instant nous avons ceci :
Maintenant ajoutons un autre champ, permettant à l’utilisateur d’envoyer un fichier depuis le formulaire. Dans la liste générer un marqueur sélectionner Upload de fichier.
Ce champ est un peu plus délicat à paramétrer. Voici ma configuration :
- 1 : Indiquer le nom du champ
- 2 : Vous pouvez paramétrer une taille maxi pour les pièces jointes, par défaut 1Mb.
- 3 : Vous pouvez spécifier les extensions qui seront autorisés. Les extensions doivent être séparées par un pipe |. Par défaut voici les extensions acceptées jpg, jpeg, png, gif, pdf, doc, docx, ppt,pptx, odt, avi, ogg, m4a, mov, mp3, mp4, mpg, wav, and wmv
- 4 : Code à insérer dans le squelette du formulaire
- 5 : Code à insérer dans le squelette du mail pour recevoir la pièce jointe avec le mail. Si vous ne rajouter pas ce code, la pièce jointe n’est pas diffusé avec le mail.
Voici ce que donne notre formulaire :
Maintenant voyons comment paramétrer le mail que nous recevrons pour être averti d’un nouveau message posté depuis notre blog.
- 1 : Saisir l’adresse de destination pour recevoir les mails du blog.
- 2 et 3 : récupère depuis le formulaire de contact le nom, l’adresse email et le sujet, grâce aux mots clés. Vous pouvez paramétrer le sujet du blog pour créer une règle pour mettre directement les mails dans un répertoire par exemple.
- 4 : Il est nécessaire de rajouter l’Id du champ du fichier d’upload, sinon la pièce jointe ne sera pas envoyée via le mail.
- 5 : Squelette du mail que vous recevrez en cas de contact sur votre blog.
Pour finir, vous pouvez aussi paramétrer les messages d’informations, d’erreurs, d’avertissements, … que l’utilisateur va recevoir.
Source : http://contactform7.com/
Faq : http://contactform7.com/docs/
That’s All.
bonjour,
avez vous regardé le tutoriel sur wpmarmite?
http://wpmarmite.com/contact-form-7/#personnaliser-formulaire
Bonjour,
Je souhaiterais pouvoir ajouter des pièces jointes dans mon email 2, réponse automatique de mon site à une conection sur le formulaire contact.
Y a-t-il une solution ?
D’avance merci,
Marianne Muglioni
Bonjour,
J’aimerai ajouter paypal avec contact forme 7, pouvez-vous me dire comment procéder.
Merci!
bonjour,
rajouter le champ « pièce jointe » plusieurs fois mais attention vous avez droit à un poids maximum.
bonjour, comment ajouter plusieurs pj ?
pour une cela fonctionne mais pas pour plusieurs fichiers. j’ai essayé le ; et , et meme un espace mais rien y fait
Bonjour,
ravi d’avoir pu vous aidez.
A bientôt sur Quick-Tutoriel.com
Merci beaucoup pour ces explications qui m’ont permis de faire un formulaire spécialisé. J’ai réussi à faire exactement ce que je recherchais et à régler tous les petits problèmes que je rencontrais :)
le site est très bien avec ce thème, j’aime beaucoup, le seul hic pour moi c’est qui utilise le script timthumb et après la faille de sécurité que ce script a eu, plus le souci de chmod que l’on peut avoir chez certains hébergeurs, pas trop confiance dans celui ci.
Bonjour,
merci pour ces compliments. Effectivement le thème est backstreet. Très bon thème, fluide et ergonomique.
A bientôt.
Merci pour l’explication concernant la pièce jointe dans un formulaire de Contact Form 7.
Au passage, très bon blog avec un excellent thème. Il me semble que c’est Backstreet… j’ai failli le choisir.
Merci pour ce tuto très bien expliqué ;)