Créer une page de contact sans plugin avec WordPress

Publié le 4 septembre 2010 par Aurélien Denis - 20 055 vues

La création d’un formulaire de contact avec WordPress est un classique ! 99% du temps, un plugin s’occupe de cet aspect. Toutefois, ce tutoriel vous apprendra comment créer un modèle de page de contact sans avoir recours à un plugin.

Présentation

Ce tutoriel est une reprise d’un article anglais très détaillé intitulé WordPress & jQuery Contact Form without a Plugin. Je me suis donc permis de raccourcir les étapes et de traduire le script en français. Tout les crédits reviennent cependant à son auteur !

Procédure d’installation

Étape n°1 – Téléchargement / téléversement

Commencez par télécharger l’archive ZIP française ou anglaise à partir des liens suivants :

Modèle de page WordPress pour créer un formulaire de contact sans plugin.

Contact form sans plugin, version française

Taille : 27,2 KiB • Date : 3 septembre 2010 • Hits : 2 753

Modèle de page WordPress pour créer un formulaire de contact sans plugin.

Contact form sans plugin, version anglaise

Taille : 25,9 KiB • Date : 3 septembre 2010 • Hits : 582

Décompressez le ZIP puis connectez-vous sur votre serveur FTP à l’aide de FileZilla, Cyberduck ou tout autre client FTP.

Rendez-vous ensuite dans le dossier /wp-content/themes/NOM_DU_THEME/

Déposez le contenu du dossier téléchargé dans le répertoire du thème à l’exception du fichier style.css. Vous risqueriez d’écraser votre feuille de styles !

Il nous faut donc copier / coller le contenu du fichier style.css dans votre feuille de styles du thème ; ajoutez les lignes de code en fin de fichier. Toutefois, si vous n’êtes pas à l’aise en CSS, vous pouvez ignorer cette étape et envisagez de styliser par la suite les différents éléments qui composent le formulaire de contact.

Étape n°2 – Modification du fichier contact-form.php

La seule étape compliquée de ce tutoriel est celle-ci !

A l’aide d’un éditeur de texte ou en utilisant la fonction d’édition de votre client FTP – présente sous FileZilla ou Cyberduck, modifiez le fichier contact-form.php. Localisez la ligne 51 puis indiquez l’adresse e-mail de destination ; autrement dit, celle à laquelle les messages seront envoyés.

Capture d'écran - Coda, modification du fichier contact-form.php

Saisissez votre adresse e-mail de destination (la vôtre)

Ce point est capital car vous ne recevrez rien tant que cette ligne n’aura pas été modifiée.

Étape n°3 – Création de la page de contact

Connectez-vous à présent dans votre administration WordPress puis déroulez le menu Pages et cliquez sur Ajouter.

Dans la section Attributs de la page, choisissez le modèle Contact Form. Faites Publier la page pour constater le résultat.

Capture d'écran - Attributs d'une page WordPress, modèle Contact Form

Attribuez le modèle Contact Form à votre page de contact

Pour vérifier le bon fonctionnement du formulaire, envoyez un message de test.

Désagréments

Il est fort probable que la mise en page ne concorde pas avec votre thème. En effet, il vous faudra recopier la structure du fichier page.php pour que votre formulaire de contact soit correct.

Vous pouvez – par exemple, faire une copie du modèle de contact. Écrasez la totalité du contenu par celui du fichier page.php puis recollez les seules parties internes du fichier contact-form.php. Suis-je clair ?

Le thème TwentyTen fonctionne parfaitement néanmoins.

Une fois de plus, les modèles de page nous viennent en aide pour créer des types de contenu très classique en matière de blogging qu’est le formulaire de contact. Certes, le strict minimum nous est proposé ici – notez tout de même la sécurité anti-spam, mais ce modèle conviendra à de nombreux utilisateurs. Et puis, c’est toujours un plugin en moins, n’est-ce pas ?

Crédits photo : Eole

Podcast: Télécharger (45.1MB)

Articles relatifs

53 réflexions au sujet de « Créer une page de contact sans plugin avec WordPress »

