Salut. Dans ce tutoriel, nous allons créer une forme complète. retour d'information, et il apparaîtra dans la fenêtre modale en cliquant sur le bouton sur 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 "th. La leçon est très intéressante, alors ne passez pas à côté! Ci-dessous vous pouvez voir une démo du formulaire résultant, ainsi que télécharger fichiers requis pour le travail:

Étape 1. description générale et comment fonctionne le 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 principal, "index", dans lequel se trouvera le bouton d'appel du formulaire de retour d'expérience ;
• contact.html- le fichier contenant le formulaire lui-même. C'est ce fichier qui sera connecté à la fenêtre modale ;
• envoyer.php- le gestionnaire de fichiers, qui est responsable de l'envoi de la lettre ;
• jquery.js- le framework jQuery principal ;
• style.css- fichier avec des feuilles de style en cascade pour notre formulaire.

Alors, allons plus loin et dans l'ordre... Le travail du formulaire sera le suivant : L'utilisateur entre dans la page sur laquelle se trouve le bouton d'appel de la fenêtre modale, clique dessus, puis le formulaire apparaît, dans celui-ci le visiteur saisit toutes les données et le texte du message et envoie, puis il est transféré à la page avec un message sur l'envoi réussi ou non de la lettre. C'est tout, commençons maintenant à composer notre formulaire ...

Étape 2. Bouton pour appeler le formulaire.

Pour que notre fenêtre modale avec le formulaire apparaisse, vous devez le forcer à le faire d'une manière ou d'une autre. Pour ce faire, il suffit de placer un bouton ordinaire sur la page. Le code d'un tel bouton est indiqué ci-dessous, ainsi que les styles qui lui sont appliqués :

Ecrire un message à l'administrateur

Étape 3. Le formulaire lui-même + ses paramètres

Voyons maintenant où se trouvera notre formulaire de commentaires. Et ce sera dans le fichier contact.html, qui se trouve déjà dans le code source de la leçon. Ce formulaire 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 un meilleur affichage du formulaire, j'ai utilisé un format de tableau. Cela m'a été très utile pour égaliser tous les champs du formulaire.

Étape 4. Gestionnaire responsable de l'envoi des e-mails

Ici, je vais vous présenter rapidement le gestionnaire de courrier principal. Je ne donnerai pas son code ici, puisqu'il est dans le code source. Téléchargez et visualisez son contenu. Si vous connaissez php quelque part à un niveau intermédiaire, comme moi, vous pouvez facilement analyser vous-même tout le code de ce gestionnaire. Si tout est prêt, passez à autre chose...

Étape 5. Faire tourner le framework jQuery principal

Maintenant, comme pour tout tutoriel jQuery, nous devons « visser » le framework jQuery principal. Pour ce faire, revenons un peu en arrière, là où se trouve notre bouton, et entre les balises et insérez le code suivant :

Étape 6. Styliser la forme

Comme vous pouvez le voir, les styles de notre formulaire sont rendus séparément, dans le fichier style.css car ces styles prennent trop de place. Nous avons juste besoin de lier le code ci-dessous à notre fichier d'index :

Étape 7. JQuery ajuste

Maintenant pour le travail complet de la fenêtre de formulaire modal, nous devons insérer le code jQuery suivant :

Conclusion.

Notre formulaire de commentaires intéressant est donc prêt. Le chemin a été long et difficile, donc si quelqu'un n'a pas compris quelque chose, j'écouterai vos questions dans les commentaires de cette leçon. Et c'est tout pour moi, jusqu'à ce qu'on se retrouve les amis !

Cordialement jQuery - guide - M.K.

Bonjour cher lecteur, dans cet article, je vais vous montrer comment créer un formulaire de commentaires contextuel sur votre site WordPress. Souvent, lors du développement de votre propre site Web ou blog, il est nécessaire d'établir la possibilité d'une communication opérationnelle avec les visiteurs de la ressource Internet. Dans ce cas, un formulaire de commentaires contextuel pour wordpress sera utile, ce qui aidera à établir contact rapide avec les utilisateurs.

A quoi sert le formulaire de feedback wordpress popup ?

Raisons d'utiliser

Considérez pourquoi un tel formulaire est nécessaire

