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 ?

N.B : ce tutoriel m’a été suggéré par Funnycat, webmaster du blog Infowebmaster.

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

Contact Form 7

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 275

Cré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.

Titre du formulaire (Noubliez pas de cliquez sur Sauvegarder)
Titre du formulaire (N’oubliez pas de cliquez sur 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.

Lastérisque = champ obligatoire
L’astérisque = champ obligatoire

Pour personnaliser votre formulaire, cliquez sur Generate Tag et optez pour le tag souhaité.

Exemple de création dune liste de case à cocher (avec les attributs : obligatoire et exclusif -un seul choix possible)
Exemple de création d’une liste de case à cocher (avec les attributs : obligatoire et exclusif -un seul choix possible)

Réglez les différentes options du champ, puis copiez-coller le bout de code sur fond marron dans votre formulaire à l’endroit souhaité.

Collez le code du tag à lendroit souhaité dans le formulaire
Collez le code du tag à l’endroit souhaité dans le formulaire

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 :

Le résultat du champ Case à cocher apparaîtra juste en dessous du message de linternaute
Le résultat du champ « Case à cocher » apparaîtra juste en dessous du message de l’internaute

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.

Collez le code du formulaire à lendroit souhaité dans la page
Collez le code du formulaire à l’endroit souhaité dans 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…).

Cas concrets d’utilisation

Actuellement, ce plugin est utilisé pour la page Contact de WordPress Channel.

Bref, un excellent plugin dont je ne me passe plus Et vous ? Lequel utilisez-vous ?

Crédits photo : .girl ferment.

83 commentaires
  1. Didier Kropp

    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 ?

  2. Didier Kropp

    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é

  3. gnuoulipo

    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…

  4. gnuoulipo

    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.

  5. Benjamin Denis

    C’est ma faute j’ai omis une petite partie du tutoriel :p
    Je corrige cela tout de suite !

    EDIT : c’est ok maintenant

  6. Benjamin Denis

    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

  7. gnuoulipo

    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

  8. nice outframe of things – better content written – highly appreciated

  9. LeBlogger

    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

  10. Chrisdenice

    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.

    1. Benjamin Denis

      @Chrisdenice : Nous l’utilisons pour Protuts est les réponses sont instantanées. Ton adresse email est de quelle forme ? Hotmail ?

  11. ninoochat

    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 ?

    1. Benjamin Denis

      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

      1. ninoochat

        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 !

  12. 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.

  13. 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.

    1. Aurélien Denis

      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…

      1. 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.

        1. Aurélien Denis

          Arf, je ne vois pas d’où peut venir ton problème… vu que ce plugin a toujours très bien fonctionné chez moi.

    2. Charlotte

      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

  14. 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

  15. 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.

    1. Aurélien Denis

      Généralement on peut le faire en HTML ou en CSS.

  16. 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+

      1. 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+

  17. Thierry4598

    Bonjour, mon formulaire fonctionne sauf le download des pièces jointes…merci de votre aide.

    Thierry

  18. 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

    1. Aurélien Denis

      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.

  19. 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.

  20. 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

    1. Aurélien Denis

      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.

  21. 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+

  22. nephelion

    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é

  23. 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

    1. Bonsoir Veroby,as-tu eu une réponse à ta question? Je voudrais faire exactement la même chose Merci.

  24. 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.

  25. 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 ?

    1. 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.

  26. 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.

    1. Aurélien Denis

      Je vous recommande de passer par un plugin comme Contact Form 7 ou encore mieux Gravity Forms pour gérer tout cela.

  27. Bonjour
    Peut-on ajouter un champ mot de passe dans contact form 7 ?
    Merci
    Hervé

    1. Aurélien Denis

      Il me semble que oui mais il faut peut être rajouté un plugin au plugin.

  28. 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?

    1. Aurélien Denis

      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.

  29. Martine Chanier

    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?

    1. Aurélien Denis

      En faisant tout simplement un lien vers la page du formulaire…

  30. 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 ?

    1. Aurélien Denis

      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.

  31. christèle

    Merci pour l’explication. Installation facilitée !

  32. Guillaume

    Bonjour,
    Comment on modifie la couleur du bouton « envoyer » ?
    Merci d’avance

  33. Bonjour,
    Je souhaite envoyer des pieces jointes par mail a partir adresse mail entre dans wordpress.
    Comment puis-je procéder?

  34. 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!

  35. Bonjour ,

    Comment modifier la couleur du bouton « envoyer » ?
    Merci d’avance.

  36. 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

  37. 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

  38. 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

    1. Aurélien Denis

      Il faut faire passer en champ caché l’ID du post… pas simple sans connaissances en développement.

  39. 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 ?

    1. Aurélien Denis

      Ça doit pouvoir se coder, mais je n’utilise plus ce plugin donc pas d’idées précises à vous communiquer.

  40. shagmar83

    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 !

  41. salut je veux savoir comment mettre un lien de téléchargement derrière mon bouton submit

  42. 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.

    1. Aurélien Denis

      Salut Florent, c’est toujours intéressant de proposer des extensions à la communauté WordPress. Tu vas la soumettre sur le répertoire officiel ?

  43. Mais c’est tout bonnement génial, de plus je ne crois pas que cela existe déjà ! Très bonne idée.

  44. Aurélien Denis, je voudrais un champ caché à ne pas remplir (AntiSpam) sur Contact Form 7.

    Comment faire ?

    Merci d’avance

    1. Aurélien Denis

      Il existe une extension de type Honeypot pour Contact Form 7.

  45. Merci Aurélien Denis
    C’est fait !
    J’ai installé l’extension CF7 Honeypot

Les commentaires sont fermés.