Comment ajouter des formulaires de contact à l'aide du plugin - P1 : utilisez le formulaire de contact 7

Le formulaire de contact est l'un des éléments les plus importants si vous souhaitez avoir un site web professionnel. Il n'est même pas difficile de créer et de mettre en place un formulaire de contact si vous utilisez des plugins dédiés. Pour vous aider à créer des formulaires de contact avec des plugins facilement et rapidement, nous avons compilé et écrit des instructions sur la façon d'utiliser les plugins de formulaire de contact les plus populaires.

Dans la première partie de la série « Formulaire de contact », découvrons :

• Qu'est-ce que le formulaire de contact ?
• Avantages du formulaire de contact
• Comment utiliser le plugin Contact Form 7 pour créer un formulaire ?

Qu'est-ce que le formulaire de contact et ses avantages ?

Qu'est-ce que le formulaire de contact ?

Le formulaire de contact est un terme familier aux spécialistes du marketing. En utilisant le formulaire de contact, les utilisateurs peuvent envoyer des e-mails et vous contacter directement sur le site Web sans connaître votre adresse e-mail.

Un formulaire de contact a généralement de nombreux champs pour que les utilisateurs remplissent les informations requises telles que l'e-mail, le numéro de téléphone, le nom, le contenu de l'e-mail, … En outre, il est généralement placé sur une page de contact ou la zone où vous devez obtenir les informations de contact des clients. . Voici un exemple:

Avantages du formulaire de contact

Étant donné que les utilisateurs peuvent utiliser le formulaire de contact pour envoyer des informations au propriétaire du site (pour laisser leurs coordonnées, pour envoyer des demandes d'assistance ou d'autres demandes, …) directement sur ce site Web, cela rend le contact beaucoup plus pratique et rapide.

De plus, l'utilisation d'un formulaire de contact peut préserver la confidentialité de vos e-mails et réduire les spams et les menaces de sécurité. Par conséquent, vous n'aurez pas à gérer la boîte aux lettres pleine de spam et de corbeille tous les jours.

De plus, les formulaires de contact vous aident à collecter plus facilement les informations des utilisateurs car ils doivent remplir les informations que vous demandez dans le formulaire. C'est l'une des stratégies pour obtenir plus de prospects.

En général, pour créer un site Web professionnel et obtenir plus d'avantages pour votre entreprise, vous devez utiliser des formulaires de contact.

Comment créer un formulaire de contact

Vous pouvez coder pour créer des champs et des formulaires à votre guise. Cependant, si vous n'êtes pas un codeur, ce n'est pas possible. Ou vous devez payer une somme d'argent en embauchant un codeur pour le faire.

Par conséquent, la solution la plus utile pour créer des formulaires de contact pour les utilisateurs non techniques, ou même les développeurs (pour gagner du temps et des efforts), consiste à utiliser un plugin. Maintenant, il existe de nombreux plugins de formulaire de contact qui sont simples, faciles, rapides et gratuits. Donc, il n'y a aucune raison de ne pas les utiliser pour créer un formulaire de contact, non ?

Dans tous les articles de cette série, je vais vous montrer comment créer un formulaire d'inscription à l'université comme suit :

Créer un formulaire à l'aide du formulaire de contact 7

Dans ce premier article de la série "Créer un formulaire de contact à l'aide de plugins", j'utilise Contact Form 7 - l'un des plugins de formulaire de contact gratuits les plus populaires disponibles aujourd'hui.

Tout d'abord, téléchargez et installez ce plugin à partir du référentiel de plugins sur wordpress.org, ou allez dans Tableau de bord > Plugin > Ajouter un nouveau pour l'installer et l'activer.

Formulaire de contact 7

Auteur(s) : Takayuki Miyoshi

Version actuelle : 5.5.3

Dernière mise à jour : 28 novembre 2021

formulaire de contact-7.5.5.3.zip

82% d' évaluations 5 000 000+ Installe WP 5.7+ Requiert

Voici des instructions spécifiques pour créer le formulaire d'inscription universitaire ci-dessus avec ce plugin.

Interface

Accédez à Tableau de bord > Contact > Ajouter un nouveau pour créer un nouveau formulaire de contact. Voici l'interface avec laquelle vous travaillerez :

(1) : Saisissez le nom du formulaire de contact
(2) : Onglets pour créer et paramétrer un formulaire de contact, notamment :

