Mis à jour par le 22 août 2014 • 509 Commentaires

S’il y a quelque chose que tous les sites ont en commun c’est bien le formulaire de contact.

Même s’il y a encore des irréductibles qui ne veulent pas être dérangés, on peut dire que la quasi totalité des sites ont une page de contact.

Dès lors, pour mettre cela en place sur un site WordPress il y a deux possibilités :

  1. Votre thème possède un modèle de page « Contact » ou un autre moyen d’inclure un formulaire et dans ce cas, c’est tout bon.
  2. Ou passer par un plugin pour inclure un formulaire dans votre page Contact

Dans cet article, nous allons voir comment utiliser un plugin téléchargé près de 62 millions de fois, j’ai nommé Contact Form 7.

Bien qu’il soit assez simple d’utilisation, je tenais à rédiger une « recette » pour vous montrer comment intégrer des formulaires de contact plus ou moins évolués sur votre site.

Voyons de quoi se compose cet article dans le…

Sommaire

  1. Configurer un formulaire de base
  2. Ajouter des champs supplémentaires
  3. Intégrer un formulaire sur votre site
  4. 5 astuces pour personnaliser vos formulaires

Comme vous pourrez le constater dans cet article, CF7 ne permet pas de créer des formulaires très évolués. Si vous désirez aller plus loin, jetez un oeil à Gravity Forms.

Besoin d’un hébergeur pour votre site ?

Faites comme WPMarmite, choisissez o2switch. Non seulement les performances sont au rendez-vous mais le support est exceptionnel.

Configurer un formulaire de base

Une fois que vous aurez installé et activé Contact Form 7 (jetez un oeil à ce tuto pour découvrir comment installer un plugin), vous verrez qu’un élément Contact a été ajouté dans le menu (sous Commentaires). Cliquez dessus pour vous arriver sur la page principale du plugin :

Contact Form 7 homepage

Comme vous pouvez le voir, le plugin a été traduit en français par de gentils contributeurs 🙂

D’entrée de jeu Contact Form 7 vous informe que vous êtes protégés du spam via Akismet ou reCAPTCHA.

Vous êtes également invité à télécharger une extension supplémentaire, Flamingo, si vous souhaitez sauvegarder en base de données tous les messages soumis dans vos formulaires. Sans ça, vous ne les auriez que dans votre boite de réception (mais ça vous suffira peut-être).

Enfin ne vous inquiétez pas, ce tuto va vous aider à créer votre premier formulaire. Pour ce faire, cliquez simplement sur le bouton Créer un formulaire en haut de l’écran (ou dans le menu).

Vous arrivez sur la page suivante qui comporte 4 onglets différents: Formulaire, Email, Messages et Réglages additionnels.

Créer un formulaire de contact

Il y en a un formulaire de présent par défaut. Voyons à quoi correspondent les différentes options :

Saisissez le titre de votre formulaire

Cette première section sert à donner un nom à votre formulaire. Appelez-le « Contact » ou comme bon vous semble.

Vous pouvez aussi lui donner un nom particulier si le formulaire que vous créez doit être placé sur une page spécifique (formulaire de support, de demande de devis, etc).

Un bouton de sauvegarde est également présent. N’oubliez pas de vous en servir une fois que vous aurez apporté vos modifications.

Onglet « Formulaire »

Cette section contient le code HTML de votre formulaire de contact. Plusieurs paragraphes sont présents (balises <p>...</p>) avec des marqueurs pour les champs du formulaire ainsi que le bouton de validation.

Détaillons un peu pour mieux comprendre.

<label>Votre nom (obligatoire)
[text* your-name]</label>

Le code ci-dessus affichera le texte « Votre nom (obligatoire) » puis le champ texte associé au nom.

Dans la seconde partie de ce tutoriel, nous verrons comment créer des marqueurs. Vous verrez que leur syntaxe n’est pas très importante.

Les champs email, sujet et message sont structurés de la même façon. Le dernier élément entre crochets – [submit "Envoyer"] – embarque le marqueur du bouton de validation du formulaire.

Utilisations des marqueurs

marqueurs contact form 7


Les boutons au dessus du formulaire vous permettent d’ajouter toute sorte de champs dans les formulaires que vous créez.

Il y a entre autres des champs de texte, d'email, de date, des menus déroulants, des boutons radios, des quiz et même pour envoyer des fichiers.

Nous verrons comment les configurer dans la partie « Ajouter des champs supplémentaires » de cet article.

Email du destinataire

Etudions les champs de cette section et ce qu’ils contiennent :

Onglet Email de Contact Form 7

Pour : L'email vers lequel le message doit être envoyé (votre email ou celui de votre client).

