Créer une page de contact sans plugin avec WordPress
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 :
Contact form sans plugin, version française
Modèle de page WordPress pour créer un formulaire de contact sans plugin.
Taille : 27,2 KiB • Date : 3 septembre 2010 • Hits : 5 187
Contact form sans plugin, version anglaise
Modèle de page WordPress pour créer un formulaire de contact sans plugin.
Taille : 25,9 KiB • Date : 3 septembre 2010 • Hits : 876Dé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.
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.
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)
A propos de l'auteur
Aurélien Denis est le fondateur du projet WordPress Channel proposant tutoriels et podcasts librement téléchargeables. En 2010, il fonde Neticpro, une agence Web spécialisée WordPress. Il est aussi co-fondateur du site Protuts.net (tutoriels PC/Mac/Linux) et community manager pour l’Imagine Cup 2011/2012, une compétition mondiale organisée par Microsoft.
WordPress 3.5 – Un CMS pour créer et gérer blogs et sites Web
RT-Theme 17, traduction française
Maven Hosting, 12 mois d’hébergement
Themetick, traduction française
Ç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.
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
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.
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.
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.
OK, merci pour ces précisions, je vais en tenir compte
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.
Un bon hébergeur c’est essentiel ! Je te conseille Mavenhosting que j’utilise pour WordPress Channel et Protuts.net.
Petite question, les messages de spam sont filtrés par ce système ?
Merci
Samuel
En fait je reformule ma question, mais est-ce que ce formulaire permet d’installer un anti-spam ?
Merci
Samuel
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).
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.
C’est sûr que CformsII est un plugin vraiment très lourd…
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
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.
Bonjour Aurélien,
Avec cette formule je n’ai pas d’anti-spam… peut-on en rajouter un, et si oui, comment?
Merci,
David.
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.
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…
Pour info, j’applique aussi cette méthode sur la page Contact de WordPress Channel sans soucis de spam.
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
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/
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.
Pardon, Pardon…
J’avais simplement oublié d’enlever le « widht : 100% » xD
Oupla ! Suis fatigué moi…
Merci d’apprécier les tutoriels du site !
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 »
Merci de l’info ! Tu as constaté les problèmes que tu évoques en utilisant ce bout de code ?
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 é
Ce n’est pas un problème de formatage ? Il faudrait passer en UTF-8…
@Olivier C
si mais la question est comment faire …
avec le php il faut preciser tout le temps le type de codage …
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.
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']));
cela ne change rien sur le résultat envoyé et recu … Certains lecteurs de mails convertissent bien la chose d’autres pas
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
J’ai peu être trouvé $emailTo = ‘’; ? pensez vous que cela puisse le faire ?
@ 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…
Je n’ai pas le temps de vérifier mais avec un truc comme ceci ça doit fonctionner : http://codex.wordpress.org/get_currentuserinfo
Voila la solution
$emailTo = ». $current_user->user_email . »;
Merci pour l’info. Très intéressant pour ne pas tout coder en dur dans un thème. Je testerais.
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
très intéressant ce tuto, plugins facile à mettre en place et à configurer. je t’encourage à nous proposer toujours des solutions aussi efficace.
Merci !
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/
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.
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 !!
Etrange, tu as vérifié dans ton dossier spam ou en modifiant le mail ?
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 www.soykje.com/testeur/contact)…
Pour voir mon fichier .php : http://pastebin.com/6dYurTvt
Merci d’avance pour votre aide.
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 !
Super merci du retour !
Hum sous IE9/10 cela semble fonctionner…
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
L’étape 3 du tutoriel ?
Bonjour,
J’ai eu des soucis avec les accents et l’entête du mail reçu sur Outlook. J’ai réécrit la partie qui envoie le mail comme suit :
// les variables à ajuster en fonction de votre nom de domaine
$monsite =’mondomaine.com’; //Votre nom de domaine
$emailTo = ‘contact@mondomaine.com’; //Votre adresse Mail
$webmaster =’Votre Webmaster’; //Le nom du Webmaster
//If there is no error, send the email
if(!isset($hasError)) {
$headers =’From: « ‘ . $name . ‘ via ‘ . $monsite . ‘ »‘. » \r\n »;
$headers .=’Reply-To: ‘ . $email . » \r\n »;
$headers .=’Content-Type: text/plain; charset= »ISO-8859-1″; DelSp= »Yes; format=flowed »‘. » \r\n »;
$headers .=’Content-Disposition: inline’ . » \r\n »;
$headers .=’Content-Transfer-Encoding: 7bit’ . » \r\n »;
$headers .= « MIME-Version: 1.0″;
$subject = ‘Formulaire de contact de ‘ . $monsite ;
$body = « Un visiteur vous envoi un message via le formulaire de contact de $monsite.\n\nName : $name \n\nEmail : $email \n\nMessage : $comments »;
mail($emailTo, $subject, utf8_decode($body), $headers);
$sendCopy = trim($_POST['sendCopy']);
if($sendCopy == true) {
$headers =’From: « ‘ . $monsite . ‘ »‘. » \r\n »;
$headers .=’Reply-To: noreply@’ . $monsite . » \r\n »;
$headers .=’Content-Type: text/plain; charset= »ISO-8859-1″; DelSp= »Yes; format=flowed »‘. » \r\n »;
$headers .=’Content-Disposition: inline’ . » \r\n »;
$headers .=’Content-Transfer-Encoding: 7bit’ . » \r\n »;
$headers .= « MIME-Version: 1.0″;
$subject = ‘Formulaire de contact de ‘ . $monsite;
$body = « Bonjour, $name \n\nVous nous avez transmis le message suivant : \n\n $comments \n\nVia le formulaire de contact de $monsite \n\nNous vous repondrons prochainement a l’adresse suivante : $email \n\nNous vous remercions,\n\n$webmaster »;
mail($email, $subject, utf8_decode($body), $headers);
}
$emailSent = true;
}
Les variables sont uniquement dans les 3 premières lignes. Il n’y a rien d’autre a modifier et le formulaire envoie bien les accents sur la majorité des clients mails.
Espérant avoir pu aider.
Et bien sûr,
Merci pour cet excellente source…
Cordialement,
Pascal
PS: Me reste à regarder ce qu’on peut faire au niveau anti-spam.
Bonjour, je suis entrain de créer un blog et j’ai installé via votre super tutoriel le formulaire de contact. Tout a bien marché mais je ne reçois pas de mail à l’adresse que j’ai indiqué à la ligne 51 et je ne reçois pas non plus de mail de confirmation à mon adresse alors que j’ai coché la case … est-ce-que j’ai raté une étape? Merci d’avance pour votre aide précieuse et merci encore pour vos tutoriels
)
Attention, chez certains hébergeurs de mails – comme Orange – il faut paramétrer l’envoi de ce type de mail automatique par formulaire en ligne, sinon ils ne vous parviennent pas.
Merci pour ce zip et ce tutoriel !!
Je l’ai installé sur mon blog, facile à mettre en place !
En revanche, comme tu l’as souligné, la mise en page est à revoir… je n’ai pas très bien compris le remplacement de la « structure de la page.php ». Je me suis creusé les méninges pendant un heure et comme je suis novice dans le monde de l’informatique : j’ai installé Contact form 7 !!! LOL !!
Un grand merci quand même pour ce partage !!
Cordialement,
Christophe
Merci pour ce tuto mais peut tu mieux ou ré expliquer pour les problèmes de mise en page, je m’en sort pas.
Ce que j’obtient : http://www.hostingpics.net/viewer.php?id=612940screen.png
Etant un peu maniaque, j’aimerai aussi que la page contact ait exactement le même look que les autres pages. Or je n’ai pas beaucoup plus compris que les autres comment il faut modifier la page contact en se servant du modèle de page…
Quelques explications de plus ne seraient pas de refus.
Merci d’avance, et félicitation pour ce site qui donne beaucoup d’explications très claires pour faire correctement son site WordPress.
Il faut modifier votre feuiile de style (.css) en visant les class et id des différents éléments du formulaire…
Oui exactement et en reprenant la structure HTML du fichier page.php du thème en question.
Moi j’ai téléchargé les fichiers, mais je n’y arrive pas ça marche pas, je suis du coup passé avec un plugin, c’est plus simple comme ça
Le but de cet article est quand même de faire une page de contact SANS plugin. LOL
as tu essayé avec mon code source ?
(voir dans les commentaires)
Merci, l’install s’est passée nickel! Mais travaillant en local je n’ai pas pu tester. En attendant mon formulaire est là, reste plus qu’à styliser!
Merci de nous avoir dénicher cette astuce, je trouvais les plugins lourds et difficile à « mettre en page ».
Bonne continuation!
Bonjour, merci pour ce super tuto.
Je suis en train de créer un blog et je recherche justement un formulaire de contact, mon problème est que j’aurai besoin d’au moins deux formulaires sur le site, voire trois, qui renvoie vers des adresses mail différentes. J’ai vu que c’était possible avec cform. Avec les modèles de pages on peut publier plusieurs formulaire avec votre script, est ce qu’il y a lourd de modification pour leur attribuer à chacun une adresse mail différente?
Cordialement
Non le mieux pour faire des formulaires de contact simples est d’utiliser Contact Form 7, un plugin très reconnu.
Merci pour ce bon tuto. Enfin une page contact qui me permet d’aller jusqu’au bout (envoi d’un mail test) après x essais infructueux d’autres pages trouvées sur le web. Mais il me reste une difficulté: j’obtiens ces messages d’erreurs à côté de chaque champ (et pourtant cela fonctionne…)
1.Nom [_____] Notice: Undefined variable: nameError in /home/xyz/html/wp-content/themes/twentyelevenchild2/contact-3.php on line 101
(soit pour ligne 101, puis idem pour $emailError et $commentError)
2.E-mail [_____]Notice: Undefined variable: emailError in /home/xyz/html/wp-content/themes/twentyelevenchild2/contact-3.php on line 108
3.Message [_____]Notice: Undefined variable: commentError in /home/xyz/html/wp-content/themes/twentyelevenchild2/contact-3.php on line 115
J’ai WordPress 3.5 twentyeleven-child; plugins WordPressSEO, WP Super Cache, WP Security scan, Simple page sidebar
Pouvez-vous m’aider? Merci.
Puisse la force de WordPress continuer à vous habiter en cette nouvelle année 2013!
Si cela fonctionne, peut-être voir du côté d’une incompatibilité avec un plugin en les désactivant puis en vidant bien le cache du navigateur… bonne année également !
Est-t’il possible plutot qu’envoyé les variable dans le body du message, que le php créé un fichier .txt avec les donnés du formulaire, et ensuite envoie ce fichier txt par emai?
Où est l’intérêt ? Si vous souhaitez stoker les données dans le back-office de WordPress, passez par un plugin comme Gravity Forms.
Bonjour, c’est très bien ce Tutorial simple et efficace et surtout n’allourdi par le site avec des plugins !!
Par contre, une question : comment ajouter un captcha pour plus de sécurité ???
Justement les plugins de contact n’alourdissent pas votre installation s’ils sont bien configurés. Et pour répondre à votre question, utiliser un captcha se fera pas un plugin.
Bonjour, merci pour ce tuto.
Je me demandais, quels sont les avantages d’un formulaire sans pluggin par rapport à, par exemple, contact form 7 ? Cela influe-t’il sur la vitesse de chargement des pages ou de la sécurité ?
Aucun, c’est juste pour ceux qui préfèrent tout coder. Personellement, je recommande Contact Form 7 ou le top du top qu’est Gravity Forms.
Salut, pour ceux qui garde l’adresse mail « admin » (celle donner lors de l’installation de wordpress) il suffit de modifier la ligne 51 citée par Aurélien Denis, non pas en écrivant l’adresse mail mais on la récupérant grâce à la fonction get_bloginfo(‘admin_email’) pour la mettre dans la variable $emailTo
ob_start();
echo get_bloginfo(‘admin_email’);
$emailTo = ob_get_contents();
ob_end_clean();
un formulaire que l’on peut transposer dans différent thème sans avoir à retaper à chaque fois l’adresse mail
bonjour mon theme est discover et jarrive pas à ajuster mon formulaire au centre de la page
pouvez vous reformuler plus claire cette partie sil vous plais? : »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. »
Bonjour Aurelien,
j’ai utilise ton tuto pour beneficier de ce contact form en php.
Il a fonctionne pendant 3 mois et plus depuis 1 semaine.
C’est a dire que lorsque l’on rentre l’info dans les champs et que l’on envoie, rien ne se passe: pas de message de remerciement ou de confirmation.
Je n’ai touche a rien, est ce une nouvelle version de wordpress qui necessite une evo du script?
Pareil, les accents ne s’affichent plus correctement.
merci de ton aide
Bonjour,
J’ai configuré sans (trop) de problèmes mon blog suivant le tuto. Très bien fait, d’ailleurs. Merci
Par contre, lorsque j’envoie un mail, j’ai beau coché la case recevoir une copie, je ne reçois rien. J’ai loupé quelque chose ?