Ajoutez un formulaire de contact avec WPForms
Regardez la vidéo de démonstration pour suivre les étapes clés.
La première fonctionnalité que nous allons ajouter est un formulaire de contact, indispensable pour faciliter les demandes des clients.
Pour cela, nous allons utiliser WPForms, l’extension qui a été installée par défaut lors de l’import du site de démo OceanWP.
Il existe de nombreuses autres extensions permettant de créer des formulaires de contact. On citera en particulier :
Contact Form 7 : la préférée des développeurs, car gratuite, très flexible, et permettant de nombreuses intégrations. Elle possède plusieurs addons gratuits dont “Flamingo” qui enregistre automatiquement tous les formulaires remplis par vos visiteurs. C’est pratique en cas de problème de réception de mails !
Gravity Forms : cette extension est premium, mais offre de très nombreuses possibilités grâce à une interface complète, mais simple d’utilisation, et de très nombreux addons permettant des intégrations poussées avec d’autres plugins.
Création du formulaire
Rendez-vous dans la rubrique “WPForms” depuis le dashboard WordPress.
Cliquez sur “Ajouter”.
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 glisser-déposer dans la zone de prévisualisation du formulaire à droite. 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 et changer sa taille, 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_email}).
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
Option 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 WPForms, suivez ces étapes :
Cliquez sur “Intégration” en haut.
Cliquez sur “Utiliser un code court”. Le shortcode obtenu devrait ressembler à : [wpforms id="746" title="false"].
Copiez ce lien.
Les paramètres associés sont :
id : l’identifiant du formulaire devant être affiché.
title : valeur true ou false pour choisir d’afficher ou non le titre du formulaire.
Retournez maintenant sur votre page d’accueil :
Cliquez sur “Modifiez avec Elementor”.
Ajoutez une nouvelle section pleine page et ajoutez un titre et un sous-titre.
Recherchez “Code court” dans les widgets d’Elementor et glissez-le sous votre contenu.
Collez le code donné par WPForms.
Option 2 : utiliser un widget
La majorité des plugins génèrent aussi des widgets. 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 “WPForms” dans les widgets Elementor et glissez le module dans la section souhaitée.
Utilisez le menu contextuel pour choisir le formulaire souhaité. Vous pouvez également styliser plusieurs éléments, dont le bouton “Envoyer” !
Ça y est ! Votre formulaire est intégré sur votre page.
Ajoutez un pop-up d’inscription à une newsletter
Regardez la vidéo de démonstration pour suivre les étapes clés.
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.
Dans l’interface d’administration :
Cliquez sur “Hustle” et regardez le tutoriel si vous le souhaitez.
Allez dans “Pop-ups” et cliquez sur “Create”.
Nommez votre pop-up “Newsletter” et choisissez le template “Newsletter Signup”.
Remplacez tous les textes existants en français.
Dans “Email”, changez les textes des boutons et des remerciements en français.
Cliquez sur “Publish”.
Il y a de nombreuses options disponibles pour rendre votre pop-up agréable, comme par exemple les couleurs, le chronomètre pour son apparition et les conditions d’apparition. Je vous laisse paramétrer votre pop-up en fonction de vos besoins.
Sauvegardez votre site régulièrement avec UpdraftPlus
Regardez la vidéo de démonstration pour suivre les étapes clés.
Il est important de sauvegarder votre site régulièrement, même si votre hébergeur propose des sauvegardes automatiques. Nous travaillons pour le moment en local, mais il faut réfléchir à ce problème avant de mettre votre site en ligne.
En effet, bien qu’exceptionnels, les accidents sont toujours possibles sur les serveurs ou les datacenters. Il faut bien comprendre que dans ce cas vous perdez absolument tout votre travail si vous n’avez pas de sauvegardes distantes, c’est-à-dire en dehors du serveur, sur un cloud ou un disque dur personnel.
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 “UpdraftPlus” pour télécharger une sauvegarde sur notre machine et planifier des sauvegardes automatiques quotidiennes sur Google Drive.
Cliquez sur “Extensions”.
Cliquez sur “Ajouter une extension”.
Écrivez “UpdraftPlus” dans la barre de recherche et installez-la.
Une fois l’extension installée et activée, vous êtes invité à suivre une présentation de l’interface.
Téléchargez une sauvegarde manuelle sur votre machine
Une fois la présentation finalisée, rendez-vous dans “UpdraftPLus Backup/Restore” en cliquant sur Réglages et “Sauvegardes UpdraftPlus”.
Cliquez sur “Sauvegarder” pour lancer une sauvegarde manuelle et gardez cochées les cases “Base de données” et “Fichiers” : on veut 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.
Rendez-vous dans l’onglet “Réglages”.
Sélectionnez “Daily” (pour une sauvegarde journalière) dans les deux listes déroulantes.
Saisissez le nombre de sauvegardes à conserver dans les champs à droite. Attention, plus le nombre est élevé, plus cela va prendre d’espace.
Choisissez votre site de stockage (Google Drive par exemple).
Cliquez sur “Enregistrez les modifications” et connectez-vous à votre compte Google.
Validez la mise en place de la sauvegarde en cliquant sur “Complete setup”. Ça y est, UpdraftPlus devrait créer un dossier sur votre Drive et y télécharger tous les jours une sauvegarde de votre site !
En résumé
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.
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.
