Un simple formulaire de contact utilisant Ajax. Formulaire de commentaires Ajax dans une fenêtre modale Fenêtre modale avec un e-mail de nom de formulaire d'abonnement

Je me suis consacré à la façon dont vous pouvez créer une fenêtre contextuelle qui s'affiche sur le site une fois et après un certain intervalle de temps. Ainsi, en option, vous pouvez insérer un formulaire dans cette fenêtre. Il peut s'agir d'un formulaire d'abonnement ou d'un formulaire de contact, en général, n'importe quoi. Il est préférable d'afficher les formulaires Ajax dans des fenêtres pop-up afin que les données soient envoyées sans recharger la page.

Structure des articles

Si vous créez un site Web sur un moteur, par exemple Joomla ou WordPress, vous pouvez bien sûr utiliser diverses solutions de formulaires prêtes à l'emploi, y compris les concepteurs. Mais que se passe-t-il si vous concevez simplement en HTML pur et que le client vous demande de « relancer » les formulaires pour qu'ils fonctionnent. C'est là que ce formulaire s'avère utile.

MISE À JOUR. 08/02/2018
L'article a été réécrit en tenant compte du fait que le formulaire a été publié sur GitHub

Alors, commençons. Tout d'abord, téléchargez les sources du formulaire depuis mon référentiel GitHub.

J'ai assemblé cet assemblage à l'aide du gestionnaire de tâches Gulp. J'ai écrit sur la façon de travailler avec lui, assurez-vous de lire.

Connexion du formulaire au site

Décompressez l'archive avec le formulaire. Ensuite, copiez tout le contenu du dossier dist dans le dossier Forms (par exemple, ajax-form) de votre modèle de site. Ensuite, nous connectons les ressources - styles et scripts. Il existe deux versions dans les dossiers css et js : compressée et régulière. Si vous envisagez d'apporter des modifications au code à l'avenir, il est préférable de connecter des versions non compressées.

Si la bibliothèque jQuery est déjà activée sur votre site, vous n'avez pas besoin de la connecter. Faire attention à .

Initialisation du formulaire

Précisons tout de suite que la validation des champs est organisée en HTML5.

Le formulaire est appelé par la méthode .simpleSendForm(), par exemple :

$("#idForm").simpleSendForm();

Au lieu de #idForm, nous spécifions l'identifiant du formulaire. En général, vous pouvez trouver le code d'initialisation du formulaire dans le fichier scripts.js. Le code appelant le plugin peut être découpé à partir de là et écrit juste avant le fichier . N'oubliez pas jQuery.(document).ready() .

Le formulaire peut accepter certaines options.

Possibilités

• successTitle (string) — Titre du message de remerciement lorsque le formulaire est soumis. La valeur par défaut est « Merci de nous avoir choisi ! »
• successText (string) - Le texte sous le titre du message de remerciement. La valeur par défaut est « Nous vous contacterons sous peu ».
• errorTitle (string) — titre du message d'erreur de soumission du formulaire. La valeur par défaut est « Message non envoyé ! »
• errorSubmit (string) — texte du message d'erreur de soumission du formulaire. La valeur par défaut est « Erreur lors de la soumission du formulaire ! ».
• errorNocaptcha (string) — texte d'erreur si le captcha n'a pas été rempli.
• errorCaptcha (string) — texte d'erreur si la vérification a échoué.
• mailUrl (string) — chemin d'accès au fichier du gestionnaire. La valeur par défaut est "../form-submit/submit.php". Vous devez modifier et spécifier le chemin complet si votre dossier « form-submit » ne se trouve pas à la racine du site.
• autoClose (booléen) - Ferme automatiquement la fenêtre après la soumission réussie du formulaire (pour les formulaires dans une fenêtre modale). La fenêtre du formulaire se ferme, affichant un message de remerciement après 5 secondes. Cette fois peut être annulé.
• autoCloseDelay (nombre) - durée (en millisecondes) d'affichage du message de remerciement après quoi il se fermera. La valeur par défaut est 5 000 (5 secondes).
• debug (booléen) - false par défaut. Activez le débogage en cas de problèmes avec le formulaire. Voir les messages d'erreur dans la console.
• captcha (booléen) - faux par défaut. Activez ou désactivez Recaptcha 2.0.
• captchaPublicKey (string) — clé publique recaptcha.

Formulaire dans une fenêtre modale

Notre formulaire peut également être affiché dans une fenêtre modale. Le modal sera affiché par la bibliothèque.

Code HTML

Code du bouton

Demander un appel

Code du formulaire

