Sådan håndteres statiske formularer - klientens side

Formularer er interaktive elementer, der bruges til at få input fra brugeren til videre behandling. De fleste gange bruges formularer bare til at modtage input, der ikke kræver nogen behandling, men snarere bare at modtage data, dette kan være en kontaktformular, RSVP, få et tilbud osv.

Traditionelt administreres formularer ved hjælp af en server (også kendt som serversiden), men dette er mere effektivt, når du behandler dataene fra formularen, måske en brugerregistreringsformular, hvor formulardataene valideres, godkendes og gemmes i en database.

Når du bygger en simpel formular, hvor du kun modtager data fra brugeren og ikke behandler (dvs. kontaktformular), er målet at hente dataene fra formularen og sende til din virksomheds support-e-mail (f.eks. Info @…, support @…)

Brug af en server her er ikke ideel og er kun en overkill, en meget almindelig måde at gøre dette på er via PHPMailer (Det klassiske e-mail-sendebibliotek til PHP). PHPMailer bruges sammen med PHP og kræver mange kedelige serverkonfigurationer. Hvad hvis du bare bygger et statisk sted? Der skulle være en lettere måde at gøre denne klientside på, ikke?

I denne artikel vil jeg introducere dig til to metoder til håndtering af formular dataklientside på statiske websteder. Der er andre metoder, men jeg har brugt disse to og betragtet dem som de bedste og nemmeste (ingen hårde følelser :)).

INGEN hektiske konfigurationer, INGEN servere, INGEN seriøse ting, bare bygg din form, lav nogle små tweaks, brugeren indsender og bingo leder den direkte til din udpegede e-mail. :)

STARTSKEMA

Med henblik på denne artikel har jeg bygget en grundlæggende formular med HTML5 og Bootstrap 4, du kan forkaste den fra Codepen nedenfor.

I øjeblikket bruger denne formular ingen af ​​de metoder, vi vil tale om, i slutningen af ​​artiklen giver jeg det fulde codefor begge metoder, du kan derefter opdatere formularen og teste. Jeg har tilføjet en lille validering, skal du ikke bekymre dig om det

Lad os nu komme i gang !!

METODE ÉN

Formspree leverer funktionelle HTML-formularer via deres platform uden PHP eller JavaScript. Send din formular til deres URL, og den videresendes til din e-mail. Ingen PHP, Javascript eller tilmelding påkrævet - perfekt til statiske websteder!

Vent !, vent !!, vent !!! det er også åben

FORMHÅNDTERING MED FORMSPREE

  • Byg din formular, vi har allerede gjort det

(Følg det næste trin og opdater denne formular for at bruge denne metode)

Lad os nu gå over de nye ting tilføjet ovenfor.

  • Vi ændrede formularens handlingsattribut til //formspree.io/[email protected][udskift [email protected] med din egen e-mail.] Dette er simpelthen at sende dine formulardata til formspree og derefter til din e-mail. Formspree fungerer her som en tredjepart.
  • Jeg har tilføjet nogle navneegenskaber til inputfelterne. Dette konfigurerer bare hvert felt, så vi kan hente dataene og sende til formspree.

- For e-mail-adresse tilføjede jeg en _replyto-attribut (Dette betyder bare, at du hurtigt kan svare til den bruger, der oprindeligt sendte via e-mail)

- Jeg har tilføjet en _subject- attribut. Denne værdi bruges til e-mailens emne, så du hurtigt kan svare på indsendelser uden at skulle redigere emnelinjen hver gang.

- Jeg har tilføjet en _næste attribut. Efter at have sendt en formular vises brugeren som standard Formspree-siden "Tak". Du kan angive en alternativ URL til den side som sådan:

  • Vi tilføjede en værdiattribut til sendeknappen [ value = ”Send” ]

Dette er vores Thanos, et snap på denne knap, og din formular slettes, og dens data sendes til din e-mail.

Det er alt sammen at bruge formspree :) Selvom der er andre konfigurationsindstillinger for flere andre funktioner, kan du tjekke her.

Ting at bemærke!

  • Du behøver ikke at tilmelde dig for at bruge formspree, bare tilføj din attribut for handling, så er du klar til at gå. Du tilmelder dig kun, hvis du vil have en betalt plan.
  • Sørg for, at din formular har method=”POST”attributten
  • Formspree bruger reCAPTCHA til at identificere spam-indsendelser. Når en bruger har klikket på vores Thanos , skal de foretage en CAPTCHA-verifikation. Cool måde at stoppe spam indsendelser på.
  • Derefter sendes formularen til din udpegede e-mail, og siden med tilpasset succes vises!
  • Formspree læser ikke dine formulardata, de har ingen adgang til det, de er bare en leveringsservice, du sender din pakke forseglet til dem, de leverer til din kunde, sej, ikke? :)
  • Formspree er KUN for 50 indsendelser pr. Formular KUN! Brug for mere, du kan opgradere til den betalte plan.
  • Formspree har både gratis og betalte planer. Betalte planer har flere andre funktioner som admin dashboard, ubegrænset indsendelse, AJAX-håndtering osv. Betalte planer og deres funktioner kan findes her