1. Économie espace libre sur le site. Un formulaire de contact peut être placé n'importe où : dans le pied de page ou l'en-tête, dans le contenu de la page principale, en tant que bouton flottant, etc.
2. Aspect efficace. L'animation de l'apparition d'une nouvelle fenêtre semble intéressante et inhabituelle
3. Disponibilité. Vous pouvez laisser des notes sous cette forme depuis n'importe où sur le site, les utilisateurs n'ont pas besoin de revenir à la page d'accueil.

Un bonus supplémentaire : le formulaire est facile à modifier et à personnaliser pour s'adapter aux besoins de votre site. Un formulaire de commentaires contextuel pour wordpress peut être présenté comme une fenêtre d'ouverture pour commander un appel, un service ou un produit, ou pour s'abonner. En option, vous pouvez ajouter effets visuels, diverses images, etc.

Plugins de formulaire contextuel

Jetons un coup d'œil aux outils dont vous avez besoin pour concevoir des fenêtres contextuelles dans wordpress, une application dédiée à la conception et à la création de sites Web.

Formulaire de contact 7

Ce plugin est utilisé directement pour construire le formulaire. Pour l'installer, suivez ces étapes :

Boîte Fantaisie Facile

Ce plugin est adapté pour développer un effet popup. La séquence d'installation d'Easy FancyBox est la même que pour le plugin précédent.

Configuration des plugins

Vous pouvez configurer les paramètres du module complémentaire Easy FancyBox via des fichiers multimédias. Utilisez les options du menu "Paramètres" -> "Média".

Dans le bloc qui s'ouvre juste en dessous paramètres standards les paramètres du plugin lui-même seront localisés. Il y a généralement une coche à côté de l'élément "Images", qui indique l'activation de la fenêtre contextuelle lorsque vous cliquez sur l'image. Il est conseillé de l'enlever, car en présence d'autres personnes outils supplémentaires la création d'une animation contextuelle ouvrira deux fois les images.

Mais ce n'est pas tout. Cochez la case à côté de "Contenu en ligne"

Tout le monde peut en outre se plonger dans les paramètres du plugin et les définir à sa discrétion.

Astuce : si vous voulez que le formulaire soit toujours ouvert, décochez la case à côté de l'option "Fermer FancyBox lorsque la superposition est cliqué" dans les paramètres d'Easy FancyBox, qui remplit la fonction de fermeture de la fenêtre lorsque la souris est cliqué en dehors de celle-ci .

Instructions pas à pas

Eh bien, nous avons terminé avec la préparation préliminaire "ennuyeuse", passons maintenant à la partie la plus "savoureuse" - comment, en fait, la forme contextuelle de la rétroaction est développée liens wordpress.

Gestion de la fenêtre de formulaire

Où allons-nous commencer? Bien sûr, avec la configuration préalable du formulaire lui-même. Sélectionnez l'élément « Formulaire de contact 7 » dans le menu de droite, puis l'option « Ajouter un nouveau ».

Pensez à un nouveau nom pour le formulaire, par exemple « Expérience », saisissez-le dans le champ de saisie de la fenêtre qui s'ouvre, où se trouve le texte « Titre », puis 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. Notre objectif principal en ce moment 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 l'affichage ultérieur du formulaire. Vous devez le copier.

Déduction de formulaire

Passons maintenant à la programmation. Nouvelle code de 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 en séquence, 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 de programme suivant dans la zone de texte « Contenu » :

Voici à quoi ressemblera le résultat :

Gardez à l'esprit qu'au lieu du shortcode spécifié dans l'exemple, vous devrez spécifier celui que vous avez généré à la suite de 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 divers styles, espaces réservés, etc. Il y aurait du temps et de l'envie !

Styliser un lien

Regardons également deux façons de convertir un lien en bouton pour améliorer son affichage visuel.

Méthode 1 - en utilisant des styles de thème supplémentaires.

Le code ci-dessous peut être inséré comme suit :

Le code du programme lui-même ressemble à ceci :

