Intégrez des fonctionnalités complémentaires grâce aux extensions

La première fonctionnalité que nous allons ajouter est un formulaire de contact, indispensable pour faciliter l’efficacité de son site pour récupérer des demandes clients.

Pour cela, nous allons utiliser WP Forms, l’extension qui a été installée par défaut lors de l’import du site de démo OceanWP.

Cette extension développée est en effet particulièrement simple d’utilisation et enregistre automatiquement les soumissions des formulaires en base de données. Cela est très important, car il n’est pas rare que les notifications e-mails ne fonctionnent pas ou passent en spam. Je ne vous souhaite vraiment pas de devoir expliquer à un client que toutes les demandes de contact prospects des dernières semaines ont été perdues à cause d’un problème de configuration d’e-mails.

Création du formulaire

• Rendez-vous dans la rubrique “WP Forms” depuis le dashboard WordPress.

• Cliquez sur “Nouveau”.

• Saisissez “contact” comme nom pour notre formulaire et sélectionnez le modèle “Formulaire de contact simple”.

• Vous pouvez maintenant ajouter des champs en les faisant glisser depuis la colonne de gauche, et les réorganiser en glissé-déposé dans la zone de prévisualisation du formulaire à droite. Plutôt simple, non ?

• Cliquez sur un champ dans la zone de prévisualisation à droite pour modifier les options du champ. Vous pouvez ainsi rendre le champ obligatoire, modifier le libellé du champ, etc.

Réglages du formulaire

Cliquez maintenant sur l’onglet “Réglages” dans le menu de gauche.

Modifiez les libellés de la section générale au besoin, puis cliquez sur “Notifications”. C’est là que vous pouvez régler les paramètres d’envoi d’e-mails pour être averti qu’une demande de contact a été effectuée.

La configuration des e-mails repose sur des balises qui permettent d’utiliser des valeurs dynamiques dépendant des valeurs saisies dans le formulaire, ou paramétrées dans le site. Ici, la demande est configurée pour envoyer l’ensemble des champs (balise {all_fields}) à l’adresse e-mail de l’administrateur du site telle que configurée dans Réglages >> Général (balise {admin_e-mail}). Vous pouvez cliquer sur les liens “balises intelligentes” pour voir la liste des balises disponibles.

Cliquez enfin sur “Confirmation” pour configurer le message de réponse automatique qui sera envoyé à l’e-mail du visiteur, et enregistrez le formulaire en cliquant sur “Enregistrer” en haut à droite.

Insertion du formulaire dans la page

Solution 1 : utiliser un shortcode

Pour insérer une fonctionnalité dans un article ou une page, la solution historique et la plus répandue est l’utilisation de “shortcodes” (ou “codes courts”, en français).

Pour obtenir le shortcode WP Forms, cliquez sur “Embed” en haut. Le shortcode obtenu devrait ressembler à :     .

Les paramètres sont :

• id : l’identifiant du formulaire devant être affiché.

• title : valeur true ou false pour choisir d’afficher ou non le titre du formulaire.

• description : valeur true ou false pour choisir d’afficher ou non la description du formulaire.

Vous pouvez les modifier tout en faisant bien attention d’utiliser l’ID d’un formulaire existant, sans quoi rien ne s’affichera !

Si vous souhaitez intégrer le shortcode dans une page éditée avec l’éditeur classique, il suffit de le coller dans la zone de contenu.

Dans notre cas, la page est éditée avec Elementor ; retournez donc maintenant sur votre page d’accueil et cliquez sur “Éditez avec Elementor”.

• Ajoutez une nouvelle section en cliquant sur l’icône “plus” sur fond rose en bas de page.

• Choisissez “Pleine largeur” comme largeur de contenu.

• Cliquez sur l’icône d’accès aux modules Elementor dans la colonne de gauche et cherchez “Code court”.

• Glissez le composant dans la section que vous venez de créer, collez le code court copié précédemment et cliquez sur “Appliquer”.

Ça y est ! Votre formulaire est intégré sur votre page.

Solution 2 : utiliser un widget

La majorité des plugins génèrent aussi des widgets, pas au sens d’Elementor, mais au sens de WordPress. Heureusement, ceux-ci sont utilisables directement dans la majorité des page builders, dont Elementor :

• Cliquez sur l’icône d’accès aux modules Elementor.

• Cherchez “WP forms” et glissez le module dans la section souhaitée.

• Utilisez le menu contextuel pour choisir le formulaire souhaité.

La seconde fonctionnalité que nous souhaitons ajouter est un pop-up s’affichant automatiquement pour inviter à s’inscrire à notre newsletter. Cette pratique est parfois ennuyeuse et il ne faut pas en abuser, mais elle permet de récupérer les adresses e-mail de prospects et de maintenir le contact avec son audience.