• Onglet Formulaire : créer des champs pour le formulaire de contact
• Onglet Mail : configurez les e-mails que vous recevez du formulaire de contact
• Onglet Message : inclure les notifications que les utilisateurs reçoivent lorsqu'il y a une erreur d'imputation des données, le formulaire ne peut pas être envoyé, la soumission du formulaire avec succès, …
• Onglet Paramètres supplémentaires : ajoutez d'autres éléments au formulaire de contact.

Créer des champs pour le formulaire de contact

Comme je l'ai mentionné, un formulaire de contact contient des champs qui permettent aux utilisateurs de saisir des informations ou d'interagir avec elles. Voici l'onglet Formulaire qui permet de créer ces champs :

(1) se compose de champs à ajouter au formulaire tels que nom, email, numéro, bouton d'envoi, … Pour ajouter un champ, il suffit de cliquer sur le nom du champ correspondant.

(2) est la zone d'affichage de la structure du formulaire au format HTML. Lors de la création d'un nouveau formulaire de contact, vous aurez la structure par défaut d'un formulaire de base avec des champs simples tels que l'e-mail, le nom, l'objet et le bouton d'envoi. Vous pouvez utiliser ce formulaire immédiatement ou créer un nouveau formulaire basé sur celui-ci.

Instruction générale pour les champs

Après avoir choisi le champ souhaité, une fenêtre contextuelle dans laquelle vous entrez les informations nécessaires dans le champ apparaîtra. Chaque champ requiert des informations différentes, mais en général, ils comportent tous les sections suivantes :

Nom : attribut de nom
Valeur par défaut : la valeur par défaut du champ
Attribut Id : ID du champ
Attribut de classe : la classe du champ

Remarque : l' attribut ID et l' attribut Class sont facultatifs et vous pouvez y entrer vos informations personnalisées. Si vous souhaitez faciliter les étapes suivantes pour styliser le formulaire de contact, vous devez remplir ces 2 sections.

Après avoir rempli ces informations, vous verrez la balise du champ que vous avez créé au bas de cette boîte. Cliquez sur Insérer une balise pour insérer ce champ dans le code HTML du formulaire.

Normalement, la balise de chaque champ dans un formulaire de contact créé avec Contact Form 7 aura la structure suivante :

 [field* name_attribute id:field_id class:field_class "la valeur par défaut du champ"]

Explications :

• field * est le type de champ que vous choisissez. C'est la partie la plus importante et incontournable d'un domaine.
• * signifie que ce champ est obligatoire. Si vous ne voulez pas forcer les utilisateurs à le saisir, supprimez le * .

Pour en savoir plus sur la structure d'une balise de champ dans Contact Form 7, reportez-vous à cette documentation. Comprendre la signification et la structure HTML d'un formulaire de contact vous facilitera la modification, la création et l'ajout de nouveaux champs à l'aide de code. Surtout avec les codeurs, ils peuvent écrire du code HTML pour créer le formulaire selon la syntaxe ci-dessus. Cependant, avec un non-codeur, cela peut être difficile, je vous recommande donc de suivre les étapes ci-dessous.

Avec les formulaires de contact de cette série, je dois choisir les champs suivants :

Tous les champs ont les informations communes que j'ai dites ci-dessus. Par conséquent, je ne fais que guider les parties spécifiques de chaque domaine maintenant.

Vous trouverez ci-dessous des instructions détaillées pour chaque champ.

Créer un champ pour saisir le nom

Sélectionnez le champ de texte et saisissez les informations de base du champ dans la zone :

Dans la section Type de champ , vous pouvez choisir Exiger pour que ce champ soit obligatoire à remplir (ceci est facultatif).

Remarque : dans la section Valeur par défaut , choisissez Utiliser ce texte comme espace réservé du champ pour afficher ce contenu sur le champ avant que les utilisateurs ne saisissent des données. Vous devez utiliser ce mode pour expliquer aux utilisateurs ce qu'ils doivent remplir le champ.

La section Akismet est liée au plugin Akismet - un plugin anti-spam. Si vous n'avez pas ce plugin, alors ne vous souciez pas de cette section.

Créer un champ pour saisir le numéro de téléphone

Sélectionnez le champ numérique et remplissez les informations de base pour le champ.

Dans la section Type de champ , choisissez un type pour ce champ. Il existe deux types de champs : Spinbox et Slider .

Le curseur affichera une échelle pour choisir le nombre comme suit :

Ce style convient pour marquer ou choisir des nombres en fonction d'une échelle spécifique.

Pendant ce temps, Spinbox vous permet d'entrer n'importe quel numéro, la séquence de chiffres dans le champ tel que numéro de téléphone, numéro de carte, numéro de carte d'identité, … Donc dans cet exemple, je choisis Spinbox.

