Share
I denne opplæringen skal vi se på en problemfri måte å legge til dynamiske, fleksible skjemaer på de statiske nettstedene dine.
Tenk deg at du nettopp har opprettet et nettsted ved hjelp av statiske sider, enten det er ved hjelp av Jekyll eller bare å bruke noen HTML-filer, men du vil nå legge til et kontaktskjema. Du kan koble til en onlinetjeneste, installere noe prebuilt på serveren din, eller bygge noe fra bunnen av med PHP. Dette betyr at du enten er helt begrenset til designet, eller du legger mer innsats i en enkelt form enn du gjorde for hele nettstedet.
Hva om du kunne bruke en tjeneste som gir deg full kontroll over skjemaet, men krever likevel ikke at du installerer noe på serveren din? Skriv inn Formspree, en online-tjeneste som gir deg muligheten til å lage funksjonelle HTML-skjemaer uten bruk av PHP eller JavaScript.
Tillat meg å gi deg en kort nedlasting av trinnene som kreves for å få din egen form oppe.
Det første du trenger er et skjema, som vi vil bygge fra grunnen av i HTML. Skjemaet mitt kommer til å være en veldig enkel måte for folk å komme i kontakt med meg. Jeg skal ha et felt for navn, e-post og melding. Her er oppslaget for skjemaet mitt:
Du ser at jeg har lagt til en sende inn input og pakket alle feltene med a element.
Vi kan style dette skjemaet vi ønsker. Det er ingen iframe eller noe annet for å begrense hvordan det ser ut.
For at Formspree skal kunne håndtere skjemaet ditt, må du legge til følgende handlingsattributt til din element:
Vær oppmerksom på at navn og melding feltene heter riktig, men jeg har brukt den spesielle "_svare på"Verdi for e-postfeltet. Formspree vil gjenkjenne denne attributtverdien, og la meg derfor svare direkte på e-posten som er oppgitt på skjemaet når den er sendt inn.
Jeg kan også legge til _next til en annen skjult inngang for å spesifisere hvilken URL jeg vil at brukere skal bli sendt til en de har sendt inn skjemaet.
For at jeg skal vite hvor innleveringen kommer fra, skal jeg legge til en emnelinje. Jeg kan gjøre dette ved å legge til følgende skjulte inngang:
Dette feltet vises ikke når en bruker viser skjemaet, men verdien vil bli brukt til emnelinjen når jeg mottar en innsending.
Bygget inn i Formspree er en "honeypot" -metode for spamforebygging. Honeypot teknikken er ganske enkel; du skjuler et felt inne i skjemaet ditt som brukerne ikke ser, men spambots gjør. Spamboten fyller ut feltet, mens brukerne ikke vil. Eventuelt innsending med dette feltet fylles inn vil bli vurdert som spam.
Du kan bruke denne teknikken ved å legge til følgende i skjemaet ditt:
Det er viktig at du bruker et stilattributt for å skjule feltet. Brukerens nettleser vil gjemme feltet ved hjelp av CSS, men spambottet vil (sannsynligvis) ignorere CSS-en og fortsette å fylle ut feltet. Ved å navngi feltet "_tok deg", Vil Formspree gjenkjenne det og ignorere eventuelle innleveringer gjort med dette fylt ut.
For ekstra sikkerhet kan du pakke inn e-posten din i JavaScript. Dette vil redusere sannsynligheten for at spambots vil se gjennom og plukke ut e-posten din fra HTML-koden. Ta en titt på hva jeg har gjort nedenfor:
Her har jeg fjernet handling attributt fra element, og brukte deretter et lite stykke JavaScript for å sette det i stedet. Jeg har også brutt ned e-poststrengen i segmenter for å gjøre det enda mer uklart for spambots. Du er velkommen til å kopiere dette og erstatte segmentene av e-posten med din egen.
Det siste trinnet er å sørge for at skjemaet ditt fungerer. Gå til siden som inneholder skjemaet i nettleseren din, fyll ut skjemaet og send det som en vanlig bruker ville. Du bør motta en e-post fra Formspree og spør deg om å bekrefte din epost.
Klikk på bekreftelseskoblingen, og du vil bli ferdig!
Merk: Du må gå gjennom denne bekreftelsesprosessen hver gang du legger til skjemaet på en ny side.
Formspree API gir en enkel og svært fleksibel måte å legge til skjemaer på en nettside. Perfekt for statiske steder!
Accentsconagua