• 15 heures
  • Facile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 31/07/2019

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

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Ajoutez un formulaire de contact avec WP Form

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 “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 “Notifications”. C’est là que vous pouvez régler les paramètres d’envoi d’e-mails pour vous prévenir 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 “Confirmation” pour configurer le message de réponse automatique qui sera envoyé à l’e-mail du visiteur et enregistrez le formulaire en cliquant “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 “Embed” en haut. Le shortcode obtenu devrait ressembler à :  [wpforms id="437" title="false" description="false"]  .

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 “Éditez avec Elementor”.

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

  • Choisissez “pleine largeur” comme largeur de contenu.

  • Cliquez 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 “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é.

Ajoutez un pop-up d’inscription à une newsletter

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 “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 “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 “Edit Form” pour passer les labels du formulaire en français.

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

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

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

  • Cliquez “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ée pour un affichage sur mobile :

Exemple de certificat de réussite
Exemple de certificat de réussite