Comment créer un formulaire de contact HTML5 / CSS3 basé sur Ajax
Le formulaire de contact est essentiel pour tout site Web, car il agit comme un messager qui transmet l’avis ou les demandes des visiteurs au webmaster. Il y a eu d'innombrables formulaires de contact sur le Web, mais malheureusement, la plupart d'entre eux ne vous expliquent pas les éléments internes, alors voici un tutoriel détaillé pour vous apprendre à créer un formulaire de contact avancé à partir de rien, basé sur la technologie pop, HTML5 et CSS3.
Compte tenu de la nature d'un formulaire de contact de courrier électronique basé sur le Web, nous devons également plonger dans deux champs d'application distincts: le code de base PHP pour l'envoi de courrier électronique et les fonctions jQuery pour une interface utilisateur enrichie. À la fin, il nous restera un formulaire de contact entièrement dynamique et fonctionnel, écrit avec une personnalisation ultérieure..
Commencez dès maintenant à créer votre propre formulaire de contact avancé!
Raccourci vers:
- Démo - Obtenez un aperçu de ce que vous construisez
- Télécharger - Télécharger tous les fichiers (php + css)
Structurer l'application
Pour commencer, vous aurez besoin d’un certain type de serveur Web. Si vous utilisez une machine Windows, WAMP est probablement votre meilleure option. Les utilisateurs de Mac ont un programme similaire nommé MAMP, qui est tout aussi facile à installer..
Ces paquets vont configurer un serveur local sur votre machine avec un accès complet à PHP. Alternativement, si vous possédez un espace serveur ou si vous avez un accès complet au serveur dans un emplacement distant, vous pouvez utiliser cet emplacement. Nous n’avons pas besoin de bases de données MySQL, ce qui devrait simplifier un peu les choses..
Une fois votre serveur configuré créer un nouveau dossier pour héberger l'application. Vous pouvez nommer ce que vous voulez, car ce n'est pas préjudiciable ni même lié au produit final. La structure de dossiers sera utilisée lorsque vous accédez à vos fichiers dans un navigateur Web. Un exemple simple serait http: //localhost/ajaxcontact/contact.php
Construisons nos fichiers!
Nous ne travaillerons que dans 2 fichiers principaux. Nous allons d'abord avoir besoin d'un noyau .php fichier pour héberger non seulement notre logique d’application, mais également le balisage HTML frontal. Vous trouverez ci-dessous un exemple de code tiré de notre fichier de départ..
Formulaire de contact HTML5 / CSS Ajax avec jQuery
Pour commencer, nous avons écrit une section de titre simple dans notre document. Cela comprend un général Déclaration de type de document pour HTML5 et certains éléments de document HTML / XML. Celles-ci ne sont pas exactement nécessaires, mais faciliteront le processus de rendu dans les navigateurs plus anciens (et les plus récents). En outre, il n'est jamais mauvais d'offrir plus d'informations.
Un peu plus bas, nous pouvons voir 2 lignes juste avant notre balise de fermeture. Le premier comprend notre Script jQuery du référentiel de codes Google en ligne. Cela est nécessaire pour que nos erreurs de page dynamiques fonctionnent. Directement au-dessous de cela, nous avons inclus un élément de base Document CSS contenant tous nos styles de page.
Dans notre corps de document, nous avons quelques contenant des divisions refuser un formulaire de contact principal. Il contient 3 éléments d’entrée pour le nom d'utilisateur, adresse électronique, et message personnel. Le balisage HTML est assez standard et ne devrait pas embrouiller l’esprit des développeurs intermédiaires..
Votre email a été envoyé. Huzzah!
Ici nous avons une base Code conditionnel PHP imbriqué dans quelques conteneurs de page. Ceci vérifie la valeur définie d'une variable nommée
$ emailEnvoyéet si égal à true, il affichera un message de réussite.Dans notre formulaire HTML
le autre instruction est ce qui sera exécuté lors du chargement de la première page car il n’y aura pas de contenu à envoyer au départ. À l'intérieur, nous allons inclure un brève collection d'éléments de formulaire et un bouton de soumission.
Erreur de soumission du formulaire
Vous avez peut-être remarqué qu'il y a un autre bloc conditionnel directement après le formulaire de départ. Ceci vérifie une variable nommée $ hasError et affichera un message d'erreur lors de la confirmation. Cette méthode de secours est utilisé uniquement si JavaScript est désactivé dans le navigateur et ne peut donc pas générer d'erreurs dynamiques.
Tout en bas nous pouvons trouver variables PHP individuelles en cours de vérification. Les instructions contrôlent si le formulaire a déjà été soumis avec seulement des quantités partielles de données. Ceci est un autre système de secours qui affiche le contenu des champs déjà remplis - une astuce intéressante pour une expérience utilisateur correcte.!
Juste après la fin de notre formulaire, quelques-uns Fonctions jQuery nous avons écrit. Nous en parlerons d’abord, car c’est l’implémentation par défaut de pageload. Cependant, si le navigateur n'accepte pas le JavaScript, nous pouvons par défaut utiliser notre code PHP..
Ouverture à jQuery
Le moyen le plus simple de commencer à parler de ce sujet serait de plonger directement dans le sujet. Je décompose chaque bloc individuellement, afin que vous puissiez voir ce que le script recherche réellement..
Cependant si vous vous perdez juste examiner les fichiers de code du projet. Tous les blocs complets sont pré-écrits et bien documentés sur le site Web de jQuery. Pour commencer, nous ouvrons notre code similaire à n'importe quel autre:
Si vous connaissez rappels vous remarquerez peut-être le poster() la fonction a un ensemble intégré de paramètres. Les callbacks sont des fonctions plus petites appelées sur la réponse des données d'une autre fonction.
Ainsi, par exemple, lorsque notre jQuery.post () function tire avec succès un e-mail, il appellera sa propre fonction interne pour afficher l'animation glissante. Tout ce code pourrait être écrit dans son propre bloc et déplacé ailleurs. Cependant, dans l’intérêt de ce tutoriel, il est beaucoup plus facile d’écrire le rappel sous forme de fonction inline.
Dépasser notre PHP
Le dernier obstacle à mentionner est le logique derrière notre processeur PHP. C’est le système backend qui va réellement appeler une fonction mail et envoyer le message. Tout le code utilisé dans les exemples ci-dessous peut être trouvé directement en haut de notre page principale. .php fichier, avant toute sortie HTML.
Il existe également quelques styles internes qui rafraîchissent la page. Il n'y a rien de particulièrement nouveau ici donc nous n'entrerons pas dans les détails. Cependant, le styles.css le document est inclus dans le code du projet et contient des techniques rudimentaires CSS3.
Pour commencer, ouvrons notre clause PHP et vérifions si le formulaire a même été soumis. le POSTER variable “soumis” était en fait un champ de saisie caché ajouté à la toute fin de notre formulaire. C'est un moyen utile de vérifier si l'utilisateur a soumis quelque chose encore si nous ne gaspillons pas les ressources du serveur.
Après cela, nous avons 3 séparés sinon déclaration vérifiant pour voir si chaque champ de saisie a été rempli. Je n'inclurai pas chaque élément de logique ici car ils sont tous de nature très répétitive. Cependant, pour vous donner un bref exemple, j'ai inclus la clause de vérification de courrier électronique ci-dessous:
// besoin d'un email valide if (trim ($ _ POST ['email']) === ") $ emailError = 'Vous avez oublié d'entrer votre adresse e-mail.'; $ hasError = true; sinon if (! preg_match ("/^[[:alnum: prisre de la vie") (trim ($) _POST ['email']))) $ emailError = 'Vous avez entré une adresse email invalide.'; $ HasError = true; sinon $ email = trim ($ _ POST ['email']);PHP coupera tous les espaces de la valeur et vérifiera s'il reste quelque chose. Si oui, nous avons un détail Expression régulière (regex) pour voir si la chaîne d'entrée de notre utilisateur correspond à un modèle de courrier électronique.
Vous n'avez certainement pas besoin de comprendre comment
preg_match ()travaille pour construire ce script. C'est une fonction utile pour déterminer les règles et les exigences pour un type de données réussi, mais commande des connaissances de programmation avancées à saisir vraiment. Dans ce scénario, nous veillons à ce que l'utilisateur ne saisisse que quelques caractères, inclut un @ symbole suivi de 2-4 caractères représentant un Domaine de premier niveau.Après que toute notre logique soit passée et que nous ne retournions aucune erreur, il est temps d'envoyer notre message! Ce morceau de code définira des variables individuelles pour personnaliser notre message électronique et en configurer en-têtes de courrier pour le processus.
// en cas d'erreur d'échec, envoyons un e-mail maintenant! if (! isset ($ hasError)) $ emailTo = '[email protected]'; $ subject = 'Message soumis de'. $ name; $ sendCopy = trim ($ _ POST ['sendCopy']); $ body = "Nom: $ name \ n \ nEmail: $ email \ n \ nComments: $ comments"; $ headers = 'De:'. ' <'.$emailTo.'>'. "\ r \ n". 'Répondre à: ' . $ email; mail ($ emailTo, $ sujet, $ corps, $ en-têtes); // définit notre valeur d'achèvement booléenne sur TRUE $ emailSent = true;Si vous vous demandiez comment le code allait déterminer votre adresse e-mail, voici la partie à remplir. La première variable de notre ensemble est intitulée
$ emailToet devrait contenir adresse e-mail qui va recevoir le message.À l'intérieur de notre
$ bodyvariable nous profitons de la\ ndélimiteur pour ajouter de nouvelles lignes dans le message. Cela ajoute de petits placements pour le nom de l'expéditeur, adresse électronique, suivi d'une pause pour leur contenu du message. Bien sûr, vous pourriez passer du temps à peaufiner l’affichage, mais cette structure fonctionne très bien..Conclusion
Ceci ferme notre tutoriel pour un formulaire de contact avancé. Si vous souhaitez styler vos éléments par rapport aux miens, vous pouvez consulter mon exemple styles.css dans le code du projet. Cependant, la page est suffisamment bien structurée pour que vous puissiez concevoir très facilement votre propre apparence..
N'hésitez pas à télécharger le code source et à examiner ce que j'ai fait un peu plus près. Il est bon de suivre un tutoriel, mais avoir un accès direct à la source du projet peut s'avérer inestimable. J'ai également inclus une brève feuille de style pour faciliter la personnalisation, merci de votre vue!
