De l'auteur: Salutations à vous, amis. Cet article sera une continuation dans laquelle nous avons mis en œuvre des données de formulaire d'envoi au serveur sans redémarrer la page. Nous allons continuer ici ce sujet et apprenez à accepter les données sur le serveur et à mettre en œuvre l'envoi du formulaire sur e-mail (e-mail). Alors configurons le formulaire rétroaction Et ajoutez la possibilité de l'envoyer au courrier électronique.
Fichiers source de l'article actuel que vous pouvez télécharger des logiciels.
Dans cette leçon, nous ferons tout le plus simple possible et par eux-mêmes. En particulier, nous utilisons des lettres spéciales pour envoyer des lettres. fonction PHP appelé mail (), qui était utilisé avant d'envoyer des lettres.
Commençons par la syntaxe de la fonction mail. Cette fonction comporte trois paramètres obligatoires et deux options facultatives (non requises). Paramètres requis:
au destinataire de l'e-mail (vous pouvez également spécifier plusieurs adresses, les transférer via la virgule);
sujet - le sujet de la lettre;
message - Texte de la lettre.
Des paramètres facultatifs, seul le premier est presque toujours utilisé, responsable des en-têtes de la lettre: codage, expéditeur, type de lettre, etc.
Essayons d'envoyer une lettre en utilisant cette fonctionnalité. Faites-le dans le fichier mail.php dans lequel nous acceptons les données du formulaire. Nouveau code ce fichier Sera:
Votre message posté
";) Sinon (echo"Erreur!
"; }< ? php $ to \u003d " [Email protégé]" ; // adresse du destinataire $ Sujet \u003d. "Commander appel"; // sujet de lettre $ Message \u003d. "Nom: ($ _Post [" nom "]) \\ r \\ n"; // Ajouter un nom au texte $ Message. \u003d. "Téléphone: ($ _Post [" Téléphone "])"; // Ajouter le téléphone au texte $ En-têtes. \u003d. "Type de contenu: Texte / Plain; Charset \u003d UTF-8". "\\ r \\ n"; // nous définissons le codage $ En-têtes. \u003d "De: [Email protégé]"." \\ r \\ n "; // Ajouter l'expéditeur si (Mail ($ to, $ soumis, $ message, $ en-tête)) ( Écho. " Votre message posté ) AUTRE ( Écho. " Erreur! |
Il s'agit du code minimum qui vous permettra déjà de former un message à envoyer. Vérifions comment ça marche:
Comme vous pouvez le constater, le code fonctionne, en réponse, nous recevons un message que la lettre envoyée. Puisque nous travaillons sur un serveur local, les lettres ne sont vraiment pas envoyées à la fonction Mail (), elles sont enregistrées sous forme de fichier texte dans un dossier spécial. Dans Open Server, il s'agit d'un dossier \\ userData \\ temp \\ e-mail \\. Ouvre ce dossier et assurez-vous que la lettre est là, cela ressemblera à ceci:
Excellent! Il reste plusieurs points, ce qui n'empêchera pas le script JS. Par exemple, vous devez afficher un message non par simple texte, à savoir le code HTML, ainsi que pour effacer les champs de formulaire après l'envoi du message. Le code JS final sera:
$ (Fonction (). Soumettre (e.preventDefault (e); var données \u003d $ (ceci). Sériaire (); $ .ajax ((URL: "mail.php", type: "Poste", Données: données, données Beforesert: Fonction () ($ ("# Soumettre"). Suivant (). Texte (i "Envoyer ...");), Succès: Fonction (RES) («Entrée»). Rechercher ("Entrée" ). Val (""); $ ("# Soumettre"). Suivant (). HTML (res);), Erreur: Fonction () (Alerte ("Erreur!");));)););););); ;
$ (Fonction () ( $ ("#recall"). Soumettre (fonction (e) ( e. PreventDefault (); var données \u003d $ (ceci). Serialize (); $. ajax (( uRL: "mail.php", type: "post", données: données, beforesert: Fonction () ( $ ("#Submit"). Suivant (). Texte ("j'envoie ..."); |
Tout site doit avoir un formulaire de retour, tôt ou tard, chacun de nous pense à son développement. Il existe de nombreuses options sur le réseau, quelqu'un utilise des plugins populaires, de leurs employés personnels, mais la plupart des solutions prêtes à l'emploi. En tout cas, notre formulaire de retour pour le site Ce sera un fonctionnement et fonctionnel et tout cela dans l'ordre.
Html
Donc, commençons, comme toujours, avec une pièce ordinaire - HTML. Pour commencer, nous aurons besoin d'une forme avec plusieurs champs. Nous prenons la clarté et la norme de toutes les formes de 3 champs. Ceux. Ce sera un nom, un email et un téléphone.
Chaque entrée a son propre nom de nom unique, il sera nécessaire à l'avenir pour envoyer des messages. Vous pouvez également ajouter librement vos champs et non seulement les saisir, mais également sélectionner, Textarea. Il suffit d'oublier chacun d'eux d'attribuer vos noms que nous utiliserons lors de l'envoi d'informations à la poste. Pour plus de commodité, j'ai ajouté l'attribut requis à chaque champ, grâce auquel le navigateur permettra à l'utilisateur d'envoyer des valeurs vides et de notifier la nécessité de les remplir.
CSS.
Lorsque le formulaire est prêt, vous pouvez le transformer un peu. Tout dépend également de vos besoins et de vos fantasmes. Pour plus de clarté, j'ai esquissé des styles pour chaque élément afin de ne pas avoir l'air si plat. Mais si vous êtes paresseux ou que vous ne savez pas comment cela est fait, vous pouvez utiliser mon option:
Formulaire (max-largeur: 400px; largeur: 100%; marge: 0 auto;) entrée (dimensionnement de la boîte: bordure; Affichage: Bloc; Bordure: Aucun; Box-Shadow: INSET 0PX 0PX 4PX 1PX RGBA (0, 0, 0, 0.11); rembourrage: 10px 20px; largeur: 100%; marge: 10px 0; contour: aucune;) entrée (arrière-plan: rouge; bordure: 0px 2px 0 1px # C50909; rayon de frontière : 5px; Couleur: blanc; Texte-transformateur: majuscule; Poids-Poids: 600; largeur: 200px; curseur: pointeur; transition: 0,3s;) Entrée: plancher (arrière-plan: noir; ombre: 0px 2px 0 1px noir ;)
Partie client
Il est déjà nécessaire de comprendre plus de détails plus précisément choisir l'option appropriée pour vous-même. Pour envoyer des messages à la poste, nous devrons utiliser la langue PHP, c'est-à-dire Créez un fichier séparé dans lequel nous transmettrons toutes ces données. Mais nous ne considérerons pas cette méthode ici, car il est beaucoup plus beau quand tout nous arrive sans redémarrer la page. Par conséquent, nous envisagerons d'envoyer des données via AJAX.
Si vous voulez tout faire de l'ancienne, vous devrez alors corriger le HTML supérieur et régler la valeur de la valeur d'attribut de la méthode (poste ou obtenez-en). Tout dépend de la manière dont vous souhaitez transférer des données du formulaire. Et n'oubliez pas d'enregistrer l'action, qui spécifiera le chemin du fichier PHP.
Et nous allons passer une méthode plus avancée et effectuerons des données d'envoi sans recharger la page, et obtenir la réponse du serveur donnera un message à l'utilisateur sur une opération réussie ou une erreur. Cependant, nous aurons également besoin de 2 fichiers, disons contact.php. et custom.js..
D'abord, n'oubliez pas de connecter la bibliothèque Jquery.Avec cela, nous réduirons le code plusieurs fois et nous pourrons facilement produire n'importe quelle action en utilisant des solutions prêtes à l'emploi.
$ (". Formulaire"). Soumettre (fonction () (var str \u003d $ (this) headialize (); $ .AJAX ((type: "POST", URL: "Contact.php", Données: STR, SUCCESS : Fonction (msg) (si (msg \u003d\u003d "ok") (alerte ("lettre envoyée");) sinon (ALERT ("ALERT (" ERREUR! Peut-être que vous interprétez mal interprété les champs. "))); Retournez faux;); );
Nous le découvrirons maintenant dans le schéma d'actions et pourquoi nous avons besoin de toutes ces bibliothèques et dossiers. Lorsque l'utilisateur clique sur le bouton Soumettre, nous avons l'événement de soumission, que nous écrivons dans Custom.js et sur la base desquels nous obtenons toutes les données du formulaire et les soumettons au fichier Contact.php. Ici, nous vérifions une fois à nouveau si nos champs ne sont pas vides (afin d'éviter la prochaine capacité de spam), nous vous enverrons un message électronique et informerons les résultats de l'utilisateur qui sont transmis par la réponse à Custom.js.
Si (couper ($ _ POST ["[" MFBPHONE "]) \u003d\u003d" ") (echo" faux ";) sinon ($ txtname \u003d garniture ($ _ post [" MFBName "]); $ txtemail \u003d bordure ($ _ POST ["mfbmail"]); $ txtphone \u003d garniture ($ _ POST ["MFBPHONE"]); // à partir de $ dail \u003d " [Email protégé]"; // Entrez votre email $ emailto \u003d" [Email protégé]"; $ sujette \u003d" commentaires "; $ sujet \u003d" \u003d? utf-8? B? ". BASE64_ENCODE ($ de sujet)."? \u003d "$ en-tête \u003d" De: Exemple de formulaire<$fromMail>\\ n "; $ en-têtes. \u003d" Type de contenu: Texte / Plain; Charset \u003d "utf-8" \\ r \\ n "; $ en-têtes. \u003d" MIME-Version: 1.0 \\ r \\ n "; $ Headers. \u003d" Date: "Date de mon h: I: S O ")." \\ R \\ n "; // lettre de corps $ Body \u003d" Une lettre du site a été reçue. "$ Site." \\ N \\ nmimi: "$ txtname." \\ Ntephone: "$ txtphone." \\ Né-mail: "$ txtemail." \\ Nexment: "$ txtmessage; mail ($ e-mail, $ Sujets, $ Body, $ Headers); Echo "ok";)
C'est l'exemple le plus élémentaire du fonctionnement du formulaire de contact. Il existe de nombreuses options comment modifier le fichier de contrôle PHP, créer vos classes, etc. Mais notre tâche était de créer un exemple simple et de travail, qui peut être utilisé sur votre site web.
démo.
des dossiers
Plugins prêts
Depuis que vous êtes sur le blog WordPress, alors prêt sûrement et cherchez-vous à utiliser toutes sortes de plugins, surtout si vous êtes en programmation et en posant des lamers complets. Et je ne vous blâme pas et je peux même soumettre votre attention sur la clarté. Le but de ce paragraphe n'est pas une recommandation, mais seulement un exemple, car j'ai utilisé le plugin Formulaire de contact 7. Dans plusieurs projets.
Il est très pratique dans les paramètres et travaille presque toujours immaculé. Si vous avez besoin de créer votre propre design unique, vous pouvez le faire. Il suffit que dans le concepteur d'ajouter les champs nécessaires, de traduire et de modifier les alertes sur les erreurs et la répartition réussie sur votre propre et tout est prêt. Copiez en outre le code abrégé et insérez dans le lieu de sortie de lieu souhaité.
Je n'ai jamais eu de problèmes avec le plugin et si vous avez besoin d'une solution rapide et prête à l'emploi, alors c'est ça. Si vous avez vos propres fonctions et vos exigences de conception, il est préférable d'utiliser la première option nécessitant des connaissances dans cette industrie.
En réponse à de telles questions, la première chose qui me vient à l'esprit est «pratique et travailleurs». Et ceci est généralement logique. Après tout, sinon, quel est le point en présence d'une belle forme de commentaires qui n'utilise pas? Mais premières choses d'abord.
Beaucoup de formes - un objectif
Commençons par pourquoi avez-vous besoin de formulaires de retour sur le site? Le propriétaire du site devrait être en mesure de contacter les visiteurs sur son site. Les gens cherchent à sauver leur temps pour trouver des informations sur les bons produits, clarifier leurs qualités et leurs caractéristiques, leurs prix et leurs commandes appropriées. Formulaires de retour - Un canal important par lequel la communication entre le visiteur du site et son propriétaire, le vendeur et l'acheteur se produisent. Si ce canal de communication ne fonctionne pas ou s'avère pas inconfortable pour un visiteur, il peut refuser de vous appeler, et donc, de l'idée de devenir votre client réel.
L'utilisation régulière et activement utilise activement des formulaires de retour sur votre site en parlera de votre site sans pire que des visites d'analyse.
D'ici, il implique logiquement la conclusion qui a déjà été exprimée ci-dessus - les formes de retour d'information doivent être pratiques et doivent fonctionner!
Il convient de noter que la deuxième partie de cette sortie dépend non seulement de l'exactitude de la programmation. Du côté technique, la forme peut fonctionner parfaitement, mais l'opérateur doit répondre rapidementvenant du site. Sinon, les formulaires de retour d'information seront inutiles. Si l'opérateur rappelle au visiteur en deux jours, la nécessité de commander un produit ou un service dans une personne peut simplement disparaître.
Les formes de retour d'information peuvent être un excellent ensemble ("commander un rappel", "poser une question", "Laisser un commentaire", "Remplissez le formulaire de commande", "Contactez la tête", etc.), et ils peuvent être utilisé pour différentes tâches. Mais l'objectif de tous sera essentiellement seul - pour assurer la connexion du visiteur du site et de son administrateur ou du propriétaire, obtenez les contacts des visiteurs à l'interagir davantage.
Sept conseils note
Rappelant quelques règles simples à prendre en compte lors du développement et de la mise en place de FOS sur le site.
Le formulaire doit être situé pour que le visiteur soit pratique pour le trouver.
Placez la forme dans une place de choix - les visiteurs de votre site ne doivent pas nécessairement faire des efforts pour trouver la forme de formulaire de commentaires entre de nombreux éléments de la page ou de frotter infiniment la page vers le bas.
Traditionnellement, les moules peuvent être placées dans l'en-tête du site Web ou sur la page de contact.
Vous pouvez, si nécessaire, des formulaires clés en double sur le pied de page afin de ne pas forcer les visiteurs qui ont examiné la page entière, faites-la défiler à nouveau:
S'il y a des pages avec des produits ou des services auxquels une offre spéciale et un visiteur peuvent l'obtenir via une commande en ligne, placez un formulaire d'appel rapide ou une conception de commande sur cette page.
De plus, cela vous permettra de "accrocher" un visiteur qui est déjà intéressé par le produit ou le service. Le visiteur a examiné la description, la garantie, les prix, décida que le produit ou le service était approprié pour lui et que nous l'offrons immédiatement, sans quitter cette page, laissez une demande d'ordre de commander ce service.
Le formulaire doit être affiché et fonctionner également correctement sur tous les périphériques et dans tous les navigateurs.
Ou brièvement - Vérifiez les formulaires de retour croisés croisés et de la plate-forme multiples sur votre site. Le formulaire peut être perceptible et pratique à remplir d'un ordinateur portable ou d'un ordinateur fixe, mais sur la tablette, le champ de saisie de données peut être trop étroit et inconfortable pour effectuer du texte sur l'écran tactile. Le client va-t-il alors essayer d'essayer de faire votre preuve au fil du temps pour vous contacter? La réponse est évidente.
La forme doit être brève et compréhensible.
Qu'est-ce que ça veut dire? La forme ne doit pas être constituée d'un grand nombre de champs ou de stades de remplissage. À moins que, bien sûr, il n'y a pas de besoin difficile. Les gens s'efforcent de simplifier la simplicité, ils ne veulent pas passer beaucoup de temps à comprendre et à remplir dix mille champs.
Si le service implique la réception d'informations assez détaillées, simplifiez la tâche au client (si elle est bien sûr peut-être). Sélectionnez plusieurs champs de clé à remplir:
Il semble plus pratique que, par exemple:
Il est préférable de rappeler et verbalement pour clarifier tout ce dont vous avez besoin, mais pour faciliter le visiteur de remplir le formulaire. Et augmentant ainsi les chances de vous contacter!
Poursuivre le sujet de la clarté, faites attention au fait que la forme a un titre - «Commandez un rappel», «Ordre de l'appel de mesureur», «Ordre de la consultation gratuite», etc. Le même titre est préférable de dupliquer dans les alertes électroniques qui proviendront du formulaire à votre courrier. Ensuite, non seulement le visiteur de votre site ne confond pas et n'oubliera pas l'application, qu'est-ce qu'il en fait exactement. Mais vous obtenez vous-même des données claires, quelles informations intéressées par le visiteur qui a quitté la demande. Cela aidera à naviguer rapidement avec une communication supplémentaire avec le visiteur et construire correctement un dialogue.
La forme doit avoir un design agréable et pratique.
Tous les champs doivent être clairement visibles. S'il y a beaucoup de couleurs lors de la création d'une forme de conception, il convient de faire attention à ce qu'il n'y a pas trop à être combiné et non trop brillant. Un homme de remplissage de l'homme ne devrait pas filtrer leur vue. La même chose s'applique à la sélection de la couleur pour les messages texte.
Il vaut mieux éviter la combinaison de sombre sur le noir. Si, par exemple, sur un fond bleu foncé, vous ferez une inscription rouge foncé ou vert foncé "Votre message envoyé", il ne sera tout simplement pas visible.
Le formulaire doit contenir un appel à l'action.
Un petit code à barres appelant le visiteur à faire ou à compléter l'action. Dans notre cas, envoyez un message du site!
En outre, il est préférable de mettre en évidence le bouton avec contraste. En collaboration avec un appel à l'action, cela rendra cela notable et attirera l'attention du visiteur.
Le formulaire doit être facilement plié.
Donc, la forme est facile à trouver, elle a une conception agréable, pratique pour le remplissage. Quoi d'autre?
N'oubliez pas de demander aux développeurs d'ajouter «croix» au formulaire afin que vous puissiez le fermer. Ou configurer le formulaire de pliage automatique après le remplir.
Il semble qu'une bagatelle et la photo globale puisse être chantée.
Par exemple, le visiteur a laissé une application sur le site et souhaite revenir à la visualisation du site. MAIS! Le formulaire est suspendu, ne disparaît pas comment le fermer - ce n'est pas clair. Ou une autre option - le visiteur a changé d'avis pour écrire une demande et a décidé de s'appeler lui-même. Cela peut être désagréable.
Configuration d'un message de réponse.
Quelque chose comme ca…
Une personne qui a envoyé un message veut être sûr que son message sera reçu par vous et examiné. Techniquement, la configuration d'alerte automatique ne prend pas beaucoup de temps, mais renforcera la confiance du visiteur dans le fait que son message ne sera pas laissé sans réponse. Ceci est généralement utilisé dans ces formes où vous devez spécifier votre email lors du remplissage. Cependant, les services modernes vous permettent de personnaliser les alertes automatiques et via SMS.
Résumé
Nous avons beaucoup de subtilités et d'autres parties: vous pouvez expérimenter avec la forme et la conception, vous pouvez dessiner un horaire discret sur le sujet, etc. Mais les critères de base ne changent pas. À tout ce qui précède, je tiens à ajouter un grand, mais un souhait important - vérifier périodiquement le fonctionnement des formulaires de retour sur le site. Les échecs techniques ne devraient pas être un obstacle à votre entreprise!
Salut les gars. En contact de Seryoga. Je sais que je n'ai pas écrit depuis longtemps - choses, choses ... et maintenant, pour être honnête, il n'y a pas de temps du tout. Et nous ne ferons pas la forme dans ma leçon, mais selon les leçons de mon ami - Krotov Romana.
Créer un formulaire de retour pour le site Nous serons systématiquement. Par conséquent, cet article sera divisé en 3 leçons.
Nous venons de commencer dans HTML et créons un gestionnaire PHP pour envoyer des lettres. Tout sera systématiquement, à partir de zéro et au résultat. Donc, tout ce que vous comprenez et que vous avez pu intégrer vous-même les bons champs vous-même.
Roma vous montrera comment faire Ajax-télécharger. C'est-à-dire, envoyez des données du formulaire sans redémarrer la page. Quoi, vous voyez, très pratique et moderne.
Eh bien, dans la troisième (La leçon se prépare - plus tard ici sera le lien)Nous allons construire une vérification de validation. Navigateur non outils, mais avec l'aide de scripts spéciaux.
Vidéo 1. Création d'un formulaire de retour pour le site.
Prêter attention! Que la forme gagnée - il est nécessaire que votre support d'hébergement PHP.
Si vous avez des questions sur des moments incompréhensibles par écrit un gestionnaire de formulaire pour envoyer des lettres - n'hésitez pas, demandez-leur dans les commentaires.
Code de la leçon pour créer un formulaire de commentaires
C'est ce qui s'est passé à la fin dans le fichier index.php
Je vous rappelle que cela contient formulaire de retour simple. Sans inscription ni autres toxicomanes. Qu'est-ce qui ne vous chargerait pas avec des informations supplémentaires.
Soumettre le contenu du fichier.php:
Voici une vérification de base du formulaire sur la plénitude, quels que soient les messages vides. Si tout "hotte" - la lettre va. Et transmettre à la page de notification de page de la réussite de la lettre.
Si (! Vide ($ _ post [post ["nom"]) et! Vide ($ _ POST ["[" EMAIL "])) et! Vide ($ _ POST"]))) ($ Headers \u003d "de: Mole Romance "." Répondre à: [Email protégé] "." X-mailer: php / ". Phpversion (); $ thème \u003d" nouveau message du site "; $ lettre \u003d" Données de message: "$ lettre. \u003d" Nom: "Nom:" . $ _Post ["nom"]; $ lettre. \u003d "Email:" $ _ post ["Email"]; $ lettre. \u003d "TÉLÉPHONE"]; $ lettre. \u003d "Message. : ". $ _ Post [" message "]; si (mail (" [Email protégé]", $ thème, $ lettre, $ Headers)) (en-tête (" Emplacement: /Testform/Thankyou.php ");) inon (en-tête (" Emplacement: / Testform ");)))) test de test ");)
Eh bien, la page elle-même ne voit pas le point ici pour poster ici. Il existe une structure de base du document HTML et une seule ligne du texte.
L'une des tâches les plus courantes dans la pratique est de mettre en œuvre la forme de retour d'information. Tobash écrivant son code HTML, la concevant sur CSS, créant un script PHP qui gérerait les données reçues de l'utilisateur et les a envoyées à notre courrier, rédigeant un script JS qui vérifierait le formulaire pour entrer de manière adéquate les données d'entrée, la protection de la protection L'adéquation de notre spam pour s'assurer que notre boîte aux lettres ne tombait pas d'attaques de robots.
Tous les moments ci-dessus seront pris en compte dans notre revue et commentés en détail.
Nous commençons donc à créer un formulaire de commentaires:
Html
Tout d'abord, nous écrivons du code HTML, il est défini sur des champs qui rempliront l'utilisateur. Ils continueront d'être émis. Le code de code ressemble à ceci:
< form method= "post" action= "mail.php" > < div class = "left" > < label for = "name" > Nom: < input maxlength= "30" type= "text" name= "name" /> < label for = "phone" > Téléphone: < input maxlength= "30" type= "text" name= "phone" /> < label for = "mail" > E-mail: < input maxlength= "30" type= "text" name= "mail" /> < div class = "right" > < label for = "message" > Un message: < textarea rows= "7" cols= "50" name= "message" > < input type= "submit" value= "Envoyer" />
Et visuellement cela ressemble à ceci:
Je suis d'accord, alors que tout est laid et que rien n'est clair, mais nous venons de commencer.
Considérez les détails du code ci-dessus:
< form method= "post" action= "mail.php" > …
Pour créer un formulaire, vous devez utiliser la balise de formulaire. C'est lui qui détermine le début et la fin du formulaire pour l'interprète de code. Il, comme n'importe quelle tag, dispose d'un ensemble d'attributs, mais les formes obligatoires ne constituent que deux, il s'agit d'une méthode (méthode d'envoi d'une demande au serveur, pour les formulaires d'utilisation) et action (indique le chemin d'accès à la remise des formulaires. Le fichier, spécifiquement dans ce fichier contiendra un script PHP, qui sera envoyé au courrier saisi par l'utilisateur, dans notre cas, nous voyons que ce fichier s'appelle mail.php et il réside dans le même répertoire de site comme page en question. ).< input maxlength= "30" type= "text" name= "name" />
Ensuite, nous suivons la place. Il s'agit des champs de formulaire réels eux-mêmes dans lesquels les utilisateurs entreront dans les informations dont vous avez besoin (type \u003d "Texte" indique que ce sera le texte). L'attribut Maxlength indique le nombre de caractères pouvant entrer l'utilisateur dans ce formulaire de champ. L'attribut le plus important est le nom - il spécifie le nom d'un champ particulier. C'est sur ces noms dans le futur script PHP traitera les informations qui y sont entrées. Si vous le souhaitez, vous pouvez toujours définir l'attribut d'espace réservé, qui affiche le texte à l'intérieur du champ en train de disparaître lors de l'installation du curseur à l'intérieur. L'un des problèmes de playsholder est qu'il n'est pas pris en charge par de vieux navigateurs.< label for = "name" > Nom:
Utilisé si nous avons refusé des espaces réservés. La signature de champ habituelle, l'attribut de formulaire rapporte quel spécifiquement le champ inclut cette signature. La valeur du champ d'intérêt pour nous est indiquée par le nom.< textarea rows= "7" cols= "50" name= "message" >
De plus, lorsque l'entrée est destinée à être administrée par les informations de l'utilisateur, seule cette heure est affinée pour les messages longs. Les lignes spécifient la taille du champ dans les cordes, les cols en caractères. En général, ils fixent la hauteur et la largeur de notre champ.< input type= "submit" value= "Envoyer" />
Le fait que ceci est un bouton d'envoi d'un formulaire indique que le type \u003d "Soumettre" et la valeur définit le texte qui sera à l'intérieur de ce bouton.< div class = "right" >
Utilisé uniquement pour une formulaire de conception visuelle supplémentaire.
CSS.
Pour que notre formulaire de commentaires soit présumé, elle doit être émise. Pour obtenir le résultat suivant:
Nous avons utilisé ce code:
forme (arrière-plan: # f4f5f7; rembourrage: 20px;) formulaire. Gauche, forme. Droite (Affichage: Inline- Bloc; Vertical - Align: Haut; Largeur: 458px;) Formulaire. Droite (Rembourrage - gauche: 20px;) Étiquette (Affichage: Bloc; Taille de la police: 18px; Text- Align: Centre; Marge: 10px 0PX 0PX 0PX;) Entrée, Texture: 1px Solid # 82858D; Rembourrage: 10px; Taille de la police: 16px; largeur: 436px;) textarea (hauteur: 98px; marge-bas: 32px;) entrée [type \u003d "Soumettre"] (largeur: 200px; flotteur: non Aucun; Fond: # 595B5F; Couleur: #fff; Texte- Transformation: majuscule;)
En détail pour peindre CSS, je ne vois pas le point, je voudrais attirer votre attention uniquement aux points clés:
- N'écrivez pas l'enregistrement pour chaque balise dans le formulaire. Essayez de construire vos sélecteurs de sorte qu'une paire de lignes de code apporte tous les éléments dont vous avez besoin.
- N'utilisez pas de lignes et créez des trindages, des balises supplémentaires par type < br>, < p> Et ainsi de suite, avec ces tâches, CSS s'adapte parfaitement à la propriété d'affichage: bloc et marge avec rembourrage. Plus sur pourquoi ne pas utiliser < br> Dans la mise en page, vous pouvez lire dans l'article Tag BR, et est-il nécessaire? .
- N'utilisez pas la disposition de la table pour les formulaires. Cela contredit la sémantique de cette balise et les moteurs de recherche aiment le code sémantique. Afin de former une structure de document visuel, nous avons suffisamment de balises div, et les propriétés d'affichage définies par CSS: Inline-Block (construit des blocs dans une rangée) et vertical-align: haut (ne leur permet pas de courir autour du Écran), nous leur demandons la hauteur nécessaire et le tourisme, rien superflu et tout est situé comme nous en avons besoin.
Pour ceux qui veulent sauver leur temps sur la conception du site, je peux vous conseiller d'utiliser des frameworks CSS lors de la création de sites, en particulier d'auto-écrits. Mon choix dans ce plan est Twitter Bootstrap. La leçon sur la conception des formes avec son utilisation peut être visualisée.
Php.
Eh bien, il est temps de faire de notre forme réalisable.
Nous allons dans notre répertoire racine du site et créons un fichier mail.php là, auquel nous avons précédemment indiqué le chemin dans l'attribut de formulaire de la balise de formulaire.
En fin de compte, son code ressemblera à ceci:
Son numéro: "$ téléphone."
Son courrier: "$ mail. "
Son message: ". $ Message,); Écho. "Votre message a été envoyé avec succès!
Vous recevrez la réponse bientôt
$ arrière "; sortir; ) Sinon (echo; sortie;)?\u003e
La discussion sur les parties HTML et CSS de ce document peut être ignorée. En substance, il s'agit de la page habituelle du site que vous pouvez organiser à votre demande et à votre nécessité. Considérez la partie la plus importante de celle-ci - Script de traitement de formulaire PHP:
$ arrière \u003d "
\\ "Javascript: historique.back () \\"\u003e revenir
" ;Nous créons un lien pour cette chaîne pour revenir à la page précédente. Comme nous ne le savons pas à l'avance, quelle page l'utilisateur tombera à ce sujet, cela se fait avec une petite fonction JS. À l'avenir, nous ferons simplement référence à cette variable pour la retirer dans les endroits dont nous avons besoin.
si (! vide ($ _post ["nom"])) et! vide ($ _post ["Téléphone"]) et! vide ($ _Post ["mail"]) et! vide ("Message"])) ( // une partie inboard du gestionnaire ) Sinon (écho "Envoyer un message, remplissez tous les champs!; sortir; )
Ici, nous vis de la forme de la forme sur la plénitude des champs. Comme vous l'avez deviné, en termes de $ _Post ["nom"] dans des citations, nous écrivons la valeur de l'attribut Nom de notre incontin.
Si tous les champs sont remplis, le script commencera à traiter les données dans sa partie intérieure, mais si au moins un champ n'a pas été rempli, le message sera affiché avec la demande de remplissage de tous les champs de formulaire Echo »pour envoyer un message de remplissage Tous les champs! $ Back "et référence pour revenir à la page précédente, que nous avons créé la toute première chaîne.
Dale Insérer dans l'intérieur du gestionnaire de formulaire:
$ nom \u003d bordure (strip_tags ($ _post ["nom"])); $ Téléphone \u003d bordure (strip_tags ($ _post ["téléphone"])); $ Mail \u003d bordure (strip_tags ($ _Post ["mail"])); $ Message \u003d Garniture (Strip_tags ($ _Post ["message"]));
Ainsi, nous avons nettoyé les données saisies par l'utilisateur à partir de balises HTML et de lacunes inutiles. Cela nous permet de vous protéger d'obtenir un code malveillant dans les messages envoyés à nous.
Les chèques peuvent être compliqués, mais c'est déjà à votre demande. La protection minimale du côté serveur que nous avons déjà définie. De plus, nous ferons du côté du client en utilisant JS.
Il n'est pas recommandé de refuser complètement de protéger le formulaire du côté serveur en faveur de JS, car il est extrêmement rare, mais les unicumes se trouvent avec le JS déconnecté dans le navigateur.
Après avoir nettoyé les balises, ajoutez l'envoi d'un message:
poster ( "[email protected]",
"Lettre avec adresse_iesight""Je t'ai écrit:". $ Nom. "
Son numéro: "$ téléphone."
Son courrier: "$ mail. "
Son message: ". $ Message, "Type de contenu: Texte / HTML; Charset \u003d Windows-1251")
;
C'est cette ligne et est engagé dans la formation et nous envoie un message. Il est rempli comme suit:
- "[email protected]" - Ici entre les citations Insérez votre courrier
- "Lettre avec l'adresse_name" fait l'objet du message qui viendra au courrier. Vous pouvez écrire n'importe quoi ici.
- "Vous avez écrit:" $ nom. " < br /> Son numéro: "$ téléphone." < br /> Son courrier: "$ mail." < br /> Son message: "Message $ - Nous formons le texte du message lui-même. Nom $ - Insérez les informations fournies par l'utilisateur par l'interjection des champs à partir de l'étape précédente, dans les guillemets décrivant ce que cela signifie ce champ, TAG < br /> Nous faisons le transfert de la ligne afin que le message soit généralement lisible.
- Type de contenu: Texte / HTML; Charset \u003d Windows-1251 - À la fin, une indication claire du type de données de données transmises dans le message et son codage.
IMPORTANT!
Codage spécifié dans la "tête" du document ( < meta http- equiv= "Content-Type" content= "Texte / HTML; Charset \u003d Windows-1251" /> ), Encodant du type de contenu: Texte / HTML Message; Charset \u003d Windows-1251 et en général, le codage du fichier PHP doit correspondre autrement "Krakoyarbra" sera affiché au lieu de lettres russes ou anglaises.
Beaucoup n'indiquent pas le codage du message envoyé explicitement, mais sur certains clients de courrier, à cause de cela, il peut y avoir des problèmes dans le futur (des lettres illisibles viennent au bureau de poste), donc je le recommande de l'indiquer.
Vérification du formulaire pour des données adéquates
Pour que les utilisateurs ne rigolent pas dans les champs de l'inattention et de remplir tout ce qui est nécessaire pour vérifier correctement les données d'entrée.
Cela peut être fait à la fois par PHP sur le côté serveur et sur le JS du côté du client. J'utilise la deuxième option, car une personne peut donc découvrir immédiatement ce qu'il n'a pas correctement et corrigé l'erreur sans effectuer des transitions supplémentaires sur les pages.
Insérez le code de script dans le même fichier, où nous avons une partie HTML du formulaire. Pour notre incident, cela ressemblera à ceci:
< script> La fonction de contrôle de fonction (formulaire) (nom de var \u003d formulaire. Nom. Valeur; Var N \u003d Nom. Correspondance (/ ^ [A- ZA- ZAZAYAY] * [A- ZA- YAA- I] + $ /); Si (! N) (alerte ( "Le nom est saisi de manière incorrecte, veuillez corriger l'erreur"); Retourner faux; ) Var Phone \u003d Formulaire. Téléphoner. Valeur; Var p \u003d téléphone. Match (/ ^ [0 - 9 +] [0 - 9 -] * [0 - 9 -] + $ /); Si (! P) (alerte ( "Le téléphone est inscrit de manière incorrecte"); Retourner faux; ) Var mail \u003d formulaire. Poster. Valeur; Var m \u003d mail. Match (/ ^ [a- za- z0- 9] [A- ZA- Z0- 9 \\. _-] * [A- ZA- Z0- 9 _] * @ ([A-ZA- Z0- 9] + ([A- ZA-Z0- 9 -] * [A- ZA-Z0- 9] +) * \\.) + [A- ZA- Z] + $ /); Si (! m) (alerte ( "E-mail entré incorrectement, veuillez corriger l'erreur"); Retourner faux; ) Retourne vrai; )
Eh bien, maintenant l'analyse habituelle:
Pour, pour cliquer sur le bouton Envoyer, nous avons testé Nous masquons le lancement de notre script sur la balise de formulaire:
< form method= "post" action= "mail.php" onSubmit= "return checkForm(this)" >
Maintenant, sur des points, nous prenons la composition de la vérification:
Comme vous pouvez le remarquer, un tel contrôle de mini est écrit pour chacun de nos champs. Une inspection sur un champ que j'ai attribuée dans une capture d'écran avec une place rouge, dans d'autres domaines, il a une structure similaire et s'il est nécessaire d'ajouter un champ ou de le supprimer, vous pouvez maintenant le faire facilement.
