Maison / Un service en ligne / Comment passer l'adresse de la page à partir de laquelle le message a été envoyé dans le formulaire de feedback Wordpress ? Trucs, astuces, secrets Vaste formulaire de contact

Comment passer l'adresse de la page à partir de laquelle le message a été envoyé dans le formulaire de feedback Wordpress ? Trucs, astuces, secrets Vaste formulaire de contact

04.08.2021 Un service en ligne

FormGet est un simple plugin glisser-déposer pour WordPress. et laissez tomber, qui vous permet de créer divers formulaires de contact pour votre site. Il vous suffit de cliquer sur les champs que vous souhaitez ajouter au formulaire et votre formulaire retour sera prêt dans quelques secondes.

Formulaires pouvant être créés avec ce plugin

Le formulaire de contact, le formulaire d'assistance, les formulaires de réservation, les services de conseil, le formulaire de contact, la liste de diffusion, les questionnaires, le formulaire de demande d'emploi, l'assistant de formulaire d'inscription, le générateur de formulaire de commande, etc. peuvent tous être effectués dans ce plugin incroyable.

FormGet Contact Form est un outil très puissant qui vous permettra de créer et d'intégrer un formulaire de contact sur votre site Web en quelques étapes simples. Sélectionnez les champs du formulaire, personnalisez les paramètres et intégrez facilement un formulaire de contact sur votre site en plaçant simplement le code dans un widget ou en utilisant un shortcode personnalisé. Vous n'avez besoin d'aucune connaissance en programmation pour créer la forme souhaitée - c'est un avantage supplémentaire dans le choix de telles extensions.

Si plusieurs formulaires de contact sont installés sur le site à la fois, toutes les données les concernant peuvent être suivies en un seul endroit - sur le tableau de bord. Un avantage plus important de ce plugin est que les formulaires qu'il crée sont adaptatifs, ce qui vous permet d'afficher correctement les données nécessaires sur n'importe quel appareil sans prescrire de styles et de classes supplémentaires.

Liste des champs supportés par le plugin :

nom Adresse, numéro de contact, message, paiement (intégration avec PayPal), date (prise en charge du format jj-mm-aa ou jj/mm/aa ou aa-mm-jj), chaîne de texte, texte multiligne, sélection multiple, pièces jointes, case à cocher, sélectionner (sélection dans une liste proposée), boutons radio, téléchargements de fichiers et Captcha.

L'installation est simple - via le panneau d'administration du site sur WordPress.

Mise en place et création d'un formulaire de contact

Après l'installation et l'activation, vous verrez un formulaire de bienvenue spécial :

Cliquez sur le bouton "Cliquez pour créer" et passez aux paramètres et créez un formulaire de commentaires. Tous les paramètres sont divisés en 4 onglets :

  1. Générateur de formulaire de contact
  2. Code intégré
  3. Rallonges

Initialement, le premier onglet s'ouvre, où vous pouvez créer votre premier formulaire de commentaires à l'aide du constructeur.

Regardons de plus près:


La configuration et l'utilisation du plugin sont intuitives, alors installez-le et utilisez-le avec plaisir !

Salut tout le monde. D'une certaine manière, j'ai trop d'énergie et j'ai décidé aujourd'hui d'écrire un autre article qui sera consacré à l'un des Plugins WordPress. Un plugin assez intéressant et fonctionnel, il fait face à 100% à ses devoirs et je n'ai pas encore trouvé mieux pour émettre des commentaires.

Je ne veux pas vous tourmenter longtemps, je pense que vous avez déjà compris ce qui sera discuté dans l'article. Et donc, aujourd'hui, nous allons comprendre et configurer Plugin Formulaire de contact 7 pour WordPress, à savoir créer un formulaire de commentaires.

Je me suis assis pendant longtemps et j'ai réfléchi aux inconvénients du plugin et rien ne m'est venu à l'esprit, mais cette création a beaucoup d'avantages.

Avantages du plugin Contact Form 7.

  1. Clarté et facilité d'installation. Une personne qui rencontre ce plugin pour la première fois pourra le comprendre sans aucun problème.
  2. Création un grand nombre différentes formes et de les intégrer au site.
  3. Le formulaire est inséré à l'aide d'un shortcode sur la page et n'importe où sur le site. C'est très confortable.
  4. Prise en charge du russe et d'autres langues.
  5. Prise en charge des requêtes Ajax.
  6. Protection anti-spam avec une question textuelle ou un captcha. Pour captcha, vous devrez en outre installer Really Simple CAPTCHA.
  7. Personnalisation de l'apparence du formulaire à l'aide de styles CSS.
  8. Intégration avec le service Akismet pour se protéger contre le spam.

Sur notre site, vous pouvez voir et utiliser un tel formulaire si vous cliquez sur l'élément de menu "Contactez-nous", une fenêtre apparaîtra où vous pourrez voir un bon exemple.

Commençons!

Nous devons d'abord télécharger ce plugin. Vous pouvez depuis notre serveur voici le lien -\u003e ou depuis le site officiel voici le lien -\u003e Télécharger depuis le site officiel .

Après le téléchargement, vous devez l'installer sur . Comment installer, je ne décrirai pas, je pense que vous devriez connaître ce processus de A à Z. Téléchargé, installé, maintenant nous passons directement à nous-mêmes afin de le comprendre et de le configurer.

Configuration du plugin Contact Form 7 et création d'un formulaire de commentaires.

