SUPPORTS IMPRESSION
 

Blog

Contact Form 7 banner

CRÉER UN FORMULAIRE DE CONTACT SUR WORDPRESS AVEC CONTACT FORM 7

  |   TUTORIELS, TUTORIELS WORDPRESS   |   aucun commentaire

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

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.

installer module contact form 7 copie tuto contact form

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.

Installer module contact form 7 bis tuto contact form
banière logos html et css tuto contact form

Avant de commencer, vous devez savoir ce que sont les languages HTML et CSS.

(Si vous n’avez pas besoin de précisions quant à ces languages, passez directement à l’onglet suivant: la personnalisation du Contact Form 7)

logo html 5 tuto contact form

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 language qui permet la mise en forme des contenues des pages web.

logo css tuto contact form

 

Quelle est la différence entre HTML et CSS?

 

Le language 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 language HTML

puis vous aurez besoin de styliser ces champs (ex: la taille, la couleur, la police…):

Vous utiliserez ici le language CSS

De plus, s’il existe une différence entre ces deux languages 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 languages 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:

1. Il y a plusieurs paramètres à appliquer à votre contenu.

2. 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 balises! Ainsi, la balise <div> vous permet de gagner du temps car elle regroupe à elle seule plusieurs paramètres que vous auriez du é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 language 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 ».

(Notes: 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 »:

schéma des marges tuto contact form

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.

tableau paramètres tuto contact form

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

1. Soit en écrivant la couleur en toutes lettres (exemple: « green » pour vert).

2. 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 coeur 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é « 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 !

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 « Editeur ».

Apparence editeur wordpress

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

commentaires CSS tuto contact form

(Note: vous pouvez ajouter des commentaires, afin de mieux vous y retrouver, sans que ces annotations de 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.

css page tuto contact form
code css page tuto contact form

Onglet 2: Le formulaire de contact

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

créer un formulaire tuto contact form

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

Ajouter nom et enregistrer tuto contact form

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)

générer un marqueur tuto contact form

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

exemples formulaire tuto contact form

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 »

ecran telephone lettres tuto contact form
ecran telephone number tuto contact form

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

champs texte tuto contact form

Afin de pouvoir vérifier rapidement votre travail (et ainsi pouvoir modifier les choses qui ne vous plaisent pas), 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.

Vérifier son travail tuto contact form

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.

exemple formulaire 2 tuto contact form

Voici ici notre formulaire, rédigé en HTML

commentaires CSS tuto contact form

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

exemple formulaire 1 tuto contact form

Voici le résultat, sur notre page contact

Nous allons maintenant personnaliser notre formulaire de contact.

Nous allons vous présenter quelques possibilités de modifications de votre formulaire, mais ne vous limitez pas à nos exemple et n’hésitez pas à explorer toutes les possibilités que propose le CSS !

modification 1 tuto contact form

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

Nous avons créé des paramètres visant à styliser les textes

formulaire 5 tuto contact form

Voici notre formulaire, rédigé en HTML

Nous avons appliqué la div « tuto » aux textes « Nom, Prénom » et « Civilité »

exemple 2 tuto contact form

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 (voire 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:

explication des deux colonnes plugin contact form 7 Wordpress
deux colonnes couleurs tuto contact form

Voici la page de style, rédigée en CSS

Nous créons deux colonnes de tailles égales

deux colonnes couleurs 2 tuto contact form

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)

exemple deux colonnes tuto contact form

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.

Nous allons notamment modifier la couleur du bouton lorsqu’on survole celui-ci.

modifier bouton submit tuto contact form

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

HTML bouton submit tuto contact form

Voici notre formulaire, rédigé en HTML

Nous appliquons nos modifications à notre bouton « Submit » grâce aux balises <div id= « tuto »>

modifications bouton submit tuto contact form

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.

placeholder tuto contact form

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.

Ajouter la fonction « placeholder » pour placer votre texte dans votre champs de texte.

résultat placeholder tuto contact form

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 !

Nous allons maintenant paramétrer l’e-mail que vous recevrez lorsqu’un de vos visiteur voudra vous envoyer un formulaire de contact.

Pour cela, descendez simplement sur la page de votre formulaire de contact, afin d’obtenir cet écran:

envoyer mail tuto contact form

Vous allez pouvoir décider de:

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

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

mai reçu tuto contact form

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

envoyer mail tuto contact form
paramètres email reçu tuto contact form

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:

HTML pour mail tuto contact form

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.

Vérifier son travail tuto contact form

Quelque chose vous a échappé ?

N’hésitez pas à revenir en arrière !


A PROPOS DE L'AUTEUR :

Kevin Boisard
Passionné par la communication sous toutes ses formes, je conçois mon métier comme un partenariat et un transfert d’expérience mutuelle avec mes clients. En 2011, après m'être imprégné des différentes problématiques commerciales des entreprises au sein desquelles j'avais travaillé, l'envie d'entreprendre m'a amené à construire les fondations de ce qui est devenu aujourd’hui l'agence de Communication Graphik Impact. Créatifs et polyvalents, nous intervenons sur un maximum de supports et de médias et nous vous aiderons à construire une stratégie de communication sur mesure.
Pas de Commentaires

Publier un commentaire