Créer un formulaire de contact sur WordPress avec Contact Form 7

Contact Form 7

Sommaire

Vous souhaitez intégrer un formulaire de contact dans votre site internet, via WordPress, mais vous êtes novice en matière de codage ?
Aucun problème, ce tutoriel est fait pour vous !
Dans ce tutoriel nous allons vous détailler et vous expliquer chacune des étapes de la création d’un formulaire de contact; en commençant par l’installation du module, en passant par la personnalisation de votre formulaire, pour terminer avec l’intégration de votre formulaire sur votre site.

1. Installer le module Contact Form 7

Le module « Contact Form 7 » n’est pas une option incluse par défaut dans les thèmes de WordPress, il vous faut donc l’installer.
Rassurez-vous ce module est totalement gratuit, et c’est le plus utilisé pour créer des formulaires de contact.
Commencez par aller dans l’onglet « Extensions » puis cliquez sur « Ajouter » en haut à gauche de votre fenêtre.

Faites ensuite une recherche rapide (dans la barre de recherche située en haut à droite de votre fenêtre) et tapez: « Contact form 7 ».
Le premier résultat affiché correspond au module que nous allons installer. Cliquez donc sur « Installer maintenant ».
Votre module est maintenant installé et un onglet a été ajouté à votre menu de gauche afin d’y accéder rapidement.
Rendez-vous dans cet onglet appelé « Contact » afin de commencer à créer votre formulaire de contact.

Vous avez tout compris ? Alors rendez-vous à l’étape suivante!

2. Le jargon HTML et CSS

Avant de commencer, vous devez savoir ce que sont les langages HTML et CSS.
(Si vous n’avez pas besoin de précisions quant à ces langages, passez directement à l’onglet suivant: la personnalisation du Contact Form 7)

Le HTML qu’est-ce que c’est ?

Le HTML (« HyperText Mark-Up Language ») est un langage dit de « balisage ». Il permet de créer le contenu des pages web.

Le CSS qu’est-ce que c’est ?

Le CSS (« Cascading Style Sheets ») est un langage qui permet la mise en forme des contenus des pages web.

Quelle est la différence entre HTML et CSS?

Le langage HTML et CSS ne sont pas opposés mais complémentaires!
En effet, il n’est pas ici question de choisir entre l’un ou l’autre mais bien de jongler avec les deux.
Vous allez d’une part créer le contenu de votre formulaire (ex: une case pour le champs « nom » ainsi qu’une case pour le champs « prénom ») : Vous utiliserez ici le langage HTML
puis vous aurez besoin de styliser ces champs (ex: la taille, la couleur, la police…):
Vous utiliserez ici le langage CSS
De plus, s’il existe une différence entre ces deux langages c’est parce qu’ils ne peuvent pas être utilisés sur la même feuille de texte en même temps. Vous allez devoir aller dans les options de votre thème pour pouvoir créer/modifier votre CSS; en revanche, ce sera directement dans le module de « Contact Form 7 » que vous pourrez taper du HTML.

Le jargon HTML et CSS

Afin de vous aider à mieux comprendre certains termes qui seront employés tout au long de ce tuto, voici un petit lexique du jargon des langages HTML et CSS.

Feuille de style:

La feuille de style est la feuille de texte où vous allez rédiger votre code CSS.

Balise/tag:

On utilise les balises pour appliquer des paramètres à un certain contenu. Les balises sont présentées ainsi : <b> Bonjour! </b>

Ici, les balises « b » indiquent que tout ce qui se trouve entre les deux balises doit être mis en gras. Pour qu’une balise fonctionne, il faut ouvrir la balise et la refermer avec un slash « / ».

Div id:

Les div id vont regrouper plusieurs paramètres, que vous pourrez ensuite appliquer à vos contenus. Afin de vous y retrouver, vous devrez nommer vos différents div id. Une div est représentée ainsi: <div id= »tuto »> Bonjour! </div>

Ici, les balises div indiquent que tout ce qui se trouve entre les balises doit suivre les paramètres correspondant à la div appelée « tuto », dans la feuille CSS.

Et dans notre feuille CSS, nous aurons par exemples des paramètres qui indiqueront que la taille de la police doit être en 12px et que le texte doit être écrite en rouge.

Balise ou Div id, quelle différence?

Les balises permettent de styliser votre contenu ponctuellement. (exemple: mettre en gras quelques mots)
En revanche, les div sont très utiles lorsque:

  • Il y a plusieurs paramètres à appliquer à votre contenu
  • Ces paramètres reviennent souvent dans votre contenu.


