Share
Hva du skal skapeI denne veiledningen vil jeg gå over trinnene for å skape et kontaktskjema for bruk, ved å benytte den stadig populære front-end Framework Bootstrap, i kombinasjon med AJAX og PHP. Derfra kan vi utforske noen ekstra funksjoner, for eksempel noen fancy CSS-animasjoner med animate.css, ytterligere validering i JavaScript og raffinering av brukeropplevelsen med asynkront innhold.
På tidspunktet for skrivingen er Bootstrap 3.3.5 den nyeste versjonen, og det er verdt å nevne at vi bruker en standardbygg av Bootstrap (med 12 kolonneoppsett) for denne opplæringen. Når du følger med, sørg for at du bruker de nyeste kodene og kodestrukturene som beskrevet av Bootstrap-dokumentasjonen.
Hvis du er ute etter en rask løsning, er det en flott samling av PHP-skjemaer på Envato Market. Fra bare noen få dollar er de en fin måte å få denne funksjonaliteten på plass raskt (med mange kraftige funksjoner for å starte opp!)
Du kan også få en Envato Studio-tjenesteleverandør til å håndtere det hele for deg. For eksempel kan du få et glatt AJAX PHP-kontaktskjema med Googles No Captcha reCaptcha opprettet og lagt til nettstedet ditt for bare $ 45.
Fil og mappestruktur
For det første vil vi opprette en rotkatalog og inkludere følgende filer og mapper:
Bootstrap-Form: ├── css / ├── images / ├── js / ├── scripts.js ├── php / ├──process.php ├── index.html
Vi må inkludere noen front-end-biblioteker for å hjelpe oss, så fortsett og last ned (eller ekstern referanse) følgende:
Slipp inn i disse bibliotekene, slik at filstrukturen blir:
Bootstrap-Form: ├── css / ├── bootstrap.min.css ├── images / ├── js / ├── scripts.js ├── bootstrap.js ├── jquery-1.11.2.min. js ├── php / ├── process.php ├── index.html
Åpner opp index.html fil, kopier følgende HTML-basestruktur:
Kontaktskjema med Bootstrap 3.3.4 "Send meg en melding
Dette er vår grunnleggende HTML-mal der vi skal bygge innholdet for skjemaet. Du kan se at vi har koblet alle nødvendige CSS- og JavaScript-filer (merk at vi ikke trenger bootstrap.js for dette spesielle eksempelet). Vi har tatt med en visnings metatag for å hjelpe med mediespørsmålene våre i Bootstrap. JavaScript er plassert nederst i filen for å bidra til å levere kjernen innhold først.
Innenfor vår kropps tag har vi tatt med en div med en klasse av col-sm-6 col-sm-offset-3. Dette betyr i utgangspunktet innenfor vår sm (liten) viewport og over ønsker vi å vise en kolonne med 50% bredde (det er maksimalt 12 kolonner). De col-sm-offset-3 klassen representerer en margin igjen på 25%, og dermed produsere en layout som er halvparten av den tilgjengelige skjermvisningsporten og horisontalt sentrert. Herfra har vi tatt med en h3 og startet grunnleggende i vårt skjema. Pass på at du bruker en ID til dette skjemaet slik at vi kan legge ved en jQuery-hendelse til dette senere.
Bygger gutten av skjemaet vi kan kopiere / lime inn eller skrive følgende kode i tags:
Melding sendt inn!
Dette er alle inntastingsfeltene og knappene brukeren vil interagere med. Den første div med den tildelte klassen av rad er klassisk Bootstrap syntaks, som representerer en horisontal gruppering av kolelementer. Kolonner i Bootstrap oppretter polstring eller takrenner - legger til en rad rundt disse, fjerner polstringen til venstre og til høyre slik at de passer perfekt inn i beholderen.
Vi har opprettet to kolonner med col-sm-6 klasse (50%) som vi skal bruke til å dele opp skjemaet vårt. Innenfor den første col-sm-6 Vi har opprettet en etikett og et felt for navn, det andre er for e-post. Hver av disse inkluderer en etikett med en passende til Tilordne slik at den kan målrette mot det tilknyttede feltet. Hver av disse kolonnene inneholder en skjema-gruppe som semantisk grupperer etiketten og feltet sammen og bruker en liten margin til bunnen.
Bootstrap lar deg bruke typografi klasser fra H1-H6. Disse klassene hjelper oss med stilelementer uten å legge til ekstra marginer eller lage blokkeringselementer. Vi har brukt en H4 til å raskt utforme disse etikettene, noe som gjør dem store og klare.
De formkontroll klassen som brukes på hver inngang, gjør det mulig å spenne hele beholderens lengde (bredde 100%). Det gjelder også ulike styling for å bidra til å bygge et lettlest formelement (større høyde, flat kant osv.).
Etter disse kolonnene inkluderer vi meldingslegemet. Igjen, pakker vi inn dette innen a skjema-gruppe og bruk lignende stiler til vårt etikett- og tekstområde som vi gjorde før.
Til slutt inkluderer vi innleveringsknappen. Bootstrap har en rekke klasser for ulike knapp og typografi farger / stater. Vi har valgt å bruke "suksess" -knappen (btn-suksess) som som standard er grønn. I tillegg må vi bruke basen btn klasse for å tilbakestille de grunnleggende knappfunksjonene (kantlinje, polstring, tekstjustering, skriftvekt). Vi brukte en btn-lg klasse som gjør det til en stor knapp og til slutt a pull-right klasse som flyter denne knappen riktig.
Etter vår knapp har vi tatt med en div med iden av #msgSubmit og brukte følgende klasser: "h3 tekst-senter skjult”. H3 bidrar til å skape en større overskrift, tekst-senter (du gjettet det) setter tekstjusteringen til senter, og til slutt har vi satt skjult klasse som setter både visning til ingen og synlighet til skjult.
Som du ser ved å se dette i din foretrukne nettleser, har vi opprettet en grunnleggende Bootstrap-skjema. Men det gjør egentlig ikke noe enda ennå. Vårt neste skritt vil være å skape funksjonen som tar brukerens innspill og sender dem av asynkront til vår PHP-mailer.
Åpner opp scripts.js kopier følgende kode:
Accentsconagua
$ ("# contactForm"). send (funksjon (hendelse) // avbryter skjemainnsendelsen event.preventDefault (); submitForm ();); Denne delen av koden er en jQuery-kode som lytter etter en innsendingsfunksjon på vår #Kontakt skjema id (som angitt tidligere). Ved denne funksjonen analyserer vi en begivenhet variabel som lagrer skjemaformularen til funksjonen. De event.preventDeafult (); stopper skjemaet som sendes som det ville normalt, som vil oppdatere siden, siden ingen skjema handling er satt. Til slutt ber det submitForm (); funksjon.
Neste bygger vi submitForm (); fungere som følger:
funksjon submitForm () // Start Variables With Form Content var navn = $ ("# name") .val (); var email = $ ("# email") .val (); var melding = $ ("# melding") .val (); $ .ajax (type: "POST", url: "php / form-process.php", data: "navn =" + navn + "& email =" + email + "& message =" + melding, suksess: funksjon tekst) if (text == "suksess") formSuccess ();); funksjon formSuccess () $ ("#msgSubmit") .removeClass ("hidden"); De tre variablene som er satt, tar tak i verdiene for hver inngang fra skjemaet og tilordner dem til en JavaScript-variabel som skal brukes senere.
Vi starter et AJAX-objekt i jQuery og angir parametrene for type til post, URL til PHP-filplasseringen, dataene vi ønsker å sende og suksessoppringingsfunksjonen. Dataene inneholder alle tre sammenkoblede variabler med tilhørende id / etikett. Suksessoppringingsfunksjonen kalles når AJAX-objektet vellykket mottar informasjon tilbake fra PHP-skriptet. Funksjonen tar tak i den returnerte teksten og kontrollerer for å se om den er lik strengen "suksess". I så fall aktiverer den den endelige funksjonen av formSuccess.
De formSuccess funksjonen fjerner den skjulte klassen fra #msgSubmit div som vi brukte tidligere, og dermed avsløre teksten.
Til slutt må vi skrive et PHP-skript for å motta dataene og sende innholdet vårt via en innebygd PHP-postfunksjon. Åpen process.php og ta med følgende kode:
I likhet med jQuery-utdrag tidligere, må vi samle og lagre variablene vi ønsker å bruke. Fra postfunksjonen kan vi samle de tre inngangsvariablene og tilordne dem til lignende variable navn i PHP. De $ emailto variabel er en forhåndsdefinert e-postadresse som du kan angi i skriptet for å sende til e-post ved skjemainnlevering. $ Subject er en streng du vil bruke som e-postfag.
E-postkroppen er bygget løst rundt de tre etablerte variablene. Først settes noen beskrivende tekst som "Navn:", deretter variabelen, deretter en ny linje som bestemt av / n (ny linje / linjepause). Dette gjentas og sammenkobles til $ kroppen variabel.
For å endelig sende e-posten legger vi den i postfunksjonen. Tilordne variabelen $ suksess Vi inkluderer e-postadressen den sendes til, emnet, kroppen og e-postadressen.
For å starte prosessen med å sende eposten, kan vi ringe den innen en hvis uttalelse. Dette hjelper også å sjekke for å se om det var en suksess eller ikke. Hvis postfunksjonen returnerte "sant", vil skriptet returnere "suksess", hvis det mislyktes, vil det returnere "ugyldig".
Dette resultatet blir returnert til AJAX-objektet og håndtert tilbake på klientsiden. AJAXs skjønnhet er at alt dette gjøres asynkront på klientenden, slik at brukeren kan fortsette å bruke nettstedet mens det sendes.
Etter å ha dekket den grunnleggende strukturen og funksjonaliteten til skjemaet vårt i første halvdel av denne opplæringen, vil vi nå komme inn i det nitty gritty å gi bruker tilbakemelding gjennom ulike tilleggsfunksjoner vi kan inkludere. Spesielt vil vi dekke form tilbakemelding gjennom feilhåndtering både på klientsiden og serversiden.
Igjen, for å hjelpe med prosessen med å etablere form validering, vil vi bruke noen verktøy. Disse inkluderer:
Legg til disse i prosjektet som vi gjorde med Bootstrap og jQuery tidligere. Disse verktøyene vil bidra til å gi tilbakemelding til brukeren når de sender skjemaet. Det er mange form validatorverktøy og -rammer der ute (inkludert innfødt HTML5-validering), men jeg har brukt "Bootstrap Validator" som det godt integrerer med vår nåværende form.
Prosjektstrukturen bør nå se slik ut:
Bootstrap-Form: ├── css / ├── bootstrap.min.css ├── animate.css ├── images / ├── js / ├── scripts.js ├── bootstrap.js ├── jquery- 1.11.2.min.js ├── validator.min.js ├── php / ├── process.php ├── index.html
La oss starte med å starte validatoren for å sjekke skjemaet når vi sender inn. Overskrift tilbake til vår scripts.js fil vi må redigere den første delen av koden som kaller submitForm () fungere når skjemaet er sendt inn.
Vi må oppdatere den til følgende kode:
$ ("# contactForm"). validator (). på ("send", funksjon (hendelse) hvis (event.isDefaultPrevented ()) // håndtere ugyldig skjema ... annet // alt ser bra ut! preventDefault (); submitForm ();); Denne nye koden kontrollerer om Bootstrap Validator har funnet et problem og stoppet det fra behandling. Hvis den ikke har det, fortsetter vi som normalt. Vi må fortsatt forhindre standardhandlingen (laster opp siden) på vellykket innlevering av skjemaet, så hold det inn.
Hvis du klikker på send på skjemaet når det ikke er fullstendig, vil det nå føre til at de tomme feltene utheves i rødt, og viser hva som må skrives inn, det er så enkelt!
I prosessen med å legge til denne valideringen har vi fjernet eller forhindret at innfødt HTML5-validering finner sted. Vi kan legge til ytterligere kontekst til validering ved å inkludere feilmeldinger. Bootstrap Validator har en fin funksjon som tillater feilmeldinger for hver inngang for å vise ganske sømløst. For å legge til disse må vi legge til ytterligere HTML for å gi et sted for dem å vise.
Innenfor hver formgruppe under innspillet bør vi plassere følgende html:
For eksempel, her er den ekstra div lagt til i Navn og Email-feltene:
Når du sender inn skjemaet nå, bør det nå vises standard feilmelding når feltene er tomme "Vennligst fyll ut dette feltet.”. Ved å legge til et datatributt til inntastingen som kalles “Data-error” Du kan inkludere en egendefinert feilmelding. For eksempel:
Det finnes en rekke andre funksjoner, for eksempel vanlige uttrykksmønstre som Bootstrap-validatoren kan godta. Du kan se mer på Github.
Vår kundeside validering ser bra ut; Vi har noen flotte høydepunkter som forekommer på tomme felt. Det ville imidlertid være bra å legge til ytterligere animasjon i skjemaet og legge til flere meldinger som lar brukeren vite hva som skjer. For tiden har vi en "Melding sendt inn!"meldingen vises på suksess, men hva med en feil?
For å utnytte eksisterende kode og gjøre våre skript litt mer gjenbrukbare, vil vi endre den eksisterende suksessmeldingen for å akseptere feil også.
Første ting først, la oss fjerne "Melding sendt inn!"Tekst fra HTML og bare la en tom være div:
Vi må nå opprette en ny funksjon for å håndtere meldingsstatusen. Legg til denne funksjonen nederst på siden scripts.js
funksjon submitMSG (gyldig, msg) var msgClasses; hvis (gyldig) msgClasses = "h3 tekst-senter tada animert tekst-suksess"; else msgClasses = "h3 tekst-senter tekstfare"; $ ("# msgSubmit"). removeClass (). addClass (msgClasses) .text (msg); Denne funksjonen tar to argumenter. gyldig vil være en boolsk variabel: hvis det er sant, vil det bli en suksessmelding, vil falsk bli en feilmelding. msg vil bli meldingen vi vil vise i div på skjermen.
For det første sjekker funksjonen for å se om det handler om en suksess eller en feilmelding ved å sjekke verdien av gyldig. I begge tilfeller setter det klassevariabelen med de aktuelle CSS-klassene (vi må inkludere h3 og tekst-senter som vi vil fjerne disse som standard senere i funksjonen.)
Merk: Vi bruker noen animate.css klasser for meldingen suksess klasse. De Tada animasjon vil bli spilt etter suksess.
Endelig fjerner funksjonen alle klassene fra #msgSubmit (unngår sammenstøtende klasser), legger deretter til klassene som er angitt før, og legger deretter til tekstteksten i div.
Inne i vår validatorinitiering vi oppdaterte i begynnelsen av denne delen kan vi legge til følgende funksjonsanrop inne i hvis uttalelse når det er lik sant.
submitMSG (false, "Fyllte du ut skjemaet riktig?");
Når du sender inn skjemaet med tomme felt, vises nå feilmeldingen "Fyllte du ut skjemaet på riktig måte?"
Et siste skritt for denne nye submitMSG-funksjonen er å ringe det til når vårt skjema er vellykket. Oppdater formSuccess () funksjon til følgende:
$ ( "# Kontaktskjema") [0] .reset (); submitMSG (sant, "Melding sendt!")
For det første ønsker vi å tilbakestille skjemaet og fjerne verdiene på suksess, så kaller vi vår submitMSG fungere som før med en suksessmelding. Innlevering av skjemaet skal nå vise suksessmeldingen med en fancy animate.css Tada animasjonseffekt.
Hva er en annen animasjon, ikke sant? La oss legge til en annen animasjon til hele skjemaet ved feil, en universell "risting" -animasjon bør være god!
Lag en ny funksjon like etterpå formSuccess () og ring det formError ()
("webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend ', funksjon () $ (dette) .removeClass ();) ; Denne funksjonen bruker en tilnærming som finnes på animate.css demosiden som gjør at vi kan legge til en animasjon til et element og deretter ringe / legge til det igjen og igjen. CSS-animasjoner har et plagsomt problem hvor en gang de spilles når de pleier å ikke spille igjen, selv når klassen er fjernet og lagt til igjen. Denne funksjonen hjelper til med å tilbakestille klassene på animasjonsenden, slik at du kan legge dem til på nytt. Når brukeren klikker sende inn På en ufullstendig form vil vi riste animasjon å spille. Og hvis de sender det igjen når det er fortsatt feil må det spilles igjen.
Vi kan ringe dette formError () funksjon over submitMSG () funksjonen vi opprettet for en feilmelding. For eksempel:
formError (); submitMSG (false, "Fyllte du ut skjemaet riktig?");
Nå når vi sender inn en tom skjema, vil den riste for å la brukeren få vite at noe har gått galt.
Alle denne klientsidevalidering er bra, men alle brukere kan deaktivere disse tiltakene og sende skjemaet med tomme felter ved å redigere koden i nettleseren sin. Det er alltid et godt mål å gjøre noen server side validering, for å fange noe som glir forbi.
Åpner vår process.php fil vi trenger å gjøre noen endringer på dette for å sjekke om feltene er tomme; hvis de ikke er det, send tilbake en melding til fronten. Vi vil opprette en variabel som heter $ errormsg å fange våre feilmeldinger og ta med det videre $ _POST validering.
Dette PHP sjekker for å se om de er tomme før du angir dem som den tilsvarende variabelen (erstatter den eksisterende koden som angir variablene fra $ _POST). Hvis de er tomme, angir vi en grunnleggende melding for å sende tilbake til klienten. Vi kan gjøre mye mer enn bare validere feltene mot å være tomt (Hvis det er for kort / langt, sjekk det mot vanlige uttrykk etc.) i PHP og JavaScript. Men for enkelhets skyld vil vi begrense det bare for å tømme felt for nå.
Vi må sende feilmeldingen til det første AJAX-anropet som skal vises i nettleseren. Vi vil redigere hvis uttalelse vi opprettet tidligere nederst i PHP-filen.
I vår hvis uttalelse vi også sjekke for å se om $ errormsg er tomt ("") sammen med statusen for den innebygde postfunksjonen vi brukte på $ suksess variabel. I vår ellers tilstand vi har tatt med en ytterligere sjekk. Dette kontrollerer bare for å se om feilen var et resultat av $ suksess sviktende, hvis så send tilbake "Noe gikk galt :(“. Ellers viser vi meldingen som ble samlet når vi sjekket for tomme verdier.
Et siste skritt er å godta denne nye meldingen i vår AJAX og vise den på skjemaet. Vi må oppdatere AJAX objektet innenfor scripts.js filen som følger:
$ .ajax (type: "POST", url: "php / form-process.php", data: "navn =" + navn + "& email =" + email + "& message =" + melding, suksess: funksjon tekst) if (text == "suksess") formSuccess (); else formError (); submitMSG (false, text););
Vi har nettopp oppdatert ellers tilstand som sjekker for å se om tekst == suksess. I vår ellers vi har kalt formError () funksjon som vil gjelde shake animasjonen og vi har bedt om submitMSG () funksjon for å vise den returnerte teksten tilbake fra PHP. Teksten som returneres vil enten være "Noe gikk galt :(" eller feltene den mottok tomt.
Gå videre til Github for å se koden i sin helhet - vi har gjort mye!
Vårt skjema skal nå gi brukeren litt tilbakemelding på hvilke felt som er feil ved solid validering. Vi ga kontekstmessige meldinger basert på status og den returnerte meldingen fra PHP, og implementerte et ekstra lag av validering på serverens slutt for å fange de som omgår forhåndsvalideringen.
Samlet bør du nå ha et veldig godt kontaktskjema klar til å bli stylet og integrert i ditt nettsted. Jeg håper du likte denne opplæringen, vær så snill å legge igjen noen spørsmål eller tanker i kommentarene nedenfor!
