Protection anti-spam avec Akismet. Comment créer un formulaire de commentaires de contact dans WordPress
Salutations, amis. Le didacticiel d'aujourd'hui aidera votre site WordPress à disposer d'un formulaire de commentaires agréable et fonctionnel. Nous le ferons en utilisant le plugin Contact Form 7. À un moment donné, j'ai passé beaucoup de temps à chercher un formulaire de contact normal et je n'ai jamais trouvé d'alternative valable à ce plugin.
Fonctionnalités du pluginPermettez-moi de vous rappeler encore une fois que nous travaillerons avec un plugin, donc si vous avez besoin de retours sans plugin, vous feriez mieux de visiter l'article sur, la configuration est un peu plus compliquée, mais l'option est plus universelle (convient à chaque site) et met moins de charge sur les serveurs.
Le principal avantage du formulaire de contact sur Contact Form 7 est sa facilité de personnalisation, ses fonctionnalités presque illimitées et son ajustement automatique de la conception à n'importe quel modèle WordPress. Avec son aide, vous pouvez créer non seulement un formulaire pour envoyer des messages depuis le site. Le plugin peut être utilisé pour créer un bouton de commande, un rappel ou un questionnaire complexe avec des cases à cocher et des listes déroulantes. Il est également possible de joindre des fichiers à transférer.
En un mot, le plugin est méga-fonctionnel.
Si vous êtes toujours préoccupé par la question « faire ou ne pas faire un formulaire de contact ? (vous pouvez vous en sortir en plaçant simplement les coordonnées sur les pages nécessaires), alors je dirai sans équivoque - cela en vaut la peine.
Premièrement, envoyer un message directement depuis le site est plus pratique que d'ouvrir un programme de messagerie et de tout remplir manuellement. Gagner du temps ne fera de mal à personne.
Deuxièmement, le formulaire de contact peut être personnalisé et cela vous permettra de recevoir des lettres d'un format standard - elles seront plus faciles à naviguer. Par exemple, vous pouvez définir un en-tête standard pour un message « Commande » et tous les e-mails de la page des commandes arriveront avec cet en-tête.
Troisièmement, l'utilisation d'un formulaire de contact vous permet de masquer votre adresse e-mail et, ainsi, de vous débarrasser des éventuels spams qui apparaissent inévitablement lorsque votre boîte e-mail devient publique.
Quatrièmement, il est tout simplement élégant et moderne.
Installation et configuration du plugin Contact form 7Le plugin se trouve dans la base de données générale WordPress, il n'est donc pas nécessaire de rechercher ses fichiers quelque part, de les télécharger vous-même puis de les télécharger sur votre hébergement. Tout est simplifié - via l'administrateur WordPress, allez dans la section plugins, tapez « Formulaire de contact 7 » dans le champ de recherche et installez-le. Si vous n'avez jamais installé de plugins, voici des instructions détaillées sur la façon d'installer le plugin.
La configuration du plugin se compose de deux étapes.
La première consiste à mettre en place un formulaire spécifique. Il peut y avoir de nombreux formulaires différents, chacun d'entre eux pouvant contenir son propre ensemble de champs. En un mot, pour chaque tâche et chaque page du site, vous pouvez créer séparément un formulaire de commentaires, Wordpress le permet - leur liste sera stockée dans la base de données du plugin.
La deuxième étape consiste à insérer le formulaire sur les pages du site. Chaque formulaire que nous créons dans le plugin aura son propre shortcode unique. Pour l'insérer sur la page, il vous suffit de l'insérer.
Alors, allons-y.
Pour commencer, dans le menu de gauche du panneau d'administration, nous trouvons l'onglet Formulaire de contact 7. Un menu avec deux éléments apparaîtra en dessous - "Formulaires" et "Ajouter un nouveau".
Nous n’avons pas encore de formulaires prêts à l’emploi, passons donc à la section « Ajouter un nouveau ». Une page s'ouvrira là-bas vous demandant de sélectionner une langue, et la langue par défaut y sera également répertoriée. Cliquez simplement sur le bouton bleu « Ajouter un nouveau ».
Les paramètres du formulaire sont divisés en blocs distincts. Je les considérerai dans l'ordre.
Bloquer « Nom du formulaire »Le premier bloc est responsable du nom de votre formulaire - placez le curseur sur l'inscription « Sans titre » et entrez le nom dont vous avez besoin. Ce nom ne vous sera affiché que dans la liste des formulaires de contact du plugin, indiquez-le donc clairement afin de ne pas vous laisser confondre à l'avenir par toute la variété.
Initialement, ce bloc contient une configuration de champ standard. Il contient le nom de l'expéditeur de la lettre, son adresse email, le sujet de la lettre, le contenu de la lettre et le bouton d'envoi.
Les champs obligatoires sont marqués d'astérisques. Si ce champ est laissé vide, le message ne sera pas envoyé.
L'emplacement des champs peut être personnalisé à l'aide d'un balisage HTML standard.
Quant à la configuration des champs eux-mêmes, vous pouvez supprimer ceux qui sont inutiles et ajouter ceux dont vous avez besoin. Si vous ne souhaitez pas que le sujet de la lettre soit saisi manuellement, supprimez simplement le bloc correspondant.
L'ajout de champs est également très simple. Sur le côté droit il y a un bouton pour générer une balise, en cliquant dessus vous verrez une liste de tous les champs possibles pris en charge par ce plugin.
Sélectionnez l'élément souhaité et configurez ses paramètres. Le plugin est en russe, donc tous les paramètres sont intuitifs.
La première case à cocher indique si le champ est obligatoire ou facultatif (elle ajoute un astérisque).
Après avoir configuré le champ, vous aurez 2 shortcodes :
- « Copiez ce code et collez-le dans le modèle de formulaire à gauche » – ce code est inséré dans le code du formulaire de la même manière que tous les autres ;
- "Et collez le code suivant dans le modèle de lettre ci-dessous" - nous aurons besoin de ce code pour formater la lettre dans le bloc suivant.
De cette façon, vous pouvez ajouter un nombre illimité de champs, de cases à cocher, de listes déroulantes, d'éléments pour joindre des fichiers, etc. au formulaire.
Bloquer "Lettre"Notre tâche consiste maintenant à personnaliser la lettre que nous recevrons. La lettre n'affecte en rien la fonctionnalité du formulaire de commentaires ; elle sert uniquement à transmettre les informations saisies dans le formulaire.
Notre tâche est d'inclure toutes les informations dans la lettre.
La première étape consiste à indiquer l'adresse e-mail à laquelle le message sera envoyé (cela peut être n'importe quoi).
Le deuxième élément indique l'adresse e-mail à partir de laquelle la lettre vous sera envoyée. Je ne changerais rien ici, la valeur par défaut est la boîte de réception de votre blog et une balise avec le nom de la personne qui envoie le message y est ajoutée.
Ensuite, nous indiquons le sujet de la lettre. Par défaut, le sujet est tiré du champ renseigné dans le formulaire. Mais vous pouvez supprimer cet élément du formulaire et saisir un sujet spécifique dans le champ, qui est défini automatiquement dans chaque lettre. J'ai fait cela pour les formulaires de commentaires des pages sur les services et la publicité. Les messages qui en proviennent ont toujours le même sujet « Commander des services » ou « Commander de la publicité » - simple et clair.
Le champ d'en-tête supplémentaire contient la balise « Reply-To : » afin que lorsque vous répondez à une lettre reçue de votre blog, vous envoyiez le message au blog et à l'adresse indiquée par l'expéditeur de la lettre dans le champ du formulaire. Il n'est pas nécessaire de modifier ce champ.
Le champ « Modèle de lettre » est responsable du contenu interne du message que vous avez reçu. Par défaut, il contient des informations sur l'expéditeur, l'objet et le texte du message saisi dans le champ.
A la fin, le site à partir duquel la lettre a été envoyée est indiqué.
Si vous avez ajouté des champs supplémentaires au formulaire qui n'étaient pas installés par défaut, n'oubliez pas d'ajouter la balise correspondante dans le modèle de lettre. Il vous a été remis dans le bloc « Modèle de formulaire », où vous avez généré la balise correspondante (le champ « Et collez le code suivant dans le modèle d'e-mail ci-dessous »).
Toutes les informations textuelles de ce bloc (à l'exception des balises) peuvent être modifiées à votre guise. Vous pouvez également ajouter des descriptions et échanger des balises, en les organisant dans l'ordre qui vous convient.
Bloquer « Lettre 2 »Si vous souhaitez que quelqu'un d'autre reçoive le message qui vous a été envoyé, vous pouvez cocher cette case.
Ce bloc est configuré de la même manière que le précédent. Par défaut, tous les champs qu'il contient sont remplis pour que la lettre soit adressée à la personne qui a rempli le formulaire (apparemment pour qu'elle ne l'oublie pas).
Vous pouvez configurer une copie à envoyer, par exemple, à votre responsable ou à votre comptable.
Bloquer « Notifications lors de la soumission d'un formulaire »Dans ce bloc, vous pouvez configurer les messages que l'utilisateur voit après avoir cliqué sur le bouton Envoyer un message. Si vous souhaitez changer quelque chose, s'il vous plaît, j'ai tout laissé tel quel.
Activation du formulaireAprès avoir rempli tous les champs, revenez au début dans le bloc « Nom du formulaire » et cliquez sur le bouton « Enregistrer » situé à droite.
Le plugin placera le formulaire que vous avez créé dans la liste des formulaires actifs et lui attribuera un code spécial quelque chose comme ceci :
[ contact - formulaire - 7 id = "5464" title = "Vérification" ] !} |
En insérant ce code n'importe où sur votre site Web, vous recevrez un formulaire prêt à l'emploi pour communiquer avec vos clients potentiels.
Anti-spam – Akismet et CaptchaLes spammeurs causent beaucoup de problèmes aux propriétaires de sites Web, et chaque nouveau formulaire qui vous permet d'écrire quelque chose ne fait qu'augmenter le nombre de robots spammeurs.
Si vous laissez le plugin de formulaire de contact dans sa version de base, vous serez bombardé après un certain temps de nombreux messages vides et dénués de sens.
Il existe deux manières de se débarrasser des spammeurs :
La première option n’est pas pratique car elle oblige les visiteurs à saisir manuellement des caractères supplémentaires. Ce n'est pas si difficile, mais certaines personnes n'aiment pas ça.
L'utilisation du plugin Akismet est plus pratique car il analyse indépendamment les données saisies (noms, adresses e-mail, liens) et, sur la base de la base de données accumulée, tire des conclusions quant à savoir si le message est du spam ou non.
De plus, akismet est installé sur la plupart des sites WordPress pour se protéger du spam dans les commentaires des articles. Cela signifie que lors de son utilisation, vous n'aurez pas besoin d'installer de plugins supplémentaires et de créer une charge inutile sur le site.
Protection anti-spam avec Akismet1. Installez le plugin Akismet sur votre site et activez-le - .
2. Ajoutez des données supplémentaires aux balises du formulaire de contact :
- dans le champ avec le nom de l'auteur, ajoutez akismet:author
- dans le champ avec l'email de l'expéditeur de la lettre akismet:author_email
- dans le champ de l'adresse du site Web akismet:author_url
Cela devrait ressembler à ceci :
Une fois enregistré, le formulaire de contact devrait bloquer tous les messages envoyés par les spammeurs. Vous pouvez vérifier le fonctionnement du filtre en utilisant le nom de test spécial « viagra-test-123 ? – lorsque vous le saisissez, un message d’erreur devrait apparaître.
Pour rendre la vérification moins stricte, vous pouvez cocher uniquement certains champs, par exemple le nom et l'adresse e-mail, et laisser l'adresse du site Web décochée. Cela augmentera la probabilité que des messages de spam passent, mais vous risquerez moins de perdre les messages dont vous avez besoin.
Protection anti-spam avec CAPTCHA vraiment simpleSi vous trouvez qu'Akismet ne vous convient pas (il laisse passer beaucoup de spam ou bloque les messages nécessaires), alors vous pouvez activer un captcha. Pour ce faire, installez le plugin Really Simple CAPTCHA.
Ouvrez le formulaire de contact souhaité pour le modifier
Sélectionnez Captcha dans la liste des balises. Dans les paramètres des balises, vous pouvez sélectionner la taille de l'image avec des symboles, sinon vous n'avez rien à changer. En bas de la fenêtre des paramètres, 2 balises apparaîtront, l'une se charge d'afficher l'image, la seconde affiche un champ de saisie des données de cette image.
Pour que le captcha commence à fonctionner, vous devez copier et coller ces deux balises dans la fenêtre de gauche du modèle de formulaire, puis enregistrer les modifications.
Placer un formulaire de commentaires dans une fenêtre pop-upLe formulaire de contact ne doit pas toujours être situé dans une section spécifique du site ; parfois, le client doit pouvoir y accéder depuis chaque page de la ressource.
Dans de tels cas, il n’est pas toujours pratique de publier un formulaire complet. Il est beaucoup plus facile de placer un bouton dans un endroit bien en vue qui attire l’attention. Cliquer sur ce bouton devrait déjà conduire à l’ouverture du formulaire.
Ainsi, une personne pourra envoyer des messages depuis le site sans quitter la page dont elle a besoin.
Cela se fait à l'aide d'un autre plugin – Easy FancyBox.
1. Installez le plug-in
Tout d'abord, nous installons le plugin lui-même ; il se trouve dans la base de données générale des plugins, il vous suffit donc de saisir son nom dans le panneau d'administration de votre blog dans la recherche de plugins. Après avoir installé le plugin, un onglet « fichiers multimédias » apparaîtra dans la section « paramètres ».
Dans cet onglet, vous devez trouver une liste des types de contenu qui doivent être affichés dans la fenêtre contextuelle. Par défaut, il n'y a que des images, vous devez ajouter du contenu en ligne.
Maintenant que la configuration du plugin est terminée, passons à la configuration du bouton de commentaires.
2. Collez le code dans le siteEn principe, vous pouvez utiliser un lien texte classique, mais un bouton image sera plus esthétique.
Sur votre site, là où vous souhaitez afficher un bouton pour le formulaire de contact (en en-tête, pied de page ou barre latérale), insérez le code suivant :
< a href = "#contact_form_pop" class = "fancybox-inline" > < img title = "formulaire de contact" alt = "formulaire de contact" src = "http://ссылка на картинку" > < / a > < div style = "display:none" class = "fancybox-hidden" > < div id = "contact_form_pop" > [ contact - form - 7 id = "votre identifiant de formulaire" title = "nom de votre formulaire" ] !} < / div > < / div > |
Dans le code, vous devez indiquer l'adresse de l'image que vous utilisez comme bouton de commentaires et modifier le shortcode du formulaire lui-même - entrez votre identifiant et votre titre.
3. Supprimez la restriction sur les shortcodes dans la barre latéraleCet élément est requis si vous souhaitez installer un bouton dans la barre latérale. La barre latérale de WordPress n'autorise pas toujours les shortcodes.
Pour activer cette fonction, vous devez ouvrir le fichier function.php pour le modifier (directement depuis la zone d'administration de WordPress) et insérer le code suivant avant le crochet fermant « ?> » :
add_filter("widget_text", "do_shortcode");
add_filter ("widget_text" , "do_shortcode" ) ; |
Cela vous donnera la possibilité d'exécuter tous les shortcodes dans la barre latérale.
Je me suis retrouvé avec ce joli formulaire pop-up :
Il est parfois nécessaire de placer plusieurs formulaires sur un site Web avec des paramètres et des champs différents.
Par exemple, un bouton mène à un formulaire avec un nom et un numéro de téléphone et permet de commander un rappel depuis le site, et le second doit ouvrir un autre formulaire où se trouve une demande de commande détaillée (avec une adresse, un champ de description, la possibilité de joindre un fichier, etc. ). Dans le plugin Contact Form 7 lui-même, vous pouvez créer un nombre infini d'options de formulaire, mais comment pouvez-vous les intégrer dans différents boutons sur la même page ?
Pour ce faire, vous devez ajuster le code du bouton du paragraphe précédent. Le premier bouton utilise l'option présentée ci-dessus. Dans la seconde, deux valeurs changent :
Très souvent, vous devez créer un formulaire de commentaires et le masquer. Ce formulaire devrait apparaître lorsque vous cliquez sur un bouton ou une inscription sur le site dans une fenêtre pop-up lightbox. Dans cet article, nous décrirons : Comment créer un formulaire de commentaires dans une fenêtre pop-up pour WordPress. Sortie du formulaire d’abonnement Feedburner. Comment appeler plusieurs formulaires sur une seule page. Comment fermer la fenêtre avec le formulaire de commentaires (fancybox) après l'envoi et nous analyserons toutes les erreurs possibles et leurs solutions.
Pour créer un formulaire de feedback ou d'autres formulaires pour un site sur CMS WP, le studio de design "Engine" recommande le plugin Contact Form 7, et pour une fenêtre pop-up avec un effet lightbox nous utiliserons Easy FancyBox.
Le plugin le plus populaire, de haute qualité et facile à configurer et à utiliser est Contact Form 7 - avec son aide, vous pouvez créer n'importe quel formulaire de contact et plus encore. Étant donné que le plugin comporte un grand nombre de formulaires et de champs différents, il peut être utilisé pour de nombreuses tâches.
Dans ce cas, pour appeler plusieurs formulaires, faites attention à ces parties du code :
6. Sortie du formulaire d'abonnement Feedburner
S'ABONNER
S'ABONNER:
Vous pouvez utiliser ce code pour votre formulaire d'abonnement en modifiant uniquement l'adresse du flux https://feedburner.google.com/fb/a/mailverify?uri=Cms-info par la vôtre.
Ajoutez le code suivant si vous utilisez un plugin avec Fancybox, tel que Easy Fancybox :
on_sent_ok : $.fancybox.close();
dans la section Paramètres supplémentaires de votre formulaire.
Cette erreur peut survenir sur les dernières versions du moteur WordPress ; il est recommandé de changer la classe dans le lien :
Retour
changer pour :
Retour
Nous avons remplacé Fancybox par Fancybox-inline .
Problèmes et solutions rencontrés :1. Lorsque j'ai cliqué sur le lien, rien n'est arrivé au formulaire - http://site/#contact_form_pop est apparu dans la barre d'adresse.
Le problème a été résolu en remplaçant le plugin Easy FancyBox par FancyBox pour WordPress
2. Si vous avez une galerie connectée (par exemple NextGEN Gallery) ou un thème sur lequel un effet « lightbox » est déjà installé, voici ce qui se produit : les photos s'ouvrent avec la lightbox intégrée et également avec une lightbox d'EasyFancy Box, qui c'est-à-dire que vous devez ensuite les fermer deux fois.
Pour éviter cela, dans les paramètres d'EasyFancy Box, décochez la case Images et en haut du code du formulaire contextuel, remplacez la classe Fancybox par Fancybox-inline . Votre code ressemblera à ceci :.
Retour
C'est tout, si vous voulez nous « remercier », vous avez cette opportunité : à droite se trouvent les options de dons pour le développement du portail. Ou partagez l'article sur vos réseaux sociaux en utilisant les services ci-dessous.
Bonjour. Dans cette leçon, nous créerons un formulaire de commentaires à part entière, et il apparaîtra dans une fenêtre modale lorsque vous cliquerez sur un bouton de la page. J'ai fait cette leçon moi-même, à partir de zéro, en utilisant uniquement le framework jQuery et un petit JavaScript. La leçon est très intéressante, alors ne la passez pas ci-dessous, vous pouvez voir une démonstration du formulaire que j'ai créé, ainsi que la télécharger ! les fichiers nécessaires au travail :
Étape 1. Description générale et fonctionnement du formulaire de commentaires :
Tout d'abord, je vais vous dire de quels fichiers nous aurons besoin et, en fait, pourquoi ils sont nécessaires :
- images - le dossier où sont stockées toutes les images de notre formulaire ;
- index.html - le fichier « index » principal dans lequel se trouvera le bouton permettant d'appeler le formulaire de commentaires ;
- contact.html est le fichier qui contient le formulaire lui-même. C'est ce fichier qui sera inclus dans la fenêtre modale ;
- send.php - un fichier de gestionnaire responsable de l'envoi des lettres ;
- jquery.js - le framework jQuery principal ;
- style.css est un fichier avec des feuilles de style en cascade pour notre formulaire.
Alors passons à autre chose et dans l'ordre... Le formulaire fonctionnera comme suit : L'utilisateur se rend sur la page sur laquelle se trouve un bouton pour appeler la fenêtre modale, appuie dessus, puis le formulaire apparaît, dans lequel le visiteur saisit tout les données et le texte du message sont envoyés, puis il est redirigé vers une page contenant un message sur l'envoi réussi ou infructueux de la lettre. C'est tout, commençons maintenant à présenter notre formulaire...
Étape 2. Bouton pour appeler le formulaire.
Ainsi, pour que notre fenêtre modale avec le formulaire apparaisse, nous devons la forcer à le faire d'une manière ou d'une autre. Pour ce faire, il suffit de placer un bouton classique sur la page. Le code d'un tel bouton est présenté ci-dessous, ainsi que les styles qui lui sont appliqués :
Écrire un message à l'administrateur
Étape 3. Le formulaire lui-même + ses paramètres
Voyons maintenant où se trouvera notre formulaire de commentaires. Et il se trouvera dans le fichier contact.html, qui se trouve déjà dans le code source de la leçon. Ce formulaire est assez petit, je vais donc placer son code ci-dessous :
Envoi d'un message à l'administration :
Comme vous pouvez le voir, en parcourant le code, même à l'œil nu, vous pouvez voir que pour mieux afficher le formulaire, j'ai utilisé une disposition en tableau. Cela m'a été très utile pour égaliser tous les champs du formulaire.
Étape 4. Processeur responsable de l'envoi des lettres
Ici, je vais vous parler rapidement du processeur principal pour l'envoi de lettres. Je ne fournirai pas son code ici, puisqu'il se trouve dans le code source. Téléchargez et consultez son contenu. Si vous connaissez PHP quelque part à un niveau intermédiaire, comme moi, vous pouvez facilement analyser vous-même l'intégralité du code de ce gestionnaire. Si tout est prêt, alors continuez...
Étape 5. « Visser » le framework jQuery principal
Maintenant, comme dans toute leçon jQuery, nous devons « visser » le framework principal jQuery. Pour cela, revenons un peu en arrière, là où se trouve notre bouton, et entre les balises et insérons le code suivant :
Étape 6 : Styliser le formulaire
Comme vous pouvez le constater, les styles de notre formulaire sont placés séparément dans le fichier style.css, car ces styles prennent trop de place. Il nous suffit de lier le code ci-dessous à notre fichier d'index :
Étape 7. Améliorations de jQuery
Maintenant, pour que la fenêtre modale du formulaire fonctionne pleinement, nous devons insérer le code jQuery suivant :
$(function() ( $("a").overlay(function() ( var wrap = this.getContent().find("div.wrap"); if (wrap.is(":empty")) ( wrap.load(this.getTrigger().attr("href"));
Conclusion.
Notre formulaire de commentaires intéressant est prêt. Le chemin a été long et difficile, donc si quelqu'un n'a rien compris, j'écouterai vos questions dans les commentaires de cette leçon. Et c’est tout pour moi, à bientôt les amis !
Avec tout mon respect, votre guide jQuery - M.K.
(Dernière mise à jour : 07/08/2016)
Bonjour à tous! C'est encore moi, avec un article utile - WordPress popup - pour les débutants et pas seulement les utilisateurs de WordPress. Si vous êtes intéressé par le plugin popup WordPress, également appelé plugin de fenêtre modale, alors vous, amis, êtes au bon endroit.
Le plugin que je vais vous présenter ci-dessous, vous pouvez l'utiliser pour : Contactez le formulaire 7 dans une fenêtre modale ; tout formulaire de contact (commentaires) dans une fenêtre modale (pop-up) ; vidéo dans une fenêtre modale ; des images dans une fenêtre pop-up ; publier des informations utiles avec des liens ; formulaire d'abonnement par courrier pour les nouveaux articles dans une fenêtre modale et ainsi de suite, et ainsi de suite, vous ne pouvez pas tout énumérer. Le plugin est très simple, sans paramètres complexes et ne crée quasiment aucune charge supplémentaire sur le site.
Plugin Modal Facile - Fenêtre Popup/Modale pour WordPress
Plugin de fenêtre modale pour WordPress - Easy Modal Vous pouvez installer ce plugin de manière standard, via le panneau d'administration - Plugins - Ajouter un nouveau et dans le champ Rechercher des plugins, entrez le nom Easy Modal et appuyez sur Entrée. Il devrait être le premier sur la liste. Installez-le et activez-le comme d'habitude. Et puis vous pouvez passer à la création d’une nouvelle fenêtre modale.
Pour ce faire, cliquez sur la nouvelle section Easy Modal qui apparaît et sélectionnez Modals :
Easy Modal - création d'une nouvelle fenêtre modale Après cela, tout en haut de la page, cliquez sur le bouton Ajouter nouveau :
Ajouter une nouvelle fenêtre Et ici, tout est simple :
Création d'une fenêtre contextuelle vidéo Dans les paramètres généraux (onglet Général) donnez le nom de la nouvelle fenêtre (elle ne s'affichera pas, ceci est pour vous si par exemple vous créez plusieurs fenêtres modales) ; type de chargement Charger sur l'ensemble du site (pour l'ensemble du site) ; titre de la fenêtre et enfin collez le code dont vous avez besoin dans l'éditeur (mode Texte). Dans mon exemple, j'ai inséré un code vidéo de YouTube.
Mise en place d'une fenêtre modale Dans les paramètres, vous pouvez sélectionner la taille de la fenêtre ; s'il faut utiliser ou non un arrière-plan ; type d'animation pour fenêtre modale/popup ; l'emplacement de la fenêtre, et vous pouvez également réparer la fenêtre (cochez la case et indiquez la distance par rapport au haut de l'écran).
Dans l'onglet Exemples, vous trouverez des exemples de code pour afficher une popup dans WordPress :
Code pour afficher une fenêtre modale dans WordPress Ici, vous pouvez sélectionner un simple lien texte, un bouton ou une icône. Veuillez noter que chaque fenêtre nouvellement créée se voit attribuer une classe eModal. La première fenêtre créée aura la classe eModal - 1, la deuxième eModal - 2 et ainsi de suite. Il vous suffit de remplacer vous-même le numéro après le signe -. Ce code peut être collé dans ou n'importe où dans votre article. Naturellement, vous pouvez écrire n'importe quel texte dans le code. Oui, j'avais presque oublié qu'après avoir créé une fenêtre modale sur le côté droit de la page, n'oubliez pas de cliquer sur le bouton Publier.
J'ai inséré le code de la fenêtre modale avec la vidéo dans la barre latérale sous forme de bouton :
Bouton de la barre latérale du blog Le visiteur clique dessus et une fenêtre avec une vidéo s'ouvre :
Fenêtre modale avec vidéo J'espère, amis et camarades, que le principe général du travail avec le plugin Easy Modal est clair pour vous. J'ajouterai simplement que vous pouvez alors ou immédiatement personnaliser l'apparence de la fenêtre modale en cliquant sur l'élément Thème. Malheureusement, la version gratuite du plugin n'a qu'un seul thème pour la conception, mais vous pouvez le concevoir à votre guise, il y a suffisamment de paramètres. Lors de la personnalisation de l'apparence de la fenêtre modale, vous pouvez immédiatement voir un aperçu du design à droite :
Modification d'un thème - conception de fenêtre modale/popup Après tous les paramètres d'apparence de la fenêtre, cliquez sur le bouton Enregistrer à droite. Et enfin, mesdames et messieurs, je vais vous montrer un exemple d'affichage du formulaire de contact Contact Form 7 dans une fenêtre modale.
Créez une nouvelle fenêtre modale comme indiqué ci-dessus et dans un éditeur de texte, collez simplement le shortcode Contact Form 7 (si ce plugin est installé, sinon) :
Créer le formulaire de contact 7 dans une fenêtre contextuelle 
Bouton pour écrire à l'auteur après le message Si le lecteur souhaite vous contacter, il cliquera sur le bouton et le formulaire de contact s'ouvrira dans une fenêtre modale :
Formulaire de contact avec l'auteur dans une fenêtre modale Voilà, quelque chose comme ça. De plus, toutes vos fenêtres pop-up créées seront affichées sur la page (élément Modals), où, d'ailleurs, les classes pour chaque fenêtre modale sont indiquées :
Création de fenêtres modales sur WordPress Bonjour cher lecteur, dans cet article je vais vous montrer comment créer un formulaire de contact popup sur votre site WordPress. Souvent, lors du développement de votre propre site Web ou blog, il est nécessaire d'établir la capacité de communiquer rapidement avec les visiteurs d'une ressource Internet. Dans ce cas, un formulaire de commentaires contextuel pour WordPress vous sera utile, car il vous aidera à établir un contact rapide avec les utilisateurs.
Pourquoi avez-vous besoin d’un formulaire de commentaires contextuel pour WordPress ? Raisons de l’utiliser ?Voyons pourquoi ce formulaire est nécessaire
Un bonus supplémentaire : le formulaire est facile à modifier et à personnaliser pour répondre aux besoins de votre site. Un formulaire de commentaires contextuel pour WordPress peut être présenté sous la forme d'une fenêtre d'ouverture pour commander un appel, un service ou un produit, ou souscrire un abonnement. Si vous le souhaitez, vous pouvez ajouter des effets visuels, diverses images, etc.
Plugins pour installer un formulaire popupExaminons les outils nécessaires pour développer des fenêtres pop-up dans WordPress, une application spéciale pour développer et créer des sites Web.
Formulaire de contact 7Ce plugin est utilisé directement pour concevoir le formulaire. Pour l'installer, suivez ces étapes :
Boîte de fantaisie facile Ce plugin convient au développement d'un effet de fenêtre pop-up. La séquence d'installation d'Easy FancyBox est similaire à l'installation précédente du plugin.
Vous pouvez configurer les paramètres du module complémentaire Easy FancyBox via des fichiers multimédias. Utilisez les options de menu « Paramètres » -> « Fichiers multimédias ».
Dans le bloc qui s'ouvre, juste en dessous des paramètres standards, se trouveront les paramètres du plugin lui-même. Il y a généralement une coche à côté de l'élément « Images », qui indique qu'une fenêtre contextuelle sera activée lorsque vous cliquez sur l'image. Il est conseillé de le supprimer, car si vous disposez d'autres outils supplémentaires pour créer une animation pop-up, les images s'ouvriront deux fois.
Mais ce n'est pas tout. Cochez la case à côté de « Contenu en ligne »
N’importe qui peut approfondir les paramètres du plugin et les définir à sa propre discrétion.
Astuce : si vous souhaitez que le formulaire soit toujours ouvert, décochez l'option « Fermer FancyBox lorsque l'on clique sur la superposition » dans les paramètres d'Easy FancyBox, qui ferme la fenêtre lorsque vous cliquez en dehors de celle-ci.
Instructions étape par étapeEh bien, la préparation préliminaire « ennuyeuse » est terminée, passons maintenant à la partie « délicieuse » - comment, en fait, le formulaire de commentaires contextuel WordPress est développé.
Gestion de la fenêtre de formulairePar où commencer ? Bien entendu, avec configuration préalable du formulaire lui-même. Sélectionnez « Formulaire de contact 7 » dans le menu de droite, puis l'option « Ajouter un nouveau ».
Trouvez un nouveau nom pour le formulaire, par exemple « Expérimenter », saisissez-le dans le champ de saisie de la fenêtre qui s'ouvre, où se trouve le texte « Titre », et cliquez sur le bouton « Enregistrer ». Vous pouvez modifier d’autres paramètres, y compris le modèle de formulaire lui-même, mais nous n’y toucherons pas. Maintenant, notre objectif principal est simplement d'apprendre à créer des formulaires contextuels.
Jetez un œil au résultat. Comme vous pouvez le voir, le plugin a généré un shortcode spécial qui est utilisé pour afficher ensuite le formulaire. Vous devez le copier.
Passons maintenant à la programmation. Le nouveau code du programme peut être inséré n'importe où sur le site, par exemple dans « Contacts » et autres. Dans notre exemple, le nouveau formulaire sera affiché dans le widget. Sélectionnez « Apparence » dans le menu, puis cliquez sur « Widgets », puis dans la fenêtre qui s'ouvre, cliquez sur l'option « Texte ».
Cliquez maintenant sur le bouton « Ajouter un widget »
Collez le code suivant dans le champ de saisie Contenu :
Écrire une lettre Texte de début Texte de fin
Voici à quoi ressemblera le résultat obtenu :
Veuillez noter qu'au lieu du shortcode spécifié dans l'exemple, vous devrez spécifier celui que vous avez créé suite à la création d'un nouveau formulaire.
De plus, le formulaire peut être modifié : ajouter ou supprimer des champs de saisie, saisir le texte initial et/ou final avant et après le formulaire, convertir le texte en titre ou l'afficher dans un bloc séparé, utiliser différents styles, espaces réservés, etc. Si seulement il y avait du temps et de l’envie !
Style de lienExaminons également deux façons de convertir un lien en bouton pour améliorer son apparence visuelle.
Méthode 1 : Utilisation de styles de thème supplémentaires.
Le code suivant peut être inséré comme suit :
Le code du programme lui-même ressemble à ceci :
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | /***Affichage d'un lien sous forme de bouton****/ .contact-us a( margin:auto; /*alignement du bloc au centre*/ display:block; width:199px; /*taille du bouton*/ padding:11px 22px ; /*inner padding*/ border:1px solid black; /*text-align:center /*; centrage de la légende*/ color:#ffffff; /*couleur de la légende*/ -moz-transition : toutes les facilités de 0,6 s -webkit-transition : toutes les transitions de 0,6 s : toutes les facilités de 0,6 s) /**Modifier le liens de couleur lors du survol du curseur**/ .contact-us a:hover( -moz-box-shadow: 0 0 7px #111; -webkit-box-shadow: 0 0 7px #111; box-shadow:0 0 7px #111 ; -moz-transition : toutes les facilités de 0,6 s ; -webkit-transition : toutes les facilités de 0,6 s ; |
/***Affichage d'un lien sous forme de bouton****/ .contact-us a( margin:auto; /*alignement du bloc au centre*/ display:block; width:199px; /*taille du bouton*/ padding:11px 22px ; /*inner padding*/ border:1px solid black; /*text-align:center /*; centrage de la légende*/ color:#ffffff; /*couleur de la légende*/ -moz-transition : toutes les facilités de 0,6 s -webkit-transition : toutes les transitions de 0,6 s : toutes les facilités de 0,6 s) /**Modifier le liens de couleur lors du survol du curseur**/ .contact-us a:hover( -moz-box-shadow: 0 0 7px #111; -webkit-box-shadow: 0 0 7px #111; box-shadow:0 0 7px #111 ; -moz-transition : toutes les facilités de 0,6 s ; -webkit-transition : toutes les facilités de 0,6 s ;
Le résultat est un bouton comme celui-ci :
Le code indique déjà quel paramètre est responsable de quoi. Désormais, chacun peut modifier le code à sa guise, en expérimentant différents styles et couleurs pour créer le lien le plus approprié pour la fenêtre contextuelle.
Méthode 2 – utilisez une image comme bouton. Tout d'abord, téléchargez l'image requise sur le site (n'importe quelle image que vous aimez, pas nécessairement sous la forme d'un bouton - cela n'a pas vraiment d'importance). Pour ce faire, cliquez sur « Média » -> « Ajouter un nouveau » et sélectionnez l'image souhaitée. Un lien permanent vers le fichier apparaîtra à droite de l'image (dans cet exemple http://www.sait.ru/wp-content/uploads/2017/04/depositphotos_2169498-E-mail-internet-icon.jpg) , copiez-le et ajoutez-le au code (ne supprimez pas les guillemets) :
Ajoutez le code résultant au code de sortie principal du formulaire au lieu du texte « Écrire une lettre ».
| 1 | 
|
Mon site Web affichait le bouton illustré dans la capture d'écran ci-dessous :
Et voici à quoi ressemblera le bouton si vous laissez le style supplémentaire décrit dans la première méthode :
Pour que le formulaire de commentaires contextuel pour WordPress puisse être appelé directement depuis le menu, vous devez utiliser le code suivant
| 1 2 3 | |
Vous devez d’abord déterminer où exactement vous devez insérer ce code. Allez dans « Éditeur » via « Apparence » et parmi les modèles, sélectionnez « En-tête (header.php) »
Trouvez maintenant l'endroit où se trouve le code du menu. Retrouvez les informations suivantes :
| 1 2 |
Ci-dessous, collez votre code juste avant la balise de fermeture.
En général, il n'y a rien de difficile à ajouter un formulaire de contact à votre site internet, l'essentiel est d'avoir du temps libre et l'envie d'étudier en profondeur tous les aspects. Vous savez désormais ce qu'est un formulaire de contact, à quoi il sert, comment l'utiliser sur le site et comment traiter un lien pour ouvrir une fenêtre avec effet pop-up. Bonne chance à vous et réussite dans cette activité difficile mais passionnante de création de sites Web.