Ainsi, au lieu de recopier vos balises à chaque fois, vous n’aurez qu’à créer une div (dans votre feuille de style CSS) puis à indiquer que les paramètres de telle ou telle div doivent être appliqués à votre contenu.
(Note: lorsque vous appliquez une div id à votre contenu HTML, cela se fait aussi sous forme de balise! Ainsi, la balise <div> vous permet de gagner du temps car elle regroupe à elle seule plusieurs paramètres que vous auriez dû écrire sous forme de plusieurs balises)

Tout est une histoire de marges …

Avant toute chose, il est important pour vous de bien visualiser le fonctionnement du langage HTML et CSS, grâce à ce schéma vous expliquant les marges.

Afin de pouvoir indiquer (seulement en codant) les zones où se trouveront vos contenus, vous devez raisonner en termes de « boîtes ».

(Note: on peut parler en pixels (px) pour indiquer des tailles, mais nous utiliserons des pourcentages (%) car cela permet de rendre votre contenu Responsive: cela signifie que votre contenu s’adaptera à toutes les tailles d’écrans afin de créer un contenu toujours harmonieux.)
Voici à quoi ressemble une « boîte »:

Ce sont grâce à ces paramètres que vous allez pouvoir choisir la taille de votre boîte qui contiendra votre contenu.
Vous pouvez donc exprimer ces mesures en pixels, ou en pourcentages.
Pour notre tuto, nous parlerons en pourcentages.
Voici à quoi ressemble la feuille de style CSS avec ces paramètres:
{
margin: 3%;
padding-right: 10%;
padding-top: 5%;
width: 100%;
border: none;
}
Note: si vous précisez de quel margin/padding il s’agit, la mesure ne s’appliquera qu’au côté que vous aurez mentionné (dans notre exemple: padding-right et padding-top); en revanche, si vous ne précisez pas de quel côté il s’agit, les mesures s’appliquent automatiquement à tous les côtés! (dans notre exemple: margin)


Voici un petit tableau vous récapitulant les principaux paramètres que vous pouvez utiliser pour styliser vos contenus. Attention! Ce tableau n’est pas complet! Il existe une multitude d’autres paramètres que vous pouvez utiliser, n’hésitez pas à faire des recherches sur internet afin de trouver les codes qui permettent de créer les effets que vous désirez.

En ce qui concerne les couleurs, il y a deux manières de renseigner la couleur que vous souhaitez:

  • Soit en écrivant la couleur en toutes lettres (exemple: « green » pour vert).
  • Mais vous pouvez aussi ajouter un code couleur. Cela est très utile si vous souhaitez ajouter une nuance de couleur qui ne porte pas forcément de nom. (exemple: #40E0D0 pour un bleu turquoise). Un code couleur commence toujours par un hashtag « # » et comporte 6 lettres/chiffres.

Pas de panique ! Il n’est pas utile de connaître par cœur les codes couleurs! Vous pouvez simplement utiliser des sites qui vous génèrent des codes couleur; ensuite un simple copier/coller suffit.

http://www.code-couleur.com/
http://html-color-codes.info/Codes-couleur-HTML/


Avant de commencer à personnaliser votre formulaire de contact, voici une petite mise en application de tout ce que nous avons vu jusqu’à présent.
(Nous créons la div appelée « tuto » où nous allons choisir nos paramètres)

Voici votre feuille CSS:

#tuto {
font-size: 13px;
font-color: #97066B;
font-style: bold;
}

(Nous allons appliquer la div à l’ensemble du texte)

Voici votre page HTML:
<div id= « tuto »>Bonjour, grâce à ce tuto vous aller apprendre à personnaliser votre formulaire de contact! </div>

Et voici le résultat:
Bonjour, grâce à ce tuto vous aller apprendre à personnaliser votre formulaire de contact!


Vous avez tout compris ?
Passer à l’étape suivante !

3. Personnalisation du Contact Form

Onglet 1: La feuille de style CSS

Pour commencer, il vous faut ouvrir deux onglets différents afin de pouvoir modifier à la fois votre feuille CSS et revenir sur votre formulaire de contact rapidement.

Rendez-vous dans votre menu de gauche, dans l’onglet « Apparence », puis cliquez sur « Éditeur ».

La zone de texte blanche correspond à votre feuille de style CSS où vous allez pouvoir rédiger tous vos paramètres.
N’oubliez pas d’enregistrer régulièrement les modifications que vous apportez, en cliquant sur « Mettre à jour le fichier ».

(Note: vous pouvez ajouter des commentaires afin de mieux vous y retrouver, sans que ces annotations ne soient prises en compte par le code CSS. Mettez les balises » /*  » et  » */  » avant et après vos annotations. Par exemple: /* les paramètres suivants serviront à mon formulaire de contact */ ).

