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.
Exemple d’extensionInté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.
Afficher la solution avec Contact Form 7Testez à nouveau votre formulaire et assurez-vous de bien recevoir le mail avec la totalité des renseignements demandés dans le formulaire.
Afficher la solution avec Contact Form 7Proté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.
Afficher la solutionInté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 ou Icomoon.
En savoir plus sur les polices d’icones :
– Font Awesome :
Site officiel de la version 5 de Font Awesome
– Icomoon :
Site officiel d’icomoon
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.
Afficher la solution avec Font AwesomePré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).
Afficher la solutionAjoutez 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.
Sauf mention contraire*, l'article WordPress : Créer une page de contact complète [WP04] et son contenu par Julien Crego sont mis à disposition selon les termes de la licence Creative Commons

Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International
Cette licence vous permet de remixer, arranger, et adapter cette œuvre à des fins non commerciales tant que vous créditez la source en citant le nom des auteurs et que les nouvelles œuvres sont diffusées selon les mêmes conditions.
* Cette notice est intégrée automatiquement à la fin de chaque article de ce site.