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.

<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 lieu de naissance
   [url site-web] </label>

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

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

[submit "Envoyer"]

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

<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 lieu de naissance
   [url* site-web] </label>

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

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

[submit "Envoyer"]

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

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

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

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

Afficher la solution

Solution :

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.