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

Tuto CF7 Nouvelle Version

 

  • Contact Form 7, posez vos questions sur le forum…
  • Contact Form 7, Consultez les réponses sur le forum…

 

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

Contact Form 7 - Shortcode du formulaire de contact

Rendez-vous dans le Menu Page/Ajouter. Nommez la page (contactez-nous, par exemple) et coller dans le corps de la page le shortcode du formulaire de contact. Enregistrer 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 constatez que Contact Form 7 peut vous servir à d’autres utilisations qu’un simple formulaire.

contact Form 7 - Liste des marqueurs

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 par exemple BestWebSoft.

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.

Contact Form 7 - configuration des marqueurs

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

Contact Form 7 - résultat de la configuration du formulaire

 Résultats pour le mail à l’administrateur

Contact form 7 - Configuration du mail administrateur

Personnalisez selon vos besoins votre formulaire de contact et vos emails de notification. Testez ensuite votre paramétrage. Vous pourrez constatez que les mails envoyés par le formulaire, comme pour ceux des commentaires comporte 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

<table>
<tr>
<td width=20%>
<p>Votre nom (obligatoire)<br />
 [text* your-name] </p>
</td>
<td>
<p><p>Votre email (obligatoire)<br />
 [email* your-email] </p> </p>
</td>
</tr>
</table>

 

<p>[acceptance Accept-CGU] Accepter les CGU</p>