/ *** Affichage d'un lien sous forme de bouton **** / .contactez-nous a (marge : auto ; / * alignement du bloc au centre * / affichage : bloc ; largeur : 199px ; / * taille du bouton * / padding : 11px 22px ; / * padding * / border : 1px solid black ; / * border tint * / background : # 3399ff ; / * background pattern * / text-decoration : none ; / * conversion de la légende en unlined * / text -align : center ; / * centrage de la légende * / color : #ffffff ; / * teinte de la légende * / -moz-transition : toutes les 0.6s facilité ; -webkit-transition : toutes les 0.6s facilité ; transition : toutes les 0.6s facilité;) / ** Changer la couleur des liens de survol ** / .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 0.6s de facilité ; -webkit-transition : toutes les 0.6s de facilité ; transition : toutes les 0.6s de facilité ;)

Le résultat est un bouton comme celui-ci :

Le code dit déjà quel paramètre est responsable de quoi. Désormais, tout le monde peut modifier le code comme bon lui semble, en expérimentant différents styles et couleurs et en créant le lien contextuel le plus approprié.

Méthode 2 - en utilisant une image sous la forme d'un bouton. Tout d'abord, téléchargez l'image nécessaire sur le site (toute à votre convenance, pas nécessairement sous la forme d'un bouton - cela n'a pas vraiment d'importance). Pour ce faire, cliquez sur "Médias" -> "Ajouter nouveau" et sélectionnez l'image souhaitée. Un lien permanent vers le fichier apparaîtra à droite de l'image (en 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 « Ecrire une lettre ».

1

Sur mon site, le bouton montré dans la capture d'écran ci-dessous s'affiche :

Et voici à quoi ressemblera le bouton si vous laissez le style supplémentaire décrit dans la première méthode :

Ajout au menu

Pour que le formulaire de commentaires contextuel pour wordpress soit appelé directement à partir du menu, vous devez utiliser le code suivant

Vous devez d'abord déterminer exactement où vous devez insérer ce code. Allez dans "l'éditeur" via "l'apparence" et parmi les modèles sélectionnez "En-tête (header.php)"

Trouvez maintenant l'endroit où se trouve le code du menu. Trouvez les informations suivantes :

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, l'essentiel est d'avoir un peu de temps libre et une envie d'étudier en profondeur tous les aspects. Maintenant tu sais ce que c'est formulaire de contact, à quoi il sert, comment l'utiliser sur le site et comment gérer un lien pour invoquer une fenêtre contextuelle. Bonne chance et succès dans cette entreprise difficile mais passionnante de construction de sites.

Très souvent, vous devez créer un formulaire de commentaires et le masquer. Un tel 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 allons décrire : 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 un formulaire de commentaires (fancybox) après avoir soumis et analysons tout erreurs possibles et leurs solutions.

Pour créer un formulaire de commentaires ou d'autres formulaires pour un site Web CMS WP, le studio de conception 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 - vous pouvez l'utiliser pour créer n'importe quel formulaire de contact et plus encore. Étant donné que le plugin a 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 remplaçant 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 par exemple Easy Fancybox :
on_sent_ok : $ .fancybox.close ();
dans le bloc Paramètres supplémentaires de votre formulaire.


Si cela donne une erreur : Le contenu demandé ne peut pas être chargé. Veuillez réessayer plus tard

Une telle erreur peut être sur dernières versions le moteur WordPress est recommandé pour changer la classe dans le lien :
Retour d'information
changer pour :
Retour d'information

Nous avons changé fancybox en fancybox-inline.

Quels problèmes et solutions sont 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 Boîte Fantaisie Facile sur FancyBox pour WordPress

2. Si vous avez une galerie connectée (par exemple NextGEN Gallery) ou si vous avez un thème installé qui a déjà un effet "lightbox", vous obtenez ce qui suit : les photos sont ouvertes avec la lightbox intégrée et une autre lightbox d'EasyFancy Box, qui c'est-à-dire que vous devez les fermer deux fois plus tard.
Pour éviter cela, décochez la case dans les paramètres de l'EasyFancy Box. Images et en haut du code du formulaire contextuel, remplacez la classe fancybox par fancybox-inline. Votre code ressemblera à ceci :

Retour d'information

C'est tout, si vous voulez "remercier" le nôtre - vous avez une telle opportunité: à droite, il y a des options de dons pour le développement du portail. Ou partagez l'article sur vos réseaux sociaux via les services ci-dessous.

Salutations, amis. Le tutoriel d'aujourd'hui aidera votre site wordpress à obtenir un formulaire de rétroaction 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 pas trouvé d'alternative valable à ce plugin.

Fonctionnalités du plugin

Permettez-moi de vous rappeler encore une fois que nous allons travailler avec un plugin, donc si vous avez besoin de retours sans plugin, vous feriez mieux de visiter l'article à propos, le réglage y est un peu plus compliqué, mais, d'un autre côté, l'option est plus universel (adapté à chaque site) et moins de charge sur le serveur.

Le principal avantage du formulaire de contact sur Contact Form 7 est sa simplicité de personnalisation, ses fonctionnalités presque illimitées et son ajustement automatique de la conception pour tous les modèles WordPress. Avec son aide, vous pouvez créer non seulement un formulaire pour envoyer des messages à partir du 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. En outre, il est possible de joindre des fichiers pour le transfert.

Bref, le plugin est méga-fonctionnel.

Si vous êtes toujours inquiet à la question « faire ou ne pas faire un formulaire de contact ? (vous pouvez vous en tirer en plaçant simplement vos coordonnées sur pages souhaitées), alors je dirai sans équivoque - ça vaut la peine de le faire.

Premièrement, envoyer un message directement depuis le site est plus pratique que d'ouvrir programme de messagerie et remplissez tout 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 du formulaire standard - il sera plus facile de s'y retrouver. Par exemple, vous pouvez mettre un en-tête standard pour le message « Commande » et tous les e-mails de la page des commandes seront accompagnés de 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 d'éventuels spams qui apparaissent inévitablement lorsque votre compte e-mail est disponible gratuitement.

Quatrièmement, c'est juste élégant et moderne.

Installation et configuration du plugin Contact form 7

Le plugin est dans socle commun wordpress, il n'est donc pas nécessaire de rechercher ses fichiers quelque part, de les télécharger sur vous-même, puis de les télécharger sur l'hébergement. Tout est facilité - via le panneau d'administration WordPress, entrez dans la section des plugins, tapez « Formulaire de contact 7 » dans le champ de recherche et installez-le. Si vous n'avez jamais installé de plugins, alors des instructions détaillées comment installer le plugin.



Configuration du plugin Formulaire de contact 7

La configuration du plugin se compose de deux étapes.

La première consiste à personnaliser un formulaire spécifique. Il peut y avoir de nombreux formulaires différents, chacun d'eux peut 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 des plugins.

La deuxième étape consiste à insérer le formulaire dans les pages du site. Chaque formulaire que nous créons dans le plugin aura son propre shortcode unique. Pour insérer dans une page, il suffira de n'insérer que celle-ci.

Alors allons-y.

Pour commencer, dans le menu de gauche du panneau d'administration, nous trouvons l'onglet Formulaire de contact 7. En dessous, un menu avec deux éléments - "Formulaires" et "Ajouter un nouveau" apparaîtra.



Nous n'avons pas encore de formulaires prêts à l'emploi, rendez-vous donc dans la section "Ajouter un nouveau". Là s'ouvrira une page proposant de sélectionner une langue, et la langue par défaut y est également indiquée. Cliquez simplement sur le bouton bleu Ajouter un nouveau.



La personnalisation des formulaires est divisée en blocs distincts. Je vais les considérer dans l'ordre.

Bloc de nom de 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 sera affiché que pour vous dans la liste des formulaires de contact plug-in, alors rendez-le compréhensible pour vous afin de ne pas vous confondre dans toute la variété à l'avenir.



Bloc "Modèle de formulaire"

Initialement, ce bloc est défini configuration standard des champs. Il contient le nom de l'expéditeur de la lettre, son adresse e-mail, l'objet de l'e-mail, le contenu de l'e-mail 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é.

La disposition des champs peut être personnalisée à l'aide d'un balisage html standard.

Quant à la configuration des champs eux-mêmes, vous pouvez supprimer les champs inutiles et ajouter ceux dont vous avez besoin. Si vous ne souhaitez pas que l'objet 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 un tag, en cliquant dessus, vous verrez une liste de tous les champs possibles que ce plugin supporte.



Sélectionnez l'élément souhaité et configurez ses paramètres. Le plugin est en russe, donc tous les réglages sont intuitifs.

La première case à cocher indique un champ 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 tout le monde ;
• "Et collez le code suivant dans le modèle de lettre ci-dessous" - nous aurons besoin de ce code pour concevoir la lettre dans le bloc suivant.



Ainsi, vous pouvez ajouter n'importe quel nombre de champs, de cases à cocher, de listes déroulantes, d'éléments pour joindre des fichiers, etc. au formulaire.

Majuscule"

Maintenant, notre tâche est de personnaliser la lettre que nous recevrons. La lettre n'affecte en aucun cas la performance du formulaire de rétroaction, elle sert uniquement à transmettre les informations qui ont été saisies dans le formulaire.

Notre tâche est d'inclure toutes les informations dans la lettre.



Comme premier point, nous indiquons l'adresse e-mail à laquelle le message sera envoyé (cela peut être n'importe quoi).

