Contact Form 7, pour créer des formulaires de contact ou des Quizz, semble avoir pour le moment qu’un seul vrai concurrent : Gravity Forms, un plug-in payant dont l’atout par rapport à Contact Form 7 est de proposer des extensions intéressantes et des liens avec SugarCRM ou Highrise CRM.
Mais, dans le domaine des gratuits, Contact Form 7 règne en maître dans l’univers WordPress : téléchargé plus de 14 781 300 fois, ce plug-in est régulièrement mis à jour (compatibilité WordPress 3.8) et sa maintenance est assurée par l’équipe de Takayuki Miyoshi (iDeasilo).
Il est proposé dans de nombreuses langues et peut être adapté grâce à Poedit. Il est fourni avec une documentation en anglais ou en japonais, une FAQ et un support. Mais, Contact Form 7 est tellement simple qu’il en est très intuitif. Les explications dans son administration vous suffiront largement.
Nouvelle version de l’extension Contact Form 7
Comment installer Contact Form 7 ?
Dans l’administration WordPress, rendez-vous dans le menu Extensions/Ajouter.
Dans le champ Recherche, saisissez « Contact Form 7 » et cliquez sur le bouton Chercher parmi les extensions. Dans la liste de résultats, cliquez sur le lien Installer maintenant (si vous le souhaitez, vous pouvez consulter la fiche de cette extension, en cliquant sur le lien Détails).
Le plug-in est chargé et installé. Cliquez sur le lien Activez maintenant. Vous êtes renvoyé vers la liste de vos extensions installées.
Créer votre page de contact
Maj du 04/09/2015 : nouveau tutoriel suite aux modifications de Contact 7 Form : cliquez ici
Dans la barre des menus de l’administration WordPress, recherchez le menu Contact et sélectionnez-le. Dans l’entête, vous disposez de liens vers des notices.
En dessous, vous disposez d’un formulaire déjà paramétré. Sur la ligne, vous disposez d’un shortcode. Faites-en un copier-coller.
Rendez-vous dans le Menu Page/Ajouter. Nommez la page (contactez-nous, par exemple) et collez dans le corps de la page le shortcode du formulaire de contact. Enregistrez la page.
Personnalisez votre formulaire et les mails de notification
Avant de personnaliser votre formulaire de contact, je vous conseille de préparer au brouillon celui-ci, mais aussi le ou les 2 mails de notification (l’un à l’administrateur, l’autre au demandeur (optionnel)).
Retournez dans le menu Contact. Cette fois-ci, cliquez sur le lien formulaire de contact 1. L’administration de Contact Form 7 est divisée en plusieurs zones réparties de la manière suivante :
| Configuration du formulaire | Génération de marqueurs |
| Configuration de l’entête du mail de notification à l’administrateur | Configuration du corps de mail de notification à l’administrateur |
| Choix du mail 2 (mail au demandeur) – optionnel | |
| Configuration de l’entête du mail de notification au demandeur | Configuration du corps de mail de notification au demandeur |
| Configuration des messages de validation et d’erreur | |
| Réglages complémentaires. |
Commençons par la zone de génération des marqueurs. Cliquez sur le bouton Générer un marqueur. Vous disposez d’une série de marqueurs (copie d’écran à droite). Vous pouvez constater que Contact Form 7 peut vous servir à d’autres utilisations qu’un simple formulaire.
Précisons quelques champs :
– Champ texte : champ court de texte (par exemple pour « Nom : « , « Prénom », « Fonction »…).
– Zone de texte : champ long de texte ( par exemple pour le commentaire ou le message.
– Nombre spinbox : pour indiquer un nombre par sa saisie
– Nombre (slider) : pour évaluer avec un curseur.
– Captcha : Contact Form 7 n’est compatible qu’avec Really Simple CAPTCHA !
Mise à jour du 16/04/2015 : ce n’est plus vrai depuis la version 1.8 de RSC. Il vous faut utiliser un autre captcha. Beaucoup se sont rendus compatibles avec Contact Form 7, comme BestWebSof par exemple.
En fonction du marqueur que vous choisirez, vous aurez quelques différences de paramétrage. Faites des essais !
Configuration d’un marqueur
J’ai choisi de vous présenter la configuration du champ texte. Comme vous pouvez le constater, la configuration est assez intuitive. Vous pouvez renommer le nom de votre marqueur, lui attribuer un ID, une mise en forme (class) et une taille (size et maxlength). Contact Form 7 est compatible avec Askimet si vous voulez protéger votre formulaire de contact contre les spams.
En dessous de la configuration, vous pouvez constater que les codes en marron et en vert évoluent en fonction de vos paramétrages du champ. Ainsi, ce n’est qu’après avoir terminé le paramétrage que vous pourrez recopier ces codes dans le formulaire de contact ou les mails. Le code marron est à recopier dans le formulaire, celui en vert, dans les mails.
Résultats pour le formulaire de contact
Résultats pour le mail à l’administrateur
Personnalisez selon vos besoins votre formulaire de contact et vos emails de notification. Testez ensuite votre paramétrage. Vous pourrez constater que les mails envoyés par le formulaire, comme pour ceux des commentaires comportent un expéditeur qui est WordPress. Il vous reste plus qu’à corriger ce petit défaut qui n’est pas lié à Contact Form 7, mais à WordPress.
————————————
MAJ du 1/09/2015 – complément du commentaire en réponse à Rahamim
Votre nom (obligatoire) | Votre email (obligatoire) |
[acceptance Accept-CGU] Accepter les CGU
Commentaires récents