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 ?