Maintenant que vous avez téléchargé et installé tout ce dont vous avez besoin, allez dans l'administration Tableau de bord WordPress et trouver le point Formulaire de contact 7, cliquez dessus et nous arrivons à la page pour ajouter un nouveau formulaire.


Création de formulaire.

Pour créer un nouveau formulaire, vous devez cliquer sur « Ajouter nouveau», puis sélectionnez la langue (russe par défaut) et cliquez sur « Ajouter nouveau ». Après toutes les démarches effectuées, vous devriez avoir cette photo :


Le formulaire a été créé, maintenant nous allons le personnaliser, selon vos besoins, et pour commencer, lui donner un nom. Dans mon cas, je vais appeler " Formulaire d'essai", vous le nommez comme vous voulez, puis cliquez sur "Enregistrer". Vous pouvez maintenant voir le shortcode qui devra être inséré dans le code du site où ce formulaire sera affiché.


Nous aurons besoin du code un peu plus tard car nous devons d'abord configurer le formulaire. Accédez au modèle de formulaire et personnalisez-le.

Liste déroulante à droite Générer une balise”, si vous l'ouvrez, vous pouvez voir de nombreux champs qui sont ajoutés au formulaire.


Champ Générer une balise

Sur la gauche, vous pouvez voir les champs qui ont déjà été ajoutés au formulaire.

Par exemple, créons un formulaire simple dans lequel il y aura un nom, un e-mail, un téléphone, une question texte pour la protection anti-spam, un message et un bouton d'envoi.

Départs.

Création d'un champ de texte pour le nom. Dans la liste déroulante "Générer la balise", sélectionnez " Champ de texte". Nous cochons le champ requis, lui donnons un nom dans mon cas "NAME" et attribuons un identifiant afin que le champ puisse être stylisé à l'aide de styles css. J'ai id = "nom". Ci-dessous, vous pouvez voir le texte " Copiez ce code et collez-le dans le modèle de formulaire à gauche". Nous prenons ce code et le copions dans le modèle de formulaire, comme dans l'image :


Pour le courrier (e-mail), on fait de même, pour le téléphone, sélectionner « Générer tag » dans la liste, le champ « Numéro de téléphone” et aussi par analogie que nous faisons.

Pour personnaliser le message, sélectionnez " Champ de texte” et nous faisons de même par analogie avec tout ce qui est décrit ci-dessus.


Ajoutez maintenant le champ Question". Pour cela, sélectionnez " Question", donne lui un nom. Dans le champ Question|Réponse, vous pouvez poser différentes questions et réponses, sous le champ il y a un exemple de question logique, vous pouvez définir un texte, par exemple, "3ème mois de l'année ?| mars", etc... Collez le code comme avant.


champ "Question"

Et la dernière chose dont nous avons besoin est le bouton " Envoyer», vous pouvez laisser celui qui se trouve dans le modèle ou dans la liste « Générer une balise », sélectionnez « Bouton Soumettre ». Le modèle est prêt, appuyez sur le bouton " Sauvegarder”.

Vérifions ce que nous avons, copions le shortcode et collez-le sur la page ou dans n'importe quelle partie du code si nécessaire. Je vais coller dans une page de test.

Voici ce que j'ai :


Vous devez avoir quelque chose de similaire.

Personnalisation du formulaire et de la destination du message

Nous descendons un peu en dessous du modèle de formulaire et voyons les paramètres du destinataire.

  1. Champ Destination. Entrez le courrier à partir duquel les lettres seront envoyées aux visiteurs qui remplissent le formulaire.
  2. Champ expéditeur. Au lieu de<>, nous substituons nos shortcodes (les noms qui ont été donnés aux champs). Vous pouvez les voir ci-dessus. Dans mon cas ce sera<>.
  3. Champ Objet. J'écris toujours un formulaire de commentaires et indique le site.
  4. Champ de modèle de lettre. Ici, vous pouvez afficher tout ce que votre cœur désire. Pour notre exemple, je crée le champ From :<>et détails Téléphone : , Message ..
  5. Les autres champs sont vides.

N'oubliez pas de sauvegarder à la fin.

Si vous descendez encore plus bas, vous pouvez voir les paramètres de message. Tout ici est en russe, vous pouvez donc modifier selon vos besoins comme vous le souhaitez. Voilà je pense que vous comprendrez

Le formulaire est prêt, vous pouvez procéder au test et voir si le message arrive au courrier que vous avez spécifié.

Tout fonctionne bien pour moi, après avoir cliqué sur le bouton "Soumettre", je vois le message " Le message a été envoyé avec succès. Merci. ” Vous pouvez tester et voir quelles erreurs le formulaire donnera si vous ne saisissez pas correctement les données.

Quant aux styles css, ils peuvent être ajoutés au fichier css style.css principal. Avec l'aide de firebag, vous pouvez consulter l'identifiant et les classes des champs et leur attribuer les styles appropriés.

Plugin Formulaire de contact 7 pour WordPress très fonctionnel, vous pouvez créer une forme de n'importe quelle complexité, je suis sûr que vous en êtes convaincu. Sur ce, je terminerai, si certains points ne sont pas complètement clairs, écrivez dans les commentaires et j'essaierai d'aider à comprendre. Merci.

Flecteur 5