Vous pouvez également aller directement dans votre page contact et utiliser l’éditeur « Visual Composer » pour entrer votre code CSS.
(Attention! Le visual Composer est certes LE plugin WordPress de mise en forme, mais il n’est pas installé par défaut sur votre site. Prenez soin de l’installer et de l’activer auparavant; il est payant)
L’avantage de cette méthode est que votre feuille de style CSS s’appliquera uniquement à votre page contact. (Attention, dans certains cas cela peut créer un bug sur le visual composer, privilégiez la première méthode.)
Pour cela rien de plus simple:
Cliquer sur l’icône « Paramètres » en haut à droite de votre page afin d’accéder à votre feuille de style CSS.


Onglet 2: Le formulaire de contact

Rendez-vous cette fois dans l’onglet « Contact » puis cliquez sur « Créer un formulaire ».

Ajoutez un nom à votre formulaire et, ici aussi, pensez à enregistrer régulièrement en cliquant sur « Sauvegarder ».


Nous allons commencer par créer notre formulaire en ajoutant toutes les options dont nous avons besoin.
Grâce au module « Contact form 7 » vous pouvez créer plusieurs types de champs: (ceux-ci sont répertoriés sur le menu déroulant « Générer un marqueur » situé à droite)




Voici un récapitulatif de toutes les options qui peuvent être ajoutées à votre formulaire de contact:
(Note: la fonction CAPTCHA n’est pas présentée car elle nécessite l’installation d’un module.)

Attention! Bien que les options « Champs de texte », « Email », « URL » et « Numéro de téléphone » rendent le même visuel sur votre formulaire, ne choisissez pas le chemin de la facilité en entrant « Champs de texte » à chaque fois !

Pourquoi bien identifier le champs ?

Il est important d’identifier si le champs de texte doit accueillir un e-mail, un numéro ou seulement des lettres.
En effet, si votre site est visité depuis un smartphone par exemple, lorsqu’un numéro sera demandé, l’affichage de l’écran sera différent.
Voici la différence entre le champs « text » et « number »


Pour chacune des options, sélectionnez sur le menu déroulant celle que vous souhaitez intégrer à votre formulaire; définissez les paramètres si besoin, puis copiez/collez le code qui aura été généré.


Afin de pouvoir vérifier rapidement votre travail (et ainsi pouvoir modifier les choses qui ne vous plaisent pas), vous allez créer votre page contact, en ajoutant (grâce à l’éditeur « Visual composer » ) votre Contact Form 7. Pensez à enregistrer votre brouillon pour pouvoir vérifier vos modifications en temps réel.
Cliquez donc sur « Enregistrer brouillon » puis sur « Aperçu ».
Vous aurez alors un aperçu exact de votre page où se trouvera votre formulaire de contact.


Une fois le fond de notre formulaire créé, nous allons pouvoir modifier sa forme. Et pour cela, rendez-vous dans votre onglet où se trouve votre feuille de style CSS.

Voici ici notre formulaire, rédigé en HTML

Voici ici notre feuille de style, rédigée en CSS

Voici le résultat, sur notre page contact


Nous allons maintenant personnaliser le formulaire de contact et vous présenter quelques possibilités de modifications de votre formulaire.
Mais ne vous limitez pas à nos exemples et n’hésitez pas à explorer toutes les possibilités que propose le CSS !

Voici notre feuille de style, rédigée en CSS.
Nous avons créé des paramètres visant à styliser les textes

Voici notre formulaire, rédigé en HTML
Nous avons appliqué la div « tuto » aux textes « Nom, Prénom » et « Civilité »

Voici le résultat, sur notre page contact
Les textes « Nom, Prénom » et « Civilité » ont bien été modifiés et stylisés.
Le premier champs de texte à lui aussi été stylisé.


Nous allons à présent vous montrer comment styliser de manière un peu plus complexe votre formulaire de contact, à savoir:

1. Comment créer plusieurs colonnes
2. Comment styliser le bouton « Submit »
3. Comment écrire dans les champs de texte

Commençons par créer deux colonnes.
Il est souvent plus pratique (voir plus esthétique) de créer deux colonnes pour vos champs.
Il faut pour cela commencer par définir la largeur totale du formulaire (nous avons choisi de prendre 100% de l’espace disponible).
Puis il faut définir la taille des deux colonnes (si vous souhaitez séparer simplement votre espace en deux parties égales, vous choisirez de mettre 50% aux deux colonnes. Ici nous avons choisi de mettre 48% car nous souhaitons conserver un espace entre les deux colonnes pour ne pas que nos champs soient collés.)
Voici un petit schéma pour vous aider à comprendre la démarche à suivre:

