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.

Le plugin gratuit recommandé pour la création d’un formulaire de contact est Contact Form 7 : Page du plugin dans le répertoire de WordPress.

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 (en plus des informations par défaut) 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 (obligatoire) ;
Leur numéro de téléphone (obligatoire) ;
Leur genre.

Voici le code du formulaire :

<label> Votre nom (obligatoire)
    [text* your-name] </label>

<label> Votre e-mail (obligatoire)
    [email* your-email] </label>

<label> Votre message
    [textarea your-message] </label>

<label> Votre lieu de naissance
   [text naissance-lieu] </label>

<label> Votre lieu de naissance
   [date naissance-date] </label>

<label> Votre site web (obligatoire)
   [url* site-web] </label>

<label> Votre téléphone (obligatoire)
   [tel* telephone] </label>

<label> Votre genre </label>
   [radio genre default:1 "Homme" "Femme" "Autre"]

[submit "Envoyer"]

Notez la particularité de présentation de la balise <label></label> pour le dernier élément utilisant des boutons radios.

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

Il s’agit ici du code à saisir dans le champ Corps du message de l’onglet Email.

De : [your-name] <[your-email]>
Sujet : [your-subject]

Corps du message :
[your-message]

Lieu de naissance : [naissance-lieu]
Date de naissance : [naissance-date]

Site Internet : [site-web]
Téléphone : [telephone]

Genre : [genre]

-- 
Cet e-mail a été envoyé via le formulaire de contact de Site de démonstration (http://lyon2.juliencrego.com)

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

Pour utiliser le système Google Recaptcha, vous devez impérativement avoir un compte Google.

Rendez-vous sur le site https://www.google.com/recaptcha/about/ pour générer une clé de site et une clé privée pour Recaptcha.

Connectez-vous en cliquant sur le lien v3 admin console.

Générez des clés pour Recaptcha v3 (et pas v2).

Saisissez les deux informations dans le module adapté accessible via le sous-menu Intégration de Contact Form 7.

Installez l’extension Really Simple Captcha.
Activez l’extension.
Intégrer le captcha dans l’onglet Formulaire de Contact Form 7 en ajoutant les deux codes courts suivants : captchac pour insérer le « Challenge » (le texte à reproduire) et captchar pour le champ de réponse.

<label> Votre téléphone
   [tel* telephone] </label>

<label> Votre genre </label>
   [radio genre default:1 "Homme" "Femme" "Autre"]

[captchac captcha-1] 

<p>Veuillez reproduire le code ci-dessus : [captchar captcha-1]</p>

[submit "Envoyer"]

Pour en savoir plus sur l’intégration d’un captcha en utilisant le plugin Really Simple Captcha, consulter l’article : Really Simple 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.

WP Google Maps ;
WordPress Google Maps by Google Maps Bank.

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 ou Icomoon.

En savoir plus sur les polices d’icônes :

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.

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).

La possibilité de personnalisation des éventuelles colonnes latérales (sidebar) va dépendre du thème… Il faut déjà que le thème ait prévu une colonne latérale et ensuite que ce soit une option personnalisable.

Il sera donc peut être possible de configurer l’affichage/masquage d’un colonne latérale dans le customizer : Menu Apparence / Personnaliser.

Pour un réglage personnalisé de la page contact, vous pouvez consulter les options Attributs de page tout en bas de l’onglet Document lors de l’édition d’une page.

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.

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.