Le deuxième élément indique e-mailà partir de laquelle l'e-mail vous sera envoyé. Je ne changerais rien ici, la valeur par défaut est boites aux lettres votre blog et une étiquette y est ajoutée avec le nom de la personne qui publie le message.

Ensuite, nous indiquons l'objet de la lettre. En règle générale, le sujet est tiré du champ qui est rempli dans le formulaire. Mais vous pouvez supprimer cet élément du formulaire et entrer un sujet spécifique dans le champ, qui est automatiquement défini dans chaque lettre. Je l'ai fait pour les formulaires de commentaires des pages sur les services et la publicité. Les messages de là viennent toujours avec le même sujet "Commander des services" ou "Commander de la publicité" - simplement et clairement.

Le champ des en-têtes supplémentaires contient la balise « Reply-To : » afin que lorsque vous répondez à une lettre reçue de votre blog, vous envoyez un message au blog, et à l'adresse indiquée par l'expéditeur de la lettre dans le champ du formulaire. Ce n'est pas la peine de changer 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 entré un champs supplémentaires qui ne sont pas installés par défaut, n'oubliez pas d'ajouter la balise correspondante dans le modèle d'email. 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 de lettre ci-dessous").

Tout informations textuelles ce bloc (sauf pour les balises) peut être modifié à votre guise. Vous pouvez également ajouter des descriptions et modifier les balises par endroits, en les plaçant dans l'ordre qui vous convient.

