A statikus űrlapok kezelése - ügyféloldali út

Az űrlapok olyan interaktív elemek, amelyek felhasználhatók a felhasználótól a további feldolgozáshoz. Leggyakrabban az űrlapokat csak olyan bemenet fogadására használják, amely nem igényel feldolgozást, hanem csak adatok fogadására, ez lehet kapcsolatfelvételi űrlap, RSVP, ajánlatkérés stb

Hagyományosan az űrlapokat egy kiszolgáló (más néven szerveroldal) kezeli, de ez hatékonyabb, ha az űrlapból származó adatokat dolgozza fel, esetleg egy felhasználói regisztrációs űrlapot, ahol az űrlap adatait érvényesítik, hitelesítik és elmentik. adatbázisban.

Amikor egy egyszerű űrlapot készít, ahol csak a felhasználótól kap adatokat, és nem dolgozza fel (azaz a kapcsolatfelvételi űrlapot), akkor az a cél, hogy az adatokat megszerezze az űrlapról, és elküldje a vállalati támogatási e-mailbe (pl. Info @… @…)

A szerver használata itt nem ideális és csak túlterhelés, ennek nagyon elterjedt módja a PHPMailer (A klasszikus e-mail küldési könyvtár a PHP-n keresztül). A PHPMailert a PHP-vel együtt használják, és sok unalmas kiszolgáló-konfigurációt igényel. Mi van, ha csak statikus oldalt épít? Lehetne egy egyszerűbb módja ennek az ügyféloldalnak?

Ebben a cikkben bemutatom az űrlapadat-kliens oldal statikus helyeken történő kezelésének két módszerét. Vannak más módszerek is, de ezt a kettőt használtam, és a legjobbnak és a legkönnyebbnek tartottam (nincsenek nehéz érzések :)).

NINCS mozgalmas konfiguráció, NINCS szerver, NINCS komoly dolog, csak készítsd el az űrlapodat, hajts végre néhány apró módosítást, a felhasználó beküldi, és egyenesen a kijelölt e-mailre irányítja. :)

KEZDŐLAP

A cikk céljaira elkészítettem egy alap űrlapot a HTML5-tel és a Bootstrap 4-gyel, amelyet az alábbi Codepen-ből tud elágazni.

Jelenleg ez az űrlap nem használja azokat a módszereket, amelyekről beszélni fogunk, a cikk végén codemindkét módszer teljes leírását megadom, majd frissítheti az űrlapot és tesztelheti. Hozzáadtam egy kis érvényesítést, ne aggódj emiatt

Most kezdjük !!

ELSŐ MÓDSZER

A Formspree funkcionális HTML-űrlapokat biztosít a platformjukon keresztül, PHP és JavaScript nélkül. Küldje el az űrlapot az URL címére, és továbbítja az e-mailjére. Nincs szükség PHP-re, Javascriptre vagy regisztrációra - tökéletes statikus oldalakhoz!

Várj !, várj !!, várj !!! ez is Open Sourced

FORMA KEZELÉSE FORMSPREE-vel

  • Készítse el az űrlapját, ezt már megtettük

(Kövesse a következő lépést, és frissítse ezt az űrlapot a módszer használatához)

Most nézzük át a fentiekben hozzáadott új dolgokat.

  • Megváltoztattuk az űrlap action-attribútumát, hogy //formspree.io/[email protected][cserélje le az Ö[email protected] címét saját e-mail címére.] Ez egyszerűen az űrlap adatait küldi a formpree-re, majd az Ön e-mailjére. A Formspree itt harmadik félként jár el.
  • Hozzáadtam néhány névattribútumot a beviteli mezőkhöz. Ez csak az egyes mezők konfigurálását jelenti, hogy meg tudjuk ragadni az adatokat és elküldhessük a formpree-nek.

- Az e-mail címhez hozzáadtam egy _replyto attribútumot (ez csak azt jelenti, hogy gyorsan válaszolhat az eredetileg e-mailben beküldött felhasználónak)

- Hozzáadtam egy _subject attribútumot. Ezt az értéket használja az e-mail tárgyára, így gyorsan válaszolhat a beküldött tartalmakra anélkül, hogy minden alkalommal módosítania kellene a tárgy sort.

- Hozzáadtam egy _next attribútumot. Alapértelmezés szerint az űrlap elküldése után a felhasználó megjeleníti a Formspree „Köszönöm” oldalt. Megadhat egy alternatív URL-t az oldalhoz, így:

  • Hozzáadtunk egy értékattribútumot a küldés gombra [ value = ”Küldés” ]

Ez a mi Thanosunk, egy kattintás erre a gombra, és az űrlap törlődik, és az adatai elküldésre kerülnek az Ön e-mailjére.

Ennyi, ha a formspree-t használjuk :) Bár számos más funkciónak vannak más konfigurációs beállításai, itt ellenőrizheti.