Ceci est un plugin de formulaire de contact. Il est extrêmement populaire (en termes de téléchargements juste après les plugins et) parmi les utilisateurs, car il combine avec succès facilité d'utilisation et puissantes capacités de personnalisation et de conception de formulaires de contact. Je vais essayer de considérer toutes les fonctionnalités du plugin avec autant de détails que possible.

1 Décompressez l'archive.

2 Copiez le dossier formulaire-de-contact-7 V /wp-content/plugins/.

3 Allez dans le panneau d'administration du blog sur l'onglet " Plugins et activez le plug-in.

Lorsqu'il est activé, le plugin crée un menu séparé dans l'administrateur du blog appelé "", il crée également un formulaire de contact par défaut, que vous pouvez voir dans " Formulaire de contact 7\Formulaires":

Si vous utilisez le "code d'intégration" suggéré, le formulaire de blog ressemblera à ceci :

Certainement, apparence ce formulaire de contact dépendra des styles utilisés dans votre modèle, mais en général il ressemblera à ceci.

Cela ne prend que quelques minutes pour afficher ce formulaire simple. Et c'est à cause de cette facilité d'ajout d'un formulaire de contact que de nombreux utilisateurs adorent ce plugin.

Cependant, le plugin offre de nombreuses possibilités pour créer des formulaires de contact avancés de toute complexité. Mais commençons par un simple, en créant votre propre formulaire, qui ne différera que légèrement du formulaire par défaut intégré au plugin. Cliquez sur le lien "Ajouter un nouveau":

Cela ouvrira la page initiale pour ajouter un formulaire :

Le plugin détecte automatiquement les paramètres régionaux utilisés dans le blog, il n'est donc pas nécessaire de sélectionner une langue, il suffit de cliquer sur le bouton "". Cela fera apparaître la page du concepteur de formulaire. La première chose à faire ici est de renommer le titre du formulaire :

Le titre n'a pas d'importance, il est juste là pour que vous ne soyez pas confus par vos propres formulaires. Définissez le nom de votre formulaire, cliquez sur le bouton " Sauvegarder", a comme résultat "code d'intégration":

Vous pouvez maintenant coller le code proposé dans n'importe lequel de vos articles ou pages (en mode "Texte", bien sûr) pour y afficher le formulaire de contact. Cependant, il ne différera en rien du formulaire par défaut, nous continuerons donc à travailler avec le concepteur de formulaire. Sur le côté droit de la page du concepteur, il y a un bouton " Générer une balise", un clic dessus affichera :

Prenez, par exemple, un numéro de téléphone. La fenêtre suivante s'ouvrira :

En fait, il n'y a rien à changer du tout. Les tailles, les classes, etc. sont des options secondaires et dans la plupart des cas, vous n'avez pas besoin de les modifier. Cependant, l'option "" peut être utile pour indiquer aux visiteurs comment remplir ce champ.

Par exemple, nous définissons les valeurs suivantes :

Lors de l'affichage du formulaire de contact, le champ ressemblera à ceci :

Lorsque vous cliquez sur ce champ, le texte saisi disparaîtra, car il ne sert que d'indice pour le remplissage. Mais j'ai raté le point d'ajouter la balise sélectionnée au formulaire de contact lui-même. Voici la balise :

Il doit être inséré dans la partie gauche de la page du concepteur de formulaire, là où se trouve le code du formulaire de contact lui-même :

Vous devez créer le code du formulaire manuellement, c'est-à-dire placer vous-même les en-têtes, les balises de paragraphe et les sauts de ligne, vous devriez obtenir quelque chose comme :

Nous enregistrons le code du formulaire et nous nous retrouvons avec le formulaire de contact suivant :

En fait, de la même manière, vous pouvez facilement ajouter à votre formulaire de contact en quelques minutes n'importe quelle étiquette Utilisé par le plugin. Je ne vous forcerai pas à essayer manuellement chaque tag, je donnerai immédiatement leur sortie :

1 Champ de texte.

Champ de texte brut, peut être utilisé pour le nom, le sujet, etc.

2 E-mail.

Utilisé uniquement pour saisir une adresse e-mail.

3 URL.

4 Numéro de téléphone.

Utilisé uniquement pour saisir un numéro de téléphone (chiffres et tirets).

5 Numéro (spinbox).

Utilisé uniquement pour saisir un nombre (peut être utilisé pour indiquer l'âge, le nombre d'articles commandés, etc.).

6 Numéro (curseur).

Cela fonctionne incorrectement. Pour afficher ce curseur numérique, HTML5 est utilisé, ce qui signifie tout d'abord qu'un tel curseur a un aspect différent dans différents navigateurs, et deuxièmement, cela ne fonctionne toujours pas vraiment. Sur les forums de support des plugins, j'ai vu des solutions qui corrigent le travail de cette balise, mais elles ne m'ont pas aidé - je n'ai pas pu faire en sorte que ce curseur affiche des chiffres. Je recommande de ne pas utiliser cette balise.

7 Date de.

Utilisé uniquement pour entrer la date.

8 Champ de texte.

Dans la traduction russe, cette balise est également appelée "champ de texte", mais dans la terminologie HTML, il s'agit de textarea, ce qui signifie en fait uniquement un champ de texte agrandi. Utilisé pour saisir le texte du message.

9 Menu déroulant.

Utilisé pour sélectionner un élément (ou plusieurs éléments) dans un menu déroulant. Peut être utilisé pour n'importe quoi - de demander la couleur du produit commandé au choix du sexe d'une personne.

10 cases à cocher.