Bloc "Lettre 2"

Si vous souhaitez que quelqu'un d'autre reçoive le message qui vous a été envoyé, vous pouvez cocher ce bloc.

Ce bloc est configuré de manière similaire au précédent. Par défaut, tous les champs qu'il contient sont remplis pour que la lettre aille à la personne qui a rempli le formulaire (apparemment, pour qu'il n'oublie pas).

Vous pouvez configurer l'envoi d'une copie, par exemple, à votre responsable ou à votre comptable.

Bloquer "Notifications lors de la soumission d'un formulaire"

Dans ce bloc, vous pouvez personnaliser les messages que l'utilisateur voit après avoir cliqué sur le bouton d'envoi de message. Si vous voulez changer quelque chose, s'il vous plaît, j'ai tout laissé tel quel.

Activation du formulaire

Aprè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 mettra le formulaire que vous avez créé dans la liste des formulaires valides et lui attribuera un code spécial comme celui-ci :

[contact - formulaire - 7 id = "5464" title = "(! LANG: Vérifier" ] !}

En collant ce code n'importe où sur votre site, vous recevrez un formulaire prêt à l'emploi pour communiquer avec vos clients potentiels.

Anti-spam - Akismet et Captcha

Les spammeurs causent beaucoup de problèmes aux propriétaires de sites, et chaque nouveau formulaire qui vous permet d'écrire quelque chose ne fait qu'augmenter le nombre de robots de spam.

Si vous laissez le plugin de formulaire de contact dans sa forme de base, alors, après un certain temps, vous serez attaqué par de nombreux messages vides et dénués de sens.

Il existe deux manières de se débarrasser des spammeurs :

1. Mettez un captcha obligatoire (cela peut être fait avec un plugin supplémentaire - Really Simple CAPTCHA).
2. Utilisez le plugin antispam wordpress - Akismet.

La première option est peu pratique car elle oblige les visiteurs à entrer manuellement 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 de manière indépendante les données saisies (noms, adresses e-mail, liens) et, sur la base de la base de données développée, tire des conclusions sur le message spam ou non-spam.

