Paradis For Designere Og Utviklere

Slik oppretter du en Ajax-basert HTML5 / CSS3 kontaktskjema

Denne artikkelen er en del av vår "HTML5 / CSS3 Tutorials Series" - dedikert til å gjøre deg til en bedre designer og / eller utvikler. Klikk her for å se flere artikler fra samme serie.

Kontaktskjema er dødelig viktig for ethvert nettsted, da det fungerer som en messenger som passerer opinionen 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. Til slutt vil vi bli igjen med et fullt dynamisk og funksjonelt kontaktskjema som er skrevet med senere tilpasning i tankene.

Kom i gang nå å 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 kjernen .php- fil for å huske ikke bare vår programlogikk, 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-deklarasjon for HTML5 og noen HTML / XML-dokumentelementer. Dette er ikke akkurat nødvendig, 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 inneholder vårt jQuery-skript fra den elektroniske Google Code Repository . Dette kreves for at dynamiske sidefeil skal fungere. Rett under dette har vi inkludering av et grunnleggende CSS-dokument som inneholder alle våre sidestiler.

Innenfor dokumentkroppen har vi et par inneholdende divisjoner som inneholder et hovedkontaktskjema. Dette huser 3 inngangselementer for brukerens navn, e-postadresse og personlig melding . HTML-oppslaget er ganske standard og bør ikke bøffe 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 verdien av en variabel som heter $emailSent og hvis den er ekte, vil den vise en suksessmelding.

Inne i vårt skjema HTML

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 en kort samling av skjemaelementer og en sende-knapp .

Feil ved innsending av skjemaet
 Navn 
 e-post 
 Budskap  <? php hvis (isset ($ _ POST ['comments'])) {if (function_exists ('stripslashes')) {echo stripslashes ($ _ POST ['comments']); } ellers {echo $ _POST ['comments']; }}?>

Du har kanskje lagt merke til at det er en annen betinget blokk direkte etter startskjemaet. Dette kontrollerer for en variabel som heter $hasError og vil vise en feilmelding ved bekreftelse. Denne tilbakekallingsmetoden brukes bare hvis JavaScript er deaktivert i nettleseren og dermed ikke kan generere dynamiske feil.

Helt ned kan vi finne individuelle PHP-variabler som blir sjekket. Uttalelsene regulerer om skjemaet allerede er sendt med kun delvise mengder data som er fylt ut. Dette er et annet fallback-system som viser innholdet i feltene som allerede er fylt ut - et fint triks for riktig brukeropplevelse!

Rett etter skjemaet er de få jQuery-funksjonene vi har skrevet. Vi snakker over disse førstene, siden 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 kutte ned individuelle blokker linje for linje slik at du kan se hva skriptet faktisk sjekker etter.

Men hvis du går deg vill du bare gå gjennom prosjektkodens filer . Alle de fulle blokkene er forhåndskrevne og godt dokumentert på jQuery-nettstedet. For å komme i gang åpner vi vår kode som ligner på alle andre:

Hvis du er kjent med tilbakeringinger, kan du legge merke til post() -funksjonen har et innebygd sett med parametere. Tilbakeringinger er mindre funksjoner som kalles svaret på data fra en annen funksjon .

For eksempel, når vår jQuery.post() -funksjon vellykket skyter en e-post, vil den kalle sin egen interne funksjon for å vise jQuery.post() . All 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 endelige hindringen å nevne er logikken bak PHP-prosessoren. Dette er backend-systemet som faktisk vil ringe en postfunksjon og sende meldingen ut . Alle koden som brukes i eksemplene nedenfor, finner du direkte øverst i vår hovedfile-fil, før noen HTML-utdata.

Det er også noen interne stilarter som friske opp siden. Det er ikke noe spesielt nytt her, så vi vil ikke gå inn i noen av detaljene. Men styles.css- dokumentet er inkludert i prosjektkoden og inneholder rudimentære CSS3-teknikker.

For å starte åpner vi vår PHP-klausul og kontrollerer om skjemaet ble til og med sendt inn . POST- variabelen " sendt " var faktisk et skjult inntastingsfelt lagt til i slutten av skjemaet. Det er en nyttig måte å kontrollere om brukeren har sendt inn noe ennå, slik at vi ikke kaster bort serverressurser.

Etter dette har vi 3 separate hvis / else- setningskontroll for å se om hvert innskriftsfelt 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; } ellers hvis (! preg_match ("/ ^ [[: alnum:]] [a-z0-9 _.-] * @ [a-z0-9 .-] + \. [az] {2, 4} $ / jeg ", trimme ($ _ POST ['email']))) {$ emailError = 'Du skrev inn en ugyldig e-postadresse.'; $ hasError = true; } ellers {$ 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 for å 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 et @ symbol, etterfulgt av 2-4 tegn som representerer et toppnivådomener .

Etter alle våre logikkpass og vi returnerer ingen feil, er det på tide å sende meldingen vår! Denne delen av koden vil angi individuelle variabler for å tilpasse vår e-postmelding og sette opp noen e-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 \ nBeskrivelser: $ 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 settet vårt heter $emailTo og skal inneholde hvilken e-postadresse som skal motta meldingen.

I vår $body benytter vi fordelingen av \n å legge til nye linjer i meldingen. Dette legger til små plasseringer for avsenderens navn, e-postadresse, 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 eksemplet styles.css i 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 opplæring, 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!

Hvordan Gen-X og tusenårsdager har på jobb [Forklaret]

Generasjonsmangfold er selve kjernen i utviklingen av enhver sosial og entreprenørorganisasjon. Tyskerne er for eksempel en så stor fan av denne ideen at de har bygget Mehrgenerationenhaus ( flergenerasjonshus ) over hele landet der mennesker i forskjellige aldre kommer sammen for å dra nytte av generasjonsgapet mellom hverandre .På

(Tekniske og design tips)

10 dyreste kjøp i nyere teknisk historie

Det er mange grunner til at teknikkoppkjøp skjer : å skaffe talent, å stenge en stigende konkurrent, å få tilgang og eierskap til patenter, utstyr, teknologier osv., Og i det minste er det godt fôr til media. Disse oppkjøpene kommer vanligvis med en heftig prislapp, men sannheten er at ikke alle av dem har god avkastning .Til tr

(Tekniske og design tips)