Utilisé pour sélectionner un ou plusieurs éléments parmi les options proposées.

11 boutons radio.

Utilisé pour sélectionner un seul élément parmi les options proposées.

12 Acceptation.

Utilisé pour accepter les termes.

13 Question.

Utilisé pour répondre aux questions spécifiées (la question est choisie au hasard parmi les options spécifiées). Fondamentalement, cette balise est utilisée comme protection anti-spam. Et si les spambots peuvent facilement répondre à une question numérique, alors des questions comme "sur quelle planète vivons-nous ?" ils sont incapables de répondre.

14 CAPTCHA.

Utilisé pour afficher un captcha complet. Pour utiliser cette balise, vous devez installer le plugin Really Simple CAPTCHA. Le captcha est assez lisible et il est donc facilement percé par des robots de spam avancés comme Hrumer.

15 Envoi d'un fichier.

Utilisé pour envoyer un fichier. Vous pouvez spécifier la taille et les formats maximum des fichiers autorisés.

16 Bouton d'envoi.

Utilisé pour soumettre les données du formulaire de contact. Ceci est une balise obligatoire.

Les balises utilisées directement dans le formulaire de contact sont triées. Voyons maintenant comment obtenir ces mêmes balises du formulaire de contact vers votre e-mail. Juste en dessous du code du formulaire de contact dans le constructeur se trouve le modèle de la lettre qui vous est envoyée, et c'est dans celui-ci que vous devez apporter les modifications nécessaires. Ceci est important car remplir ce modèle de manière incorrecte vous empêchera de savoir exactement ce que le visiteur a écrit dans votre formulaire. Prenons l'étiquette du numéro de téléphone comme exemple. Disons que dans votre formulaire de contact, il est inséré via un code comme celui-ci :

Ainsi, dans le modèle de la lettre envoyée, vous devez insérer le code suivant :

Le sens, je pense, est clair. Dans le formulaire de contact code , et dans la lettre uniquement le nom de ce champ . Le plugin génère des noms de balises numériques comme , mais personne ne vous empêche d'utiliser vos propres noms. Et pour le reste des balises du modèle d'e-mail - elles sont également formées selon le même principe - au lieu de utilisé etc.

Les textes que produit le formulaire de contact peuvent également être corrigés dans le concepteur de formulaire dans la section "Messages":

FAQ sur les plugins :

1 Afficher l'erreur " ", comment réparer?

Cela signifie que le formulaire spécifié a été supprimé ou que le titre du formulaire a été spécifié de manière incorrecte (le titre dans le code d'appel est essentiel pour appeler le formulaire).

2 Dans l'e-mail, je vois des balises comme au lieu de texte, comment y remédier ?

Cela signifie que le visiteur n'a pas rempli ce champ. Dans ce cas, la balise n'est pas remplacée, mais affichée telle quelle.

3 Existe-t-il des restrictions lors du choix d'un nom pour un tag ?

Manger. Si boucle Wordpress name est "name", vous ne pouvez pas l'utiliser comme nom pour une balise. la meilleure façon pour éviter les problèmes est d'ajouter des préfixes pour les noms, comme le mot "votre". Il n'y aura certainement aucun problème avec le nom de la balise.

4 Est-il possible d'informer le visiteur par email de la réception de son formulaire ?

Peut. Utilisez l'option "Destination 2" dans le générateur de formulaire :

Cette option peut être utilisée comme répondeur automatique.

5 Un formulaire rempli peut-il être envoyé à plusieurs adresses ?

Peut. Utilisez le champ "" dans l'option "Destination":

Où [courriel protégé] votre email complémentaire, auquel sera envoyé une copie du formulaire rempli par le visiteur (la commande "cc" envoie une copie cachée).

6 Puis-je afficher un formulaire en dehors d'un article ou d'une page ?

Oui. Collez le code d'appel du formulaire dans le widget de texte.

7 Le formulaire peut-il être rendu directement par code dans les fichiers modèles ?

Oui. Utilisez le code de vue :

"" ) ; ?>

8 Le formulaire n'est pas envoyé, une erreur s'affiche dans le cadre rouge, comment y remédier ?

Contactez votre hébergeur, il est possible que PHP ne permette pas d'appeler la fonction mail().

9 Lors de la soumission du formulaire, j'obtiens une erreur dans le cadre orange, comment y remédier ?

Un cadre orange indique un spam. La mise en cache des plugins peut provoquer des faux positifs de la protection anti-spam. Configurez votre plugin de mise en cache pour nettoyer les fichiers de cache périodiquement (24 heures suffisent).

10 Le champ de saisie de l'e-mail est différent des autres champs du formulaire, comment puis-je le corriger ?

Le plugin utilise le code HTML5 pour saisir une adresse e-mail ( au lieu de ), et ce code n'est souvent pas formaté dans les anciens modèles. Vous devez apporter des modifications à styles.css votre modèle, en y ajoutant le code nécessaire pour le sélecteur d'entrée.

11 Comment insérer un fichier joint par l'utilisateur dans un e-mail ?

Pour ce faire, utilisez le champ spécial "Pièces jointes :"

Mérite vraiment votre attention. Contrairement à de nombreux autres plugins populaires, il ne vous oblige pas à en acheter Pro version - toutes ses fonctionnalités sont disponibles immédiatement. La popularité du plugin (plus de 19 millions de téléchargements) est bien méritée - malgré toutes ses fonctionnalités, il est extrêmement facile à configurer et est disponible même pour les utilisateurs novices du moteur Wordpress.