De plus, akismet est présent sur la plupart des sites wordpress pour se protéger contre les commentaires de spam sur les 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 Akismet

1. 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 : auteur
• dans le champ avec l'email de l'expéditeur de la lettre akismet : author_email
• dans le champ d'adresse du site akismet : auteur_url

Ça devrait ressembler à ça:



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 doit apparaître.

Pour rendre la vérification moins stricte, vous ne pouvez vérifier qu'une partie des champs, par exemple, le nom et e-mail, et laissez l'adresse du site décochée. Dans ce cas, la probabilité de transmettre des messages de spam augmentera, mais vous risquez moins de perdre les messages que vous voulez.

Protection anti-spam avec Really Simple CAPTCHA

Si vous trouvez qu'Akismet ne vous convient pas (il laisse entrer beaucoup de spam ou bloque les messages nécessaires), alors vous pouvez connecter un captcha. Pour ce faire, installez le plugin Really Simple CAPTCHA.

Ouvrez le formulaire de contact requis pour le modifier

Dans la liste des balises, sélectionnez Captcha. Dans les paramètres des balises, vous pouvez choisir la taille de l'image avec les symboles, sinon rien ne doit être modifié. En bas de la fenêtre de paramétrage, 2 balises apparaîtront, l'une se charge d'afficher une image, la seconde affiche un champ permettant de saisir les 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 contextuelle

Le formulaire de contact ne doit pas toujours être situé dans une section spécifique du site ; parfois, le client doit pouvoir y accéder à partir de 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 qui attire l'attention dans un endroit bien en vue. Un appui 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 en utilisant un autre plugin - Easy FancyBox.

1. Installation du plugin



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 suffit donc d'entrer son nom dans la recherche de plugin dans le panneau d'administration de votre blog. Après avoir installé le plug-in dans la section "Paramètres", l'onglet "Fichiers multimédias" apparaîtra.



Dans cet onglet, vous devez trouver une liste de 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.

Ceci termine la configuration du plugin, passez à la configuration du bouton de rétroaction.

2. Insérez le code sur le site

En principe, vous pouvez utiliser un lien texte normal, mais le bouton image sera plus joli.

Sur votre site, où vous souhaitez afficher le bouton du formulaire de contact (dans l'en-tête, le pied de page ou la 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 : // lien vers l'image"> < / a > < div style = "display:none" class = "fancybox-hidden" > < div id = "contact_form_pop" > [contact - formulaire - 7 id = "identifiant de votre formulaire" titre = "nom de votre formulaire"] < / div > < / div >

Dans le code, vous devez spécifier l'adresse de l'image que vous utilisez comme bouton de retour et modifier le shortcode du formulaire lui-même - écrivez votre identifiant et votre titre.

3. Supprimez la restriction sur les codes courts dans la barre latérale

Cet élément est requis si vous souhaitez installer un bouton dans la barre latérale. La barre latérale de WordPress ne vous permet pas toujours d'exécuter des shortcodes.

Pour activer cette fonction, vous devez ouvrir le fichier function.php pour l'éditer (directement depuis le panneau d'administration WordPress) et insérer le code suivant avant l'accolade fermante "?>":

add_filter ("widget_text", "do_shortcode");

add_filter ("widget_text", "do_shortcode");

Il vous permettra d'exécuter tous les shortcodes dans la barre latérale.

Je me suis retrouvé avec un joli formulaire pop-up comme celui-ci:



Plusieurs formulaires contextuels différents sur une seule page

Parfois, il devient nécessaire de placer plusieurs formulaires sur le site avec différents réglages et des champs.

Par exemple, un bouton que vous avez mène à un formulaire avec un nom et un numéro de téléphone et sert à commander un rappel depuis le site, et le second doit ouvrir un autre formulaire où il y a 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 les intégrer dans différents boutons sur la même page ?

Pour ce faire, vous devez corriger le code du bouton du paragraphe précédent. Le premier bouton utilise l'option ci-dessus. Dans la seconde, deux valeurs changent :

1. Le lien change, le paramètre href se voit attribuer la valeur # contact_form_pop_2
2. Remplacez l'identifiant par la même valeur # contact_form_pop_2

(Dernière mise à jour : 08.07.2016)