Hvis du bygger et grundlæggende websted, skal du ikke bekymre dig om betalte planer, betalte planer er for det meste nødvendige af Enterprise-applikationer og virksomheder, den gratis plan dækker alle dine behov. Jeg bruger dette også til nogle klientprojekter :)

  • Formspree premium-brugere kan indsende formularer via AJAX. Indstil bare Accepter header til application / json. Hvis du bruger jQuery, kan dette gøres således:
 $.ajax({ url: "//formspree.io/FORM_ID", method: "POST", data: {message: "hello!"}, dataType: "json" }); 

Nå, dette er for betalte brugere :)

Hvis du ikke bruger jQUERY som mig, og du er træt af den lange AJAX-standardsyntaks, skal du tjekke simpleAJAX-biblioteket, et simpelt bibliotek, jeg byggede til håndtering af HTTP-anmodninger. Ligesom:

const http = new simpleAJAX; const data = { "name": "Bolaji Ayodeji", "email": "[email protected]", "message": "hi" }; http.post('//formspree.io/FORM_ID', data, (err, user) => { if(err) { console.log(err) } else { console.log(user); } }); 

En stjerne ville gøre mig glad! :)

Hvis du er interesseret i React, har ZEIT en omfattende guide til brug af Formspree med Create React App, komplet med installationsinstruktioner. Højt anbefalet!

METODE TO

Netlify tilbyder formhåndtering til websteder, der er implementeret på deres platform.

FORM HÅNDTERING MED NETLIFY

  • Opret en konto på Netlify og implementer dit websted der.

Se denne 14min video af @JamesQuick nedenfor, hvis du ikke ved, hvad Netlify er. Lær om alle de fantastiske funktioner i Netlify som kontinuerlig implementering, Lambda-funktioner, opdelt test, forhåndsvisning af filialer og meget mere!

  • Nu hvor du har implementeret dit websted, skal vi oprette formularen igen

Lad os nu gå over de nye ting, jeg tilføjede ovenfor.

  • Netlify er ret nemmere, du tilføjer blot netlifyattributten data-netlify="true"til tagget, og du kan begynde at modtage indlæg i dit Netlify-webstedsadministrationspanel.
  • Her actionfungerer attributten som din tilpassede successide

Det er alt, dine formularindsendelser går direkte til dit Netlify-adminpanel

Indstillinger> Byg & implementer> Miljø> Miljøvariabler

(Se videoen ovenfor, hvis du ikke forstår, hvad panelet betyder)

Ting at bemærke!

  • Dit websted skal hostes på netlify for at bruge denne metode
  • Du skal tilføje attributten netlify for at formularen skal fungere
  • Du kan finde alle indsendelser til dine Netlify-formularer under fanen Formularer på dit websteds dashboard. Indstillinger> Formularer
  • Netlify har også gratis og betalte planer
  • Netlify har flere indbyggede meddelelsesmuligheder til bekræftede formularindgivelser, herunder e-mail og Slack-meddelelser. (Kun tilgængelig i betalte planer) . Du kan finde dem i Indstillinger> Formularer> Formularunderretninger .
  • Netlify integreres også med Zapier, så du kan konfigurere udløsere, der sender dine bekræftede formularindlæg til et hvilket som helst af de 500+ applikationer i deres katalog.
  • Alle meddelelses-e-mails sendes fra [email protected], og eventuelle svar på en underretning vil gå til den adresse. Hvis du vil svare på en formularindsender, skal du indtaste deres adresse manuelt.
  • Netlify Forms kan også modtage filer, der uploades via formularindsendelser :).

For at gøre dette skal du tilføje et input med type="file"til enhver form. Når en formular indsendes, vil et link til hver uploadede fil blive inkluderet i oplysningerne om formularindsendelse.

  • Netlify er begrænset til 100 indsendelser pr. Måned og 10 MB uploads pr. Måned til den GRATIS plan. Hvis du vil have mere, skal du opgradere

Og det er alt !!

FINAL HTML FORM KODE

 Name: Name must be between 2 and 20 characters Email: Enter a valid email address Telephone: Enter a valid number 
 Name: Name must be between 2 and 20 characters Email: Enter a valid email address Telephone: Enter a valid number 

KONKLUSION

En ting at bemærke om formspree er, at den gratis version efterlader din e-mail-adresse udsat for skrabere og bots, så du måske vil oprette en midlertidig engangs-e-mail-adresse, mens du bruger den. Hvis du som standard vil skjule din e-mail-adresse, skal du opgradere din plan.

Vil du have ekstra øvelse? Se denne vejledningsvideo nedenfor af Brad Traversy, og lær hvordan du tilføjer en kontakt eller enhver form for formular til dit websted ved hjælp af Netlify-formularfunktionen inklusive filuploads og spamfiltrering. [Fuld guide + praktisk kode]

nyttige links

  • netlify.com/docs/formhåndtering
  • forestry.io/blog/5-ways-to-handle-forms-on- ..
  • gridsome.org/docs/guide-forms
  • zeit.co/guides/deploying-react-forms-using- ..
  • zeit.co/guides/deploying-statickit-with-zei ..

Tak for læsningen!