Initialisez la fenêtre modale et le formulaire. Fermons la fenêtre automatiquement après 3 secondes. après soumission réussie du formulaire. Vous pouvez également trouver le code d'appel de Magnific Popup dans le fichier scripts.js.

Appel d'un formulaire avec une fenêtre modale // ======= Init Magnific Popup ======= $(".modal-popup").magnificPopup(( type : "inline",fixedContentPos : false,fixedBgPos : true , overflowY : "auto", closeBtnInside : true, preloader : false, midClick : true, RemovalDelay : 300, mainClass : "mfp-top-up" )); // ===== Formulaire modal d'initialisation ==== $("#idForm").simpleSendForm (( successTitle : "Votre candidature a été acceptée !", successText : "Notre employé vous contactera dans les plus brefs délais." , autoClose : vrai, autoCloseDelay : 3000 )); Comment activer Recaptcha ?

Si vous souhaitez activer le recaptcha dans un formulaire, alors vous devez ajouter un bloc vide avec la classe recaptcha dans le code html du formulaire à l'endroit où vous souhaitez l'afficher. Ensuite, dans le code d'appel du plugin de formulaire, nous passons l'option captcha avec la valeur true, et nous passons votre clé publique recaptcha à l'option captchaPublicKey. Vous pouvez obtenir des clés publiques et privées.

// ===== Captcha d'initialisation sous la forme ==== $("#idForm").simpleSendForm(( successTitle : "Votre candidature a été acceptée !", successText : "Notre employé vous contactera dans les plus brefs délais ." , autoClose : true, autoCloseDelay : 3000, captcha : true, captchaPublicKey : "6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI" ));

Ensuite, ouvrez le fichier du gestionnaire de formulaire submit.php à partir du répertoire form-submit. Nous recherchons la variable recaptchaOn (environ la 7ème ligne) et la définissons sur true . Ensuite, recherchez la variable $secret (environ la ligne 89) et remplacez la clé privée par la vôtre.

En gros, tout. Après ces manipulations, vous devriez voir un captcha.

Veuillez noter que sur le site de démonstration, le captcha fonctionne en mode test, car les clés de test de Google sont indiquées.

Examinons maintenant le fichier du gestionnaire de formulaire (submit.php) et parcourons les principaux éléments de code. Le gestionnaire fonctionne en PHP, donc si vous souhaitez tester le formulaire, vous devrez utiliser .

Erreurs possibles Le message du formulaire n'est pas envoyé, le préchargeur se contente de tourner et c'est tout. Quel est le problème?

Vérifiez si le chemin d'accès au fichier du gestionnaire est correctement spécifié dans l'initialisation du formulaire :

mailUrl : — chemin d'accès au fichier du gestionnaire

Vérifiez également que le recaptcha est correctement activé. Autrement dit, si elles sont désactivées, les options recaptcha dans le code d'initialisation et $recptchaOn dans le fichier du gestionnaire doivent être définies sur false ou true si recaptcha est activé.

Pas montré Récaptcha Google en forme de

Vérifiez si les valeurs recaptcha (appel recaptcha) et $recaptchaOn (fichier du gestionnaire) ont été transmises - vrai. Vérifiez également si vous avez spécifié correctement les clés - publiques et privées.

J'ai tout fait selon les instructions, mais le formulaire ne fonctionne pas, où puis-je chercher l'erreur ?

Tout d'abord, je vous conseille de consulter la console du navigateur et de vérifier les erreurs. Vérifiez également si la bibliothèque jQuery est activée. Vérifiez que le fichier scripts.js est correctement inclus. Si tout va bien, essayez d'activer le débogage avec l'option debug: true. Après avoir allumé, recherchez les erreurs dans la console.

C'est le formulaire. Utilisez-le sur votre site Web, j'espère qu'il vous sera utile. Que dire de plus? Parlons maintenant - dans les commentaires. Demandez si quelque chose n'est pas clair. De plus, si vous constatez une erreur, veuillez me le faire savoir immédiatement et nous la corrigerons...

C'est tout. Merci pour votre attention. Rendez-vous dans les prochains articles !

Salutations à mes lecteurs, j'ai acquis de l'expérience et je vous parlerai des principes de fonctionnement du formulaire retour php. je te montrerai des exemples clairs, afin que vous compreniez comment tout fonctionne et comment l'interaction se produit entre le formulaire de saisie lui-même (ses champs de saisie) et le fichier de gestionnaire écrit en PHP. De plus, vous pouvez télécharger gratuitement les sources ainsi que les fichiers .