La section Plage vous permet de choisir une limite pour le nombre. Dans cet exemple, je n'ai pas besoin de cette section donc je n'ai rien rempli.

Créer un champ pour sélectionner les majeures et les lieux d'études

Avec ce champ, sélectionnez le menu déroulant .

Maintenant, remplissez les options pour les majors et les emplacements dans la section Options , gardez à l'esprit que chaque option est une ligne.

Si vous souhaitez autoriser les utilisateurs à sélectionner plusieurs options à la fois, cliquez sur Autoriser les sélections multiples .

Créer un champ pour choisir le but de l'enregistrement

Sélectionnez le champ de la case à cocher .

La section Options est semblable à celui dans le champ de menu déroulant ci - dessus. De plus, il y a plus d'options pour les cases à cocher comme suit

• Mettez une étiquette en premier, une case à cocher en dernier
• Enveloppez chaque élément avec l'élément label
• Faites des cases à cocher exclusives (vous n'êtes autorisé à choisir qu'une seule option).

Créer le bouton de soumission

Enfin, sélectionnez le champ de soumission et remplissez simplement les informations comme l'exigence suivante (notez que Label est le mot qui apparaîtra sur ce bouton, par exemple « Soumettre », « S'inscrire », « Confirmer »).

Notamment, lors de la création d'un nouveau formulaire, ce plugin a déjà automatiquement créé un champ soumis. Vous pouvez donc utiliser ce champ sans en créer un nouveau.

Ajouter des étiquettes pour les champs

Vous avez maintenant fini de créer des champs pour le formulaire de contact. Cependant, vos champs n'ont pas eu de nom à afficher sur le formulaire de contact comme suit :

Par conséquent, vous devez ajouter des étiquettes aux champs en insérant la structure de code suivante dans la partie HTML du formulaire :

 <libellé> Champ Libellé
[Balise du champ] </label>

Ensuite, écrivez le libellé du champ dans la section Libellé du champ . Remplissez ensuite toutes les informations ci-dessus, cliquez sur Enregistrer .

Après avoir créé les champs, mon formulaire de contact a la structure de code suivante, notez que j'ai organisé les champs pour les afficher à la position souhaitée sur le front-end :

 <label> Votre nom (obligatoire)
[text* your-name "entrez votre nom"] </label> 

<label> Votre numéro de téléphone
[number phone placeholder "entrez votre numéro de téléphone"] </label> <label> Votre e-mail (obligatoire)
[email* votre-email "entrez votre email"] </label>