Mais n'oubliez pas qu'il s'agit d'un plugin de formulaire de contact, pas d'un simple plugin de formulaire. Avec toutes ses capacités, il ne vous permettra pas de créer un formulaire avancé basé sur n'importe quelles conditions. Son objectif principal est la création de formulaires de contact et rien de plus. Pour créer des formulaires dynamiques, publier des formulaires, etc., utilisez des plugins comme Ninja Forms, ils sont plus adaptés à cela.

Si vous avez des questions sur la configuration du plugin - posez-les dans les commentaires, je vais certainement essayer de vous aider.


Auteur du plugin : Takayuki Miyoshi
version en question : 3.9.1 du 31.07.2014
Version actuelle: 5.1.4 du 04.08.2019
Compatible avec Version Wordpress: 4.9 et plus haut
Installations de plug-ins actifs : 5 000 000+
Télécharger la version 5.1.4 du plug-in(total téléchargé 121 112 956 une fois)

Vous avez aimé le message ? Abonnez-vous aux mises à jour sur ou

Pour les toits de toiture à Saint-Pétersbourg.

Salut tout le monde! Aujourd'hui, je vais vous dire comment mettre formulaire de commentaires pourOcommandePpresse en utilisant des plugins ainsi que du code simple différentes façons. Alors, commençons par le fait que même si je n'ai pas de formulaire de commentaires, vous en aurez probablement besoin pour un certain nombre des raisons suivantes :

— Commodité et efficacité. Si vous vendez ou fournissez services payants, le formulaire de commentaires est tout simplement vital pour vous. Imaginez qu'un client ait trouvé un produit qui lui convient, mais qu'il ait encore quelques questions qui le hantent. Dans ce cas, il voudra probablement vous contacter pour clarifier certains détails. Si vous n'avez laissé qu'un e-mail à partir de vos coordonnées, cela peut être un gros problème pour l'acheteur, car de nos jours, peu de gens utilisent le courrier, mais la plupart du temps, ils s'assoient sur les réseaux sociaux.

Il arrive donc parfois que le client puisse simplement s'asseoir à partir d'un autre ordinateur, qui n'a pas autorisé le courrier, et il ne se souvient pas du mot de passe. Ou, par exemple, alors qu'il consultait son courrier, il avait des doutes quant à savoir s'il pouvait vous faire confiance et s'il avait besoin de cette petite chose que vous offrez. Comme vous pouvez le voir, pendant que le client rampe vers son boites aux lettres, il changera très probablement d'avis ou, par pure paresse, ira chercher une offre plus attractive, où le prix sera plus bas et les retours d'informations pratiques des acheteurs.

- Protéger votre adresse e-mail. Si vous avez déjà géré votre propre liste de diffusion, vous avez probablement reçu des lettres avec le contenu suivant : "Je vendrai des adresses e-mail à peu de frais", etc. Ces e-mails sont collectés partout sur Internet par des bots spéciaux (robots), auxquels des spams seront ensuite envoyés. Si vous ne voulez pas être parmi eux, vous n'avez pas besoin de briller (montrer) votre adresse du bureau de poste n'importe où. Dans mon cas, cela n'a plus aucun sens, puisque mon soap (mail) surfe sur Internet depuis plus de 3 ans et est enregistré sur plus de 1000 sites.

Soit dit en passant, pendant longtemps, afin de lutter d'une manière ou d'une autre contre le spam, de nombreux propriétaires de sites qui ne connaissaient pas encore le formulaire de commentaires ont laissé sa photo au lieu de leur courrier. Dans ce cas, les robots n'ont pas pu ajouter l'e-mail à la base de données de spam, mais cela a causé des désagréments aux visiteurs. Qui veut épeler la boîte aux lettres de quelqu'un pendant une heure alors qu'aujourd'hui il y a deux boutons sympas "copier" et "coller".

Plugins de formulaire de commentaires pour WordPress.

Sur Internet aujourd'hui, il n'y a qu'une mer d'extensions diverses qui créent un formulaire de commentaires pour les visiteurs. Beaucoup d'entre vous se retrouveront aujourd'hui dans cet article.

1 ) Alors, je vous présente le plugin Usernoise.

À mon avis, c'est le plugin de feedback le plus cool, idéal pour de nombreux magasins en ligne et hommes d'affaires. Ce formulaire apparaît sous la forme d'une fenêtre pop-up et peut être appelée depuis n'importe quelle page du site en cliquant sur le bouton spécial à droite ou à gauche.

Installation et configuration du plugin Usernoise.

5 ) Installation et configuration du plugin Contact Form 7.

Comment créer un formulaire de commentaires pour WordPress autrement ?

Vous pourriez être surpris, mais je n'ai décrit que la plus petite partie de la façon de créer un formulaire de commentaires pour WordPress. Peu importe comment j'ai essayé d'embrasser l'immensité, je n'ai pas réussi. Ainsi, le formulaire de commentaires peut être créé via un certain nombre des plugins suivants : Formulaire de contact Fast Secure , Formulaire de contact par Contact ME , Visual Form Builder , nForms - WordPress Form Builder , Mapped Contact Form , Ninja Forms . En outre, il existe également divers services, tels que main-ip.ru et smartoforms.ru.

C'est tout, si vous avez des questions n'hésitez pas.