MEGJEGYZÉSEK!

  • A formpree használatához nem kell regisztrálnia, csak hozzá kell adnia a action attribútumot, és máris mehet. Csak akkor regisztrál, ha fizetett tervet szeretne.
  • Ellenőrizze, hogy az űrlap rendelkezik-e az method=”POST”attribútummal
  • A Formspree a reCAPTCHA-t használja a spamküldések azonosítására. Miután a felhasználó rákattint a Thanosunkra , el kell végeznie néhány CAPTCHA ellenőrzést. Kiváló módszer a spamküldések leállítására.
  • Ezt követően az űrlapot elküldjük a kijelölt e-mailbe, és megjelenik az egyéni sikeroldal!
  • A Formspree nem olvassa el az űrlapadatait, nincs hozzáférésük hozzájuk, csak egy kézbesítési szolgáltatás, nekik lezárt módon elküldi a csomagját, ők szállítják az ügyfelének, jó? :)
  • A Formspree kizárólag űrlaponként és havonta 50 beküldés esetén ingyenes! Többre van szüksége, frissíthet a fizetett csomagra.
  • A Formspree ingyenes és fizetős tervekkel rendelkezik. A fizetett terveknek számos más funkciója van, például az admin irányítópultja, korlátlan beküldés, AJAX kezelés stb. A fizetett tervek és azok funkciói itt találhatók

Ha alap webhelyet épít, akkor ne aggódjon a fizetett tervek miatt, a fizetett tervekre leginkább az Enterprise alkalmazásoknak és a vállalatoknak van szükségük, az ingyenes terv minden igényt kielégít. Ezt használom néhány kliens projektnél is :)

  • A prémium kategóriás felhasználók az AJAX-on keresztül nyújthatnak be űrlapokat. Csak állítsa az Accept fejlécet application / json értékre. Ha jQuery-t használ, ezt megteheti:
 $.ajax({ url: "//formspree.io/FORM_ID", method: "POST", data: {message: "hello!"}, dataType: "json" }); 

Nos, ez fizetős felhasználóknak szól :)

Ha nem használja a jQUERY-t, mint én, és unja a hosszadalmas AJAX alapértelmezett szintaxist, nézze meg az simpleAJAX könyvtárat, egy egyszerű könyvtárat, amelyet a HTTP kérések kezelésére építettem. Mint például:

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

Egy csillag boldoggá tenne! :)

Ha kedveli a React-et, a ZEIT átfogó útmutatóval rendelkezik a Formspree és a Create React App használatáról, telepítési utasításokkal kiegészítve. Nagyon ajánlott!

MÁSODIK MÓDSZER

A Netlify űrlapkezelést kínál a platformjukon telepített webhelyek számára.

FORMAKEZELÉS NETLIFY-vel

  • Hozzon létre egy fiókot a Netlify-on, és telepítse ott a webhelyét.

Kérjük, nézze meg ezt a @JamesQuick 14 perces videót, ha nem tudja, mi a Netlify. Tudjon meg többet a Netlify minden fantasztikus szolgáltatásáról, mint például a folyamatos telepítés, a Lambda funkciók, az osztott tesztelés, az Ágak előnézete és még sok más!

  • Most, hogy telepítette a webhelyét, hozzuk létre újra az űrlapot

Most nézzük át az új dolgokat, amelyeket fentebb hozzáadtam.

  • A Netlify meglehetősen egyszerűbb: egyszerűen hozzá kell adnia az netlifyattribútumot data-netlify="true"a címkéhez, és megkezdheti a beküldések fogadását a Netlify webhely adminisztrációs paneljén.
  • Itt az actionattribútum az Ön egyéni sikeroldalaként szolgál

Ennyi, az űrlap beküldése egyenesen a Netlify adminisztrációs paneljére kerül

Beállítások> Építés és telepítés> Környezet> Környezeti változók

(Nézze meg a fenti videót, ha nem érti, mit jelent a panel)

Megjegyzendő dolgok!

  • Ennek a módszernek a használatához webhelyét a netlify-n kell tárolni
  • Az űrlap működéséhez hozzá kell adnia a netlify attribútumot
  • A Netlify űrlapokhoz beküldött összes beküldést a webhely irányítópultjának Űrlapok lapján találja meg. Beállítások> Űrlapok lehetőséget
  • A Netlify ingyenes és fizetős tervekkel is rendelkezik
  • A Netlify számos beépített értesítési lehetőséggel rendelkezik az ellenőrzött űrlapbeküldéshez, beleértve az e-mail és a Slack értesítéseket. (Csak fizetett csomagokban érhető el) . Megtalálja őket a Beállítások> Űrlapok> Űrlap értesítések menüpontban .
  • A Netlify a Zapier-rel is integrálódik, így beállíthat olyan triggereket, amelyek az ellenőrzött űrlap-beküldéseket elküldik a katalógusukban szereplő legalább 500 alkalmazás bármelyikére.
  • Minden értesítési e-mailt küldünk [email protected], és az értesítésre adott válaszok erre a címre kerülnek. Ha szeretne válaszolni egy űrlap benyújtójának, kézzel kell megadnia a címét.
  • A Netlify Forms az űrlap beküldésével is képes fájlokat feltölteni :).

Ehhez adjon meg egy bemenetet type="file"bármely űrlaphoz. Az űrlap benyújtásakor az egyes feltöltött fájlok linkje szerepel az űrlap benyújtásának részleteiben.

  • A Netlify havi 100 beküldésre és havi 10 MB feltöltésre korlátozódik az INGYENES tervhez. Ha többet szeretne, frissítenie kell

És ennyi!!

VÉGLEGES HTML FORMA KÓD

 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 

KÖVETKEZTETÉS

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!