Le 4 septembre 2010 à 14 h 32 min, Olivier C a dit :

Ça c’est pas mal : avec ce tuto je vais peut-être pouvoir me passer de CformsII. Quand j’aurais un peu de courage pour m’atteler à la tâche j’essaierai votre solution et, le cas échéant, je vous ferais un retour.

Répondre ↓
Ping : Alléger WordPress
Le 5 septembre 2010 à 12 h 34 min, DavidT a dit :

Merci Aurélien,
je l’ai mis en place sur mon blog, et j’en ai fait un article ici :
Alléger WordPress

Ça fonctionne très bien, MERCI pour ce nouveau tuto.

DavidT – Affiliation-Systeme

Répondre ↓
- Le 5 septembre 2010 à 13 h 08 min, Aurélien Denis a dit :
  
  Oui, j’ai d’ailleurs accepté ton pingback !
  
  Par contre, ton commentaire était passé dans le spam… faut être moins promotionnel dans les mots-clés.
  
  Répondre ↓
  - Le 5 septembre 2010 à 13 h 16 min, DavidT a dit :
    
    Aah, ok, ce n’est pas la première fois que ça m’arrive, qu’entends tu par « moins promotionnel sur les mots clés »…? Je ne comprends pas vraiment l’erreur que je fait.
    
    Répondre ↓
    - Le 5 septembre 2010 à 14 h 16 min, Aurélien Denis a dit :
      
      Le fait que tu répètes ton nom et ton titre de site ET dans ton ET dans les champs du commentaire font doublon.
      
      Le mot « affiliation » ne doit pas plaire à Akismet non plus. Le fait aussi que ton lien soit déjà publié en pingback.
      
      Répondre ↓
      - Le 5 septembre 2010 à 16 h 13 min, DavidT a dit :
        
        OK, merci pour ces précisions, je vais en tenir compte
Le 11 septembre 2010 à 14 h 38 min, Grégoire Noyelle a dit :

Merci beaucoup Aurélien!
J’avais beaucoup de soucis avec mon hébergement qui acceptait difficilement les requêtes de type formulaire avec les plugin WP. Avec ton tuto, tout marche nickel.

Répondre ↓
- Le 11 septembre 2010 à 14 h 40 min, Aurélien Denis a dit :
  
  Un bon hébergeur c’est essentiel ! Je te conseille Mavenhosting que j’utilise pour WordPress Channel et Protuts.net.
  
  Répondre ↓
Le 22 septembre 2010 à 22 h 45 min, Samuel a dit :

Petite question, les messages de spam sont filtrés par ce système ?
Merci
Samuel

Répondre ↓
Le 27 septembre 2010 à 22 h 46 min, Samuel a dit :

En fait je reformule ma question, mais est-ce que ce formulaire permet d’installer un anti-spam ?
Merci
Samuel

Répondre ↓
- Le 28 septembre 2010 à 7 h 57 min, Aurélien Denis a dit :
  
  Non ne je ne pense pas… tu disposes juste d’un champ de sécurité classique dans lequel il ne faut rien saisir il me semble (c’est le piège).
  
  Répondre ↓
Le 29 septembre 2010 à 4 h 28 min, Olivier C a dit :

OK, ça marche,

J’ai encore du mal pour arranger le style mais le principal est là.

CformsII était efficace mais lourd. Merci pour ce super plan.

Répondre ↓
- Le 29 septembre 2010 à 13 h 09 min, Aurélien Denis a dit :
  
  C’est sûr que CformsII est un plugin vraiment très lourd…
  
  Répondre ↓
Ping : Le petit journal du web : HTML5, CSS3, jQuery, WordPress, Métiers du Web, Vie quotidienne et Nostalgeek
Le 10 novembre 2010 à 9 h 38 min, Sadlig a dit :

Le modèle de page contact form n’apparaît pas dans ma liste de choix de modèle de quoi peut venir ce souci? Je suis sur WP3 avec le thème twentyten.
Doit-on déclarer le nouveau template quelque part?
Merci de votre aide