Formulaire de contact 7
  • Tous les champs (tags) du formulaire
  • Comment rendre obligatoire l'un des champs : mail ou téléphone
  • Champs conditionnels pour l'addon Formulaire de contact 7
  • Formulaire de contact 7 Module de validation personnalisé

Dans l'article précédent, nous nous sommes familiarisés avec le plugin Contact Form 7 et ses paramètres. Et ici, tous les types de champs pris en charge (balises de modèle de formulaire) et les paramètres de chacun d'eux, ainsi que les styles (classes css) des éléments de formulaire, seront examinés en détail. Il s'agit de la documentation non officielle pour toutes les balises de modèle de formulaire Contact Form 7.

Le type de champ détermine la vue élément HTML formes : texte, "radio", "select". Le type de champ est spécifié dans le nom de la balise de modèle de formulaire.

Un exemple de balise de champ de texte et le code HTML qu'elle affichera :

De plus, chaque balise (champ) a ses propres options (attributs de balise). Les options de balise sont spécifiées après le titre et le nom du champ. Par exemple, ajoutons un attribut de classe au champ de texte précédent :

La syntaxe de la balise template (champ) du formulaire :

Attributs des balises (champs)

Vous pouvez utiliser les mêmes attributs (options) dans différentes balises de formulaire. Par conséquent, afin de ne pas répéter la description de chaque attribut pour chaque champ de formulaire, nous retirerons leur description dans une section distincte.

Les attributs qui ne peuvent être appliqués qu'à une balise de formulaire spécifique seront spécifiés séparément pour chaque balise.

* Signer * immédiatement après le type de champ rend le champ obligatoire.
Exemple : identifiant (doubler) Le nom de l'identifiant. attribut CSS id, utilisé pour styliser le champ.
Exemple : classe id:foo (doubler) Le nom de la classe. attribut de classe css, utilisé pour styliser le champ.
Exemple : classe:bar
Plusieurs classes peuvent être spécifiées : minlength et maxlength (nombre)

Ce sont des attributs HTML5 qui limitent la saisie de caractères dans le champ, à la fois par le seuil inférieur (minimum) et par le seuil supérieur (maximum). L'utilisateur ne pourra pas entrer moins de caractères (minlength) ou plus de caractères (maxlength) dans le champ que ceux définis par ces valeurs.

Pour minlength , si le texte saisi est inférieur à cette valeur, l'utilisateur recevra un avertissement "Champ trop court". Et vice versa pour maxlength .

Exemples:
minlongueur:10 -
longueur max:90 -
les deux à la fois

En conséquence, nous obtenons un champ de texte qui émettra un avertissement et la lettre ne sera pas envoyée si moins de 10 ou plus de 140 caractères y sont entrés.

Ces paramètres prennent en charge les types de champs suivants : text , textarea , email , url , tel , quiz .

Il existe une ancienne entrée pour ces options :

Le paramètre maxlength a explicitement la priorité, donc si vous ajoutez maxlength:150 , alors 140 sera réécrit en 150.

taille (nombre) La largeur du champ de texte, qui est déterminée par le nombre de caractères dans la police à espacement fixe. Peut être remplacé dans les styles CSS à l'aide de l'attribut width.
Exemple : taille : 50 -
Par défaut : 40 par défaut (chaîne/nombre)

La valeur par défaut du champ.

Exemple : par défaut : valeur.

Si l'utilisateur remplissant le formulaire est autorisé, alors par défaut, vous pouvez substituer la valeur tirée de ses données de profil. Par exemple, si vous spécifiez l'attribut default:user_email - , alors le champ sera automatiquement remplacé par la valeur - "email de l'utilisateur actuel" qui visualise le formulaire...

Autres champs spéciaux de l'attribut par défaut :

    par défaut : post_meta- obtenir la valeur du métachamp dont la clé sera égale au nom du champ. Par exemple : affichera un champ de formulaire dont la valeur sera définie sur la valeur du champ méta de l'enregistrement mymeta_key

    par défaut : obtenir- définira la valeur du paramètre GET avec la clé égale au nom du champ : - http://example.com/?mykey=value

    par défaut : publier- fixe la valeur du paramètre POST avec la clé égale au nom du champ : - en POST on passe la donnée maclé=valeur.

    par défaut :shortcode_attr- définira la valeur de l'attribut shortcode avec la clé égale au nom du champ. Par exemple, la balise de modèle de formulaire est : , puis dans le shorcode du formulaire lui-même, lorsqu'il est appelé dans le contenu de la publication, spécifiez l'attribut mykey : . En savoir plus ci-dessous.

    De plus, vous devez mettre en liste blanche le nom de l'attribut de shortcode WordPress (car wordpress supprime tous les attributs de shortcode inconnus...). Cela se fait via un filtre :

    Add_filter("shortcode_atts_wpcf7", "my_shortcode_atts_wpcf7", 10, 3); function my_shortcode_atts_wpcf7($out, $pairs, $atts)( if(isset($atts["mykey"])) $out["mykey"] = $atts["mykey"]; return $out; )

Pour la case à cocher, radio et sélectionnez :

  • par défaut:numéro - par défaut : 2- sélectionne le deuxième élément de la liste...
  • par défaut :numéro_numéro - par défaut : 2_3- sélectionne le deuxième et le troisième élément de la liste (pour les multi-sélections et les cases à cocher)...

Plus à propos défaut et ses options, à lire en fin d'article.

Espace réservé ou filigrane (doubler)

