Bonjour cher lecteur, dans cet article je vais vous montrer comment créer un formulaire retour d'information dans la fenêtre contextuelle de 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 rapide 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
- É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.
- Aspect efficace. L'animation de l'apparition d'une nouvelle fenêtre semble intéressante et inhabituelle
- 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 personnalisée pour 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 de fenêtre pop-up. 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 indiqué dans l'exemple, vous devrez spécifier celui qui a été formé à la suite de la création d'un nouveau formulaire.
De plus, le formulaire peut être modifié : ajoutez ou supprimez des champs de saisie, saisissez le texte de début et/ou de fin avant et après le formulaire, convertissez le texte en titre ou affichez-le dans un bloc séparé, utilisez différents 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 :
| 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 (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; / * nuance de la légende * / -moz-transition: all 0.6s easy; -webkit-transition: all 0.6s facilite; transition: all 0.6s facilite; ) / ** 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é ;) |
/ *** Affichage d'un lien sous forme de bouton **** / .contact-us 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; / * nuance de la légende * / -moz-transition: all 0.6s easy; -webkit-transition: all 0.6s facilite; transition: all 0.6s facilite; ) / ** 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 | 
|
Le bouton montré dans la capture d'écran ci-dessous s'affiche sur mon site :
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
| 1 2 3 | Écrire une lettre |
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 :
| 1 2 |
- 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.
- Chargez à l'échelle du site (pour l'ensemble du site).
- Par page / article (pour des articles et des pages spécifiques).
- 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.
- 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);
- Conteneur - différents paramètres pour le modal lui-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).
- "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.
- Mettez un captcha obligatoire (cela peut être fait avec un plugin supplémentaire - Really Simple CAPTCHA).
- Utilisez le plugin antispam wordpress - Akismet.
- 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
- Le lien change, le paramètre href se voit attribuer la valeur # contact_form_pop_2
- Remplacez l'identifiant par la même valeur # contact_form_pop_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 Web, l'essentiel est d'avoir du 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.
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 je vous propose une version toute faite dans la source. Si vous avez des questions, écrivez dans les commentaires. On trouvera :)
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. Ceci est un ensemble de fichiers css et js, juste pour créer des animations fenêtres modales... 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 pour traiter 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 tel forme ajax s'est avéré. 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 la lettre dans votre boîte aux lettres si vous venez d'ouvrir le fichier d'index dans votre navigateur et de cliquer sur le bouton "Envoyer". 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 dans 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. Il peut être utilisé pour forcer n'importe quel élément de la page à apparaître 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 « nous écrire », au lieu d'aller à la page correspondante, l'utilisateur doit ouvrir une nouvelle fenêtre contextuelle où se trouvera la fonction d'envoi de 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 :
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 :
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 :
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). Dans le socle version gratuite module n'a qu'un seul modèle, mais c'est plus que suffisant.
Cet outil comporte 6 onglets :
Comme tu peux le voir apparence peut être personnalisé comme vous le souhaitez 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, illustrant le processus de création d'une fenêtre modale de rétroaction 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.
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 de 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 normal.
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 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 que ce plugin prend en charge.
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 :
Ainsi, vous pouvez ajouter autant de champs, de cases à cocher, de listes déroulantes, d'éléments pour joindre des fichiers, etc. au formulaire.
Majuscule"
Maintenant, notre tâche consiste à configurer la lettre que nous allons recevoir. 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 élément, 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. Typiquement, 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 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 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 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 façons de se débarrasser des spammeurs :
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 indépendamment 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 :
Ç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 autorise 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 shortcodes 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 l'admin 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 devrait ouvrir un autre formulaire où va 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 :