Pour ajouter cette fonctionnalité, nous allons utiliser le plugin Hustle développé par la société WPMUDEV, un des gros acteurs de l’écosystème WordPress.

Installez le plugin depuis le dashboard WordPress dans Plugins >> Ajouter.

Une fois activé, le plugin vous propose de choisir le type de fonctionnalité souhaitée.

• Choisissez “Popup”.

• Rentrez le nom “Newsletter”.

• Cliquez sur “Show GDPR checkbox” pour être en règle avec la législation européenne et passez le texte en français, en prenant garde à ne pas supprimer le lien vers la politique de confidentialité.

• Cliquez sur “Add e-mail collection to this pop-up” pour activer la fonctionnalité d’intégration avec les outils de newsletter.

• Sélectionnez Mailchimp et cliquez sur “Edit form” pour passer les labels du formulaire en français.

• Cliquez sur “Preview” à gauche pour vérifier que le pop-up s’affiche bien comme souhaité.

• Cliquez sur “Continue”, et à nouveau sur “Continue” sur la page suivante (n’hésitez cependant pas à jouer avec les options de design).

• Cliquez ensuite sur “Show after certain time” et saisissez 5 s pour n’afficher le formulaire qu’après un certain temps passé sur la page.

• Cliquez sur “Publish” et visitez votre site. Le pop-up devrait bien s’afficher !

Maintenant que nous avons mis en place ces fonctionnalités complémentaires, nous allons travailler sur des fonctionnalités avancées qui ne sont pas toujours indispensables, mais qui vous permettront de passer au niveau supérieur en termes de création de site.

Auparavant, finalisons notre page :

Enfin, vérifions que notre site est adapté pour un affichage sur mobile :

Il est important de sauvegarder votre site régulièrement, même si votre hébergeur propose des sauvegardes automatiques.

En effet, bien qu’exceptionnels, les accidents sont toujours possibles sur les serveurs ou les datacenters. Et il faut bien comprendre que dans ce cas vous perdez absolument tout votre travail si vous n’avez pas de sauvegardes distantes.

Heureusement, des extensions gratuites permettent de sauvegarder facilement votre site sur votre machine ou sur des emplacements distants comme Google Drive.

Nous allons utiliser l’extension “Updraft Plus” pour télécharger une sauvegarde sur notre machine et planifier des sauvegardes automatiques quotidiennes sur Google Drive.

Commencez par installer l’extension dans Extensions >> Ajouter.

Une fois l’extension activée, vous êtes invité à suivre une présentation de l’interface.

Téléchargez une sauvegarde manuelle sur votre machine

Une fois cette dernière finalisée, rendez-vous dans l’onglet “Sauvegarder/Restaurer”.

Cliquez sur “Sauvegarder” pour lancer une sauvegarde manuelle et gardez cochés “Base de données” et “Fichiers” : on veut en effet sauvegarder l’intégralité du site.

Une fois la sauvegarde finalisée, vous la retrouverez dans “Sauvegardes existantes” un peu plus bas.

Cliquez sur chacun des boutons (Base de données, Extensions, Thèmes, Téléversements et autres) pour télécharger ces éléments sur votre machine.

Planifiez des sauvegardes distantes

Passons maintenant à ce qui nous intéresse le plus : la planification de sauvegardes distantes.

Pour cela, rendez-vous dans l’onglet “Réglages”. Sélectionnez “Quotidiennement” dans les deux listes déroulantes.

Saisissez ensuite le nombre de sauvegardes à conserver dans les champs à droite. Attention, plus le nombre est élevé, plus cela va prendre d’espace sur votre Drive.

Puis cliquez sur “Google Drive” plus bas dans la page. Connectez-vous à votre compte Google puis cliquez sur “Enregistrer les modifications”.

Ça y est, Updraft Plus devrait créer un dossier sur votre Drive et y uploader tous les jours un backup de votre site !

• Les extensions permettent d’intégrer des modules complémentaires dans les pages Elementor soit via des modules Elementor natifs, soit via des widgets, soit via des shortcodes.

• Attention, contrairement aux modules Elementor natifs, les shortcodes ne sont pas visualisés en temps réel, il faut cliquer sur “Appliquer” pour voir le rendu dans le panneau de prévisualisation.

• Si vous mettez en place un formulaire de contact, prenez soin de choisir une solution qui enregistre les demandes en base de données ou d’utiliser un addon pour le faire, car les e-mails peuvent facilement se perdre ou être mal configurés.

• N’oubliez pas de mettre en place une extension pour sauvegarder votre site sur un espace de stockage distant, les accidents n’arrivent pas qu’aux autres !

Notre site répond maintenant à notre objectif de récupération d’adresses e-mail de prospects intéressés par nos services ! Avant de le mettre en ligne, je vous propose de découvrir quelques fonctionnalités supplémentaires.