Répondre ↓
- Le 10 novembre 2010 à 18 h 13 min, Aurélien Denis a dit :
  
  Non car le modèle en question est déclaré dans l’un ou l’autre des fichiers téléchargés… je t’invite à reprendre chacune des étapes pour voir si tu n’aurais pas oublié un point.
  
  Répondre ↓
Le 28 novembre 2010 à 7 h 21 min, David a dit :

Bonjour Aurélien,

Avec cette formule je n’ai pas d’anti-spam… peut-on en rajouter un, et si oui, comment?

Merci,

David.

Répondre ↓
- Le 28 novembre 2010 à 9 h 16 min, Aurélien Denis a dit :
  
  Tu n’as pas d’anti-spam à proprement parler si ce n’est un champ texte à ne pas remplir.
  
  Maintenant, tout dépend si tu vas recevoir du spam. Tu peux tester cette solution dans un premier temps puis passer sur un plugin WordPress.
  
  Répondre ↓
  - Le 23 septembre 2011 à 0 h 49 min, Olivier C a dit :
    
    Tiens ! Je retrouve avec plaisir cette page (ainsi que ses fichiers d’origine que j’avais perdu…).
    
    Pour l’antispam : en un an d’utilisation je n’ai jamais été spamé avec ce code. Si cela peu répondre à la question…
    
    J’ajoute aussi que j’ai viré le javascript du code proposé : le php est suffisant…
    
    Répondre ↓
    - Le 24 septembre 2011 à 11 h 08 min, Aurélien Denis a dit :
      
      Pour info, j’applique aussi cette méthode sur la page Contact de WordPress Channel sans soucis de spam.
      
      Répondre ↓
Le 28 novembre 2010 à 16 h 26 min, Nzong Amédée a dit :

Merci pour tes explications Aurélien, mais peux tu me dire comment insérer un forum dans mon blog wordpress? Je te précise quand même que j’ai un blog wordpress on line
Merci pour ta disponibilité
Amédée

Répondre ↓
- Le 28 novembre 2010 à 16 h 49 min, Aurélien Denis a dit :
  
  2 articles traitent de la création d’un forum avec WordPress :
  
  - Utilisation du plugin Simple Press : http://wpchannel.com/creation-forum-wordpress-tutorial-installation-simple-press-forum/
  
  - Intégration avec bbPress (recommandé) http://wpchannel.com/integrer-forum-bbpress-blog-wordpress-3-0/
  
  Répondre ↓
  - Le 9 décembre 2010 à 11 h 47 min, BHG a dit :
    
    Que de bon tips sur ton site !
    
    J’ai réussi a créer toutes les autres pages mais sur ce « contact form » ma sidebar s’aligne sur le bas du formulaire.
    
    J’ai eu le même soucis sur les autres pages mais en déplaçant mon
    
    au bon endroit tout est nickel… sauf pour cette page la.
    
    Si tu a des infos la-dessus je suis super preneur.
    Sinon je pensais essayer de torturer mon ordi à la massue peut être que ça marchera sous la contrainte !)
    
    Encore merci pour ces tutos quoi qu’il en soit.
    
    Répondre ↓
    - Le 9 décembre 2010 à 11 h 58 min, BHG a dit :
      
      Pardon, Pardon…
      
      J’avais simplement oublié d’enlever le « widht : 100% » xD
      Oupla ! Suis fatigué moi…
      
      Répondre ↓
      - Le 9 décembre 2010 à 18 h 28 min, Aurélien Denis a dit :
        
        Merci d’apprécier les tutoriels du site !
Le 23 novembre 2011 à 15 h 51 min, David a dit :

Bonne idée cette traduction mais des erreurs se sont insinuées, il ne faut PAS traduire les en-têtes de la fonction mail() .
On doit rester avec $headers = From: mon site ‘ . « \r\n » . ‘Reply-To: ‘ . $email;
pour garder un en-tête correctement formaté. Ce n’est pas dramatique mais le serveur mail qui envoye/qui reçoit risque de ne pas être content et de ne pas traiter la requête. Au pire donc, on ne reçoit rien, au mieux on reçoit un message où il n’est pas possible de profiter du reply-to et où l’expéditeur est l’adresse générique du serveur mail style « root@provideur.fr »

