(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 fenêtre modale; tout formulaire de contact(rétroaction) 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 juste que vous pouvez ensuite ou immédiatement organiser la fenêtre modale apparence en cliquant sur 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 personnalisation de l'apparence de la fenêtre modale, vous pouvez immédiatement 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 un é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 :
Modaux créés dans WordPress Salut. Ils ont été bombardés de questions sur la façon de mettre en œuvre un formulaire qui apparaît dans une fenêtre modale après avoir cliqué sur un bouton, et après la soumission, un message de réussite ou d'échec s'affiche.
Je pense qu'il y en a déjà beaucoup sur Internet, mais comme les gens me le demandent, j'ai décidé de le faire. De plus, une telle fonctionnalité devrait être présente sur presque toutes les pages de destination pour implémenter un bouton de rappel. En effet, de plus en plus de résultats de tests AB apparaissent, indiquant que les formulaires ouverts fonctionnent moins bien que ceux qui sont cachés dans une fenêtre modale et s'ouvrent après avoir cliqué sur le bouton.
Certains soutiennent que cela est dû au fait que les gens "développent lentement l'immunité" et que la forme ouverte est une vente agressive. Apparemment, le moment est venu où l'utilisateur, lorsqu'il voit un formulaire ouvert, pense qu'il essaie de lui "vendre" quelque chose. Je ne suis pas tout à fait d'accord avec cette théorie, mais un grain de vérité est présent. Peut-être que dans certains types d'entreprises, c'est vrai. Pour l'instant, entrons dans la mise en œuvre du formulaire.
Noter! Je ne vais pas décrire chaque action en détail, mais vous proposer une version toute faite dans la source. Si vous avez des questions, écrivez dans les commentaires. On va comprendre :)
Aujourd'hui, nous ne commencerons pas par jQuery, mais par la disposition du bouton et du formulaire. Tous les scripts sont inclus à la fin de la page.
Le bouton en cliquant sur lequel la fenêtre modale s'ouvrira :
Soumettez votre candidature
Vous pouvez définir n'importe quelle classe, mais dans le href, écrivez #modal - ce sera l'identifiant du conteneur avec l'ombrage et le formulaire de contact.
Je vais maintenant donner le code du formulaire et le bloc sur lequel se situera le formulaire :
Après avoir ajouté des styles, cela ressemble à ceci :
Pour créer une fenêtre modale, la bibliothèque Remodal a été utilisée. Il s'agit d'un ensemble de fichiers css et js, juste pour créer des fenêtres modales animées. Vous pouvez le télécharger à partir du lien ou déjà avec mes modifications à la fin de l'article.
Incluez des styles entre les balises head :
Et avant la balise body de fermeture - ajoutez des scripts :
Script.js est un script de traitement d'un formulaire. Le même Ajax qui nous permet d'effectuer toute la procédure sans recharger la page :
$ (document) .ready (function () ($ ("form"). submit (function () (// Obtenir l'ID du formulaire var formID = $ (this) .attr ("id"); // Ajouter un hachage au nom ID var formNm = $ ("#" + formID); $ .ajax ((type: "POST", url: "mail.php", data: formNm.serialize (), success: function (data) ( // Sortie du texte du résultat d'envoi $ (formNm) .html (data);), error: function (jqXHR, text, error) (// Sortie du texte d'erreur d'envoi $ (formNm) .html (error);) )); return false;) );));
je ne citerai pas la source css et js des fichiers responsables de la fenêtre modale et du formulaire, car ils sont assez volumineux. Si quoi que ce soit, regardez la source. Mais le gestionnaire php est largement standard (si je puis dire) :
Nom de l'expéditeur:$ nom Téléphone:$ phone "; $ send = mail ($ to, $ subject, $ message, $ headers); if ($ send ==" true ") (echo"
S'il te plaît, n'oubliez pas de remplacer les adresses e-mail par les vôtres.
Voici un formulaire ajax. Désolé de ne pas avoir essayé d'expliquer en détail comment chaque élément a été fait. Je voulais juste donner un résultat fini, mais ça ne sert à rien de décrire toutes les animations, les apparences. Téléchargez la source et intégrez-la sur votre site. Et c'est tout pour aujourd'hui. Bonne chance à tous!
Les gars, je vous invite à tester le formulaire sur un serveur réel ou virtuel (hébergement). Veuillez vous assurer que votre serveur prend en charge php, que vous disposez d'un forfait payant et non d'une période d'essai. Sinon, dans 90 % des cas, le formulaire ne fonctionnera pas.
N'attendez pas une lettre dans votre boites aux lettres si vous venez d'ouvrir le fichier d'index dans un navigateur et que vous avez cliqué sur le bouton Soumettre. PHP est un langage côté serveur !
Si vous êtes trop paresseux pour le comprendre et créer le formulaire vous-même, je vous recommande de faire attention.
Version mise à jour l'article est
Il existe de nombreux plugins WordPress pour créer des formulaires de commentaires sur votre blog ou votre site Web. le plus notable d'entre eux, il vous permet d'intégrer un formulaire de contact directement dans la publication et pages WordPress(alors que de nombreux plugins forcent l'application d'un modèle personnalisé à la page, limitant ainsi l'édition).
L'intégration d'un formulaire sur une page est généralement suffisante, mais que se passe-t-il si vous souhaitez que le formulaire apparaisse dans une fenêtre contextuelle lorsque l'utilisateur clique sur le lien Contactez-nous ? Pour réaliser ce désir, vous devez utiliser deux plugin WordPress simultanément : Easy FancyBox
1. Tout d'abord, installez les plugins et Easy FancyBox.
2. Par souci de simplicité, nous utiliserons le formulaire de contact 7, déjà créé par le plugin lui-même lors de l'installation pour l'exemple. Sur la page des paramètres du formulaire de contact, nous prenons le code du formulaire, que vous devez copier et coller dans Éditeur WordPress pour créer un formulaire.
3. Créer nouvelle page dans WordPress. Pour ajouter un formulaire de contact, vous devez coller le code entre crochets de la page des paramètres du formulaire de contact 7 dans votre page. Assurez-vous de coller le code correctement, tout comme le plugin l'affiche.
4. Votre WordPress dispose désormais d'un formulaire de contact. Nous avons décidé de le faire apparaître dans une fenêtre modale après que l'utilisateur ait cliqué sur le lien. Le plugin Easy FancyBox entre en jeu. Avec son aide, vous pouvez faire apparaître n'importe quel élément de la page dans une fenêtre contextuelle. Ouvrez la page d'édition, cliquez sur l'onglet TEXTE et ajoutez le code HTML suivant :
Nous contacter
5. Ça y est, nous avons maintenant un lien qui "lance" le formulaire de contact dans une fenêtre pop-up. Toutes nos félicitations! Vous devrez peut-être modifier le CSS des formulaires de courrier électronique pour afficher la largeur et la hauteur correctes, ainsi que des messages sur erreurs possibles lors du remplissage. Cela devrait suffire pour un début.
Récemment, pour un site, on m'a demandé de faire un formulaire de feedback WordPress dans une fenêtre modale. C'est-à-dire qu'en cliquant sur le lien "écrivez-nous", au lieu d'aller à la page correspondante, l'utilisateur doit ouvrir une nouvelle fenêtre contextuelle, où se trouvera la fonction d'envoi d'un message. Il s'agit d'une solution plus interactive, même si tout le monde ne l'aime pas. Personnellement, je préfère la mise en œuvre classique avec une page de contact, mais les formulaires sur les sites sont différents - il sera donc utile de réfléchir à la solution à ce problème. Dans mon travail j'ai utilisé 2 plugins : connus de beaucoup de Contact Form 7 et le module Easy Modal pour faire une fenêtre modale dans WordPress.
Mise à jour 18/05/2017 : À en juger par les dernières critiques du référentiel, dans certains cas, il peut y avoir des problèmes avec son travail. Si cela vous affecte également, essayez une nouvelle solution des développeurs appelée Popup Maker. Une autre alternative peut être envisagée.
Je ne m'étendrai pas en détail sur l'installation et la configuration de Contact Form 7, toutes les informations le concernant. Le blog avait également un article sur ce qui pourrait être utile.
Passons directement à l'Easy Modal... Le trouver. Les développeurs prétendent que c'est La meilleure décision créer des fenêtres modales sur le site avec différentes options intéressantes pour présenter le contenu.
Plus de 10 000 téléchargements, estimation 4.6. Les versions valides sont 3.4 - 4.0.8, bien que je l'aie exécuté avec succès sur WP 4.3.1. Malgré le fait que le plugin a maintenant été transformé en une nouvelle solution Popup Maker, vous pouvez toujours trouver l'habituel Easy Modal version 2.0.17 sur wordpress.org et lors de la recherche de plugins dans la zone d'administration. En utilisant son exemple, je vais vous parler de la création d'une fenêtre de rétroaction modale dans WordPress.
Après l'installation, une section du même nom apparaîtra, où se trouvent plusieurs éléments. Nous aurons besoin du tout premier - Modaux... Cliquez sur le bouton Ajouter un nouveau là-bas.
Cela créera un nouveau modal pour votre site WordPress. Il y aura 4 onglets dans les paramètres de l'élément :
- Général - paramètres généraux.
- Options d'affichage - options d'affichage.
- Options de fermeture - paramètres de fermeture de la fenêtre (à l'aide d'un clic ou du bouton Echap).
- Exemples - exemples de code à utiliser.
Les paramètres généraux contiennent le titre de la fenêtre (non affiché sur le site), son titre, son contenu et le type de téléchargement. Dans le bloc de contenu, après être passé en mode HTML, ajoutez le shortcode de votre formulaire de feedback dans la fenêtre modale.
Type de charge a 2 options :
- Chargez à l'échelle du site (pour l'ensemble du site).
- Par page / article (pour des articles et des pages spécifiques).
Une option très intéressante. Si vous avez besoin d'une fenêtre pop-up qui s'affichera sur toutes les pages du site (le lien se trouve dans la barre latérale, par exemple), alors désactivez la première option. Dans le second cas, le bloc de paramètres correspondant apparaîtra sur les pages/articles du site lors de l'édition :
Vous pouvez activer et sélectionner votre fenêtre pop-up pour une page particulière. Si vous ne cochez pas la case, alors l'élément ne sera pas chargé sur le site.
Le deuxième onglet des paramètres du module - Option d'affichage.
Ici vous indiquez :
- taille de la fenêtre - automatique, moyenne, adaptative, petite, grande, etc.;
- arrière-plan - vous pouvez utiliser l'arrière-plan du formulaire ou l'afficher sans lui ;
- animation d'affichage d'une fenêtre pop-up ;
- position (emplacement) - en haut au centre, en bas à droite, etc. ; fixe ou non ;
- retrait en haut de l'écran.
Des exemples d'affichage de la sortie d'une fenêtre modale dans WordPress à l'aide du plugin Easy Modal peuvent être trouvés dans le dernier onglet.
Vous devez insérer ce code via le widget dans la barre latérale ou dans éditeur de texte... Ce n'est pas différent de tout autre code HTML, la seule chose est qu'il spécifie la classe d'une fenêtre modale spécifique (eModal-1). Pour le deuxième élément que vous avez créé, la classe serait eModal-2, et ainsi de suite. Afin de ne pas se tromper lors du collage du code, le plus simple est de le copier depuis cette page.
Edition de l'habillage d'une fenêtre modale
Dans le plugin Easy Modal, en plus des paramètres pour un élément spécifique, vous pouvez définir des thèmes pour les fenêtres pop-up (Thème). Il n'y a qu'un seul modèle dans la version gratuite de base du module, mais c'est plus que suffisant.
Cet outil comporte 6 onglets :
- Général - spécifiez le nom du sujet ;
- Superposition - arrière-plan (vous pouvez sélectionner ici la couleur et la transparence de l'arrière-plan de la forme);
- Récipient - différents réglages la fenêtre modale elle-même (padding, frame, shadow);
- Titre - paramètres du titre de la fenêtre pop-up (police, ombre);
- Contenu - police et couleur des textes dans le bloc ;
- Fermer - l'élément pour fermer le formulaire (texte et design).
Comme vous pouvez le voir, l'apparence peut être personnalisée à votre guise pour répondre à vos besoins. J'ai ce simple Formulaire WordPress dans une fenêtre modale :
Après avoir défini tous les paramètres, n'oubliez pas de les enregistrer (cliquez sur le bouton Enregistrer).
Vidéo de l'ajout du formulaire de contact 7 dans la fenêtre contextuelle Easy Modal
Au fait, j'ai trouvé une vidéo sur l'utilisation du plugin Easy Modal, qui montre le processus de création d'une fenêtre modale de retour dans WordPress. Là, l'interface du module est légèrement obsolète (certains paramètres semblent différents), mais l'essence générale est capturée. Il sera peut-être plus facile pour quelqu'un de comprendre ce problème à l'aide d'une vidéo.
Total sur les fenêtres modales pour wordpress
Comme mentionné ci-dessus, maintenant le plugin Easy Modal (à en juger par Page Officielle) converti en Popup Maker. J'ai réussi à trouver un module du même nom dans le référentiel, mais je ne l'ai pas testé. Je vous en parle pour que vous sachiez quoi rechercher, si soudainement Easy Modal dans WordPress des versions suivantes cesse de fonctionner.
Les deux solutions sont gratuites, bien qu'elles aient des modules complémentaires payants. Ils vous permettent de personnaliser le ciblage, d'ajouter plus de thèmes, de contenir des analyses et d'autres fonctionnalités. Si vous avez besoin d'un mécanisme de fenêtre modale plus avancé, vous pouvez regarder de plus près ces extensions.
En ce qui concerne la tâche d'ouvrir le formulaire de commentaires du formulaire de contact 7 dans une fenêtre contextuelle, il existe suffisamment de capacités de base Easy Modal. en outre cette décision peut également être utilisé pour afficher d'autres fenêtres modales dans WordPress - conseils utiles, Informations Complémentaires etc. Compte tenu de la présence d'un éditeur pour insérer du code HTML, vous pouvez afficher des vidéos, des formulaires, etc. dans la fenêtre pop-up. Dans l'ensemble, un plugin utile. Si vous avez des questions à ce sujet, écrivez dans les commentaires.
Bonjour mon cher lecteur ! Dans cet article, je vais vous montrer comment j'ai implémenté un formulaire de rappel contextuel sur un site WordPress.
Le fait est que le formulaire de rappel est très souvent utilisé par la plupart des webmasters précisément pour la commodité des utilisateurs, afin qu'ils prennent l'action ciblée le plus rapidement possible - c'est-à-dire laisser une demande sur le site.
Vous pouvez souvent les voir sur de nombreux sites commerciaux qui fournissent des services ou proposent d'acheter n'importe quel produit. En fait, les boutiques en ligne ne sont pas un cycle complet, c'est-à-dire lorsqu'il n'y a pas de panier, mais il y a quelque chose comme une précommande via ce formulaire. Voici à quoi ils pourraient ressembler :
Soit sous forme de bouton également en entête du site :
Quelqu'un peut les utiliser dans le pied de page du site, cela est également autorisé. Cela ressemble à ceci :
Alors, amis. Tous ces exemples étaient des exemples, maintenant nous implémentons le même formulaire de rappel pour un site WordPress dans la pratique. Je le ferai sur le site, qui est engagé dans l'amélioration du territoire de Kaliningrad.
Tout d'abord, nous devons entrer et aller dans la section des plugins, où nous ajouterons nouveau plugin appelé Contact Form 7. C'est la solution la plus populaire pour créer des blogs simples et complexes.
Pas huhra muhra - 24 millions de téléchargements en disent déjà long. Cliquez sur le bouton d'installation et il apparaîtra sur le côté gauche du panneau d'administration.
Le russe est déjà sélectionné par défaut, alors ne vous inquiétez pas. Nous continuons notre processus.
Maintenant, nous devons ajouter les champs qui participeront. Ils sont déjà installés par défaut, en principe vous pouvez les laisser, ne les supprimez pas. La seule chose que j'ajouterais est un champ obligatoire avec un numéro de téléphone.
Pour ce faire, nous devons cliquer sur le bouton "générer une balise" sur le côté droit de l'écran et sélectionner l'élément approprié. De cette façon:
Cliquez sur l'élément "Numéro de téléphone", cochez le champ requis dans la case à cocher, puis copiez la balise résultante dans le formulaire de gauche avec d'autres noms et dans le modèle de la lettre.
Sur le côté gauche, vous aurez une entrée comme celle-ci :
Placez le champ du numéro de téléphone ci-dessous.
Sur le côté gauche du modèle pour les lettres entrantes, nous aurons l'entrée suivante :
N'oubliez pas de cocher également la case "Utiliser le format d'e-mail HTML"
En bas, vous aurez besoin d'une ligne comme celle-ci "Veuillez remplir le champ requis" pour traduire en russe, quelque chose comme ceci : "Veuillez remplir le champ requis"
Dans le champ destinataire, ajoutez e-mail où les demandes du site seront envoyées.
Excellent! Le formulaire de rappel pour le site est presque prêt. Maintenant, nous devons le faire apparaître lorsqu'il est cliqué.
Créer un formulaire contextuel
Notre tâche est d'avoir un formulaire de rappel contextuel lorsque nous cliquons sur le bouton du lien. Pour le créer, nous avons besoin d'un plugin spécial basé sur le langage Jquery, il s'appelle Easy FancyBox. Il est également disponible pour l'installation directement depuis la zone d'administration. Ajoutons-le maintenant.
Cliquez simplement sur "Installer" et il commencera à fonctionner pour vous. Il a des paramètres pour les fichiers multimédias. Nous pouvons les passer brièvement en revue.
Tailles des images - définissez vos propres valeurs pour les vignettes, les images moyennes et grandes.
Effet FancyBox pour les catégories de médias suivantes :
- Des photos
- Documents pdf
- Contenu en ligne
- Graphiques SWF
- Youtube
- Viméo
- Dailymotion
- Iframes
Indiquez ce que vous souhaitez utiliser à l'avenir. Je vais le laisser pour les photos seulement.
Vous pouvez également définir l'opacité et la couleur. Je n'ai rien demandé, j'ai tout laissé tel quel par défaut.
La fenêtre
- Afficher l'icône de fermeture de fenêtre
- Couleur de l'en-tête et couleur de la bordure
- Dimensions (par défaut 560x340x10)
- Comportement (délai en secondes à l'apparition du formulaire de rappel sur le site et vitesse de fermeture).
Compatible avec d'autres navigateurs et appareils
- Inclure des règles pour les versions du navigateur IE 6 et 7 (les styles sont destinés)
- Activer la règle de style pour le navigateur IE 8
Je n'y ai rien spécifié, bien que vous puissiez expérimenter la compatibilité entre navigateurs du formulaire.
Images
- Détection automatique des extensions d'image - jpeg, png, jpg. Vous pouvez ajouter vos extensions
- Appliquer à tous les liens d'images
- De plus, je n'ai tout simplement pas modifié les paramètres, j'ai tout laissé tel quel. Faire de même.
Génial! Maintenant, nous allons économiser toute cette richesse d'options.
Maintenant, nous écoutons très attentivement, regardons et répétons après moi. Il est préférable de placer le formulaire de rappel à l'endroit le plus visible, c'est-à-dire tout en haut de l'en-tête du site, sous les téléphones et les contacts. Nous allons le faire. Aller au modèle entête. php et collez ce code :
Rappel
