Kako postupati sa statičkim obrascima - način na strani klijenta

Programiranje

Obrasci su interaktivni elementi koji se koriste za dobivanje podataka od korisnika za daljnju obradu. Najčešće se obrasci koriste samo za primanje unosa koji ne zahtijevaju obradu, već samo primanje podataka, ovo bi mogao biti obrazac za kontakt, odgovor na poziv, dobivanje ponude itd.

Tradicionalno se obrascima upravlja uz pomoć poslužitelja (poznat i kao strana poslužitelja), ali to je učinkovitije kada obrađujete podatke iz obrasca, možda obrazac za registraciju korisnika u kojem se podaci obrasca provjeravaju, provjeravaju i provjeravaju u bazi podataka.

Kada gradite jednostavan obrazac u kojem podatke primate samo od korisnika, a ne obrađujete (tj. Obrazac za kontakt), cilj je dobiti podatke iz obrasca i poslati ih na e-adresu za podršku tvrtke (npr. Info @…, podrška @…)

Korištenje poslužitelja ovdje nije idealno i samo je pretjerano, vrlo uobičajen način za to je putem PHPMailera (klasična biblioteka za slanje e-pošte za PHP). PHPMailer se koristi s PHP-om i zahtijeva puno dosadnih konfiguracija poslužitelja. Što ako samo gradite statično mjesto? Trebao bi postojati lakši način za rad s ovom strankom, zar ne?

U ovom članku upoznat ću vas s dvije metode rukovanja stranicama obrazaca podataka na statičkim web mjestima. Postoje i druge metode, ali ja sam ih koristio i smatrao sam ih najboljima i najlakšima (bez teških osjećaja :)).

NEMA užurbanih konfiguracija, NEMA poslužitelja, NEMA ozbiljnih stvari, samo izradite obrazac, napravite neke male dorade, korisnik ih pošalje i bingo uputi ravno na vašu e-poštu. :)

OBRAZAC ZA POČETAK

U svrhu ovog članka izradio sam osnovni obrazac s HTML5 i Bootstrap 4, možete ga rastaviti iz donjeg Codepena.

Trenutno ovaj obrazac ne koristi nijednu od metoda o kojima ćemo razgovarati, a na kraju članka pružit ću cjelovitu informaciju codeo obje metode, a zatim možete ažurirati obrazac i testirati. Dodao sam malo provjere valjanosti, ne brinite zbog toga

Sad, krenimo !!

METODA PRVA

Formspree pruža funkcionalne HTML obrasce putem njihove platforme bez PHP-a ili JavaScript-a. Pošaljite svoj obrazac na njihov URL i on će biti proslijeđen na vašu e-poštu. Nije potreban PHP, Javascript ili prijava - savršeno za statične web stranice!

Čekaj!, Čekaj !!, čekaj !!! to je i otvoreni izvor

OBRAZAC OBRAZCA S FORMSPREE

  • Izradite svoju formu, to smo već učinili

(Slijedite sljedeći korak i ažurirajte ovaj obrazac da biste koristili ovu metodu)

Sada ćemo prijeći na gore dodane nove stvari.

  • Promijenili smo atribut akcije u obrascu u //formspree.io/[email protected][zamijenite vaš@email.com vlastitom e-poštom.] Ovo je jednostavno slanje podataka vašeg obrasca u obrazacpree, a zatim na vašu e-poštu. Formspree ovdje djeluje kao treća strana.
  • U polja za unos dodao sam neke atribute imena. Ovo je samo konfiguriranje svakog polja kako bismo mogli prikupiti podatke i poslati ih na formpree.

- Za adresu e-pošte dodao sam atribut _replyto (to samo znači, moći ćete brzo odgovoriti korisniku koji je izvorno poslao e-poštu)

- Dodao sam atribut _subject . Ova se vrijednost koristi za temu e-pošte tako da možete brzo odgovarati na podneske bez potrebe za uređivanjem retka predmeta svaki put.

- Dodao sam atribut _next . Prema zadanim postavkama, nakon slanja obrasca korisniku se prikazuje stranica Formspree "Hvala". Možete dati alternativni URL za tu stranicu na sljedeći način:

  • Na gumb za slanje dodali smo atribut vrijednosti [ value = ”Send” ]

Ovo je naš Thanos, jednim klikom na ovaj gumb obrisat će se vaš obrazac i njegovi podaci poslati na vašu e-poštu.

To je sve za korištenje formpree :) Iako postoje druge konfiguracijske postavke za nekoliko drugih značajki, ovdje možete provjeriti.