Texte à afficher dans l'attribut d'espace réservé.

Cette option doit être utilisée à la fin de toutes les options de balise de modèle : , et non

Peut être utilisé marque d'eau au lieu d'un espace réservé, il s'agit d'un synonyme (alias) de l'attribut.

Akismet (doubler)

Protection contre les spams. Nécessite le plugin Akismet installé et activé.

  • akismet:auteur -
  • akismet:author_email -
  • akismet:url_auteur -

Comment ça fonctionne? Lors de l'envoi de données, les valeurs des champs spécifiés seront traitées sur le serveur akismet et si elles ne passent pas le contrôle, la lettre ne sera pas envoyée et l'utilisateur verra une erreur :

Le message disparaît lorsque le focus est placé sur l'un des champs.

Balises de modèle de formulaire (champs)

Toutes les balises de plug-in pouvant être utilisées dans un modèle de formulaire sont décrites ci-dessous. Ces balises se transformeront en éléments input , textarea et select HTML.

Les champs de texte incluent les types : text , email , url , tel , textarea , ainsi que la balise count qui est étroitement liée aux champs de texte.

Il existe deux types de champs numériques : number et range . Ce sont des champs HTML5, donc les anciens navigateurs ne les prennent pas en charge, affichant un champ de texte à la place.

texte

Champ de texte d'une ligne.

Options prises en charge (attributs) :

  • classe
  • Longueur minimale Et longueur maximale
  • taille
  • espace réservé
  • défaut- peut être utilisé : user_login, user_first_name, user_last_name, user_nickname, user_display_name
  • akismet:auteur

e-mail

Le champ est destiné à la saisie d'e-mail.

Attributs pris en charge :

  • classe
  • Longueur minimale Et longueur maximale
  • taille
  • espace réservé
  • akismet:author_email
  • par défaut : e-mail_utilisateur ou par défaut :[email protected]

URL

Un champ pour saisir une adresse Internet (URL).

Attributs pris en charge :

  • classe
  • Longueur minimale Et longueur maximale
  • taille
  • espace réservé
  • akismet:url_auteur
  • par défaut : URL_utilisateur ou valeur par défaut

tél

Un champ pour entrer un numéro de téléphone.

Attributs pris en charge :

  • classe
  • Longueur minimale Et longueur maximale
  • taille
  • espace réservé

zone de texte

Un champ pour saisir du texte multiligne.

Attributs pris en charge :

  • classe
  • Longueur minimale Et longueur maximale
  • espace réservé
  • (cols)x(lignes)- où cols est la largeur du champ en caractères et rows est la hauteur du champ en lignes de texte. A 3 formats : (cols)x(rows) , (cols)x et x(rows) .

Pour textarea, la valeur du champ peut être spécifiée de deux manières :

  2. Texte par défaut...

Si la zone de texte contient balises html, vous pourriez obtenir une erreur de serveur 500 après avoir soumis le formulaire !

compter (nombre de caractères)

La balise count vous permet de définir un compteur lorsque vous souhaitez montrer à l'utilisateur le nombre de caractères saisis ou le nombre de caractères restant jusqu'à la valeur maximale (si le paramètre est maxlength).

Pour activer le compteur, vous devez insérer une balise de compteur dans le modèle de formulaire avec le nom du champ de texte pour lequel il comptera les caractères.

La balise compteur peut être utilisée n'importe où dans le modèle de formulaire.

Par exemple, nous avons un champ de texte pour un message :

Ensuite, nous faisons ceci :

Le champ est limité - minimum 10 et maximum 140 caractères. Dans ce cas, le compteur indiquera combien de caractères ont été saisis au total.

Parfois, il est plus pratique d'indiquer le nombre de caractères qu'il reste à saisir, car l'utilisateur ne connaît pas la limite maximale. Pour ce faire, vous devez spécifier l'option down - dans la balise.

nombre

Un champ pour saisir un nombre. Lorsque le champ est ciblé, les valeurs peuvent être modifiées en tournant la molette de la souris.

Prend en charge les attributs :

  • classe
  • espace réservé
  • min
  • maximum

gamme

Curseur pour sélectionner des nombres dans la plage spécifiée.

Prend en charge les attributs :

  • classe
  • espace réservé- affiché uniquement dans les navigateurs qui ne supportent pas ce type de champ et affichent un champ texte à la place.
  • min- Définit la valeur inférieure pour la saisie numérique : min : 20
  • maximum- Définit la valeur supérieure pour la saisie d'un nombre : min : 100
  • marcher- Définit l'étape de changement de numéro pour les curseurs et les champs de saisie de numéro : min : 5

case à cocher et radio

  • Boutons radio- ce sont des interrupteurs qui permettent de sélectionner une seule option parmi plusieurs.
  • Cases à cocher- Ce sont des cases à cocher qui vous permettent de sélectionner plusieurs options à la fois.

Attributs pris en charge :

  • défaut- La valeur par défaut du champ, par exemple default:2 signifie que lorsque le champ sera affiché, la deuxième réponse sera déjà sélectionnée. Pour les cases à cocher, vous pouvez spécifier plusieurs valeurs comme celle-ci par défaut : 1_2_3

    first_as_label- Par défaut, la case à cocher (bouton radio) vient en premier, puis son (sa) inscription. En passant paramètre donné, vous les échangerez.

    use_label_element- Enveloppe une case à cocher ou des boutons radio dans une étiquette, ce qui vous permet de sélectionner un élément en cliquant sur son nom.

    exclusif- En spécifiant ce paramètre, seul 1 élément peut être sélectionné pour la case à cocher. Cette fonctionnalité est basée sur JavaScript. Les boutons radio ne prennent pas en charge l'option en raison de leurs spécificités.

    texte libre- Permet d'ajouter un champ de texte au dernier élément. Il devient disponible pour le remplissage lorsque le dernier élément est sélectionné et l'utilisateur peut compléter sa réponse.

  • données- Obtient la valeur de la liste avec les pays du monde, par exemple data:countries .

