Bonjour, chers lecteurs du site blog ! Dans cet article, vous apprendrez comment créer un formulaire contextuel sur un site Web à l'aide de deux solutions prêtes à l'emploi.
Sur presque tous les sites Web, il existe des formulaires de « capture », tels que des formulaires de contact ou retour et des formulaires pour commander des biens ou des services. Les formulaires sont particulièrement souvent utilisés dans les sites Web d'une page (pages de destination) et sont nécessaires à l'interaction et à la communication avec le visiteur. En règle générale, ces formulaires fonctionnent plutôt bien en termes de conversion, qui ont fait leurs preuves au fil des années. Cependant, en plus des formulaires que l'on retrouve dans formulaire ouvert, dans certains cas, des formulaires contextuels sont utilisés. Ils sont très pratiques, ne prennent pas beaucoup de place, car ils apparaissent lorsque vous cliquez sur un bouton et ne redirigent pas non plus les visiteurs vers d'autres pages. Il s'avère que le site, même sur une seule page, fait tout fonctions nécessaires sur la communication avec le visiteur.
Il s'agit de créer des formulaires pop-up dont nous parlerons. Je vais vous expliquer comment faire cela sur les sites où le formulaire est en html ou réalisé à l'aide du plugin Contact Form 7 sur WordPress.
Créez un formulaire contextuel en HTML.
Regardons l'exemple du formulaire rappeler. Vous trouverez ci-dessous un exemple de formulaire qui s'ouvrira lorsque vous cliquerez sur le bouton « Commander un appel » ou « Souhaitez-vous que je vous rappelle ?
Rappeler
Pour ouvrir un formulaire, vous devez d'abord le masquer, nous faisons cela en spécifiant dans le div qui inclut le formulaire, style="display: none;" , donc le formulaire est masqué. Il est également nécessaire de spécifier un identifiant significatif pour ce div, puisque dans notre cas nous utilisons un formulaire de rappel, nous l'appelons callback .
Créez un formulaire contextuel dans WordPress (Formulaire de contact 7).
Précisons d'emblée que si vous avez créé des formulaires sur le site sans l'aide du plugin Contact Form 7, alors l'option décrite ci-dessus vous conviendra.
Nous avons donc besoin de 2 plugins : Contact Form 7 et Easy FancyBox, le premier pour créer des formulaires, le second pour ouvrir le formulaire, installez-les. Si le formulaire dont vous avez besoin n'a pas encore été créé, créez-le.
Nous avons seulement besoin de son shortcode, qui ressemble à ceci :
Maintenant, si vous souhaitez rendre le formulaire de bout en bout, ajoutez ce code au pied de page :
Naturellement, installez votre propre shortcode, vous le trouverez en cliquant sur Contact Form 7 dans le menu de gauche, une page avec une liste de formulaires déjà créés s'ouvrira.
Et si vous avez besoin d'un formulaire pour une page spécifique, collez le code via le panneau d'administration de la page (vous pouvez placer le code dans un widget), mais pas dans l'éditeur visuel.
[Votre code court]
Installez également votre shortcode.
Nous devons maintenant configurer le plugin Easy FancyBox. Pour ce faire, accédez à ses paramètres. Dans le menu de gauche, ouvrez « Paramètres » et cliquez sur « Fichiers multimédias » (à ne pas confondre avec l'onglet de menu juste au-dessus, également appelé « Fichiers multimédias »). Si vous avez déjà installé un plugin pour les photos pop-up sur votre site, décochez Images et cochez Contenu en ligne. Enregistrez ensuite les modifications. 
Il ne reste plus qu'à créer un bouton qui, une fois cliqué, ouvrira le formulaire. Il peut être placé n'importe où, dans l'en-tête, le pied de page, il peut être attaché à l'un des côtés du navigateur, vous pouvez également placer le bouton dans n'importe quel article ou page. Collez ce code à l'endroit où vous souhaitez voir le bouton :
Écrivez-nous
Vous pouvez décorer le bouton et la forme à votre guise, en lui donnant n'importe quel style.
Et c'est tout. Si vous avez aimé l'article, parlez-en à vos amis et collègues, donnez-lui un coup de pouce et abonnez-vous au groupe (dans la barre latérale de gauche), et pour cela j'écrirai pour vous des articles encore plus intéressants.
Salutations, amis. Le didacticiel d'aujourd'hui aidera votre site WordPress à disposer d'un formulaire de commentaires agréable et fonctionnel. Nous le ferons en utilisant le plugin Contact Form 7. À un moment donné, j'ai passé beaucoup de temps à chercher un formulaire de contact normal et je n'ai jamais trouvé d'alternative valable à ce plugin.
Fonctionnalités du pluginPermettez-moi de vous rappeler encore une fois que nous travaillerons avec un plugin, donc si vous avez besoin de retours sans plugin, vous feriez mieux de visiter l'article sur, la configuration est un peu plus compliquée, mais l'option est plus universelle (convient à chaque site) et met moins de charge sur les serveurs.
Le principal avantage du formulaire de contact sur Contact Form 7 est sa facilité de personnalisation, ses fonctionnalités presque illimitées et son ajustement automatique de la conception à n'importe quel modèle WordPress. Avec son aide, vous pouvez créer non seulement un formulaire pour envoyer des messages depuis le site. Le plugin peut être utilisé pour créer un bouton de commande, un rappel ou un questionnaire complexe avec des cases à cocher et des listes déroulantes. Il est également possible de joindre des fichiers à transférer.
En un mot, le plugin est méga-fonctionnel.
Si vous êtes toujours préoccupé par la question « faire ou ne pas faire un formulaire de contact ? (vous pouvez vous en sortir en publiant simplement vos coordonnées sur les bonnes pages), alors je dirai sans équivoque - cela vaut la peine.
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 d'un format standard - elles seront plus faciles à naviguer. Par exemple, vous pouvez définir un en-tête standard pour un message « Commande » et tous les e-mails de la page des commandes arriveront avec cet en-tête.
Troisièmement, l'utilisation du formulaire de contact vous permet de masquer votre adresse E-mail et ainsi se débarrasser des éventuels spams qui apparaissent inévitablement lorsqu'une boîte e-mail devient accessible au public.
Quatrièmement, il est tout simplement élégant et moderne.
Installation et configuration du plugin Contact form 7Le plugin est dans base commune WordPress, il n'est donc pas nécessaire de rechercher ses fichiers quelque part, de les télécharger vous-même puis de les télécharger sur votre hébergement. Tout est simplifié - via l'administrateur WordPress, 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 Instructions détaillées comment installer le plugin.
La configuration du plugin se compose de deux étapes.
La première consiste à mettre en place un formulaire spécifique. Il peut y avoir de nombreux formulaires différents, chacun d'eux pouvant contenir son propre ensemble de champs. En un mot, pour chaque tâche et chaque page du site, vous pouvez créer séparément un formulaire de commentaires, Wordpress le permet - leur liste sera stockée dans la base de données du plugin.
La deuxième étape consiste à insérer le formulaire sur les pages du site. Chaque formulaire que nous créons dans le plugin aura son propre shortcode unique. Pour l'insérer sur la page, il vous suffit de l'insérer.
Alors allons-y.
Pour commencer, dans le menu de gauche du panneau d'administration, nous trouvons l'onglet Formulaire de contact 7. Un menu avec deux éléments apparaîtra en dessous - "Formulaires" et "Ajouter un nouveau".
Nous n’avons pas encore de formulaires prêts à l’emploi, passons donc à la section « Ajouter un nouveau ». Une page s'ouvrira là-bas vous demandant de sélectionner une langue, et la langue par défaut y sera également répertoriée. Cliquez simplement sur le bouton bleu « Ajouter un nouveau ».
Les paramètres du formulaire sont divisés en blocs distincts. Je les considérerai dans l'ordre.
Bloquer « Nom du formulaire »Le premier bloc est responsable du nom de votre formulaire - placez le curseur sur l'inscription « Sans titre » et entrez le nom dont vous avez besoin. Ce nom ne vous sera affiché que dans la liste des formulaires de contact du plugin, indiquez-le donc clairement pour ne pas vous laisser confondre à l'avenir par toute la diversité.
Initialement, ce bloc contient une configuration de champ standard. Il contient le nom de l'expéditeur de la lettre, son adresse e-mail, objet de l'e-mail, contenu de l'e-mail et bouton d'envoi.
Les champs obligatoires sont marqués d'astérisques. Si ce champ est laissé vide, le message ne sera pas envoyé.
L'emplacement des champs peut être personnalisé à l'aide d'un balisage HTML standard.
Quant à la configuration des champs eux-mêmes, vous pouvez supprimer ceux qui sont inutiles et ajouter ceux dont vous avez besoin. Si vous ne souhaitez pas que le sujet de la lettre soit saisi manuellement, supprimez simplement le bloc correspondant.
L'ajout de champs est également très simple. AVEC côté droit Il y a un bouton pour générer une balise ; en cliquant dessus, vous verrez une liste de tous les champs possibles pris en charge par ce plugin.
Sélectionnez l'élément souhaité et configurez ses paramètres. Le plugin est en russe, donc tous les réglages sont intuitifs.
La première case à cocher indique si le champ est obligatoire ou facultatif (elle ajoute un astérisque).
Après avoir configuré le champ, vous aurez 2 shortcodes :
- « Copiez ce code et collez-le dans le modèle de formulaire à gauche » – ce code est inséré dans le code du formulaire de la même manière que tous les autres ;
- "Et collez le code suivant dans le modèle de lettre ci-dessous" - nous aurons besoin de ce code pour formater la lettre dans le bloc suivant.
De cette façon, vous pouvez ajouter un nombre illimité de champs, de cases à cocher, de listes déroulantes, d'éléments pour joindre des fichiers, etc. au formulaire.
Majuscule"Notre tâche consiste maintenant à personnaliser la lettre que nous recevrons. La lettre n'affecte en rien la fonctionnalité du formulaire de commentaires, elle sert uniquement à transmettre les informations saisies dans le formulaire.
Notre tâche est d'inclure toutes les informations dans la lettre.
La première étape consiste à indiquer l'adresse e-mail à laquelle le message sera envoyé (cela peut être n'importe quoi).
Le deuxième point indique e-mail, à partir de laquelle la lettre vous sera envoyée. Je ne changerais rien ici, la valeur par défaut est la boîte de réception de votre blog et une balise avec le nom de la personne qui envoie le message y est ajoutée.
Ensuite, nous indiquons le sujet de la lettre. Par défaut, le sujet est tiré du champ renseigné dans le formulaire. Mais vous pouvez supprimer cet élément du formulaire et saisir un sujet spécifique dans le champ, qui est défini automatiquement dans chaque lettre. J'ai fait cela pour les formulaires de commentaires des pages sur les services et la publicité. Les messages qui en proviennent ont toujours le même sujet « Commander des services » ou « Commander de la publicité » - simple et clair.
Le champ d'en-tête supplémentaire contient la balise « Reply-To : » afin que lorsque vous répondez à une lettre reçue de votre blog, vous envoyiez le message au blog et à l'adresse indiquée par l'expéditeur de la lettre dans le champ du formulaire. Il n'est pas nécessaire de modifier ce champ.
Le champ « Modèle de lettre » est responsable du contenu interne du message que vous avez reçu. Par défaut, il contient des informations sur l'expéditeur, l'objet et le texte du message saisi dans le champ.
A la fin, le site à partir duquel la lettre a été envoyée est indiqué.
Si vous avez ajouté des champs supplémentaires au formulaire qui n'étaient pas installés par défaut, n'oubliez pas d'ajouter la balise correspondante dans le modèle de lettre. Il vous a été remis dans le bloc « Modèle de formulaire », où vous avez généré la balise correspondante (le champ « Et collez le code suivant dans le modèle d'e-mail ci-dessous »).
Je l'aime informations textuelles Ce bloc (sauf pour les balises) peut être modifié à votre guise. Vous pouvez également ajouter des descriptions et échanger des balises, en les organisant dans l'ordre qui vous convient.
Bloquer « Lettre 2 »Si vous souhaitez que quelqu'un d'autre reçoive le message qui vous a été envoyé, vous pouvez cocher cette case.
Ce bloc est configuré de la même manière que le précédent. Par défaut, tous les champs qu'il contient sont remplis pour que la lettre soit adressée à la personne qui a rempli le formulaire (apparemment pour qu'elle ne l'oublie pas).
Vous pouvez configurer une copie à envoyer, par exemple, à votre responsable ou à votre comptable.
Bloquer « Notifications lors de la soumission d'un formulaire »Dans ce bloc, vous pouvez configurer les messages que l'utilisateur voit après avoir cliqué sur le bouton Envoyer un message. Si vous souhaitez changer quelque chose, s'il vous plaît, j'ai tout laissé tel quel.
Activation du formulaireAprès avoir rempli tous les champs, revenez au début dans le bloc « Nom du formulaire » et cliquez sur le bouton « Enregistrer » situé à droite.
Le plugin placera le formulaire que vous avez créé dans la liste des formulaires actifs et lui attribuera un code spécial quelque chose comme ceci :
[ contact - formulaire - 7 id = "5464" title = "Vérification" ] !} |
En collant ce code n'importe où sur votre site vous obtiendrez formulaire prêt à l'emploi pour communiquer avec vos clients potentiels.
Anti-spam – Akismet et CaptchaLes spammeurs causent beaucoup de problèmes aux propriétaires de sites Web, et chaque nouveau formulaire qui vous permet d'écrire quelque chose ne fait qu'augmenter le nombre de robots spammeurs.
Si vous laissez le plugin de formulaire de contact dans sa version de base, vous serez bombardé après un certain temps de nombreux messages vides et dénués de sens.
Il existe deux manières de se débarrasser des spammeurs :
La première option n'est pas pratique car elle oblige les visiteurs à saisir manuellement 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 mail, liens) et, sur la base de la base de données accumulée, tire des conclusions sur le spam ou le non-spam du message.
De plus, akismet est installé sur la plupart des sites WordPress pour se protéger du spam dans les commentaires des articles. Cela signifie que lors de son utilisation, vous n'aurez pas besoin d'installer de plugins supplémentaires ni de créer charge supplémentaire au site Web.
Protection anti-spam avec Akismet1. Installez le plugin Akismet sur votre site et activez-le - .
2. Ajoutez des données supplémentaires aux balises du formulaire de contact :
- dans le champ avec le nom de l'auteur, ajoutez akismet:author
- sur le terrain avec e-mail de l'expéditeur emails akismet:author_email
- dans le champ de l'adresse du site akismet:author_url
Ça devrait ressembler à ça:
Après avoir sauvegardé, formulaire de contact devrait bloquer tous les messages envoyés par les spammeurs. Vous pouvez vérifier le fonctionnement du filtre en utilisant le nom de test spécial « viagra-test-123 ? – lorsque vous le saisissez, un message d’erreur devrait apparaître.
Pour rendre la vérification moins stricte, vous pouvez cocher uniquement certains champs, par exemple le nom et l'adresse e-mail, et laisser l'adresse du site Web décochée. Dans ce cas, la probabilité que des messages spam passent augmente, mais vous aurez moins de chances de perdre. messages nécessaires.
Protection anti-spam avec CAPTCHA vraiment simpleSi vous trouvez qu'Akismet ne vous convient pas (il laisse passer beaucoup de spam ou bloque les messages nécessaires), alors vous pouvez activer un captcha. Pour ce faire, installez le plugin Really Simple CAPTCHA.
Ouvrez le formulaire de contact souhaité pour le modifier
Sélectionnez Captcha dans la liste des balises. Dans les paramètres des balises, vous pouvez sélectionner la taille de l'image avec des symboles, sinon vous n'avez rien à changer. En bas de la fenêtre des paramètres, 2 balises apparaîtront, l'une se charge d'afficher l'image, la seconde affiche un champ de saisie des données de cette image.
Pour que le captcha commence à fonctionner, vous devez copier et coller ces deux balises dans la fenêtre de gauche du modèle de formulaire, puis enregistrer les modifications.
Placer un formulaire de commentaires dans une fenêtre pop-upLe formulaire de contact ne doit pas toujours être situé dans une section spécifique du site ; parfois, le client doit pouvoir y accéder depuis chaque page de la ressource.
Dans de tels cas, il n’est pas toujours pratique de publier un formulaire complet. Il est beaucoup plus facile de placer un bouton dans un endroit bien en vue qui attire l’attention. Cliquer sur ce bouton devrait déjà conduire à l’ouverture du formulaire.
Ainsi, une personne pourra envoyer des messages depuis le site sans quitter la page dont elle a besoin.
Cela se fait à l'aide d'un autre plugin – Easy FancyBox.
1. Installez le plug-in
Tout d'abord, nous installons le plugin lui-même ; il se trouve dans la base de données générale des plugins, il vous suffit donc de saisir son nom dans le panneau d'administration de votre blog dans la recherche de plugins. Après avoir installé le plugin, un onglet « fichiers multimédias » apparaîtra dans la section « paramètres ».
Dans cet onglet, vous devez trouver une liste des types de contenu qui doivent être affichés dans la fenêtre contextuelle. Par défaut, il n'y a que des images, vous devez ajouter du contenu en ligne.
Maintenant que la configuration du plugin est terminée, passons à la configuration du bouton de commentaires.
2. Collez le code dans le siteEn principe, vous pouvez utiliser un lien texte classique, mais un bouton image sera plus esthétique.
Sur votre site, là où vous souhaitez afficher un bouton pour le formulaire de contact (en en-tête, pied de page ou barre latérale), insérez le code suivant :
< a href = "#contact_form_pop" class = "fancybox-inline" > < img title = "formulaire de contact" alt = "formulaire de contact" src = "http://ссылка на картинку" > < / a > < div style = "display:none" class = "fancybox-hidden" > < div id = "contact_form_pop" > [ contact - form - 7 id = "votre identifiant de formulaire" title = "nom de votre formulaire" ] !} < / div > < / div > |
Dans le code, vous devez indiquer l'adresse de l'image que vous utilisez comme bouton de commentaires et modifier le shortcode du formulaire lui-même - entrez votre identifiant et votre titre.
3. Supprimez la restriction sur les shortcodes dans la barre latéraleCet élément est requis si vous souhaitez installer un bouton dans la barre latérale. La barre latérale de WordPress n'autorise pas toujours les shortcodes.
Pour activer cette fonction, vous devez ouvrir le fichier function.php pour le modifier (directement depuis la zone d'administration de WordPress) et insérer le code suivant avant le crochet fermant « ?> » :
add_filter("widget_text", "do_shortcode");
add_filter ("widget_text" , "do_shortcode" ) ; |
Cela vous donnera la possibilité d'exécuter tous les shortcodes dans la barre latérale.
Je me suis retrouvé avec ce joli formulaire pop-up :
Il est parfois nécessaire de placer plusieurs formulaires sur un site Web avec différents paramètres et les champs.
Par exemple, un bouton mène à un formulaire avec un nom et un numéro de téléphone et est utilisé pour commander un rappel depuis le site, et le second doit ouvrir un autre formulaire où détaillé demande de commande (avec adresse, champ de description, possibilité de joindre un fichier, etc.). Dans le plugin Contact Form 7 lui-même, vous pouvez créer un nombre infini d'options de formulaire, mais comment pouvez-vous les intégrer dans différents boutons sur la même page ?
Pour ce faire, vous devez ajuster le code du bouton du paragraphe précédent. Le premier bouton utilise l'option présentée ci-dessus. Dans la seconde, deux valeurs changent.
Salut tout le monde. Nous avons été bombardés de questions sur la façon d'implémenter 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'afficherait.
Je pense qu'il y a beaucoup de choses similaires sur Internet, mais comme les gens me le demandent, j'ai décidé de le faire. De plus, une telle fonctionnalité doit être présente sur presque toutes les pages de destination pour implémenter un bouton de rappel. Et en effet, il existe désormais de plus en plus de résultats de tests AB montrant que les formulaires ouverts fonctionnent moins bien que ceux cachés dans une fenêtre modale et ouverts après avoir cliqué sur un bouton.
Certains soutiennent que cela est dû au fait que les gens « développent lentement une immunité » et que la forme ouverte est une vente agressive. Apparemment, c'est le moment où l'utilisateur, en voyant un formulaire ouvert, croit qu'il essaie de lui « vendre » quelque chose. Je ne suis pas entièrement d’accord avec cette théorie, mais il y a une part de vérité. Cela peut être vrai dans certains types d’entreprises. Eh bien, passons maintenant à la mise en œuvre du formulaire.
Note! Je ne décrirai pas chaque action en détail, mais vous proposerai une version toute faite dans le code source. Si vous avez des questions, écrivez dans les commentaires. Nous allons découvrir :)
Aujourd'hui, nous ne commencerons pas par jQuery, mais par la disposition du bouton et du formulaire. Nous inclurons tous les scripts à la fin de la page.
Un bouton qui, une fois cliqué, ouvrira une fenêtre modale :
Soumettez votre candidature
Vous pouvez définir n'importe quelle classe, mais dans le href, écrivez #modal - ce sera l'identifiant du conteneur avec un ombrage et un formulaire de contact.
Je vais maintenant donner le code du formulaire et le bloc sur lequel se trouvera le formulaire :
Laissez vos coordonnées et notre consultant vous contactera. Je souhaite ce formulaire pour mon site internet
Après avoir ajouté des styles, cela ressemblait à 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, uniquement destinés à créer des fenêtres modales animées. Vous pouvez le télécharger à partir du lien ou avec mes modifications à la fin de l'article.
Nous ajoutons des styles entre les balises head :
Et avant la balise body fermante, ajoutez des scripts :
Script.js est un script de traitement du formulaire. Le même Ajax qui nous permet de réaliser toute la procédure sans recharger la page :
$(document).ready(function () ( $("form").submit(function () ( // Récupère l'ID du formulaire var formID = $(this).attr("id"); // Ajoute un hachage à l'ID de nom var formNm = $("#" + formID); $.ajax(( type : "POST", url : "mail.php", data: formNm.serialize(), success: function (data) ( // Afficher le texte du résultat d'envoi $(formNm).html(data); ), error: function (jqXHR, text, error) ( // Afficher le texte de l'erreur d'envoi $(formNm).html(error); ) )); return false; ) ); ));
je ne donnerai pas source css et js à partir des fichiers responsables de la fenêtre modale et du formulaire, car ils sont assez volumineux. Si c'est le cas, regardez la source. Mais le gestionnaire PHP est en grande partie standard (si je puis dire) :
N'oubliez pas de remplacer vos adresses e-mail par les vôtres.
C'est le formulaire ajax que nous avons obtenu. Désolé de ne pas avoir essayé d'expliquer en détail comment chaque élément a été réalisé. Je voulais juste donner un résultat fini, mais cela ne sert à rien de décrire toutes les animations et apparitions. Téléchargez la source et implémentez-la sur votre site Web. Et c'est tout pour aujourd'hui. Bonne chance à tous!
Les gars, je vous invite à tester le formulaire sur un vrai ou serveur 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. DANS sinon, dans 90% des cas le formulaire ne fonctionnera pas.
N'attendez pas une lettre chez vous boites aux lettres, si vous avez simplement ouvert le fichier d'index dans le navigateur et 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 d'y prêter attention.
Version mise à jour l'article se trouve
Bonjour, chers lecteurs ! J'ai déjà écrit une fois sur les fenêtres modales, il y avait un article. Dans cet article, je vais vous montrer comment créer une fenêtre pop-up sur n'importe quel site Web. Nous utiliserons plugin jQuery boîte de fantaisie. Et pour ajouter du sens à l'article, nous insérerons un formulaire d'envoi de lettre dans la fenêtre modale. Je voudrais immédiatement noter que les fenêtres modales de ce plugin fonctionnent sur tous les navigateurs. Commençons!
De quoi avons nous besoin?! pas tellement:
- bibliothèque jQuery ;
- plugin fantaisiebox;
- Script PHP pour envoyer un message.
Télécharger version actuelle plugin, vous pouvez utiliser le lien ci-dessus. Concernant le plugin Fancybox, c'est très bon outil pour créer des fenêtres sur un site Web. Vous pouvez inclure n'importe quel contenu vidéo, images (à la fois individuellement et dans une galerie), texte, cadres flottants dans les fenêtres, le plugin a un tas de paramètres (plus d'informations ci-dessous) + le fait qu'il fonctionne également correctement dans tous les navigateurs est très agréable.
Je ne vais pas compliquer le balisage, cliquez simplement sur le lien et une fenêtre avec un formulaire d'envoi de message s'ouvrira :
envoyer un message |
Où la valeur de l'attribut href correspond à l'identifiant bloc div qui contient le formulaire pour envoyer une lettre :
1 |
Envoyer un e-mail |
Ajoutons deux champs au formulaire : le texte du message et l'adresse email de l'expéditeur, ainsi qu'un bouton de soumission. Une fois que l'utilisateur a saisi l'e-mail, le texte du message et cliqué sur envoyer, nous vérifierons d'abord l'exactitude des informations saisies, puis utiliserons une requête Ajax pour envoyer les données au script PHP.
Initialement, le formulaire est masqué :
#inline ( affichage : aucun ; ) |
Quelques styles pour concevoir des champs de formulaire et quelques classes appliquées aux champs lorsque les données sont mal saisies. Lorsque les erreurs sont corrigées, le style des champs devient normal :
1 | SMS ( Zone de texte ( Texte : mise au point, Erreur d'entrée, Erreur d'entrée : mise au point, |
Pour concevoir le bouton « Soumettre », nous allons :
1 | #envoyer ( #send : survolez ( #envoyer : actif ( |
Passons à la partie la plus intéressante, l'utilisation du plugin. Nous appelons la méthode .fancybox et la classe link fait office de sélecteur :
$(document).ready(function() ( |
Nous annulons également l'action du formulaire standard soumettre (envoyer), cela nous permettra d'utiliser notre propre requête ajax. Lors de l'appel de la méthode, je n'ai utilisé aucun paramètre et j'ai laissé toutes les valeurs par défaut. Cependant, ils méritent d’être mentionnés :
| Nom | Description |
| rembourrage | Remplissage du contenu de la fenêtre (15 px par défaut) |
| marge | Distance entre les bords du navigateur et la fenêtre (20 px par défaut) |
| largeur | Largeur par défaut pour le contenu "IFRAME" et "SWF". Également pour les objets "inline", "AJAX" et "HTML" si "AutoSize" est défini sur "false". Peut être numérique ou « Auto ». (800 px par défaut) |
| hauteur | Hauteur par défaut pour le contenu "IFRAME" et "SWF". Également pour les objets "inline", "AJAX" et "HTML" si "AutoSize" est défini sur "false". Peut être numérique ou « Auto ». (600 px par défaut) |
| minLargeur | Largeur minimale de la fenêtre (100 px par défaut) |
| minHauteur | Hauteur minimale de la fenêtre (100 px par défaut) |
| largeur maximale | Largeur maximale de la fenêtre (9999 px par défaut) |
| hauteur maximum | Hauteur maximale de la fenêtre (9999 px par défaut) |
| Tailleauto | Si « vrai », alors autoHeight et autoWidth sont également « vrai » (true par défaut) |
| hauteurauto | Si défini sur "true", la hauteur du contenu "inline", "AJAX" et "HTML" est déterminée automatiquement (la valeur par défaut est false) |
| largeurauto | Si défini sur "true", pour le contenu "inline", "AJAX" et "HTML", la largeur est déterminée automatiquement (la valeur par défaut est false) |
| Redimensionnement automatique | S'il est défini sur "true", le contenu sera redimensionné à mesure que la fenêtre change |
| centre-auto | S'il est défini sur "true", le contenu sera centré |
| fitToView | Si défini sur « true », la fenêtre sera ajustée à la taille du navigateur avant de s'ouvrir (la valeur par défaut est true) |
| ratio d'aspect | S'il est défini sur "true", alors le redimensionnement est limité par le rapport hauteur/largeur (par défaut false) |
| rapport supérieur | Positionnement vertical. Si la valeur est 0,5, la distance entre le haut et le bas de la fenêtre du navigateur sera la même. Si 0 alors la fenêtre modale sera en haut (par défaut 0,5) |
| rapport gauche | Un paramètre similaire uniquement pour le positionnement horizontal (par défaut 0,5) |
| défilement | Afficher les barres de défilement. Peut être réglé sur « auto », « oui », « non » ou « visible » (la valeur par défaut est automatique) |
| envelopperCSS | Classe CSS personnalisée |
| flèches | S'il est défini sur « vrai », les boutons de navigation seront affichés (vrai par défaut) |
| fermerBtn | S'il est défini sur "true", alors le bouton pour fermer la fenêtre sera affiché (la valeur par défaut est true) |
| fermerCliquez | Si « vrai », alors lorsque vous cliquez sur le contenu, la fenêtre se fermera (la valeur par défaut est faux) |
| suivantCliquez | S'il est défini sur « true », alors dans la galerie, lorsque vous cliquez sur le contenu, il y aura une transition vers l'image suivante (False par défaut) |
| roulette de la souris | Si « vrai », alors la galerie peut être parcourue à l'aide de la molette de la souris (la valeur par défaut est vraie) |
| lecture automatique | Si « vrai », alors lorsque vous ouvrez le premier élément de la galerie, un diaporama démarre (la valeur par défaut est faux) |
| jouerVitesse | Vitesse du diaporama (3 000 millisecondes par défaut) |
| précharger | Nombre d'images miniatures sous l'image principale (3 par défaut) |
| modal | Si "true", la navigation et le bouton de fermeture seront désactivés (faux par défaut) |
| boucle | Si « vrai », alors la galerie redémarrera après avoir atteint la fin (la valeur par défaut est vrai) |
| ajax | Option pour la requête ajax |
| iframe | Option pour gérer l'iframe |
| swf | Option pour gérer le contenu swf |
| clés | Vous pouvez définir des touches pour naviguer dans les diaporamas |
| direction | Sens de navigation |
| faire défilerà l'extérieur | S'il est défini sur "true", le script évitera de créer des barres de défilement (la valeur par défaut est true) |
| indice | Remplace l'index du groupe de démarrage (0 par défaut) |
| taper | Remplace le type de contenu. Types pris en charge : "image", "inline", "AJAX", "IFRAME", "SWF" et "HTML" (null par défaut) |
| href | Remplace la source de contenu avec le lien (la valeur par défaut est null) |
| contenu | Remplace le contenu qui sera affiché (la valeur par défaut est null) |
| titre | Remplace l'en-tête, vous pouvez définir n'importe quel HTML (la valeur par défaut est null) |
| tpl | Un objet contenant divers modèles |
| openEffet/ closeEffet / suivantEffet/ effet précédent |
Effet d'animation pour les actions, les valeurs possibles sont « fondu », « fondu », « élastique », « élastique » |
| ouvertVitesse/ fermerVitesse / suivantVitesse / précédentVitesse |
Vitesse d'animation (250 par défaut) |
| ouvrirEssouplissement/ fermerAssouplissement / suivantAssouplissement/ précédentAssouplissement |
Méthode d'assouplissement pour chaque type de transition (la valeur par défaut est swing) |
| ouvrirOpacité/ fermerOpacité |
Si défini sur « vrai », alors la transparence change (la valeur par défaut est vraie) |
| méthode ouverte/ méthode close/ méthode suivante/ méthode précédente |
L'effet de transition peut prendre les valeurs 'zoomIn' / 'zoomOut' / 'changeIn' / 'changeOut' |
| parent | L'élément parent du conteneur. Ceci est utile pour ASP.NET où élément supérieur est le « formulaire » (corps par défaut) |
L'utilisation de ces paramètres est très simple, disons que l'on souhaite réduire le remplissage au contenu du contenu et la hauteur du contenu :
1 | $(".modalbox" ) .fancybox (( |
Avant l'envoi, nous vérifierons l'exactitude des données saisies et l'exactitude de l'adresse e-mail saisie. Nous aurons donc besoin d’une fonction de vérification. Nous utiliserons une expression régulière :
1 | fonction validateEmail(email) ( |
La dernière étape consiste à envoyer le message. Nous suivons l'événement de clic sur le bouton « Soumettre » :
1 | $("#envoyer" ) .on ("cliquez" , fonction () ( |
Nous plaçons les données saisies par l'utilisateur dans les deux premières variables. Nous déterminons la longueur du message (msglen) et vérifions l'adresse e-mail saisie (mailvalid). Ensuite, nous vérifions si la variable mailvalid est fausse, ce qui signifie que l'adresse e-mail a été mal saisie, et cette entrée sera surlignée en rouge. Nous vérifions également le nombre de caractères saisis dans le texte du message ; s'il y a moins de 4 caractères, nous indiquons qu'il s'agit d'une erreur (nous surligneons le texte saisi en rouge). $("#contact" ) .serialize() ,
succès : fonction (données) (
if (data == "true" ) (
$("#contact" ) .fadeOut ( "rapide" , fonction () (
$(this).before("Succès ! Votre message a été envoyé :)" ) ;
setTimeout("$.fancybox.close()" , 1000 ) ;
}
)
;
}
}
}
)
;
}
}
)
;
Si les deux champs sont cochés, alors au lieu du bouton « envoyer », nous affichons le texte indiquant que le message est envoyé. Cela donne à l'utilisateur la confirmation que les deux champs sont cochés et que le processus est en cours.
Maintenant la requête AJAX. Le premier paramètre de requête est le type de transfert de données (POST ou GET). Ensuite, nous spécifions le fichier du gestionnaire (sendmessage.php). Le paramètre suivant est les données, en utilisant la méthode de sérialisation, nous préparons les données dans des formulaires à envoyer au serveur.
Si nous obtenons bonne réponse depuis le serveur (nous générons ces données dans un fichier PHP), puis nous masquerons le formulaire de contact et afficherons un message sur le succès de la soumission. J'utilise SetTimeout() pour que la fenêtre modale ne se ferme pas immédiatement, mais plutôt une seconde après l'envoi des données.
Script PHPNous envoyons les entrées de l'utilisateur à l'aide de JQuery à sendmessage.php. En PHP, nous générons ces données à partir du tableau POST, générons et envoyons un message. Si l'envoi a réussi, nous renvoyons true à JQuery, sinon false .
Dans la variable $sendto nous indiquons l'adresse email à laquelle les lettres seront envoyées.
1 | $envoyerà = " [email protégé]"
;
// Formation de l'en-tête de la lettre // Formation du corps de la lettre De : " . $usermail . " \r \n " ;$msg .= " Message : " . $contenu . " \r \n " ;$msg .= "" ; // envoyer le message |
Bonjour cher lecteur, dans cet article je vais vous montrer comment créer un formulaire de contact popup sur votre site WordPress. Souvent, lorsque vous développez votre propre site Web ou blog, vous devez installer la fonctionnalité communications opérationnelles avec les visiteurs de la ressource Internet. Dans ce cas, le formulaire de commentaires contextuel pour WordPress sera utile, ce qui aidera à établir contact rapide avec les utilisateurs.
Pourquoi avez-vous besoin d’un formulaire de commentaires contextuel pour WordPress ? Raisons de l’utiliserVoyons pourquoi ce formulaire est nécessaire
Un bonus supplémentaire : le formulaire est facile à modifier et à personnaliser pour répondre aux besoins de votre site. Un formulaire de commentaires contextuel pour WordPress peut être présenté sous la forme d'une fenêtre d'ouverture pour commander un appel, un service ou un produit, ou souscrire un abonnement. Si vous le souhaitez, vous pouvez ajouter effets visuels, diverses images, etc.
Plugins pour installer un formulaire popupJetons un coup d'œil aux outils nécessaires pour développer des popups dans wordpress - application spéciale pour le développement et la création de sites Internet.
Formulaire de contact 7Ce plugin est utilisé directement pour concevoir le formulaire. Pour l'installer, suivez ces étapes :
Boîte de fantaisie facileCe plugin convient au développement d'un effet de fenêtre pop-up. La séquence d'installation d'Easy FancyBox est similaire à l'installation précédente du plugin.
Configuration des pluginsVous pouvez configurer les paramètres du module complémentaire Easy FancyBox via des fichiers multimédias. Utilisez les options de menu « Paramètres » -> « Fichiers multimédias ».
Dans le bloc qui s'ouvre juste en dessous 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 qu'une fenêtre contextuelle sera activée lorsque vous cliquez sur l'image. Il est conseillé de l'enlever, car s'il y en a d'autres outils supplémentaires Lors de la création d'une animation pop-up, les images s'ouvriront deux fois.
Mais ce n'est pas tout. Cochez la case à côté de « Contenu en ligne »
N’importe qui peut approfondir les paramètres du plugin et les définir à sa propre discrétion.
Astuce : si vous souhaitez que le formulaire soit toujours ouvert, décochez l'option « Fermer FancyBox lorsque l'on clique sur la superposition » dans les paramètres d'Easy FancyBox, qui ferme la fenêtre lorsque vous cliquez en dehors de celle-ci.
Instruction étape par étapeEh bien, la préparation préliminaire « ennuyeuse » est terminée, passons maintenant à la partie « délicieuse » - comment, en fait, le formulaire de commentaires contextuel WordPress est développé.
Gestion de la fenêtre de formulaireOù allons-nous commencer? Bien sûr, avec préréglage la forme elle-même. Sélectionnez « Formulaire de contact 7 » dans le menu de droite, puis l'option « Ajouter un nouveau ».
Trouvez un nouveau nom pour le formulaire, par exemple « Expérimenter », saisissez-le dans le champ de saisie de la fenêtre qui s'ouvre, où se trouve le texte « Titre », et cliquez sur le bouton « Enregistrer ». Vous pouvez modifier d’autres paramètres, y compris le modèle de formulaire lui-même, mais nous n’y toucherons pas. Maintenant, notre objectif principal est simplement d'apprendre à créer des formulaires contextuels.
Jetez un œil au résultat. Comme vous pouvez le voir, le plugin a généré un shortcode spécial qui est utilisé pour afficher ensuite le formulaire. Vous devez le copier.
Sortie du formulairePassons maintenant à la programmation. Nouveau 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 dans le menu séquentiellement " Apparence", puis cliquez sur "Widgets", puis dans la fenêtre qui s'ouvre, cliquez sur l'option "Texte".
Cliquez maintenant sur le bouton « Ajouter un widget »
Collez le code suivant dans le champ de saisie Contenu :
Écrire une lettre Texte de début Texte de fin
Voici à quoi ressemblera le résultat obtenu :
Veuillez noter qu'au lieu du shortcode spécifié dans l'exemple, vous devrez spécifier celui que vous avez créé suite à la création d'un nouveau formulaire.
De plus, le formulaire peut être modifié : ajouter ou supprimer des champs de saisie, saisir le texte initial et/ou final avant et après le formulaire, convertir le texte en titre ou l'afficher dans un bloc séparé, utiliser différents styles, espaces réservés, etc. Si seulement il y avait du temps et de l’envie !
Style de lienExaminons également deux façons de convertir un lien en bouton pour améliorer son apparence visuelle.
Méthode 1 : Utilisation de styles de thème supplémentaires.
Le code suivant peut être inséré comme suit :
Le code du programme lui-même ressemble à ceci :
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | /***Affichage d'un lien sous forme de bouton****/ .contact-us a( margin:auto; /*alignement du bloc au centre*/ display:block; width:199px; /*taille du bouton*/ padding:11px 22px ; /*padding*/ border:1px solid black; /*border shade*/ background:#3399ff; /*background pattern*/ text-decoration:none; /*conversion du texte en texte non ligné*/ text- align:center; /*centrage de l'étiquette*/ color:#ffffff; /*ombre de l'étiquette*/ -moz-transition : toutes les facilités de 0,6 s ; -webkit-transition : toutes les facilités de 0,6 s ; transition : toutes les facilités de 0,6 s ; ) /**Changement de couleur des liens lors du survol du curseur**/ .contact-us a:hover( -moz-box-shadow: 0 0 7px #111; -webkit-box-shadow: 0 0 7px #111; box -shadow:0 0 7px #111 ; -moz-transition : tout en facilité de 0,6 s ; -webkit-transition : tout en facilité de 0,6 s ; transition : tout en facilité de 0,6 s ; ) |
/***Affichage d'un lien sous forme de bouton****/ .contact-us a( margin:auto; /*alignement du bloc au centre*/ display:block; width:199px; /*taille du bouton*/ padding:11px 22px ; /*padding*/ border:1px solid black; /*border shade*/ background:#3399ff; /*background pattern*/ text-decoration:none; /*conversion du texte en texte non ligné*/ text- align:center; /*centrage de l'étiquette*/ color:#ffffff; /*ombre de l'étiquette*/ -moz-transition : toutes les facilités de 0,6 s ; -webkit-transition : toutes les facilités de 0,6 s ; transition : toutes les facilités de 0,6 s ; ) /**Changement de couleur des liens lors du survol du curseur**/ .contact-us a:hover( -moz-box-shadow: 0 0 7px #111; -webkit-box-shadow: 0 0 7px #111; box -shadow:0 0 7px #111 ; -moz-transition : tout en facilité de 0,6 s ; -webkit-transition : tout en facilité de 0,6 s ; transition : tout en facilité de 0,6 s ; )
Le résultat est un bouton comme celui-ci :
Le code indique déjà quel paramètre est responsable de quoi. Désormais, chacun peut modifier le code à sa guise, expérimenter différents styles et couleurs et créer le lien le plus approprié pour la fenêtre contextuelle.
Méthode 2 – utilisez une image comme bouton. Tout d'abord, téléchargez l'image requise sur le site (n'importe quelle image que vous aimez, pas nécessairement sous la forme d'un bouton - cela n'a pas vraiment d'importance). Pour ce faire, cliquez sur « Média » -> « Ajouter un nouveau » et sélectionnez l'image souhaitée. Un lien permanent vers le fichier apparaîtra à droite de l'image (dans dans cet exemple http://www.sait.ru/wp-content/uploads/2017/04/depositphotos_2169498-E-mail-internet-icon.jpg), copiez-le et ajoutez-le au code (ne supprimez pas les guillemets) :
Ajoutez le code résultant au code de sortie principal du formulaire au lieu du texte « Écrire une lettre ».
| 1 | 
|
Mon site Web affichait le bouton illustré dans la capture d'écran ci-dessous :
Et voici à quoi ressemblera le bouton si vous laissez le style supplémentaire décrit dans la première méthode :
Ajouter au menuPour que le formulaire de commentaires contextuel pour WordPress puisse être appelé directement depuis le menu, vous devez utiliser le code suivant
| 1 2 3 | |
Vous devez d’abord déterminer où exactement vous devez insérer ce code. Allez dans « Éditeur » via « Apparence » et parmi les modèles, sélectionnez « En-tête (header.php) »
Trouvez maintenant l'endroit où se trouve le code du menu. Retrouvez les informations suivantes :
| 1 2 |