Bonjour à tous! C'est encore moi, avec un post utile - pop-up pour WordPress- pour les débutants et pas seulement les utilisateurs de WordPress. Si tu es interessé par plugin contextuel Fenêtres WordPress , on l'appelle aussi un plugin de fenêtre modale, alors vous, amis, frappez exactement au bon endroit.

Vous pouvez utiliser le plugin que je vais vous présenter ci-dessous pour : Formulaire de contact 7 dans une fenêtre modale ; tout formulaire de contact (feedback) dans une fenêtre modale (pop-up) ; vidéo dans une fenêtre modale ; images dans une fenêtre contextuelle ; hébergement informations utiles avec des liens ; formulaire d'inscription par courrier aux nouveaux articles dans une fenêtre modale et ainsi de suite, et ainsi de suite, tout, et vous ne pouvez pas l'énumérer. Le plugin est très simple, sans paramétrage complexe et ne crée quasiment pas de charge supplémentaire sur/site.

Easy Modal Plugin - Fenêtre Popup / Modal pour WordPress


Plugin de fenêtre modale pour WordPress - Easy Modal

Vous pouvez installer ce plugin d'une manière standard, via le panneau d'administration - Plugins - Ajouter un nouveau et dans le champ Rechercher des plugins, entrez le nom Easy Modal, appuyez sur Entrée. Il devrait être le premier de la liste. Installez-le et activez-le comme d'habitude. Et puis vous pouvez procéder à 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 l'élément 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 un nouveau :


Ajouter une nouvelle fenêtre

Et ici, tout est simple :


Créer une fenêtre vidéo contextuelle

DANS réglages généraux(onglet Général) donnez le nom de la nouvelle fenêtre (elle ne sera pas affichée, c'est pour vous, si par exemple vous créez plusieurs fenêtres modales) ; type de charge Load Sitewide (pour l'ensemble du site) ; le titre de la fenêtre et enfin coller le code dont vous avez besoin dans l'éditeur (mode Texte). J'ai un code vidéo YouTube inséré dans mon exemple.


Configuration de la fenêtre modale

Dans les paramètres, vous pouvez choisir la taille de la fenêtre ; utiliser ou non un arrière-plan ; type d'animation pour modal / popup; l'emplacement de la fenêtre, et vous pouvez également fixer la fenêtre (cochez la case et spécifiez le retrait depuis le haut de l'écran).

Dans l'onglet Exemples, vous trouverez des exemples de code pour afficher une popup dans WordPress :

Code de sortie modal dans WordPress

Ici, vous pouvez sélectionner un simple lien texte, un bouton ou une icône. Notez que chaque fenêtre nouvellement créée se voit attribuer la classe eModal -. La première fenêtre créée aura la classe eModal - 1, la seconde eModal - 2, et ainsi de suite. Vous n'avez qu'à remplacer le numéro vous-même après le signe -. Ce code peut être inséré à ou n'importe où dans votre article. Naturellement, vous pouvez écrire n'importe quel texte dans le code. J'ai presque oublié qu'après avoir créé la 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 s'ouvre avec une vidéo :


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 ensuite ou immédiatement concevoir l'apparence de la fenêtre modale en cliquant sur l'élément Thème. Malheureusement dans version gratuite Il n'y a qu'un seul thème pour le plugin, mais vous pouvez le styliser comme vous le souhaitez, les paramètres sont suffisants. Lors de la mise en place apparence la fenêtre modale juste là, vous pouvez voir un aperçu du design sur la droite :


Thème d'édition - style modal / 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 d'un formulaire de contact 7 dans une fenêtre modale.

Créez un nouveau modal comme indiqué ci-dessus et dans éditeur de texte collez simplement le shortcode du formulaire de contact 7 (si ce plugin est installé, sinon):


Créer un formulaire de contact 7 dans une fenêtre contextuelle
Bouton écrire à l'auteur après le message

Si le lecteur souhaite vous contacter, il cliquera sur un bouton et le formulaire de contact s'ouvrira dans une fenêtre modale :

Formulaire de contact avec l'auteur dans une fenêtre modale

Quelque chose comme ca. De plus, toutes vos fenêtres pop-up créées seront affichées sur la page (élément Modals), où, soit dit en passant, les classes pour chaque fenêtre modale sont indiquées :


Créé par fenêtres modales sur WordPress