Un formulaire de contact est indispensable pour pouvoir communiquer avec des annonceurs, de futurs partenaires, ou tout simplement ses visiteurs.
Il existe plusieurs manières d’en créer un : nous retiendrons ici celle de l’utilisation d’un plugin. Pourquoi ? C’est simple et rapide à mettre en place ; mais également très flexible à l’usage. Mais quelle extension employée, parmi les dizaines disponibles ?
Mon choix s’est arrêté sur Contact Form 7 : il fait ce qu’on lui demande, pas plus, ni moins ! Oublié les usines à gaz comme Cforms II beaucoup trop lourdes et complexes pour des usages normaux.
Téléchargement et installation du plugin
Plugin de création de formulaire de contact pour WordPress. Certifié sans faille de sécurité connue par BoiteAWeb.
Taille : 263,7 Ko • Hits : 6 642Création d’un formulaire
Sous l’onglet Outils, cliquez sur Contact Form 7. Cliquez sur le lien Ajouter un nouveau. Cliquez sur Untitled, saisissez un nom pour votre formulaire et validez le tout via le bouton Sauvegarder.
Dans la partie Form, on retrouve les différents champs du formulaire de contact par défaut à savoir, le Nom, l’adresse E-mail, le sujet et le message. Remarquez les deux astérisques juste après text et email : cela signifie que ces deux champs sont obligatoires pour soumettre le formulaire.
Pour personnaliser votre formulaire, cliquez sur Generate Tag et optez pour le tag souhaité.
Réglez les différentes options du champ, puis copiez-coller le bout de code sur fond marron dans votre formulaire à l’endroit souhaité.
Encadrez-le d’une balise <p> pour lui attribuer un titre ou une indication si nécessaire.
Mais ce n’est pas tout ! Si vous vous arrêtez ici, vous ne verrez pas s’afficher dans le message le résultat du champ des cases à cocher. En effet, dans la partie Mail, ce nouveau champ n’y apparaît pas. Pour ce faire, nous allons rajouter le Nom (Name) du champ dans la partie Corps du message entre crochets comme ci-dessous :
Intégration du formulaire
Une fois votre formulaire de contact bien paramétré, copiez le bout de code sous fond marron situé juste sous le titre du formulaire. Collez-le dans une page statique de votre blog, par exemple, Contact et sauvegardez la page.
Test du formulaire
N’oubliez jamais de tester votre formulaire pour voir si tout fonctionne bien (champs obligatoires, réception du message dans votre boîte mail…).
Bonsoir,
Y a t-il possibilité avec CF7 et dans le cadre de l’utilisation de cases à cocher de sélectionner un ou plusieurs destinataires ?
Si oui, comment faire ?
Merci par avance des réponses que vous voudrez bien m’accorder.
Cordialement
Bernard
Je pense que oui mais je n’utilise pas Contact Form 7, je lui préfère Gravity Forms bien plus puissant et fiable.
Merci Aurélien Denis
C’est fait !
J’ai installé l’extension CF7 Honeypot
Aurélien Denis, je voudrais un champ caché à ne pas remplir (AntiSpam) sur Contact Form 7.
Comment faire ?
Merci d’avance
Il existe une extension de type Honeypot pour Contact Form 7.
Oui c’est fait ! https://wordpress.org/plugins/send-pdf-for-contact-form-7/
Cool, merci de ta contribution !
Mais c’est tout bonnement génial, de plus je ne crois pas que cela existe déjà ! Très bonne idée.
Salut à tous. Je suis en train de développer un plugin pour générer un PDF suite à un formulaire posté via Contact Form 7. Cela vous intéresse-t-il ?
Choix du formulaire qui va le faire, upload du logo d’entête, personnalisation du template en HTML pour le visuel du PDF, aperçu du PDF avec les shortcode du form à placer…
Idéal pour des inscriptions avec un pdf pré remplit à renvoyer.
Salut Florent, c’est toujours intéressant de proposer des extensions à la communauté WordPress. Tu vas la soumettre sur le répertoire officiel ?
salut je veux savoir comment mettre un lien de téléchargement derrière mon bouton submit
Bonjour et bravo
Il y a quelque chose que je ne comprends pas, comment fait-on pour afficher les données récoltées par le formulaire dans une page de mon site?
J’ai bien compris comment créer des formulaires mais je souhaite que les résultats apparaissent sur une page de mon site.
Par exemple, je veux que les gens qui organisent des tournois puissent afficher leur tournoi sur mon site via un formulaire, ils remplissent les champs et les données apparaissent directement dans un tableau sur la page tournois de mon site!
Si quelqu’un peut m’aider merci bcp !
Tu as fini par trouver ? ça m’intéresse !
Est-ce qu’il serait possible de rediriger le formulaire, une fois remplie, vers un fichier pdf par exemple, en fonction de la case cochée ?
Ça doit pouvoir se coder, mais je n’utilise plus ce plugin donc pas d’idées précises à vous communiquer.
Bonjour,
J’ai créée un formulaire avec ce plugin, qui fonctionne très bien.
J’insert un formulaire en bas de chaque article. Je souhaite pouvoir récupérer le nom de l’article quand je reçois le mail de l’utilisateur. Comment procéder ?
Merci d’avance 🙂
Il faut faire passer en champ caché l’ID du post… pas simple sans connaissances en développement.
Pouvez vous m’aide ou se trouve les messages ?
Bonjour,
Je cherche à faire quelque chose de spécifique avec Contact Form 7.
Je donne quelques explication :
J’ai une question en bouton radio du type Oui / Non.
Et je souhaiterais qu’au clic du Oui et seulement du Oui faire apparaître un champ obligatoire.
Je n’ai pas trouvé de solution avec Contact Form 7 mais peut-être y aurait-il une extension qui pourrait le faire ?
Auriez-vous une idée ? Une astuce ?
Merci
Bonjour,
Est-ce que quelqu’un pourrait m’aider à changer la couleur de mon bouton envoyer sur ma page de contact (qui est actuellement presque invisible car ton sur ton avec la couleur de mon background!)? J’ai essayé de modifier via firebug mais je n’y arrive pas…
Merci beaucoup. Voici l’url : http://victoire-de-charette-redaction-web.com/contact/
Victoire
Bonjour ,
Comment modifier la couleur du bouton “envoyer” ?
Merci d’avance.
Y-a-t-il moyen de créer un formulaire de contact avec PIÈCES JOINTES! J’ai essayé je réceptionne bien les message mais pas le fichier jointe!? pas de solution fiable si possible!
Un plugin est recommandé dans ce cas…
Bonjour,
Je souhaite envoyer des pieces jointes par mail a partir adresse mail entre dans wordpress.
Comment puis-je procéder?
Bonjour,
Comment on modifie la couleur du bouton “envoyer” ?
Merci d’avance
Merci pour l’explication. Installation facilitée !
J’utilise contact form et lorsque les messages me parviennent, c’est toujours WordPress qui apparaît dans le partie De:
Comment faire pour que ce soit autre chose que je déterminerai ?
D’autre part, comment définir la largeur des champs ?
Pour la question 1, il faut ajouter quelques lignes de code dans le thème ou un plugin. Pas de tutoriel encore disponible…
Pour la largeur des champs, en CSS. 😉
Bonjour Denis,
Merci pour l’article sur le formulaire de contact. J’aimerai lier le formulaire à une image «contactez-nous». Une fois le formulaire établi, comment le rattacher à l’image?
En faisant tout simplement un lien vers la page du formulaire…
Bonjour,
après avoir créer mon formulaire je teste et …. aucun mail dans ma boîte de réception, je re teste en me déconnectant d’admin et pareil d’où vient le problème?
Si vous êtes en local, il est probable que cela ne fonctionne pas. En ligne, à voir la fonction d’envoi de mail est opérationnelle. Le plus simple consisterait à utiliser un plugin pour passer par un serveur sortant type SMTP comme sur votre client de messagerie. Cela évite de nombreux bugs avec certains hébergeurs.
Bonjour
Peut-on ajouter un champ mot de passe dans contact form 7 ?
Merci
Hervé
Il me semble que oui mais il faut peut être rajouté un plugin au plugin.
Bonjour,
j’ai créé des formulaires et tout fonctionne sauf que l’icone ‘chargement’ tourne sans cesse lorsqu’on clique sur “envoyer”..
Je reçois bien le mail mais comment faire pour retourner sur la page contact dès que le mail est envoyé?
Merci,
C.
Je vous recommande de passer par un plugin comme Contact Form 7 ou encore mieux Gravity Forms pour gérer tout cela. 😉
Bonjour Benjamin,
est ce que contact form 7 peut activer ou desactiver des champs dynamiquement selon le profil de l’internaute, je m’explique, mon formulaire s’adresse au “Particulier” ou “Entreprise” et j’aimerai que quand il coche au début du formulaire son profil “Particulier” ou “Entreprise” certains champs disparaissent
est ce possible ?
hello
pour ma part j’utilise quform, payant , mais qui le mérite vraiment et qui est presque parfait.
presque parce que pas assez complexe pour gérer des conditions imbriquées.
merci samsab
je ragarde ca
tu as un exemple ici:
http://www.compenseo.fr/contact/
Bonjour Benjamin,
j’utilise ce plugin sur de nombreux sites web avec really-simple-captcha.
Je souhaiterais renforcer le captcha : avoir 6 caractères au lieu de 7.
Pourrais-tu m’indiquer comment procéder ?
Par avance, merci de ta réponse.
Bonjour,
J’ai la dernière version de Contact Form 7 (3.1.8.2). Ma demande intervient tard sur ce blog et je m’en excuse.
Pour un formulaire de boîte à idée, je voudrais pré-remplir des champs avec les informations sur l’utilisateur connecté (et non modifiables comme le permet cette nouvelle version) ; dans mon cas, l’utilisateur est forcément enregistré puisqu’il est membre et que seuls les membres ont accès à ce formulaire.
Merci et bonne fin de journée
Bonsoir Veroby,as-tu eu une réponse à ta question? Je voudrais faire exactement la même chose Merci.
bonjour,
je cherche un moyen de contrôler les champs de saisie,
je voudrais par exemple que le champ code postal qui de longueur 5 caractères (j’y suis arrivé) est forcément zone numérique
ou que le champ téléphone est de 10 chiffres par exemple
j’ai beau farfouillé dans le FAQ du forum contact form7 mais je n’ai pas (encore) trouvé
bonjour
j’ai des formulaires un peu longs qui me posent pb en cas d’erreur de remplissage de champs par l’utilisateur. l’écran ne remonte pas directement au champs incriminé s’il est un peu haut par rapport au bouton “envoyer”.
y a t il un truc pour forcer à revenir sur le champs qui merdoie?
exemple ici http://www.compenseo.fr/contact/projet-crci/
merci pour vos lumières.
A+
Bonjour,
J’ai suivi à la lettre plusieurs fois ce tuto pour créer mon formulaire de contact mais lorsque je fais un test et que je clique sur “envoyer”, rien ne se passe, le chargement continu de tourner dans le vide et je ne reçois aucun mail.
D’où cela peut-il venir?
Merci et bonne journée
Problème de JavaScript à priori… il faudrait essayer avec le thème par défaut de WordPress, mettre à jour WordPress et les plugins et essayer à nouveau.
Bonjour à tous.
J’ai un petit problème avec mon formulaire et je me suis aperçu que certains avaient rencontré le même problème mais il n’y a pas de réponse à ce sujet.
Au moment de l’envoi de mon mail, le message suivant s’affiche: “Erreur lors de l’envoi du message. Veuillez réessayez plus tard ou contactez l’administrateur d’une autre manière “.
Est ce quelqu’un aurait une solution à ce problème ?
Merci beaucoup.
Bonjour,
Une question en marge :
Je souhaite proposé des téléchargement uniquement à des gens qui auraient remplis un formulaire avant. (Pour le téléchargement j’utilise l’excellent plugin “Wordpress Download Monitor”), je ne sais pas si on peut allier les deux où si une autre solution existe… ?
Merci
Je verrais plutôt un système d’espace membre avec accès limité aux téléchargements. Pas simple à mettre en place pour autant car bien qu’il soit facile de restreindre l’accès à des pages, c’est plus difficile pour les URLs directes des fichiers… il faut passer par .htaccess.
Bonjour, mon formulaire fonctionne sauf le download des pièces jointes…merci de votre aide.
Thierry
As-tu consulté la FAQ du site officiel de Contact Form 7 ?
bonjour
comment fait on pour régler la largeur des champs comme on le souhaite.
mon formulaire règle d’office les champs texte à 40 caractères de largeur. j’aimerais que la largeur soit de 100% de la la largeur dispo.
savez vous comment faire?
qui est le css qui régit cela?
le formulaire en question:
http://www.compenseo.fr/contact/
A+
Via CSS ?
hello
j’ai fouillé la faq de contact form 7.
ok on peut parametrer la taille physique des champs textes.
mais le formulaire reste pas tres sexy visuellement pour autant.
http://www.compenseo.fr/contact/
savez vous où trouver un tuto pour faire de beaux formulaires via CSS, et notamment comment interfacer cela proprement sous wordpress.
A+
Bonjour, comment peut on changer la taille du cadre de texte, celui la même ou j’écris ce texte, et comment donner une telle apparence.
Par avance merci.
Généralement on peut le faire en HTML ou en CSS.
Bonjour,
Pour ceux qui ont des problèmes pour poster avec les formulaires Contact Form 7, je vous propose une éventuelle solution :
Ne pas oublier de mettre les “” autour de l’email. Par exemple
En espérant que cela puisse aider ceux qui aurait fait la même erreur que moi 😉
++
Antoine
je remercie d’avance de votre réponse
bonjour,
j’ai un app wordpress 2.9.2 avec contact form 7 2.2.1. le probleme est ke kan je fait envoyer il ma’affiche :”Erreur lors de l’envoi du message. Veuillez réessayez plus tard ou contactez l’administrateur d’une autre manière” je ne sais d’ou le probleme.
Est-ce que tous les champs sont correctement remplis ? As-tu bien configuré le plugin en indiquant le destinataire ?
Peut-être une restriction lié à ton hébergeur…
oui tout et en règle.
d’ailleurs mnt j’ai essayer d’executer le cas concret en dessous;il me confime que c’est envoyé.mais en vérifions c’est pas le cas.
Arf, je ne vois pas d’où peut venir ton problème… vu que ce plugin a toujours très bien fonctionné chez moi. 🙁
merci en tout cas 😀
Bonjour,
Je me permet de vous interpeller car j’ai le même problème impossible d’envoyer un mail j’ai un message d’erreur. Je voulait savoir si il été possible que se soit par ce que je suis en local?? sinon si quelqu’un peut m’aider à résoudre se problème sa serai super.
Merci d’avance
Un grand merci. Lorsqu’on n’y connait rien en programmation, on est très heureux qu’il y ait des gens pour partager l’information. 😉
Bonjour, mon formulaire contact form 7 fonctionne à merveille mais quand on appuie sur envoyer (le mail part) la page reste blanche on n’est pas redirigé vers la page contact. Comment remédier à cela ?
Salut,
utilises-tu la dernière version du plugin (7.2.1) ? la dernière version de WordPress (2.9.1) ?
Si oui, essayes de créer un formulaire en reprenant celui par défaut et vois si tout fonctionne.
Si c’est le cas, c’est que tu as fait une erreur dans ton code à un endroit.
Tiens moi au courant 😉
J’utilise la dernière version pour tout mais le problème est réglé en fait j’avais modifié mon thème et en remettant le thème de base ça marche ! Je pense que dans le header.php il y a quelquechose qui ne va pas ! merci d’avoir répondu !
OK pas de soucis 😉
Ouai…les réponses issus de contact form 7 arrivent dans la boîte mail quand ils veulent…2 h plus tard ou jamais ? je préfère iservices bien qu’une extension WP serait mieux adapté pour moi qui suis sous wp.
@Chrisdenice : Nous l’utilisons pour Protuts est les réponses sont instantanées. Ton adresse email est de quelle forme ? Hotmail ?
Tès bon tuto,
On peut faire la même chose avec EmailMeForm avec juste un copier coller et pour n’importe quel blog/site.
Le résultat n’est pas mal non plus.
LeBlogger.com
nice outframe of things – better content written – highly appreciated
Nickel. Merci à toi.
C’est installé.
Merci pour cette réponse rapide. j’avais pensé à cette solution.
Malheureusement ça ne marche pas.
**************** Voici mon formulaire côté admin : **********************
Enquête sur l’opportunité de créer une association des
utilisateurs de logiciels libres à Martigues
Veuillez indiquer votre nom (obligatoire)
[text* your-name]
Votre Email (obligatoire)
[email* your-email]
Utilisez vous les logiciels libres…
[radio
usage “Toujours” “Fréquemment” “Occasionnellement” “Jamais”]
Êtes-vous favorable à la création d’une association à
Martigues qui regrouperait les utilisateurs de logiciels libres ?
[radio ChoixouiNon “Oui” “Non”]
Vous pouvez saisir ci-dessous votre point de vue sur
les logiciels libres
[textarea your-message]
Donnez le nom d’un logiciel libre que vous
utilisez :
[text Info /180]
************************************************************************
Les classes wpcf7 sont des classes CSS que j’ai rajouté pour la conformité
avec la charte graphique.
************* Voici ce que j’ai écrit dans le corps de message : ************
[your-message]
Voici les résultats de l’enquête :
[radio usage]
[radio ChoixouiNon]
[text Info]
***********************************************************************
*********** Voici le contenu du mail que je reçois ************************
Un
Voici les résultats de l’enquête :
[radio usage]
[radio ChoixouiNon]
[text Info]
***********************************************************************
Le mot Un correspond à ce que j’ai écrit dans textarea. Aucun des autres
champs que j’ai remplis n’est communiqué. Merci pour ton aide.
gnuoulipo
C’est normal ! Comme indiqué dans le tuto, il ne faut inscrire dans les crochets que le Nom (=Name dans la partie Form).
Donc, si tu supprimes radio et text cela devrait fonctionner normalement 😉
C’est ma faute j’ai omis une petite partie du tutoriel :p
Je corrige cela tout de suite !
EDIT : c’est ok maintenant 🙂
Après un nouvel essai, je précise ma question. J’ai bien reçu le message de retour du formulaire, cette fois il contient des éléments de la réponse du visiteur. Seul le champ de type textarea est transmis. J’avais placé des boutons radio … pas de trace de la réponse pourtant renseignée. Il s’agissait de choisir entre Oui et Non. Voilà ce que j’ai pu constater.
Merci, pour ce tutoriel qui me conforte dans la démarche que j’ai commencé à tester. Il me reste une question ultra naïve sans aucun doute : comment récupéres-tu les résultats du formulaire après soumission de la demande ? j’ai testé moi-même. J’ai reçu un mail du site puisque j’ai mis mon adresse personnelle lorsque j’ai rempli le formulaire, mais en tant qu’adinistrateur du site, où puis-je retrouver les renseignements fournis par le visiteur que j’étais ?
Merci par avance. Et désolé si la question paraît stupide…
Merci.
J’ai trouvé ce petit tuto http://ideasilo.wordpress.com/2007/10/07/contact-form-7-15/ à propos des Captcha et d’Akismet avec Contact Form 7, si ça peut en aider d’autres.
Merci aussi pour le plugin WP Ajax Cpmment je j’ai vu en action sur ton blog, je l’ai installé également. Je vais explorer ton blog pour te piquer des idées de plugins, hé hé 🙂
Merci pour ce tuto. Je viens de l’installer sur mon blog 🙂 et oui, il est très bien ce plugin. J’utilisais avant Contact Form (tout court), un peu trop rudimentaire à mon goût.
La question est de savoir si cela ne va pas attirer les spammeurs…
J’ai vu sur la page WordPress du plugin “The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and so on.”
Sais-tu si le filtrage Akismet est fait par défaut ?