Voici la page de style, rédigée en CSS
Nous créons deux colonnes de tailles égales

Voici notre formulaire de contact, rédigé en HTML
Nous indiquons que tout notre contenu se trouvera dans la div « two-column » qui prend bien 100% de l’espace total de la page.
Nous indiquons ensuite les éléments qui se trouveront dans la colonne de gauche (left) et ceux qui se trouveront dans la colonne de droite (right)

Voici le résultat, sur notre page contact
Nos deux colonnes sont bien présentes et également réparties.


Nous allons maintenant styliser votre bouton « Submit » afin qu’il devienne dynamique et notamment modifier la couleur du bouton lorsqu’on survole celui-ci.

Voici notre page de style, rédigée en CSS
Nous avons stylisé notre bouton « Submit » lorsque celui-ci est survolé, mais aussi lorsqu’il ne l’est pas.
« Hover » est la fonction qui permet de styliser un bouton lorsque celui-ci est survolé.

Voici notre formulaire, rédigé en HTML
Nous appliquons nos modifications à notre bouton « Submit » grâce aux balises <div id= « tuto »>

Voici le résultat, sur notre page de formulaire de contact
Nous avons bien modifié notre bouton « Submit » afin que celui-ci change de style lorsqu’il est survolé.


Nous allons maintenant faire en sorte que notre texte s’affiche dans nos champs de texte et que celui-ci disparaisse lorsqu’on veut écrire dans le champs.

Voici notre formulaire de contact, rédigé en HTML
Cette fois, vous avez seulement besoin de modifier votre page de formulaire, sans toucher à votre feuille de style CSS.
Ajoutez la fonction « placeholder » pour placer votre texte dans votre champs de texte.

Voici le résultat, sur la page contact
Maintenant votre texte se trouve dans votre champs de texte et disparaîtra automatiquement lorsque quelque chose sera inscrit dans ce champs de texte.


Vous avez tout compris ?
Alors passez à l’étape suivante !

4. Utiliser le Contact Form

Nous allons maintenant paramétrer l’e-mail que vous recevrez lorsqu’un de vos visiteurs voudra vous envoyer un formulaire de contact.
Pour cela, descendez simplement sur la page de votre formulaire de contact, afin d’obtenir cet écran:

Vous allez pouvoir décider de:

  • L’adresse mail qui recevra le mail provenant de votre formulaire de contact. (Si vous souhaitez faire des tests, pensez à mettre votre propre adresse mail que vous pouvez aller consulter rapidement.)
  • Le contenu du mail que vous recevrez

Par exemple, vous pouvez paramétrer le mail pour qu’il s’affiche de cette manière:
(Pensez à bien mettre vos paramètres en crochets!
exemple: [your-name]).

Pour cela, vous allez devoir renseigner quels éléments vous souhaitez voir apparaître, de la manière suivante: 

Attention ! ce n’est pas terminé !
Vous devez indiquer dans votre formulaire quel champs doit correspondre à « your name ».
En effet, vous pouvez renseigner s’il s’agit d’un champs de texte, du numéro, d’email etc. Mais rien n’indique le contenu du champs.
Pour cela, retournez dans votre formulaire de contact et ajoutez les champs dont vous avez besoin.
Voici ce que cela donne, en suivant notre exemple:

Vous pouvez maintenant insérer votre formulaire de contact dans votre site.
Si vous avez suivi notre tuto depuis le début, cette étape est déjà faite car nous vous avions conseillé d’insérer votre short code « Contact Form 7 » dans une page de contact afin d’aller vérifier rapidement l’apparence de votre formulaire.
Voici un rappel pour intégrer votre formulaire de contact dans une page de votre site:
Créez une nouvelle page (bien souvent appelée « Page contact ») dans laquelle vous allez insérer le short code « Contact Form 7 » à l’aide du « Visual Composer ».
Sélectionnez votre formulaire (dans notre tuto, nous l’avions appelé « Pour tuto »).
Cliquez ensuite sur « Enregistrer brouillon » puis sur « Aperçu ».
Vous aurez alors un aperçu exact de votre page où se trouvera votre formulaire de contact.


Quelque chose vous a échappé ?
N’hésitez pas à revenir en arrière !

Ce site utilise des cookies pour fonctionner correctement, générer des rapports statistiques et faire la publicité de nos services / produits. Nous pouvons directement utiliser les cookies indispensables, mais vous avez le droit d’activer ou non les cookies statistiques et de profilage. ATTENTION, désactiver les cookies peut affecter votre expérience sur le site web et les services que nous sommes en mesure d’offrir.