Slik oppretter du en Ajax-basert HTML5 / CSS3 kontaktskjema
Kontaktskjema er dødelig avgjørende for et hvilket som helst nettsted, da det fungerer som en messenger som sender mening eller forespørsler fra besøkende til webmaster. Det har vært utallige kontaktskjemaer på nettet, men dessverre forklarer de fleste av dem ikke de indre arbeidsdelene, så her kommer en detaljert opplæring for å lære deg å bygge et avansert kontaktskjema fra grunnen avhengig av popteknologien, HTML5 og CSS3.
Med tanke på arten av et nettbasert e-post-kontaktskjema, er vi også pålagt å dykke inn i to separate applikasjonsfelt, som er PHP-backendkoden for sending av e-post og jQuery-funksjoner for rikt brukergrensesnitt. Ved slutten vil vi bli igjen med et fullt dynamisk og funksjonelt kontaktskjema som er skrevet med senere tilpasning i tankene.
Kom i gang nå for å bygge ditt eget avanserte kontaktskjema!
Snarvei til:
- Demo - Få en forhåndsvisning av hva du bygger
- Last ned - Last ned alle filer (php + css)
Strukturering av applikasjonen
For å komme i gang trenger du en type nettserver for å jobbe over. Hvis du kjører en Windows-maskin, er WAMP trolig det beste alternativet. Mac-brukere har et lignende program som heter MAMP, som er like enkelt å installere.
Disse pakkene vil sette opp en lokal server på maskinen din med full tilgang til PHP. Alternativt hvis du eier serverplass eller har full server tilgang til en ekstern plassering, kan du bruke det i stedet. Vi trenger ikke noen MySQL-databaser, noe som bør forenkle ting litt.
Når serveren din er konfigurert opprett en ny mappe for å huse applikasjonen. Du kan nevne dette uansett hva du vil, da det ikke er skadelig eller til og med relatert til sluttproduktet. Mappestrukturen vil bli brukt når du åpner filene dine i en nettleser. Et enkelt eksempel ville være http: //localhost/ajaxcontact/contact.php
La oss bygge våre filer!
Vi vil bare jobbe innenfor 2 kjernefiler. Vi trenger først en kjerne .php fil til hus ikke bare vår søknad logikk, men også frontend HTML markup. Nedenfor er prøvekode hentet fra vår startfil.
HTML5 / CSS Ajax kontaktskjema med jQuery
For å begynne har vi skrevet en enkel overskriftsavdeling til vårt dokument. Dette inkluderer en generell Doctype-erklæring for HTML5 og noen HTML / XML-dokumentelementer. Disse er ikke akkurat påkrevd, men vil lette gjengivelsesprosessen i eldre (og nyere) nettlesere. Også det gjør aldri vondt for å tilby mer informasjon.
Litt lenger nede kan vi se 2 linjer rett før sluttkurset. Den første inkluderer vår jQuery-skript fra den elektroniske Google Code Repository. Dette kreves for at dynamiske sidefeil skal fungere. Rett under dette har vi inkludering av en grunnleggende CSS-dokument som inneholder alle våre sidestiler.
Inne i dokumentkroppen har vi noen få inneholdende divisjoner holde et hovedkontaktskjema. Dette huser 3 inngangselementer for brukerens navn, epostadresse, og personlig melding. HTML-oppslaget er ganske standard og bør ikke skape tankene til noen mellomliggende utvikler.
Din epost ble sendt. Huzzah!
Her har vi en grunnleggende PHP betinget kode nestet innenfor noen få sider. Dette kontrollerer den angitte verdien av en variabel som heter
$ emailSentog hvis det er lik sant, vil det vise en suksessmelding.Inne i vårt skjema HTML
De ellers erklæringen er hva som vil løpe på første side belastning siden det ikke vil være noe innhold å sende i utgangspunktet. Inne her vil vi inkludere a kort samling av formelementer og a send inn knappen.
Feil ved innsending av skjemaet
Du har kanskje lagt merke til at det er en annen betinget blokk rett etter startskjemaet. Dette kontrollerer for en variabel som heter $ hasError og vil vise en feilmelding ved bekreftelse. Denne tilbakekallingsmetoden er brukes bare hvis JavaScript er deaktivert i nettleseren og kan dermed ikke generere dynamiske feil.
Helt ned kan vi finne individuelle PHP-variabler blir sjekket. Uttalelsene regulerer om skjemaet allerede er sendt med bare delvise mengder data som er fylt inn. Dette er et annet fallback-system som viser innholdet i feltene som allerede er fylt ut - et fint triks for riktig brukeropplevelse.!
Rett etter skjemaets gjennomføring er de få jQuery-funksjoner vi har skrevet. Vi vil snakke over disse førstene fordi de er standard implementering på pageload. Men hvis nettleseren ikke godtar JavaScript, kan vi som standard stole på vår PHP-kode.
Åpning til jQuery
Den enkleste måten å komme i gang med å snakke om dette emnet, er å dykke rett inn. Jeg vil bryte ned individuelle blokker linje for linje slik at du kan se hva skriptet faktisk sjekker etter.
Men hvis du går seg vill bare gå gjennom prosjektkodens filer. Alle de fulle blokkene er forhåndskrevne og godt dokumentert på jQuery-nettsiden. For å komme i gang åpner vi vår kode som ligner på alle andre:
Hvis du er kjent med callbacks du kan legge merke til post() funksjonen har et innebygd sett med parametere. Tilbakeringinger er mindre funksjoner som kalles på responsen av data fra en annen funksjon.
Så for eksempel når vår jQuery.post () funksjon vellykket skyter en e-post det vil kalle sin egen interne funksjon for å vise skyve animasjonen. Alt denne koden kan skrives i sin egen blokk og flyttes andre steder. Men for denne tutorials skyld er det mye lettere å skrive tilbakeringingen som en inline-funksjon.
Bryter forbi PHP
Den siste hindringen å nevne er logikk bak PHP-prosessoren vår. Dette er backend-systemet som faktisk vil ring en postfunksjon og send ut meldingen. Alt koden som brukes i eksemplene under finner du direkte på toppen av vår hoved .php fil, før noen HTML-utgang.
Det er også noen interne stiler som friske opp siden. Det er ikke noe spesielt nytt her, så vi vil ikke gå inn i noen av detaljene. Men den styles.css Dokumentet er inkludert i prosjektkoden og inneholder rudimentære CSS3 teknikker.
For å starte åpner vi vår PHP-klausul og sjekker hvis skjemaet ble til og med sendt inn. De POST variabel “innsendt” var faktisk et skjult inntastingsfelt lagt til i slutten av skjemaet. Det er en nyttig måte å sjekk om brukeren har sendt inn noe likevel, slik at vi ikke kaster bort serverressurser.
Etter dette har vi 3 separate hvis / annet uttalelse sjekker for å se hvis hvert inntastingsfelt er fylt ut. Jeg vil ikke inkludere hver eneste logikk her siden de er alle veldig repeterende i naturen. Men for å gi deg et kort eksempel har jeg tatt med e-postbekreftelsesklausulen nedenfor:
// trenger gyldig e-post hvis (trim ($ _ POST ['email']) === ") $ emailError = 'Glemt å skrive inn din e-postadresse.'; $ hasError = true; annet hvis (! preg_match ("/^[[:alnum:]][a-z0-9_.-]*@[a-z0-9.-]+\.[az]2,4$/i", trimme ($ _POST ['email']))) $ emailError = 'Du har skrevet inn en ugyldig e-postadresse.'; $ HasError = true; else $ email = trim ($ _ POST ['email']);PHP vil trimme alle hvite mellomrom fra verdien og se om noe er igjen. Hvis så har vi en detaljert Regelmessig uttrykk (Regex) for å se om brukerens inntastingsstreng samsvarer med et e-postmønster.
Du trenger absolutt ikke å forstå hvordan
preg_match ()Fungerer for å bygge dette skriptet. Det er en nyttig funksjon til bestemme regler og krav for en vellykket datatype, men kommandoer avansert programmeringskunnskap for å virkelig forstå. I dette scenariet sikrer vi at brukeren bare legger inn et utvalg av få tegn, inkluderer en @ symbol etterfulgt av 2-4 tegn representerer a Toppnivå Domene.Etter alle våre logikkpass og vi returnerer ingen feil, er det på tide å sende meldingen vår! Denne koden vil angi individuelle variabler for å tilpasse vår e-postmelding og sette opp noen postoverskrifter for prosessen.
// uten feilfeil, la oss sende e-post nå! hvis (! isset ($ hasError)) $ emailTo = '[email protected]'; $ subject = 'Sendt melding fra'. $ name; $ sendCopy = trim ($ _ POST ['sendCopy']); $ body = "Name: $ name \ n \ nEmail: $ email \ n \ nKommentarer: $ kommentarer"; $ headers = 'From:'. ' <'.$emailTo.'>'. "\ r \ n". 'Svare på: ' . $ E-post; post ($ emailTo, $ subject, $ body, $ headers); // sett vår boolske ferdigstillingsverdi til TRUE $ emailSent = true;Hvis du lurte på hvordan koden skulle finne ut din e-postadresse, er dette den delen du skal fylle ut. Den første variabelen i vårt sett heter
$ emailtoog bør inneholde hvilken som helst e-postadresse, som kommer til å motta meldingen.Inne i vår
$ kroppenvariabel vi dra nytte av\ nAvgrensning for å legge til nye linjer i meldingen. Dette legger til små plasseringer for senderens navn, epostadresse, etterfulgt av en pause for deres meldingsinnhold. Selvfølgelig kan du tilbringe tid på å pryde opp skjermen, men denne strukturen fungerer fint.Konklusjon
Dette lukker vår opplæring for et avansert kontaktskjema. Hvis du vil style dine elementer i forhold til min, kan du sjekke ut mitt eksempel styles.css innenfor prosjektkoden. Siden er imidlertid strukturert godt nok til at du kan utforme ditt eget utseende og føle deg veldig enkelt.
Du er velkommen til å laste ned kildekoden og undersøke hva jeg har gjort litt nærmere. Det er godt å følge en veiledning, men å ha direkte tilgang til prosjektkilden kan være uvurderlig. Jeg har også tatt med et kort stilark for å gjøre tilpasninger en bris, takk for visningen din!
