WordPress : Créer des formulaires de contact avec, en option, l’envoi d’une copie à l’expéditeur

Mailto ou formulaire de contact – telle est la question.

Dois-je proposer sur la page d'accueil de mon site Web un formulaire de contact ou tout simplement une adresse e-mail cliquable pour accéder au programme de messagerie installé localement ? Pour répondre à la question il faut se mettre à la place du visiteur : que préfère t-il ? Quelles expériences ont été faites à ce jour ?

Mailto - Web 1.0

Mailto représente le paramètre de l'attribut href dans la balise d'ancrage adresse mail l’adresse mail avec laquelle le navigateur est chargé d'appeler le client de messagerie par défaut et TO: le champ pré-rempli avec l’adresse spécifiée. Il est également possible de prédéfinir d'autres domaines tels que l’objet ou même le contenu du courrier.

Exemple : adresse mail avec les champs pré-remplis .

Etant donné que les champs blancs href et d'autres caractères spéciaux ne sont pas autorisés, ils doivent être remplacés par des codes hexadécimaux (% 20 = espace, %27 = apostrophe).

Très bien ! Mais attention, cela n’est pas dénué de problèmes :

  • Si aucun programme de messagerie électronique est installé sur l'appareil, rien ne se passe (le navigateur s’ouvrira si, par exemple, l'utilisateur utilise Gmail). Néanmoins, l'adresse étant indiquée, le message peut être envoyé à une date ultérieure.
  • Des robots d'exploration malveillants analysent les sites de fond en comble pour trouver des adresses de courrier électronique et les utiliser ensuite pour envoyer des spams (ou pour utiliser l'adresse comme expéditeur). Cependant, une adresse de type info@ - est quasiment toujours spécifiée et est de toute façon utilisée par les spammeurs.
  • Si vous voulez obtenir certaines informations d’une personne en particulier comme un numéro client ou des paramètres XY qui vous permettent d'identifier à quelle équipe interne le message est adressé, la méthode du mail cliquable ne vous mène malheureusement pas très loin...

Formulaires de contact 1.0

Les formulaires de contact n’existent pas depuis hier. La qualité a été améliorée de manière significative, cela s’explique sûrement du fait qu’il y ai de plus en plus de propriétaires de sites Web, utilisant un CMS (WordPress pour la plupart), et s’appropriant ce genre d'extension.

Revenons aux anciens types de formulaires de contact : beaucoup contenaient des bugs et généralement aucune validation n’était prévue (l’envoi d’un formulaire vide était souvent possible) ; c’est pourquoi nous avions des doutes quant à la bonne livraison des messages. De plus, l'expéditeur ne recevait que rarement une copie de son message.

Créer des formulaires de contact conviviaux avec Gravity Forms

