Nous allons maintenant apprendre à créer l’écran de contact typique avec un formulaire de base.

WordPress par défaut ne propose aucune option pour générer un formulaire de contact, nous aurons donc besoin d’une extension qui nous permette de le créer.

🔧 Installer et activer l’extension « Contact Form 7 »

Rappelez-vous que nous avons ici une 🔌 liste des extensions indispensables pour WordPress.

Vous rappelez-vous aussi 🔧 comment installer une extension dans WordPress ?

Eh bien, dans cet exemple, nous installerons « Contact Form 7« , qui est une extension pour créer des formulaires de contact, légère, assez simple et en plus gratuite.

⚙️ Configuration initiale du formulaire de contact

Une fois installée et activée « Contact Form 7 », nous allons dans « Contact → Formulaires de contact« , une option qui n’apparaissait pas auparavant 👀 :

Nous aurons un exemple de formulaire déjà créé appelé « Formulaire de contact 1« . Nous pouvons utiliser celui-ci pour commencer à travailler, nous allons donc le modifier.

🧪 Personnaliser les champs de notre formulaire

Une fois à l’intérieur, un écran comme celui-ci apparaît avec :

📣 Titre du formulaire : « Formulaire de contact 1 ».

🧩 Code Shortcode : que nous copierons et collerons où nous voulons notre formulaire [sur l’image, c’est ce qui apparaît en bleu entre crochets].

⚙️ Onglets avec plus d’options : Formulaire, Courrier, Messages, Réglages supplémentaires.

🎙️ Champs de formulaire disponibles : Ce sont les boutons qui apparaissent pour « texte, courrier électronique, url, téléphone, nombre, etc ».

🥁 Code HTML du formulaire : Ce code « dessinera » notre formulaire. Nous pouvons changer l’ordre des champs, le texte de chaque champ, s’ils seront obligatoires ou non, changer le texte du bouton « Envoyer », etc.

🧬 Introduire un nouveau champ dans le formulaire

Pour cet exemple, nous allons introduire un nouveau champ appelé « Téléphone » pour que l’utilisateur puisse le saisir.

Dans le code, nous cliquons entre les [shortcodes] « Votre courrier électronique » et « Sujet » et nous faisons « Entrée » sur le clavier pour faire de la place au nouveau champ que nous allons insérer.

Nous cliquons sur le bouton appelé « téléphone » et ce popup apparaîtra :

Dans « Nom du champ« , nous allons le changer en ☎️ « tel-telephone » pour qu’il soit plus facile pour nous de l’identifier et nous appuyons sur le bouton « Insérer« .

Le nouveau shortcode du champ téléphone apparaîtra :

Si vous remarquez, j’ai mis un astérisque * à la fin du type de champ : [tel* tel-telephone]

L’astérisque indique que le champ sera obligatoire. On peut aussi le mettre depuis le popup précédent.

J’ai aussi écrit un texte « Téléphone » pour que l’utilisateur le voie.

J’ai tout enveloppé entre des balises <label></label>. Qu’est-ce que cela fait ? Cela enveloppe le texte « Téléphone » et le champ de telle sorte que si l’utilisateur clique sur le texte, il pointera directement vers la case pour que l’utilisateur puisse écrire à l’intérieur. Si on ne met pas les balises « label », si l’utilisateur clique sur le texte « Téléphone », il sélectionnera simplement le texte mais pas la case. Essayez de voir la différence entre mettre les balises <label> et sans <label>.

📨 Configurer l’email qui nous parviendra de l’utilisateur

Nous allons dans l’onglet « Courrier » :

Dans la partie indiquée en vert, vous verrez notre [shortcode] de téléphone que nous avons créé et qui apparaît en gras.

Cela signifie que le champ est créé dans le formulaire mais que nous ne l’utilisons pas dans l’email qui nous sera envoyé.
Par conséquent, nous allons copier et coller le [shortcode] dans le corps du message de l’email, avec le texte « Téléphone » :

Lorsque nous recevrons cet email, les [shortcodes] seront remplacés par le contenu que l’utilisateur a saisi.

🧓🏾 Dans la section « À » : Vous devez mettre l’adresse email où vous voulez que l’email arrive.
Si vous laissez le [shortcode] par défaut qui apparaît, il arrivera à l’email d’administrateur que vous aurez configuré dans votre wordpress.

🧑🏽‍🦱 Dans la section « De » : Vous devez mettre l’adresse email de l’expéditeur.

👉 IMPORTANT : Cet email doit avoir le même domaine que le site pour ne pas être considéré comme SPAM. C’est-à-dire, si votre site est « mentazen.com », l’adresse email de l’expéditeur doit être par exemple « xxxxxx@mentazen.com » et non « xxxxxx@algodiferente.com »

Enregistrez le formulaire, maintenant vous verrez que le [shortcode] n’apparaîtra plus en gras, c’est parce que nous l’utilisons maintenant dans l’email.

📖 Changer les textes d’information, d’erreur, etc., du formulaire

Nous allons dans l’onglet « Messages » :

Si vous le souhaitez ou en avez besoin, vous pouvez ici changer le message qui apparaît à l’utilisateur lors de l’envoi d’un message avec succès « Merci pour votre message. Il a été envoyé » et d’autres types de messages comme les messages d’avis ou d’erreur.

❇️ Astuce : Changer ces textes est également utile lorsque nous voulons traduire un site dans différentes langues, en créant un formulaire différent pour chaque langue et en traduisant les textes.

Enfin, enregistrez le formulaire.

📬 Insérer le formulaire dans notre page de Contact

Nous verrons le [shortcode] de notre formulaire, qui sera semblable à celui que j’encadre en vert, COPIEZ-LE ! :

Vous pouvez aussi le trouver depuis l’écran initial où apparaissent tous les formulaires « Contact → Formulaires de contact »

Chaque formulaire, dans son [shortcode], aura un id= »xxxx » différent, qui sera ce qui identifie de manière unique chaque formulaire. C’est pourquoi votre formulaire peut avoir un id différent.

Eh bien, avec le [shortcode] copié, collez-le dans votre page « Contact » dans la zone que vous souhaitez du contenu avec le texte que vous voulez ajouter comme « Voici notre formulaire », enregistrez et visualisez votre écran.

Cela devrait ressembler à ceci :

Bien sûr, l’aspect peut être totalement différent, car cela dépend de notre thème installé. L’important est que nos champs apparaissent.

❇️ Astuce : Quand un champ est obligatoire, il est recommandé de mettre une identification comme un astérisque *Téléphone, et d’ajouter une phrase du type « *Champs obligatoires », pour que l’utilisateur comprenne qu’il s’agit d’un champ obligatoire.

Et voilà ! 🎉  Nous avons déjà notre formulaire. Maintenant, si vous essayez de l’envoyer, cela peut fonctionner ou non. Pourquoi ? Parce que nous devrons probablement configurer le serveur SMTP, qui est la configuration qui sert à envoyer des courriels depuis le site.