De : Email de l’expéditeur. Ici on récupère l'email de la personne à partir du champ email du formulaire (identifié par le marqueur [your-email] dans le code du formulaire). Le nom est indiqué avant l'email par le marqueur [your-name].

Il est important de bien garder la structure NOM <EMAIL> dans ce champ pour que cela s’affiche convenablement dans votre boite de réception.

Sujet : Dans notre cas, le formulaire récupère le sujet indiqué par l’expéditeur grâce au marqueur [your-subject]. Cela dit vous n’êtes pas obligé de vous en servir. Si j’utilisais CF7 pour WP Marmite, je pourrais choisir le sujet suivant « [WP Marmite] Message de [your-name]« .

En-têtes additionnelles : Ce champ est utile pour spécifier des personnes à mettre en copie et en copie cachée. Vous pouvez par exemple envoyer une copie de l'email à la personne qui vous contacte (on verra que nous pouvons le faire d’une autre manière juste après).

Pour mettre une personne en copie, ajoutez Cc : cofondateur@site.com. Vous pouvez aussi utiliser la structure NOM <EMAIL> vue précédemment : Cc : GÉRARD <cofondateur@site.com>

Afin de mettre une personne en copie cachée, utilisez Bcc : cofondateur@site.com. Comme pour la copie normale, la structure NOM <EMAIL> fonctionne aussi.

Corps du message : Ce champ va servir à mettre en page le message que vous allez recevoir. Dans la capture d’écran, on voit que les marqueurs sont réutilisés.