Chine Inde Saint Marin

sélectionner

Vous permet de sélectionner des options de réponse dans une liste déroulante. Peut être utilisé en deux versions :

Les attributs:

  • classe
  • défaut- par défaut :2 ou par défaut :2_3_4
  • plusieurs- Vous permet de sélectionner plusieurs réponses
  • include_blank- Ajoutez la chaîne "- - -" comme première réponse
  • first_as_label
  • données
  • articles- options de réponse

date

Champ de sélection d'une date calendaire. Il s'agit de type HTML5, non pris en charge par les anciens navigateurs.

Les attributs:

  • classe
  • espace réservé
  • min- La valeur inférieure d'une date possible, telle que min:2016-01-01 . Le format de date relative est pris en charge, comme aujourd'hui + 10 jours , aujourd'hui-2 semaines et ainsi de suite.
  • maximum- La valeur supérieure d'une date possible, telle que min:2017-01-01 . Le format de date relative est pris en charge, tout comme min .
  • marcher- Pas de changement de date en jours, par exemple step:3 . Si la valeur inférieure est 2016-01-01 et que l'étape est 3, l'étape suivante affichera la date 2016-01-04 et ainsi de suite.

Lors de l'insertion d'une étiquette dans un modèle de lettre, une date sera envoyée au courrier au format AAAA-MM-JJ (2016-12-25) - ce n'est pas visuel. Par conséquent, vous pouvez spécifier un modèle plus descriptif, pour cela utilisez la construction [_format_(nom du champ) "(format de date)"]

[_format_votre-date "J, j M a"]

reCAPTCHA (anti-spam)

Contact Form 7, à partir de la version 4.3, en conjonction avec le service reCAPTCHA, vous permet de lutter contre le spam. Pour utiliser reCAPTCHA, vous devez avoir un compte Google, où vous pouvez obtenir des clés pour utiliser le service API.

Pour obtenir ces clés, vous avez besoin de :

  1. Aller à Panneau d'administration reCAPTCHA.
  2. Enregistrez un site.
  3. Obtenez la clé de site et la clé secrète (ce sont deux clés différentes : il peut y avoir une clé de site, mais il existe de nombreuses clés secrètes).

Les attributs:

  • classe
  • thème- Schéma de couleurs des widgets. Peut être sombre ou clair (par défaut).
  • taille- Taille des widgets. Peut être compact (compact) ou normal (par défaut).

Maintenant, dans votre modèle de formulaire, utilisez le .

Quizz (question-réponse)

Dans ce champ, l'utilisateur se voit poser une question et il doit y répondre, sinon la lettre ne sera pas envoyée. Le champ est apparu lorsque le spam a été combattu à l'aide de lettres captchas (il n'y avait pas encore de reCAPTCHA). L'utilisation de captchas alphabétiques imposait des restrictions, tant sur le serveur (obligatoire bibliothèques graphiques), et sur une personne (erreurs de perception visuelle). Cette méthode résolu ces lacunes.

Les attributs:

  • classe
  • taille- Taille et longueur du champ. Une des valeurs peut être omise.

L'exemple montre que la question et la réponse sont séparées par | . Vous pouvez écrire absolument n'importe quelle question et réponse, par exemple mathématique:

Vous pouvez spécifier plusieurs paires question-réponse, la question sera choisie au hasard à chaque affichage du formulaire :

Vous pouvez spécifier les paramètres minlength et maxlength pour ce champ :

Lorsque vous créez une étiquette de quiz avec plusieurs questions à l'aide du générateur, écrivez chaque paire question-réponse sur une nouvelle ligne.

caché

Champ masqué - non visible pour l'utilisateur. Peut stocker des informations précieuses. Les informations peuvent être ajoutées à l'aide de Javascript ou créées à l'aide de l'option par défaut.

Les attributs:

  • classe
  • défaut- Ici, vous pouvez passer un paramètre qui sera converti selon une certaine règle. Lire la suite dans la description de l'attribut (options en début d'article).

soumettre

Bouton pour soumettre les données du formulaire (soumettre). Cliquer sur ce bouton envoie toutes les données du formulaire au serveur.

Les attributs:

  • classe

Vous pouvez spécifier le texte du bouton :

Exemple d'utilisation de tous les paramètres pris en charge :

chargeur ajax

Veuillez noter que la balise dans lequel l'icône de téléchargement est chargée, si vous cliquez sur le formulaire de soumission, il est ajouté avec le bouton de soumission, plus précisément après celui-ci.

Ainsi, par exemple, si vous remplacez la balise par un bouton HTML prêt à l'emploi. Cela est parfois nécessaire lorsque la disposition du bouton ne convient pas. Par exemple, si vous souhaitez que le bouton d'envoi ressemble à ceci :

© Copyright 2023, Mastering PC - Internet. Skype. Réseaux sociaux. Tutoriels Windows