En utilisant WordPress, vous avez accès à de nombreux plugins dédiés aux formulaires, comme par exemple Contact Form 7. Ce dernier est très populaire (plusieurs millions d'installations actives à ce jour) et digne de confiance. Cependant nous allons vous donner un exemple de construction de formulaire de contact avec Gravity Forms qui est un plugin particulièrement ergonomique mais qui nécessite l'achat d'une licence. Je precise à ce stade que l'utilisation de Gravity Forms est gratuite avec les tarifs d’hébergement WordPress managé de SaaS Web.

Que peut-on attendre d'un formulaire de contact moderne ?

Liste non exhaustive des fonctionnalités. Tout d'abord, du côté de l'utilisateur du formulaire :

  • Responsive Layout, le formulaire est adapté à tous les appareils de visualisation
  • Champs clairement identifiés, indiquant aussi s'ils sont obligatoires ou facultatifs
  • Stockage des données déjà saisies pour la validation, validation dynamique possible sans possibilité de soumettre le formulaire sans que les champs obligatoires n’aient été remplis correctement.

Qu'en est-il de l’accessibilité ?

  • Pour les personnes utilisant un clavier au lieu d'une souris, il est pratique de pourvoir naviguer d'un champ à un autre avec la touche TAB
  • Pour améliorer l'expérience d'utilisaton des personnes handicapées qui utilisent des lecteurs d'écran, ajouter des balises HTML spécialisées

Du côté de l'opérateur :

  • Création facile du formulaire
  • Champ avec sélection pré-programmée des fonctions (champ de texte, champ réservé aux adresses e-mail, téléphone, multi-sélection ...) et la validation appropriée du champ
  • Validation obligatoire Oui / Non
  • Logique conditionnelle : visibilité d’un champ spécifique sous condition qu’un autre soit complété
  • Assembler des champs par glisser-déposer
  • Envoi des données de formulaire à un opérateur ou une tierce personne
  • Affichage d’une confirmation de livraison à l’expéditeur - éventuellement, rediriger l'utilisateur vers une autre page
  • L’expéditeur a la possibilité de recevoir une copie des données saisies

Pour les designers et les administrateurs :

  • Les champs du formulaire peuvent être étendues avec des classes CSS pour faciliter la mise en page du formulaire
  • Eventuellement une fonction Honeypot/Captcha

Créer un formulaire de base

Après avoir installé Gravity Forms, vous pouvez créer votre premier formulaire - donnez-lui un nom. Ensuite, déterminez les champs.

  • Étape 1 : Créer une case à cocher si l'utilisateur veut obtenir une copie par e-mail
  • Étape 2 : Créer la notification ainsi que la logique pour envoyer la copie si la case a été cochée

Option d'installation pour obtenir une copie de données

L’étape 1 doit être effectuée dans la page de création du formulaire.

Déplacez, d’un clic de souris, l’élément Cases à cocher de la droite vers l’emplacement souhaité. Par défaut 3 cases sont proposées, vous en supprimez donc 2 et indiquez votre phrase, par exemple "Envoyez-moi une copie des données du formulaire de contact". Vous pouvez cocher la case, ainsi elle sera pré-cochée dans le formulaire.

Pour la deuxième étape, sélectionnez les éléments internes du formulaire sous « Paramètres »> « Notification ».

Ici, nous avons défini les paramètres suivants :

  • Nom : ce champ est obligatoire, mais sans grande importance
  • Envoyer à : « Sélectionner un champ »> « E-mail » de la liste déroulante; si vous avez nommé le champ E-mail de façon différente, sélectionnez dans la liste, bien sûr, le nom que vous lui avez donné. Veuillez noter que le champ e-mail est évidemment un champ obligatoire.
  • De : nom de l’expéditeur: les utilisateurs verront alors le nom de l'expéditeur de l'e-mail
  • Votre e-mail : celui-ci peut être modifié
  • Objet : tout simplement l’objet de l'e-mail
  • Message : insérez ici votre texte. Il est possible d'insérer des champs préalablement remplis. Pour ce faire, cliquez sur l'icône à droite de l'éditeur visuel. Bien sûr, vous pouvez également ajouter un message d'accueil ou tout autre texte.
  • Logique conditionnelle : cocher la case pour activer la logique. Ensuite, sélectionnez le champ qui doit être rempli comme condition.

Gravity Forms, c’est si simple !

En fait, on peut aussi éviter du travail, ne pas demander à l'utilisateur du formulaire s'il souhaite recevoir une copie, mais tout simplement de le faire... mais je pense qu'un utilisateur, surtout s'il a fait de mauvaises expériences dans le passé, ne va pas s'attendre à recevoir un double et se sentira donc peut-être gêné d'utiliser le formulaire.

Pour en revenir à la question du début de l'article concernant le choix entre le formulaire de contact ou l’adresse email, pourquoi ne pas proposer les deux et laisser le choix au visiteur ?

WordPress : Réalisez très simplement un site multilingue avec WPML

De nos jours, nous rencontrons de plus en plus de sites Web multilingues. Cela semble simple à mettre en place et même aller de soi, encore faut-il avoir les bons outils.

Que faut-il considérer lorsque l’on développe un site multilingue ?

  • Ai-je besoin d’un rapport 1:1, c'est-à-dire qu'à chaque page du site correspond une page dans l'autre langue (ou les autres langues) ?
  • A contenu équivalent, faut-il une URL propre à chaque langue ? Ai-je besoin d’un nom de domaine différent pour chaque langue (par ex site-web.fr pour le contenu en francais et website.com pour la version en anglais) ?
  • Ai-je besoin d’un sélecteur de langue ? Le sélecteur renvoie-t-il sur la page traduite correspondante ou sur la page d’accueil de la langue choisie ? Le visiteur doit-il être redirigé automatiquement vers le contenu correspondant à la langue de son navigateur ?
  • Les résultats d’une recherche doivent-ils uniquement afficher ceux de la langue dans laquelle la recherche a été faite ?
  • Le code source du site indique-t-il la langue pour les moteurs de recherche ?
  • Est-ce qu’une équipe qui travaille sur les contenus d’une langue a accès aux contenus des autres langues ou est-ce que les accès sont séparés ?

WordPress et le multilingue en général

Il est important de savoir que WordPress ne possède pas, à l’origine, de fonction pour le multilinguisme du moins, pas directement.

Par le biais du mode Multisite (network) qui permet la création de sous-sites plus ou moins indépendants, il est possible d’utiliser les sous-sites comme des variantes linguistiques. Plus de détails par rapport à cette option plus loin dans cet article.

WordPress propose donc la création de sites multilingues via plugin : nous pouvons en citer quelques uns comme WPML (sans doute le plus populaire, payant), Polylang (freemium) ou encore MultilingualPress (payant).

Multilingue : la méthode manuelle sans outils

En théorie, un site Web multilingue peut être réalisé sans plugins et avec quelques efforts de programmation : les variantes linguistiques sont créées comme des pages principales, par exemple, « de » et « fr » Les pages des variantes sont alors créées dans chacune des langues en sous-pages de « de » et « fr ». Pour que les menus allemands ou francais soient affichés au bon moment, il faut modifier le/s template/s et ajouter un « aiguillage » qui permet d’afficher tel ou tel menu selon la racine de l’arborescence (« de » ou « fr »).

Aussi faut-il rajouter dans ses templates les markups HTML qui identifient la langue affichée pour que les moteurs de recherche puissent indexer les contenus correctement. En ce qui concerne les widgets, il existe des plugins comme par exemple Content Aware Sidebars qui permet d’afficher des widgets selon des critères choisis ; ainsi il est possible d’indiquer que telle page affiche un widget à contenu allemand et une autre, dans la même sidebar, un widget à contenu français.

Mais ne nous attardons pas trop sur cette option pour créer un site multilingue, ce n'est pas vraiment pratique. Surtout, la chose se complique lors de l'utilisation de WooCommcerce par exemple...

Multilingue avec WordPress multisite

Comme nous l'avons décrit ci-dessus, le mode Mutlisite de WordPress est une option à part entière pour créér des sites multilangues.

Pour ce faire, il faut installer WordPress en version multisite. Ce n'est pas difficile, mais les installeur 1-click que les hébergeurs proposent dans leurs Packs ne sauraient le faire. Ainsi, il ne faut pas hésiter à mettre la main à la pâte (!) ou éventuellement demander à l’agence de votre confiance de vous aider ;-).

Une fois Multisite mis en place, on découvre d’emblée une des grandes différences par rappport à la version standard de WordPress : il existe un Super-Admin. Le Super Administrateur peut accéder aux autres sous-sites et installer des thèmes et plugins. Les « Admins » normaux sont responsables du sous-site qui leur a été attribué, mais ils ne peuvent pas installer des plugins comme des thèmes WordPress, ils ne peuvent qu’activer ou désactiver les plugins et themes installés par le Super Administrateur. Aussi il est important de savoir, à ce stade, que tous les plugins ne sont pas compatibles au mode Multisite.

En tant que Super Administrateur créons par exemple, 2 sous-sites, l’un en « de », l’autre en « fr » et nous définissons deux équipes qui gèrent les deux sous-sites. Les mêmes utilisateurs peuvent avoir accès aux 2 sous-sites, ou seulement à l’un des deux. Cette séparation des accès est une fonctionnalité demandée par certains propriétaires de sites Web : des équipes distinctes pour des variantes linguistiques distinctes. Il est clair qu'une telle fonctionnalité est plutôt intéressante pour les grandes entreprises ou du moins celles avec des flux de travail strictement définis.

Cette séparation en sous-sites a l’avantage de maintenir des sites assez indépendants, mais en même temps, l’inconvénient est que, avec le temps, les deux sous-sites peuvent évoluer trop différemment et donc ne plus correspondre aux lignes marketing.

Pour connecter deux sous-sites, il existe différents plugins comme par exemple Multisite Langue Switcher, qui permet entre autre d’attribuer à chaque page sa correspondance dans l’autre sous-site (ou sous-sites)

Le multilangue avec WPML

Concentrons-nous maintenant sur le coeur du sujet de l'article : WPML (WPML = WordPress MultiLingual). Je ne vais pas vous expliquer en détail toutes les fonctionnalités du plugin, nous allons nous focaliser sur l’essentiel.

Contrairement au mode multisite, WPML ne demande pas de préparation particulière de WordPress, c’est-à-dire qu’il n’est pas indispensable de prendre des mesures très en avance dans le temps. Certes, pour revenir sur l'option « Multisite », il est possible de convertir un site WordPress „normal“ en version multisite en important les contenus dans un sous-site, mais c’est assez compliqué et sujet à erreur.

WPML est composé de plusieurs modules, il n’est toutefois pas indispensable de tous les installer. Le module principal est « WPML Multilingual CMS » – dans bon nombre de cas, d’autres modules seront nécessaires tels que "WPML String Translation", "WPML Translation Management", "WPML Sticky Links" et "WPML CMS Nav".

Paramétrage de base

Une fois installé, vous définissez les langues supplémentaires qui doivent être créées. Vous pouvez définir différents paramètres tels que :

  • la langue par défaut
  • l’affichage des variantes de langue dans l’URL en sous-dossiers ( "/ de", "/ fr") ou en tant que paramètre GET ( "?lang=de", "?lang=fr").
  • le sélecteur de langues : s’agit-il d’une liste de langues cote à cote ou d’un menu déroulant ? Veut-on afficher des petits drapeaux ?
  • La redirection automatique sur le contenu de langue du navigateur du visiteur

Doublement des pages WPML pour traduction

Une fois les paramétrages de base sélectionnés, il est temps de passer aux traductions : les pages et les articles peuvent être proposés à la traduction d’un simple clic de souris (en copiant ou non le contenu). Une fonction intéressante consiste à lier le contenu d’une langue à sa traduction, ainsi, vous serez averti des changements effectués dans la version originale afin de mettre à jour la traduction.

Menus spécifiques à une langue

Il ne suffit pas de traduire que les pages du site. En effet, les menus doivent être également affichés traduits automatiquement dans la langue sélectionnée : facile avec WPML. Soit vous utilisez la fonction de synchronisation (Synchronisation du menu) qui crée automatiquement tous les menus nécessaires, il ne reste plus qu’à traduire les titres ou vous créez directement un nouveau menu de navigation, sélectionnez la langue et indiquez à quel menu cette traduction correspond.

Et bien d’autres fonctionnalités

Sans entrer dans les détails, notez que WPML a des modules pour une traduction optimisée :

  • Gravity Forms (un plugin payant pour la création de formulaires)
  • Différents « page builder » : les „page builder“ sont des plugins qui remplacent l'éditeur visuel de WordPress ; ils permettent de créer facilement des mises en page complexes dans la zone de contenu. Parmi les plus populaires, citons un plugin gratuit SiteOrigin Page Builder ou encore Visual Composer (payant).
  • WooCommerce : l’extension e-shop pour WordPress

Avec SaaS Web, utilisez gratuitement WordPress WPML

Depuis longtemps, nous offrons l'utilisation de différents plugins sous licence au prix de l’hébergement de WordPress managé par SaaS Web. En plus de WPML, les plugins Gravity Forms et SearchWP - fonction de recherche améliorée - et la version Pro du plugin « Newsletter » sont également disponibles sans surcoût.

OpenProject, mode d’emploi suite et fin

3. Exécution

Pour l’exécution de vos projets, vous bénéficiez là encore de différents outils. Maîtrisez l’ensemble de vos projets avec un tableau de bord détaillé (Issue tracking), performant et personnalisable. Le flux d’activité (Activity stream) vous permettra aussi de savoir qui a travaillé sur quoi, quand et quelles actions ont été réalisées. Il vous sera également possible d’organiser des réunions depuis l’outil (Meetings). Enfin, vous utiliserez le glisser-déposer pour modifier des tâches, en rajouter ect…

Le tableau de bord pour une vue d’ensemble

Grâce au tableau de bord (issue tracking), vous pourrez gérer tous les livrables et les activités de vos projets avec des fonctionnalités de collaboration puissantes.

Ayez une vue d’ensemble de toutes vos actions - tâches, risques, fonctionnalités, bugs et bien plus encore - avec la possibilité de définir des flux de travail et des champs personnalisés pour adapter OpenProject à vos besoins. Conservez toutes les informations en un seul endroit.

Gestion du flux d’activité (activity streams)

Obtenez des rapports d'état instantanés et restez informé en temps réel de toutes les activités de vos projets.

Organisez des réunions (Meetings)

Utilisez la fonction Meetings pour gérer les agendas et compte-rendu et informer les participants du projet des derniers développements.

Vous avez la possibilité d’y intégrer des tâches et d’envoyer des notifications par email aux participants.

Méthode agile : SCRUM

Scrum (boite à outils) est une méthode agile dédiée à la « gestion de projet » qui a pour objectif d’améliorer la productivité de son équipe. Scrum tient son origine du terme sportif de rugby signifiant: mêlée ; car tous les acteurs doivent restés soudés dans l’accomplissement de leur tâche pour atteindre l’objectif final.

Scrum est idéal pour développer un schéma d’organisation de développement de produits complexes.

Grâce à cette méthode, utilisez le tableau de tâches pour organiser les livrables en tâches individuelles et mettre à jour leur statut par glisser-déposer.

4. Performance & contrôle

Créez des rapports personnalisés et managez votre budget

Par projet, vérifiez le temps passé à chaque action et les coûts alloués et créez des rapports personnalisés. Ces rapports vont vous permettre de suivre le temps et les coûts consacrés à un projet pour un aperçu précis et actuel.

Créez et managez vos budgets

Planifiez le coût à chaque phase du projet. Cet outil vous permettra d’avoir, en un coup d’oeil, un apercu de l’état budgétaire de votre projet. Phase par phase. Action par action.

5. Une communauté active et un accompagnement performant par SaaS Web.

OpenProject dispose d’une large communauté très active. Vous êtes libre d’accéder depuis le Forum à des discussions traitant de l’ensemble des fonctionnalités du logiciel.

Témoignage client :

« En tant que principal fournisseur Suisse de solutions de pompage, turbines et systèmes, nous nous félicitons de l’utilisation du logiciel open source sans avoir à gérer sa maintenance. Avec Open Project managé par SaaS Web, nous sommes toujours à jour et en mesure de planifier et de réaliser tous nos projets dans les meilleures conditions. » Christian Vetterli, Responsable de la technologie et de la logistique, Vice-président exécutif de la société Häny.

SaaS Web assure l’hébergement et la gestion de vos applications : updates, upgrades, services de sécurité 24/7 (patchs de sécurité, gestion des malwares, correctifs, sauvegardes de données). Confiez-nous l’infogérance de vos projets et concentrez-vous sur l’essentiel : votre métier !

Nous terminons cet article avec une dernière nouveauté : la possibilité d’intégrer le logo de votre entreprise vs le logo OpenProject. Plus personnalisable, la version 7 d’OpenProject permet aux utilisateurs de définir leurs propres schémas de couleurs pour créer leur propre identité d'entreprise dans OpenProject.