<libellé> Majeur
[sélectionnez* la majeure "Informatique" "Linguistique" "Agriculture" "Ingénierie" "Commerce électronique"] </label>
<label> Lieu d'étude 
[sélectionnez* Lieu d'études « New York » « Chicago » « Los Angeles » « Washington DC » « Houston » « Philadelphie »] </label>

</label> S'inscrire sur
[case à cocher* s'inscrire label_first "Étudier" "Faire un tour" "Consulter"] </label>

[soumettre "Soumettre"]

Cette fois, votre formulaire de contact n'apparaît toujours pas sur le site. Vous devez effectuer quelques étapes supplémentaires pour l'afficher sur le front-end.

Paramètres du formulaire de contact

Configurer la messagerie

L'onglet Courrier vous permet de personnaliser le contenu de l'e-mail que vous recevrez lors de l'envoi des formulaires de contact par les utilisateurs. Pour mettre en place cette rubrique, vous devez insérer des mail-tags des champs du formulaire de contact que vous venez de créer. Voici un exemple:

Explications :

• A : Saisissez l'email de la personne en charge de vérifier le formulaire de contact.
• De et Objet : Vous devez définir un nom ici pour déterminer qui envoie ce formulaire de contact.
• Corps du message : ajoutez des balises mail ici pour vous assurer que lorsque vous recevez des e-mails du formulaire de contact, il affiche toutes les informations que vous demandez aux utilisateurs.

Autres réglages

Onglet Message

Entrez les messages qui sont utilisés dans les situations comme vous pouvez le voir dans la description de l'onglet. Par exemple, une fois que les utilisateurs ont soumis le formulaire avec succès ou n'ont pas réussi à le soumettre, vous devez ajouter un message pour les en informer. Ou lorsque les utilisateurs oublient un champ obligatoire, vous devez également ajouter un message afin que les utilisateurs puissent revenir pour remplir ce champ. Bien qu'il s'agisse de petits détails, vous devez faire attention à améliorer l'expérience utilisateur.

Onglet Paramètres supplémentaires

Cet onglet vous aide à ajouter des extraits de code pour installer les éléments suivants :

• Mode réservé aux abonnés
• Le mode de démonstration
• Sauter le courrier
• Acceptation comme validation
• Paramètres Flamingo
• Supprimer le stockage des messages
• code JavaScript

Il y a quelques parties très utiles que vous devriez utiliser telles que:

• Mode Abonnés uniquement : Ce mode permet uniquement aux utilisateurs connectés de votre site Web de soumettre le formulaire de contact. Cela élimine les messages de spam et c'est uniquement pour ceux qui veulent vraiment vous contacter.
• Acceptation comme validation : ajout d'une fonctionnalité pour afficher des notifications pour la case à cocher Acceptation lorsque les utilisateurs ne cochent pas cette case mais passent à un autre champ. Parce que par défaut, si les utilisateurs ne cochent pas la case Acceptation, le message d'erreur ne s'affichera qu'après avoir soumis le formulaire. Cette case à cocher Acceptation est souvent utilisée pour créer des champs tels que « J'accepte les conditions du site Web », mais si vous créez d'autres types de contenu, vous devrez peut-être ajouter Acceptation comme validation .

Pour en savoir plus sur les autres fonctionnalités de l'onglet Paramètres supplémentaires , vous pouvez en savoir plus ici.

Afficher le formulaire de contact sur le site Web

La dernière étape consiste à afficher le formulaire de contact que vous venez de créer sur le site.

Toujours à l'interface pour créer un nouveau formulaire, copiez le shortcode et collez-le sur la page ou la publication souhaitée.

Voici mes résultats finaux :

Cependant, mon formulaire de contact n'a pas l'air très bon, je dois donc le styler un peu.

Si vous souhaitez modifier le style du formulaire de contact comme le modèle que j'ai donné au début de cet article, vous devrez modifier le code HTML du formulaire comme suit pour faciliter le style :

 <div class="form__field form__full-width">
<label>Votre nom (obligatoire)
[text* your-name placeholder "entrez votre nom"]
</label>
</div>
<div class="form__field">
<label>Votre numéro de téléphone
[espace réservé au numéro de téléphone "entrez votre numéro de téléphone"]
</label>
</div>
<div class="form__field">
<label>Votre e-mail (obligatoire)
[email* your-email placeholder "entrez votre email"]
</label>
</div>
<div class="form__field">
<label>Majeur
[choisir* la majeure "Informatique" "Linguistique" "Agriculture" "Ingénierie" "Commerce électronique"]
</label>
</div>
<div class="form__field">
<label>Lieu pour étudier
[sélectionner* Lieu d'études "New York" "Chicago" "Los Angeles" "Washington DC" "Houston" "Philadelphie"]
</label>
</div>
<div class="form__field form__full-width">
<label>Inscrivez-vous à
[case à cocher* enregistrer use_label_element "Étudier" "Faire un tour" "Consulter"]
</label>
</div>
<div class="form__field form__full-width">
[soumettre "Soumettre"]</div>

Ensuite, allez dans Personnaliseur > CSS supplémentaire de votre thème et collez le code suivant :

 #wpcf7-f330-p104-o1 .wpcf7-form { display: flex; flex-wrap: wrap; margin: 0 -15px; padding: 20px; background: #eeeeee; } .form__field { width: 50%; padding: 0 15px; margin-bottom: 20px; } .form__field.form__full-width { width: 100%; } .form__field input:focus::placeholder { opacity: 0; } .form__field input, .form__field select { width: 100%; color: #77818e; font-style: italic; } .form__field input::placeholder, .form__field select::placeholder { color: #77818e; } .form__field input[type="submit"] { color: #4299e1; width: auto; background: #fff; border: 1px solid #4299e1; } .form__field span.wpcf7-list-item { margin: 10px 20px 0 0; display: block; } .form__field span.wpcf7-list-item input { width: auto; } .wpcf7-checkbox { display: flex; justify-content: space-between; }

Enfin, cliquez sur Publier pour enregistrer.

Derniers mots

Lorsque vous utilisez le formulaire de contact 7 pour la première fois, vous pouvez le trouver peu familier avec HTML si vous n'êtes pas un codeur. Cependant, après avoir lu ce tutoriel, je pense que tout est devenu plus facile, non?

Si vous voulez essayer de créer un formulaire de contact avec d'autres outils, attendez avec impatience mon prochain article de cette série. Quel plugin voulez-vous suggérer ? Laissez un commentaire sous cet article !