STVARI NAPOMENE!

  • Ne trebate se registrirati da biste koristili formpree, samo dodajte svoj atribut akcije i spremni ste za početak. Registrirate se samo ako želite plaćeni paket.
  • Provjerite ima li obrazac method=”POST”atribut
  • Formspree koristi reCAPTCHA za prepoznavanje neželjenih poruka. Nakon što korisnik klikne naš Thanos , morat će izvršiti provjeru CAPTCHA. Sjajan način zaustavljanja slanja neželjene pošte.
  • Nakon toga, obrazac se šalje na vašu e-poštu i prikazuje se prilagođena stranica uspjeha!
  • Formspree ne čita vaše podatke iz obrasca, oni im nemaju pristup, oni su samo dostava, vi im šaljete svoj paket zapečaćen, oni dostavljaju vašem kupcu, zar ne? :)
  • Formspree je besplatan SAMO za 50 prijava po obrascu mjesečno! Trebate više, možete nadograditi na plaćeni plan.
  • Formspree ima i besplatne i plaćene planove. Plaćeni planovi imaju nekoliko drugih značajki kao što su administratorska nadzorna ploča, neograničene prijave, AJAX rukovanje itd. Plaćeni planovi i njihove značajke možete pronaći ovdje

Ako gradite osnovnu web stranicu, ne biste se trebali brinuti o plaćenim planovima. Plaćeni planovi uglavnom su potrebni za poslovne programe i tvrtke, besplatni plan pokriva sve vaše potrebe. I ovo koristim za neke klijentske projekte :)

  • Korisnici Formspree premium mogu slati obrasce putem AJAX-a. Samo postavite zaglavlje Prihvati na application / json. Ako koristite jQuery, to se može učiniti ovako:
 $.ajax({ url: "//formspree.io/FORM_ID", method: "POST", data: {message: "hello!"}, dataType: "json" });

Pa, ovo je za plaćene korisnike :)

Ako ne upotrebljavate jQUERY poput mene i umoran ste od duge zadane sintakse AJAX, pogledajte knjižnicu simpleAJAX, jednostavnu biblioteku koju sam izgradio za rukovanje HTTP zahtjevima. Ovako:

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); } });

Zvijezda bi me obradovala! :)

Ako se bavite Reactom, ZEIT ima sveobuhvatan vodič za upotrebu Formspreea s Create React App, zajedno s uputama za postavljanje. Preporučuje se!

METODA DRUGA

Netlify nudi rukovanje obrascima za web lokacije raspoređene na njihovoj platformi.

OBRAZAC RUKOVANJE NETLIFYOM

  • Otvorite račun na Netlifyu i tamo postavite svoju web lokaciju.

Molimo pogledajte ovaj 14-minutni video od @JamesQuick u nastavku ako ne znate što je Netlify. Saznajte o svim sjajnim značajkama Netlifyja, poput kontinuirane implementacije, Lambda funkcija, Split testiranja, pregledavanja grana i još mnogo toga!

  • Sad kad ste postavili web mjesto, napravimo obrazac ponovno

Sada ćemo prijeći na nove stvari koje sam gore dodao.

  • Netlify je dosta lakše, možete jednostavno dodati netlifyatribut data-netlify="true"na oznaku, a možete početi primati podneske na svom Netlify web admin panel.
  • Ovdje actionatribut služi kao vaša prilagođena stranica uspjeha

To je sve, vaši podnesci obrazaca idu izravno na vašu administratorsku ploču Netlify

Postavke> Izgradnja i implementacija> Okoliš> Varijable okruženja

(Pogledajte videozapis iznad ako ne razumijete što ploča znači)

Stvari koje treba napomenuti!

  • Da biste koristili ovu metodu, vaše web mjesto mora biti hostirano na netlifyu
  • Morate dodati atribut netlify da bi obrazac radio
  • Sve prijave vaših obrazaca Netlify možete pronaći na kartici Obrasci na nadzornoj ploči web lokacije. Postavke> Obrasci
  • Netlify također ima besplatne i plaćene planove
  • Netlify ima nekoliko ugrađenih opcija obavijesti za potvrđene prijave, uključujući obavijesti e-poštom i Slack. (Dostupno samo u plaćenim planovima) . Možete ih pronaći u Postavkama> Obrasci> Obavijesti obrasca .
  • Netlify se također integrira sa Zapierom, tako da možete postaviti okidače koji šalju vaše potvrđene prijave u bilo koju od 500+ aplikacija u njihovom katalogu.
  • Sve e-poruke s obavijestima šalju se s [email protected]adrese, a svi odgovori na obavijest ići će na tu adresu. Ako želite odgovoriti podnositelju obrasca, morat ćete ručno unijeti njegovu adresu.
  • Netlify Forms također može primati datoteke putem predanih obrazaca :).

Da biste to učinili, dodajte unos type="file"u bilo koji obrazac. Kada se preda obrazac, veza do svake učitane datoteke bit će uključena u pojedinosti o predaji obrasca.

  • Netlify je ograničen na 100 prijava mjesečno i prijenosa od 10 MB mjesečno za BESPLATNI plan. Ako želite više, morat ćete nadograditi

I to je sve!!

KONAČNI HTML OBRAZAC KOD

 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

ZAKLJUČAK

One thing to note about formspree is that the free version leaves your email address exposed to scrapers and bots so you might want to set up a temporary disposable email address while you use it. If you want to hide your email address by default, you’ll need to upgrade your plan.

Do you want extra practice? Watch this tutorial video below by Brad Traversy and learn how to add a contact or any type of form to your website by using the Netlify form feature including file uploads and spam filtering. [Full guide + practical code]

Useful Links

  • netlify.com/docs/form-handling
  • 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..

Thanks for reading!