Créer un formulaire de contact personnalisé pour votre blog WordPress

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 KiB  •  Date : 28 mars 2010 •  Hits : 5 858

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.

81 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. 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…

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

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

  5. Anonyme

    Crer un formulaire de contact personnalis pour votre blog WordPress…

    Un formulaire de contact est indispensable pour pouvoir communiquer avec des annonceurs, de futurs partenaires, ou tout simplement ses visiteurs Il existe plusieurs manires den crer un : nous retiendrons ici celle de lutilisation dun plugin. Pourquoi ?…

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

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

  8. Brian

    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.

  9. hany

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

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

  10. Antoine

    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

  11. zorg

    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.

  12. sam

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

        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+

  13. pako

    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.

  14. Scheck

    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.

  15. Erika

    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

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

  17. Veroby

    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

  18. Barbara

    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.

  19. Jérémy

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

      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.

  20. Carl

    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

      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.

  21. Luc

    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 ?

  22. Steeve

    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

  23. Aude

    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

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

  25. Florent

    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.

Laisser un commentaire