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 ?
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
Cliquez sur ce lien pour télécharger l’extension Contact Form 7 de Takayuki Miyoshi et installez la (cf. dossier installation d’une extension WordPress).
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 (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.
L'astérisque = champ obligatoire
Pour personnaliser votre formulaire, cliquez sur Generate Tag et optez pour le tag souhaité.
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 à 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 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 à l'endroit souhaité dans la page
Test du formulaire
N’oubliez jamais de tester votre formulaire pour voir si tout fonctionne bien (champs obligatoires, reception du message dans votre boîte mail…).
Cas concrets d’utilisation
Actuellement, j’utilise ce plugin pour la page Contact de Protuts comme le montre cette capture d’écran ci-dessous :
Cas concret de l'utilisation de Contact Form 7 (ici la page Demande de tutoriel de Protuts)
Bref, un excellent plugin dont je ne me passe plus 
Et vous ? Lequel utilisez-vous ?
A noter : ce tutoriel m’a été suggéré par Funnycat, webmaster du blog Infowebmaster. Si vous aussi vous souhaitez effectuer une demande de tutoriel, c’est par ici.
23 commentaires pour “Créer un formulaire de contact personnalisé pour votre blog WordPress”
Laisser un commentaire
Retrouvez des performances optimales sous Windows Vista avec ce guide gratuit réunissant les meilleures astuces pour optimiser Vista.
Télécharger e-Book "Booster Windows Vista"
Télécharger GRATUITEMENT l'ensemble des thèmes packs pour Windows 7 proposés sur Protuts.net.
Accéder aux thèmes
L'équipe Protuts.net a lancé le projet WordPress Channel, LA chaîne des tutoriels WordPress francophone multi-diffusion (iTunes, YouTube, DailyMotion, Facebook).
Accéder à WordPress Channel
Créer un formulaire de contact personnalisé pour votre blog WordPress – G…
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 pl…
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 ?
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 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…
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.
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 ?…
WordPress, créer un formulaire de contact personnalisé…
Comment créer un formulaire de contact personnalisé pour son blog WP avec Contact Form 7.
……
Nickel. Merci à toi.
C’est installé.
nice outframe of things – better content written – highly appreciated
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
[...] Créer un formulaire de contact personnalisé pour votre blog WordPress [...]
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 ?
[...] L’extension la plus simple et flexible d’utilisation pour créer un formulaire de contact pour votre blog WP. Couplez-la à Really Simple Captcha pour lutter contre le spam et vous obtiendrez le tandem parfait ! Pour avoir un aperçu concret, rendez-vous sur la page Contact de notre site et apprenez à faire de même avec le tutoriel Créer un formulaire de contact personnalisé pour votre blog WordPress. [...]
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
Non a priori Askimet ne filtre pas les messages. Mais d’après l’auteur du plugin, il est possible d’en activer le filtrage :
http://wordpress.org/support/topic/253842
Enfin, pour éviter encore d’avantage les spams, tu peux mettre en place un CAPTCHA après avoir installé le plugin Really Simple CAPTCHA que tu trouveras facilement sur le site de l’auteur. C’est une extension complémentaire à Contact Form 7.
Voilà
Merci pour ce lien !
Et explore tout le site, c’est fait pour ça !
C’est ma faute j’ai omis une petite partie du tutoriel :p
Je corrige cela tout de suite !
EDIT : c’est ok maintenant
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