Répondre ↓
- Le 24 novembre 2011 à 12 h 00 min, Aurélien Denis a dit :
  
  Merci de l’info ! Tu as constaté les problèmes que tu évoques en utilisant ce bout de code ?
  
  Répondre ↓
  - Le 14 décembre 2011 à 15 h 28 min, Pyrros a dit :
    
    j’ai eu des problème avec ce bout de code … en remplaçant « de » par « from » ça marche mieux …
    
    maintenant je me bagarre avec les accents qui ne passent pas correctement
    é devient Ã©
    
    Répondre ↓
    - Le 14 décembre 2011 à 15 h 41 min, Olivier C a dit :
      
      Ce n’est pas un problème de formatage ? Il faudrait passer en UTF-8…
      
      Répondre ↓
    - Le 14 décembre 2011 à 15 h 46 min, Pyrros a dit :
      
      @Olivier C
      si mais la question est comment faire …
      
      avec le php il faut preciser tout le temps le type de codage …
      
      Répondre ↓
      - Le 14 décembre 2011 à 16 h 02 min, Olivier C a dit :
        
        Dans votre éditeur genre Notepad++ il y a une option déclinant toute une liste de formatage, il faut cocher UTF-8.
        
        Je n’ai pas bien compris comment cela influence le traitement du fichier d’ailleurs, il n’y a pas longtemps je pensais qu’il suffisait de déclarer le format dans le header du site une fois pour toute.
    - Le 26 février 2012 à 3 h 27 min, Moi a dit :
      
      Bonjour à tous,
      Pour que ça fonctionne, il faut remplacer :
      
      $comments = stripslashes(trim($_POST['comments']));
      } else {
      $comments = trim($_POST['comments']);
      
      par :
      
      $comments = utf8_decode(stripslashes(trim($_POST['comments'])));
      } else {
      $comments = utf8_decode(trim($_POST['comments']));
      
      Répondre ↓
Le 14 décembre 2011 à 16 h 27 min, Pyrros a dit :

cela ne change rien sur le résultat envoyé et recu … Certains lecteurs de mails convertissent bien la chose d’autres pas

Répondre ↓
Le 20 janvier 2012 à 17 h 47 min, Nicolas a dit :

Bonjour,
Merci pour ce tuto. Je souhaite faire la même chose, mais je souhaiterais, que dans contact form au lieu de mettre dans
$emailTo l’adresse mail à la mano.
Qu’il y ai une variable qui aille chercher le mail qu’il y a inscrit dans directement au niveau de l’utilisateur WordPress.
Est ce possible ? merci pour votre aide

Répondre ↓
Le 20 janvier 2012 à 18 h 31 min, Nicolas a dit :

J’ai peu être trouvé $emailTo = ‘’; ? pensez vous que cela puisse le faire ?

Répondre ↓
- Le 22 janvier 2012 à 21 h 36 min, Olivier C a dit :
  
  @ Nicolas : Bonsoir, je ne connais pas la réponse à ta question, mais si tu la trouve je suis très intéressé de la connaitre…
  
  Répondre ↓
  - Le 23 janvier 2012 à 12 h 55 min, Aurélien Denis a dit :
    
    Je n’ai pas le temps de vérifier mais avec un truc comme ceci ça doit fonctionner : http://codex.wordpress.org/get_currentuserinfo
    
    Répondre ↓
    - Le 3 février 2012 à 10 h 15 min, Nicolas a dit :
      
      Voila la solution
      $emailTo = ». $current_user->user_email . »;
      
      Répondre ↓
      - Le 3 février 2012 à 12 h 59 min, Olivier C a dit :
        
        Merci pour l’info. Très intéressant pour ne pas tout coder en dur dans un thème. Je testerais.
      - Le 6 février 2012 à 7 h 52 min, Nicolas a dit :
        
        Je réctifie, ce code marche seulement quand on est connecté à l’admin. Donc pas intéressant du tout. J’ai trouvé la solution en créant directement dans le thème une option ‘email’. Ensuite, dans emailTo, j’ai appelé la fonction get_theme_option (‘monoption’, ‘monemail’); Ca marche parfaitement, après c’est pas la meilleur solution pour tout le monde. Mais j’ai pas réussi a trouver comment récupérer le mail de l’admin. Bon courage
Le 26 janvier 2012 à 16 h 38 min, Christian SUMBANG a dit :

très intéressant ce tuto, plugins facile à mettre en place et à configurer. je t’encourage à nous proposer toujours des solutions aussi efficace.

Merci !

Répondre ↓
Le 21 février 2012 à 17 h 04 min, BeatChronic a dit :

Hello Aurélien j’ai eu un ptit soucis en faisant ton tutorial. Tout s’est bien passé, en soi. Mais il reste juste un petit problème que je pense que tu peux résoudre. Je sais pas pourquoi mais mon contact form. Php m’insère deux fois la même chose comme ci c’était un miroir tu sais me dire à quoi ca correspond ? http://beatchronic.com/contact/

Répondre ↓
- Le 21 février 2012 à 18 h 52 min, Aurélien Denis a dit :
  
  OK il faut que tu supprimes le titre de niveau dans le code PHP. Tu le trouveras facilement car il s’agit du titre Contactez-nous ou Contact Us.
  
  Répondre ↓
Le 29 février 2012 à 21 h 55 min, Nughi a dit :

Bonjour,

J’ai testé ce formulaire que je trouve vraiment bien. Mon problème est simple: Je ne reçois rien, même après avoir re-re-vérifier que j’avais bien entré mon adresse e-mail… Avez-vous déjà vu ce genre de problème ? J’ai suivi le conseil de David qui disait de remettre certaines lignes en anglais… Mais toujours rien
Merci d’avance pour votre réponse ! Et merci pour ce chouette tuto !!

Répondre ↓
- Le 3 mars 2012 à 15 h 05 min, Aurélien Denis a dit :
  
  Etrange, tu as vérifié dans ton dossier spam ou en modifiant le mail ?
  
  Répondre ↓
Le 11 avril 2012 à 15 h 56 min, soykje a dit :

Bonjour,

J’ai suivi le tuto sans souci, en adaptant la mise en forme à l’esthétique de mon site, bien sûr.
Malheureusement, je ne sais pas pourquoi, mais si le formulaire fonctionne sans problème avec Firefox et Chrome, il pose problème avec IE9 (voir http://www.soykje.com/testeur/contact)…
Pour voir mon fichier .php : http://pastebin.com/6dYurTvt

Merci d’avance pour votre aide.

Répondre ↓
- Le 12 avril 2012 à 14 h 33 min, soykje a dit :
  
  Bonjour,
  
  Je me réponds à moi-même : le souci venait en fait de commentaires, que j’avais inséré dans le code qui se trouve avant le header… Un ami dév’ m’a expliqué que c’était là l’origine du problème, qui est donc résolu
  
  Merci en tous cas pour tous ces tutos, très utiles !
  
  Répondre ↓
  - Le 12 avril 2012 à 15 h 31 min, Aurélien Denis a dit :
    
    Super merci du retour !
    
    Répondre ↓
- Le 19 avril 2012 à 13 h 48 min, Aurélien Denis a dit :
  
  Hum sous IE9/10 cela semble fonctionner…
  
  Répondre ↓
Le 13 avril 2012 à 12 h 41 min, Delphine Desmarets a dit :

Bonjour
Merci beaucoup pour ce tuto parfait
juste une question, puis-je intégrer ce formulaire dans une page ?
et si oui comment ?
merci encore
Delphine

Répondre ↓
- Le 19 avril 2012 à 13 h 46 min, Aurélien Denis a dit :
  
  L’étape 3 du tutoriel ?
  
  Répondre ↓
Ping : Créer une page de contact sans plugin avec WordPress « la bibliothèque, et veiller

Tutoriels, thèmes & plugins WordPress