Sådan opretter du en Ajax-baseret HTML5 / CSS3-kontaktformular
Kontaktformular er dårligt afgørende for enhver hjemmeside, da det fungerer som en messenger, der passerer udtalelsen eller forespørgsler fra besøgende til webmaster. Der har været utallige kontaktformer på nettet, men desværre forklarer de fleste af dem ikke de indre arbejdsdele, så her kommer en detaljeret vejledning til at lære dig at opbygge en avanceret kontaktformular fra bunden baseret på pop teknologi, HTML5 og CSS3.
I betragtning af arten af en webbaseret e-mail-kontaktformular er vi også forpligtet til at dykke ind i to separate applikationsfelter, som er PHP backend-koden for at sende e-mail og jQuery-funktioner til en rig brugergrænseflade. Ved afslutningen vil vi blive efterladt af et fuldt dynamisk og funktionelt kontaktformular, der er skrevet med senere tilpasning i tankerne.
Kom nu i gang med at opbygge din egen avancerede kontaktformular!
Genvej til:
- Demo - Få et eksempel på, hvad du bygger
- Download - Download alle filer (php + css)
Strukturering af applikationen
For at komme i gang skal du bruge en slags webserver til at arbejde over. Hvis du kører en Windows-maskine, er WAMP nok din bedste mulighed. Mac-brugere har et lignende program med navnet MAMP, der er lige så nemt at installere.
Disse pakker vil oprette en lokal server på din maskine med fuld adgang til PHP. Alternativt, hvis du ejer serverrum eller har fuld serveradgang til en fjernplacering, kan du bruge det i stedet. Vi behøver ikke nogen MySQL-databaser, som skal forenkle tingene lidt.
Når din server er konfigureret Opret en ny mappe til at hente ansøgningen. Du kan nævne dette uanset hvad du vil have, da det ikke er skadeligt eller endda relateret til det endelige produkt. Mappestrukturen bruges, når du får adgang til dine filer i en webbrowser. Et simpelt eksempel ville være http: //localhost/ajaxcontact/contact.php
Lad os bygge vores filer!
Vi arbejder kun i 2 kernefiler. Vi har først brug for en kerne .php fil til at huske ikke kun vores applikationslogik, men også frontend HTML markup. Nedenfor er prøvekode taget fra vores startfil.
HTML5 / CSS Ajax Kontaktformular med jQuery
For at begynde har vi skrevet en simpel overskriftsafdeling til vores dokument. Dette omfatter en generel Doctype-erklæring for HTML5 og nogle HTML / XML-dokumentelementer. Disse er ikke nøjagtigt nødvendige, men vil lette gengivelsesprocessen i ældre (og nyere) browsere. Det gør det også ondt at tilbyde flere oplysninger.
Lidt længere nede kan vi se 2 linjer lige før vores lukkeoverskrift tag. Den første omfatter vores jQuery script fra online Google Code Repository. Dette kræves for at vores dynamiske sidefejl kan fungere. Lige under dette har vi inkluderingen af en grundlæggende CSS dokument indeholdende alle vores sidestiler.
Inde i vores dokumentkrop har vi nogle få indeholdende divisioner tilbageholdelse af en hovedkontaktformular. Dette huser 3 input elementer til brugerens navn, email adresse, og personlig besked. HTML-markeringen er ret standard og burde ikke bageholde nogen mellemliggende udvikleres tanker.
Din email blev sendt. Huzzah!
Her har vi en grundlæggende PHP betinget kode indlejret inden for et par sider beholdere. Dette kontrollerer den indstillede værdi af en navngivet variabel
$ emailSentog hvis det er sandt, vil det vise en succesmeddelelse.Inde i vores Form HTML
Det andet erklæring er, hvad der vil køre på første side belastning, da der ikke vil være noget indhold at sende oprindeligt. Inde her vil vi inkludere a kort samling af formelementer og a indsende knap.
Fejl ved indsendelse af formularen
Du har måske bemærket, at der er en anden betinget blok umiddelbart efter startformularen. Dette kontrollerer for en navngivet variabel $ hasError og vil vise en fejlmeddelelse ved bekræftelse. Denne tilbagesendelsesmetode er bruges kun, hvis JavaScript er deaktiveret i browseren og kan således ikke generere dynamiske fejl.
Hele vejen ned kan vi finde individuelle PHP variabler bliver kontrolleret. Erklæringerne regulerer, om formularen allerede er indsendt med kun delvise mængder data, der er udfyldt. Dette er et andet back-up-system, der viser indholdet af felter, der allerede er udfyldt - et godt trick for korrekt brugeroplevelse!
Direkte efter vores formular er de få jQuery funktioner vi har skrevet. Vi vil tale om disse først, da de er standard implementeringen på pageload. Men hvis browseren ikke accepterer JavaScript, kan vi som standard stole på vores PHP-kode.
Åbning til jQuery
Den nemmeste måde at komme i gang med at tale om dette emne ville være at dykke lige ind. Jeg nedbryder individuelle blokke line-by-line, så du kan se, hvad scriptet faktisk kontrollerer for.
Men hvis du går tabt lige gennemgå projektkodefiler. Alle de fulde blokke er forhåndskrevne og veldokumenterede på jQuery-webstedet. For at komme i gang åbner vi vores kode som alle andre:
Hvis du er bekendt med tilbagekald du bemærker måske stolpe() funktionen har et indbygget sæt parametre. Tilbagekald er mindre funktioner, der kaldes efter svar fra data fra en anden funktion.
Så for eksempel, når vores jQuery.post () funktion med succes skyder en e-mail, vil den kalde sin egen interne funktion for at vise glidende animation. Al denne kode kan skrives i sin egen blok og flyttes andre steder. Men for denne tutorials skyld er det meget lettere at skrive tilbagekaldelsen som en inline-funktion.
Bryder forbi vores PHP
Den endelige forhindring er at nævne logik bag vores PHP-processor. Dette er backend-systemet, som faktisk vil ring en mail-funktion og send beskeden ud. Al den kode, der anvendes i eksemplerne nedenfor, findes direkte øverst på vores hoved .php fil, før nogen HTML-output.
Der er også et par interne stilarter, der opfrisker siden. Der er ikke noget specifikt nyt her, så vi vil ikke gå ind i nogen af detaljerne. Men styles.css Dokumentet er inkluderet i projektkoden og indeholder rudimentære CSS3 teknikker.
For at starte åbner vi vores PHP-klausul og tjekker hvis formularen endog blev indsendt. Det STOLPE variabel “indsendt” var faktisk et skjult inputfelt tilføjet i slutningen af vores formular. Det er en nyttig måde at Kontrollér, om brugeren har indsendt noget men så spilder vi ikke serverressourcer.
Herefter har vi 3 separate hvis ellers erklæring for at se hvis hvert indtastningsfelt er udfyldt. Jeg vil ikke inkludere hver eneste logik her, da de alle er meget gentagne i naturen. For at give dig et kort eksempel har jeg inkluderet e-mail-bekræftelsesklausulen nedenfor:
// har brug for gyldig email, hvis (trim ($ _ POST ['email']) === ") $ emailError = 'Har du glemt at indtaste din e-mail-adresse.'; $ hasError = true; else if (! preg_match ("/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\.[az]2,4$/i", trim ($ _POST ['email'])))) $ emailError = 'Du indtastede en ugyldig emailadresse.'; $ HasError = true; else $ email = trim ($ _ POST ['email'])PHP vil trimme alt whitespace fra værdien og tjek for at se om der er noget tilbage. Hvis så har vi en detaljeret Regular Expression (Regex) for at se, om vores brugers indtastningsstreng svarer til et e-mail-mønster.
Du skal helt sikkert ikke forstå hvordan
preg_match ()arbejder for at opbygge dette script. Det er en nyttig funktion til bestemme regler og krav til en vellykket type data, men kommandoer avanceret programmering viden til virkelig at forstå. I dette scenario sikrer vi, at brugeren kun indtaster et udvalg af få tegn, indeholder en @ symbol efterfulgt af 2-4 tegn repræsenterer en Top-Level Domain.Efter alle vores logikpas og vi returnerer ingen fejl, er det tid til at sende vores besked! Denne bit kode vil indstille individuelle variabler til at tilpasse vores e-mail-meddelelse og opsætte nogle postoverskrifter til processen.
// uden fejl fejl Lad os e-mail nu! hvis (! isset ($ hasError)) $ emailTo = '[email protected]'; $ subject = 'Indsendt meddelelse fra'. $ name; $ sendCopy = trim ($ _ POST ['sendCopy']); $ body = "Navn: $ navn \ n \ nEmail: $ email \ n \ nComments: $ comments"; $ headers = 'From:'. ' <'.$emailTo.'>'. "\ r \ n". 'Svar til: ' . $ Email; mail ($ emailTo, $ subject, $ body, $ headers); // sæt vores boolske færdiggørelsesværdi til TRUE $ emailSent = true;Hvis du spekulerede på, hvordan koden skulle finde ud af din e-mail-adresse, er dette den del, der skal udfyldes. Den første variabel i vores sæt hedder
$ emailToog bør indeholde, hvilken som helst e-mail-adresse, som vil modtage beskeden.Inde i vores
$ kropvariabel vi drager fordel af\ nafgrænsning for at tilføje nye linjer i meddelelsen. Dette tilføjer små placeringer til afsenderens navn, email adresse, efterfulgt af en pause for deres besked indhold. Selvfølgelig kan du tilbringe tid, der pryder skærmen, men denne struktur fungerer fint.Konklusion
Dette lukker vores vejledning for et avanceret kontaktformular. Hvis du gerne vil style dine elementer i forhold til min, kan du tjekke mit eksempel styles.css inden for projektkoden. Siden er imidlertid struktureret godt nok til at du kan designe dit eget udseende meget nemt.
Du er velkommen til at downloade kildekoden og undersøge, hvad jeg har gjort lidt tættere på. Det er godt at følge en vejledning, men at have direkte adgang til projektkilden kan være uvurderlig. Jeg har også inkluderet et kort stylesheet for at gøre tilpasninger til en brise, tak for din visning!
