WordPress : Créer une page de contact complète WP04

Cet exercice consiste à créer une page de contact complète pour une installation de WordPress en utilisant les extensions adaptées.

Consignes de l’exercice

Création de la page de contact

Créez une nouvelle page intitulée Contacts.

Cherchez et installez une extension gratuite (ou freemium) permettant d’insérer dans votre page Contacts un formulaire offrant aux internautes la possibilité de vous envoyer un message.

Intégrez, à l’aide du plugin installé à la question précédente, un formulaire de contact dans la page que vous avez créée à cet effet.

Testez le formulaire de contact et assurez-vous d’avoir bien reçu le courriel à l’adresse de enregistrée lors de l’installation de votre site.

Personnalisez le formulaire de contact afin de demander à vos internautes les informations ci-dessous.

Utilisez les champs adaptés et faites en sorte de valider le contenu des champs dès que possible.

  • Leur lieu de naissance ;
  • Leur date de naissance ;
  • Leur site internet ;
  • Leur numéro de téléphone ;
  • Leur genre.

Personnalisez le formulaire de contact afin rendre obligatoire le numéro de téléphone et le site internet.

Testez à nouveau votre formulaire et assurez-vous de bien recevoir le mail avec la totalité des renseignements demandés dans le formulaire.

Protégez votre formulaire de contact avec un système Captcha.

En savoir plus sur la notion de Captcha : Fiche Wikipedia sur le terme Captcha

Intégrez la page Contacts dans votre menu principal via un lien.

Plan d’accès à la boutique

Imaginons que votre site est celui d’une boutique, vous allez donc intégrer une carte pour indiquer à vos internautes comment trouver votre boutique.

Cherchez et installez une extension gratuite (ou freemium) permettant d’insérer un plan d’accès (Ex : Google Map, OpenStreetMap, etc.) pour votre boutique.

Intégrez, à l’aide du plugin installé à la question précédente, un plan d’accès à votre boutique sur la page contact.

Widget pour accéder à la page « Contacts »

Cherchez et installez une extension gratuite (ou freemium) permettant d’utiliser une police de caractères d’icône telle que Font Awesome.

En savoir plus sur Font Awesome Site officiel de la version 5 de Font Awesome

Insérez un Widget de type Texte dans une zone visible de votre site (colonne latérale ou sidebar de préférence).

En utilisant le widget et le plugin que vous venez d’installer, ajoutez un lien sur une icône adaptée (une enveloppe par exemple) permettant d’accéder à votre page Contacts.

Présentation de la page contact

Il s’agit maintenant de mettre en forme correctement la page Contacts de votre site

Si ce n’est pas déjà le cas, faites en sorte que votre page s’affiche sur toute la largeur de l’écran (sans widget latéral).

Ajoutez au dessus de la carte :

  • Les horaires d’ouverture de votre magasin ;
  • L’adresse du magasin ;
  • Votre numéro de téléphone.

Ajoutez des icônes pour illustrer les informations que vous venez de rajouter.

Présentez votre page Contacts sur deux colonnes :

  • Colonne 1 : le formulaire de contact ;
  • Colonne 2 : le plan et les horaires.

Si vous savez faire, peaufinez l’affichage de votre page « Contacts » en utilisant des CSS personnalisés.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.