• 15 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

J'ai tout compris !

Installez un formulaire de contact

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Bien souvent, votre client ne veut pas se contenter "d'être sur internet". Il veut qu'on puisse le contacter. E-mail, téléphone, tout est bon à prendre pour qu'il puisse être en contact avec ses clients.

Le formulaire de contact est un incontournable pour de nombreux sites web. Comment en mettre un en place avec WordPress ?

Installer un plugin de formulaire de contact

WordPress regorge de plugins (extensions) qui vous permettent d'étendre ses fonctionnalités. Rendez-vous sur la page "Extensions > Ajouter" :

Ajouter une extension à WordPress
Ajouter une extension à WordPress

Oh mais que vois-je sur cette page ? Une extension ultra-populaire de formulaire de contact appelée "Contact Form 7" ? 😮

Il en existe probablement d'autres, mais on ne risque pas grand chose à essayer l'extension qui semble la plus populaire. Allez hop, on clique sur "Installer maintenant" !

L'extension se télécharge et s'installe toute seule. Comme pour les thèmes, il n'y a rien à faire. Une fois l'extension installée, il faut simplement demander à l'activer (1) :

Cliquez sur
Cliquez sur "Activer l'extension" une fois celle-ci installée

Il faut ensuite configurer l'extension pour créer notre formulaire de contact. On peut le faire depuis le menu "Extensions" :

Direction les options de l'extension
Direction les options de l'extension

Cette extension nous permet de créer plusieurs formulaires de contact. Un premier formulaire est déjà créé pour nous, on va pouvoir se baser dessus :

Un formulaire de contact est déjà créé
Un formulaire de contact est déjà créé

Vous noterez qu'on vous indique un "Shortcode" : c'est un code que vous devrez copier-coller dans une page, là où vous souhaitez que le formulaire apparaisse.

Avant de faire ça, on peut cliquer sur le nom du formulaire pour le personnaliser :

Configuration du formulaire
Configuration du formulaire

Ok ok, j'admets, il y a un peu de HTML, mais rien de bien méchant. Vous pouvez réorganiser votre formulaire en déplaçant les sections (entre <p> et </p> ) et vous pouvez ajouter des éléments en cliquant sur les boutons en haut. C'est assez facile, vous devriez y arriver tous seuls. 🙃

Regardez aussi l'onglet "Email" : il vous permet de personnaliser l'email que votre client va recevoir à chaque fois que quelqu'un envoie le formulaire.

Personnalisation de l'e-mail envoyé
Personnalisation de l'e-mail envoyé

Ici, indiquez donc l'adresse e-mail de votre client en tant que destinataire. Il pourra ainsi traiter les messages qu'on lui envoie lui-même.

Vous pouvez personnaliser le contenu du message envoyé en utilisant des étiquettes correspondant aux champs que vous avez créés, comme [your-message] ici.

Comment intégrer le formulaire à une page ?

Rendez-vous sur la page dans laquelle vous voulez placer votre formulaire, et copiez-y le code qu'on vous a indiqué. Pour le formulaire par défaut c'est :

[contact-form-7 id="80" title="Formulaire de contact 1"]

Votre formulaire est prêt à l'emploi !

Intégration du formulaire de contact pour SuperPose

Pour SuperPose, le formulaire par défaut convient très bien, pas besoin de le personnaliser. Notre client veut juste que les visiteurs puissent laisser un message et il veut pouvoir leur répondre par e-mail.

Je vais aller dans l'éditeur de pages et copier le code du formulaire dans la page "Contact" que j'avais déjà créée :

Intégration du formulaire de contact dans l'éditeur
Intégration du formulaire de contact dans l'éditeur

Ne vous inquiétez pas, le code entre crochets sera remplacé à l'affichage par un formulaire de contact !

Enregistrez la page et vérifiez par vous-mêmes :

Le formulaire de contact est en ligne !
Le formulaire de contact est en ligne !

Vous devriez tester que l'envoi du formulaire de contact fonctionne bien. Normalement, vous devriez recevoir un e-mail à l'adresse que vous aviez indiquée un peu plus tôt en configurant le formulaire. 📬

Le mail que j'ai reçu après avoir testé mon formulaire de contact
Le mail que j'ai reçu après avoir testé mon formulaire de contact

Bon eh bien... je crois que c'est tout ! Ah, la magie de WordPress... 🎩

Exemple de certificat de réussite
Exemple de certificat de réussite