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.

Exemple d’extension

Exemple d’extension :

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 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.
Afficher la solution avec Contact Form 7

Solution avec Contact Form 7 :

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 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"]

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

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 7

Solution avec Contact Form 7 :

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

Afficher la solution avec Contact Form 7

Solution avec Contact Form 7 :

Solution avec Contact Form 7 :

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

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 solution

Solution :

  • 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’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 Awesome

Solution avec Font Awesome :

  1. Sélectionnez l’icône de votre choix dans la galerie de Font Awesome
  2. Retrouvez le code html de l’icône (en dessus de l’aperçu) ex : <i class="far fa-address-book"></i>
  3. Insérez l’icône dans vos articles :
  • Utilisez le shortcode (méthode recommandée) avec le nom de l’icône. ex :
    ou
  • Utilisez le code HTML directement (afficher le code HTML du bloc)

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.

Aperçu de l'option Attributs de 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.
Afficher la solution

Solution :

Pour ajouter des colonnes, il suffit d’utiliser le bloc colonne.

Si vous ne souhaitez pas avoir à reprendre tous vos blocs, vous pouvez basculer en affichage Éditeur de code pour l’ensemble de la page et manipuler directement le code HTML

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

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.

Laisser un commentaire

Votre adresse e-mail 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.