Bien sûr, ce serait formidable si vous compreniez au moins un peu HTML / CSS car... Vous devrez faire glisser le code sur votre page par analogie. Nous n'aborderons pas le langage PHP ; je vais vous montrer toutes les modifications nécessaires que vous devez effectuer vous-même.

MISE À JOUR : Sur la base des réponses des lecteurs, j'ai réalisé que j'avais besoin de quelque chose de plus beau et de plus fonctionnel, rencontrez-moi, vérifiez-le et jetez-y un œil. Choisissez celui que vous préférez)

UPDATE2 : Version 3.0 Adaptive Landing + formulaire ajax avec transmission de balises UTM, lire et voir. tu aimeras

Je me suis souvenu de moi-même lorsque j'ai essayé pour la première fois de créer moi-même un formulaire de commentaires en PHP, et pour être honnête, cela demandait beaucoup de travail, car... Je ne comprenais pas ce qui se passait et comment. Patience et persévérance, mes amis, et vous réussirez.

Formulaire de commentaires PHP - structure

Nous étudierons l'analyse du formulaire de feedback lui-même à l'aide d'un exemple page de destination (Page de destination), d'ailleurs, il y a un article séparé sur. Vous pouvez voir comment cela fonctionne en action en utilisant les boutons ci-dessous, je joins les sources de cette page d'une page et le fichier principal du gestionnaire php (ce fichier traitera et enverra l'e-mail)

Après avoir téléchargé les sources et décompressé l'archive, vous verrez la structure de fichiers suivante :

• image - toutes les images utilisées pour la page de destination elle-même, les boutons, etc.
• js - scripts javascript qui fournissent, par exemple, une fenêtre modale contextuelle sur une page et d'autres effets visuels
• index.html - fichier d'index de notre page d'une page
• index1.php est un fichier de gestionnaire dans lequel les valeurs du formulaire sont transférées, puis une lettre est générée à partir des variables reçues et envoyée à l'adresse e-mail spécifiée. Index1.php servira également de page de notification intermédiaire concernant l'envoi réussi des données avec redirection automatique vers index.html (c'est-à-dire notre page d'une page)

Il est important que votre hébergement, où se trouvent les fichiers du site, prenne en charge le traitement PHP, sinon le fichier index1.php ne sera pas exécuté et ne fonctionnera pas. Pour clarifier cette nuance, contactez la campagne où votre hébergement est enregistré ou testez-le simplement - cela fonctionne, cela signifie qu'il y a un support. Sinon, activez l'option de prise en charge du langage PHP

Jetez un œil au diagramme de la façon dont tous les éléments interagissent (page, formulaire, gestionnaire)

Code source pour appeler le formulaire et le gestionnaire

Jetons un coup d'œil au fonctionnement de l'un des boutons, qui ouvre une fenêtre contextuelle modale contenant un formulaire de commentaires. Ceci étant donné source- ce n'est pas qu'un, deux insérés sur la page et ça fonctionnera, vous devrez le personnaliser vous-même en fonction de votre design et de vos besoins.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

Demander un rappel Demander un rappel

Demander un rappel Demander un rappel

Ci-dessous le code source complet du gestionnaire index1.php, afin de paramétrer l'envoi vers votre boîte mail, modifiez « [email protégé]"à vous, le reste, en principe, peut rester inchangé

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

Vous serez contacté

Vous serez contacté body ( background: #22BFF7 url(img/zakaz.jpg) top -70% center no-repeat; ) setTimeout("location.replace("/index.html")", 3000); /*Modifier l'adresse de la page actuelle après 3 secondes (3000 millisecondes)*/

Vérification de la fonctionnalité du formulaire

Appelez la fenêtre et saisissez les données pour un test de vérification de notre formulaire

Je vous le rappelle encore une fois, votre hébergement doit prendre en charge le traitement fichiers php, sinon notre gestionnaire ne sera tout simplement pas exécuté et aucune lettre ne sera envoyée à l'adresse e-mail spécifiée. Le résultat d’un formulaire de commentaires complété avec succès

C'est tout pour moi, j'ai essayé de transmettre le mieux possible le sens et le fonctionnement du scénario. Si vous avez des questions, n'hésitez pas à me contacter dans les commentaires ou sur VK (voir coordonnées). Je vous souhaite un travail facile et productif.

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 de fermeture, 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) ( // Texte de sortie du résultat d'envoi $(formNm).html(data); error: function (jqXHR, text, error) ( // Affichage du texte de l'erreur d'envoi $(formNm).html(error); ) ) ); ) );

je ne donnerai pas l'original code 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 changer vos adresses E-mail tout seul.

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. 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.

La version mise à jour de l'article se trouve