Pour y voir plus clair, insérez uniquement le marqueur [your-message] afin de n’avoir que le message de l’expéditeur (l'email et le nom étant déjà dans le champ De). En procédant ainsi, le message reçu ressemblera davantage à un message envoyé directement.

Une signature est ajoutée automatiquement par Contact Form 7 pour indiquer à partir de quel formulaire le message a été envoyé. Elle n’est peut-être pas optimale mais je vous conseille de la conserver pour vous rappeler de la provenance de l'email. Vous pouvez l’éditer à votre guise pour la rendre plus pertinente.

Exclure les lignes dont la balise d'email est vide : La traduction n’est pas correcte ici. Cette option sert à exclure les lignes pour lesquelles le marqueur n’a pas été indiqué par l’expéditeur. Par exemple, si vous avez un champ Ville et que la personne ne remplit pas ce champ, la ligne devant afficher le marqueur Ville ne sera pas affiché. Vous voyez où je veux en venir ?

Envoyer cet email au format HTML : Ici rien de compliqué, cochez la case pour recevoir les emails de contact au format HTML. Dans la plupart des cas, ce n’est pas nécessaire.

Pièces jointes : Dans le cas où vous donnerez la possibilité d’envoyer des pièces jointes. Il faudra indiquer le ou les marqueurs correspondants dans ce champ pour les recevoir (ne vous étonnez pas de rien recevoir si vous avez laissé ce champ vide !).

Email (2)

À partir du moment où l’on a la possibilité de mettre des personnes en copie, on peut se demander à quoi sert un second champ d'email.

Ce champ est utile si vous désirez envoyer un message structuré différemment.

Par exemple, si vous voulez envoyer une copie de l'email à l’expéditeur, vous pouvez ajouter une phrase du genre en introduction : « Merci de m’avoir contacté, je vous répondrai d’ici 24h. Pour rappel, voici le contenu de votre message : ». Voyez plutôt :

Email 2 Contact Form 7

Onglet Messages

Ensuite viennent les messages d’erreur et de réussite qui s’afficheront en retour lors de l’envoi de l'email. Si tout se passe bien, le message de réussite s’affichera (le premier) sinon un des messages d’erreur sera affiché selon le problème.

À vous de voir ce que vous désirez modifier. Vous pouvez personnaliser le message de réussite et d’erreur pour être moins froid. Voilà ce que j’ai mis à l’époque pour WP Marmite :

Messages de retour de Contact Form 7

Réglages additionnels

La dernière section de cette page concerne des utilisations un peu plus avancées. Nous en verrons quelques une dans les 5 astuces proposées à la fin de l’article.

Réglages additionnels de Contact Form 7

Vous voilà désormais en possession d’un formulaire de contact basique (n’oubliez pas de le sauvegarder grâce au bouton en haut de la page). Voyons maintenant comment le personnaliser…

Ajouter des champs supplémentaires

Après la découverte des différentes sections de la page d’édition d’un formulaire, intéressons nous à l’utilisation des marqueurs, ce qui va nous permettre d’insérer de nouveaux champs.

Commençons par cliquer sur le premier élément :

Le Champ texte

Une zone de configuration du champ texte s’affichera. Vous pouvez lui attribuer :

  • Une obligation de le remplir ;
  • Un nom ;
  • Une valeur par défaut (que vous pouvez placer en filigrane) ;
  • Une vérification antispam via le plugin Akismet (seulement utile si le champ texte est un nom) ;
  • Un identifiant (pour le CSS) ;
  • Une classe (toujours pour le CSS) ;

Dans l’exemple ci-dessous, j’ai rendu le champ obligatoire et ajouté du texte en filigrane (placeholder).

Ajout d'un champ texte

Une fois que le champ est configuré, on obtient un marqueur qu’il faut placer dans le code du formulaire. Cliquez maintenant sur « Insérer la balise » pour cela. Pour conserver un affichage classique, j’ai repris la structure en label des autres champs.

Champ texte inséré

Maintenant que ce champ est dans le formulaire, il faut pouvoir le récupérer lorsqu’une personne enverra un message. D’où la présence d’un second marqueur [text-845].

Comme le plugin l’indique, il faut le placer dans le corps du message de l'email qui nous sera envoyé. Enfin, vous pouvez aussi le placer dans le sujet si cela a un intérêt pour vous.

La procédure est la même pour tous les autres champs. Regardons en tout de même certains d’entres-eux.

Je vais passer sur le champ email, URL et les différents nombres pour vous parler du…

Champ date

Admettons que vous créez un formulaire de réservation, avoir une date d’arrivée et une date de départ est impératif. De la même manière que le champ texte, on peut configurer une date :

date contact form 7

Pour la date d’arrivée, j’ai défini une date minimale et une date maximale afin d’éviter aux gens d’inclure de mauvaises valeurs.

La zone de texte

Pour rédiger leur message, les expéditeurs auront besoin d’une zone de texte.

champs texte contact form 7

Comme pour les autres champs, il faut insérer le premier marqueur dans le code du formulaire et le second dans le corps du message.

Menu déroulant

Si votre formulaire permet à vos visiteurs de vous contacter au sujet d’une de vos offres, un menu déroulant peut s’avérer utile pour connaitre l’offre sur laquelle le visiteur veut des informations.

Indiquez un choix par ligne et cochez éventuellement des options :

menu deroulant contact form 7

Note : les boutons radios et les cases à cocher ont des fonctionnements similaires.

Confirmation

Comme lors d’un achat sur un site e-commerce, vous pouvez ajouter un bouton d’acceptation (de conditions générales ou autre). Si le bouton n’est pas validé, l'email ne pourra pas être envoyé.

newsletter contact form 7

Il est possible de cocher la case par défaut ou d’inverser le fonctionnement de la case (c’est à dire que la case doit être décochée pour que l'email soit envoyé).

Dans cet exemple (qui est assez restrictif), on obtient l’accord de la personne qui nous contacte pour l’ajouter manuellement à une newsletter.

Quiz

Si vous voulez filtrer les emails que l’on vous envoie, il n’y a rien de tel qu’un quiz. Même si le spam est généralement bien traité par Contact Form 7, ajouter une question subsidiaire permet d’être certain que ses interlocuteurs sont bien humains.

quiz contact form 7

Et dans le formulaire :

quizz inséré

Dans ce cas, j’ai demandé quelle était la capitale de la France mais vous pouvez tout à fait demander la solution d’un petit calcul.

L’important est d’utiliser la structure : Question|Réponse

CAPTCHA

Si les quiz ne vous plaisent pas, Contact Form 7 vous donne la possibilité d’insérer des captchas. Vous savez, ce sont ces images qu’il faut déchiffrer afin que le message puisse être envoyé.

Pour que cela fonctionne, vous devez installer le plugin Really Simple Captcha (également réalisé par l’ auteur de CF7).

Recaptcha contact form 7

Vous pourrez choisir la taille et le thème du captcha (couleur de fond et couleur des caractères).

Envoi de fichiers

Vos interlocuteurs peuvent aussi vous envoyer des fichiers, cela peut être un cahier des charges, des images, etc. Bref, tout ce que vous voulez :

fichier contact form 7

Pour éviter de recevoir n’importe quel type de fichiers, il est recommandé de définir une taille maximale. Indiquez 1, 2, 3 ou 10mb voir plus selon les fichiers que vous attendez.

Indiquez également les formats de fichiers acceptés par votre formulaire, basez-vous sur cet exemple : pdf|doc|docx. L’important est de bien séparer les extensions par des barres verticales : |.

Dernière chose à savoir, il ne faut pas mettre le second marqueur ( [fichier]) dans le corps du message mais dans le champ Pièces jointes de l'email.

Bouton de soumission

Afin d’envoyer son message, votre interlocuteur devra cliquer sur un bouton de soumission. Comme pour les champs étudiés précédemment, il est possible d’ajouter un identifiant et une classe afin de le personnaliser avec du CSS.

Le libellé correspond au texte du bouton, il est donc important de la spécifier.

Bouton soumission CF7

Collez ensuite le marqueur dans le code du formulaire sur la gauche.

Bon, nous avons terminé notre tour des marqueurs proposés par Contact Form 7. Découvrons maintenant comment…

Intégrer un formulaire sur votre site

Une fois que vous aurez terminé de configurer les champs de votre formulaire, cliquez sur le bouton Sauvegarder en haut de l’écran.

Sous le titre, vous constaterez la présence d’un shortcode :

shortcode contact form 7

Pour insérer votre formulaire, il vous suffit de coller le code court (en anglais on parle de shortcode) dans l’article, la page ou le widget de votre choix.

Et oui, ce n’est pas plus compliqué 🙂

Je vous propose de terminer ce tutoriel par…

5 astuces pour personnaliser vos formulaires

Si vous voulez que vos formulaires aient des comportements un peu plus avancés, voici quelques astuces qui pourront vous aider. Bien sûr, ce ne sont pas les seules choses qu’il est possible de faire avec ce plugin.

Jetez un oeil aux autres plugins qui se couplent à Contact Form 7 pour voir ce qu’ils peuvent faire.

1. Insérer un formulaire n’importe où

Par défaut, il n’est possible d’insérer des formulaires que dans les publications (articles, pages ou autre) et dans les widgets.

Si vous voulez inclure un formulaire dans un modèle de page ou à un endroit précis de votre thème, utilisez le code PHP suivant (évidemment en mettant le bon shortcode):

<?php echo do_shortcode( '[contact-form-7 id="1234" title="Contact form 1"]' ); ?>

2. Laisser le visiteur choisir le destinataire

Pour donner la possibilité à vos visiteurs de contacter une personne ou un service particulier de votre entreprise, procédez de la façon suivante :

choisir destinataires contact form 7

Comme le montre l’image, il faut créer un menu déroulant et mettre les destinataires dans les choix. Utilisez la structure SERVICE|EMAIL pour masquer les emails aux visiteurs (ex : Direction|direction@monsite.com).

Afin que cela fonctionne, il faut impérativement mettre le marqueur [service] dans le champ Pour.

service contact form 7

3. Obtenir l’IP du visiteur

Si pour une quelconque raison, vous désirez obtenir l’IP de la personne qui vous contacte. Insérez le marqueur [_remote_ip] dans le corps du message (par exemple sous la signature).

4. Obtenir la date et l’heure de l’envoi

De même, il est possible d’avoir la date et l’heure d’envoi de l'email. Vous allez me dire que cela correspond à la date et l’heure de réception de l'email et vous aurez raison. Mais bon, il si vous en avez besoin insérez les marqueurs [_date] et [_time] dans le corps du message.

5. Obtenir l’adresse de la page d’envoi

Si vous avez intégré votre formulaire dans un widget ou quelque par dans votre thème, connaitre la page exacte depuis laquelle le formulaire a été envoyé peut être intéressant.

Pour cela, insérez le marqueur [_url] dans le corps du message ([_post_url] retournera le permalien de l’article, à vous de voir donc).


En complément, il existe deux autres astuces que je ne détaillerai pas ici car leur mise en place concerne des utilisateurs plus avancés. Il s’agit de :

Je ne comprends pas trop pourquoi l’auteur a intégré ces fonctionnalités de cette manière mais bon, c’est comme ça…

Conclusion

Contact Form 7 est le troisième plugin gratuit le plus téléchargé de WordPress.org. Il permet de créer des formulaires simples mais il ne sera pas toujours facile de créer des choses complexes.

Vous devrez avoir quelques connaissances en HTML pour avoir un rendu correct. Si vous avez des bases en CSS, vous pourrez pousser la personnalisation grâce aux classes et identifiants qu’il est possible d’ajouter à chaque élément.

Apprenez le CSS une bonne fois pour toutes

Créez des sites au rendu impeccable sans y passer des heures avec CSS Express.

Si vous recherchez plus de simplicité, je vous recommande plutôt Gravity Forms.

Il permet notamment d’élaborer des formulaires grâce à de simples glisser-déposer. Ce qui – il faut le dire – place Contact Form 7 loin derrière.

De multiples extensions complémentaires sont disponibles pour bénéficier de davantage de fonctionnalités (comme par exemple Slack, Mailchimp ou encore Paypal). Il y a vraiment de quoi faire.

Sur ce, je vous dis à bientôt pour un nouveau tutoriel.

Qu’en avez-vous pensé ? Quel plugin de formulaires utilisez-vous pour votre site ?