Kapcsolatfelvételi űrlap létrehozása a Netlify Forms és a Next.js használatával

Ha azt szeretné, hogy valaki kapcsolatba léphessen Önnel, vagy információkat nyújtson be egy weboldalon, a HTML-űrlap elég szokásos módszer ennek elérésére.

De az űrlap elküldésének elfogadása általában további szolgáltatást vagy komplex szerveroldali kódot igényel. Hogyan használhatjuk ki a Netlify előnyeit új űrlapok egyszerű létrehozásához?

  • Mi a Netlify?
  • Mit fogunk építeni?
  • Mennyibe kerül?
  • 1. rész: Kapcsolattartási űrlap létrehozása HTML-vel
  • 2. rész: Egyéni Netlify űrlap hozzáadása a Next.js React alkalmazáshoz

Mi a Netlify?

A Netlify egy olyan webes platform, amely lehetővé teszi új webprojektek egyszerű telepítését, könnyen konfigurálható munkafolyamatokkal. Ez magában foglalja egy statikus webhely, a lambda függvények és, amint itt itt fogunk beszélni, egyéni űrlapok telepítését.

Az űrlapszolgáltatás az építési és telepítési folyamat részeként működik. Amikor egy űrlapot egy sajátos attribútummal egészítünk ki az oldalunkra, a Netlify felismeri ezt az űrlapot, és működésre konfigurálja azt.

Mit fogunk építeni?

Építünk egy kapcsolatfelvételi űrlapot, amely lehetővé teszi az emberek számára, hogy jegyzetet küldjenek Önnek a webhelyén keresztül.

Maga a forma elég egyszerű lesz. A szokásos kapcsolattartási űrlaphoz hasonlóan itt is kérni fogjuk valaki nevét, e-mail címét és üzenetét.

Ezt egyszerű HTML segítségével fogjuk kiépíteni, hogy bemutassuk működését, majd a Next.js segítségével felépítjük az űrlap létrehozásához a React alkalmazásban.

Mennyibe kerül?

A Netlify űrlapok szabadon indulhatnak. Ez az ingyenes szint havonta 100 űrlap-beküldésre korlátozódik, így ha ezen marad, akkor mindig ingyenes lesz.

Ez azt jelenti, hogy ha meghaladja a 100 űrlap beküldést egy adott webhelyen, akkor az első szint 19 dollár + lesz, amikor ezt megírja. A legújabb árazási terveket a Netlify weboldalán tekintheti meg.

1. rész: Kapcsolattartási űrlap létrehozása HTML-vel

A kezdéshez létrehozunk egy alap űrlapot tiszta HTML-sel. Gyors győzelem bemutatni ennek működését.

1. lépés: HTML-űrlap létrehozása

Formánkhoz valóban felhasználhatunk bármit, amit csak akarunk. A kapcsolatfelvételi űrlapok lehetnek olyan egyszerűek, mint egy e-mail cím és egy üzenetmező, vagy sokféle lehetőséget tartalmazhatnak, amelyek segítenek az üzleti vállalkozásokat adott kérdések megválaszolásában.

Valami egyszerűvel fogunk kezdeni. Létrehozunk egy űrlapot, amely megkérdezi valaki nevét, e-mail címét és üzenetét.

A kezdéshez hozzon létre egy új HTML fájlt a projekt gyökerében. Ennek a HTML fájlnak tartalmaznia kell egy HTML dokumentum alapvető felépítését. A test belsejében adjuk hozzá új formánkat:

Name

Email

Message

Send

A fenti részletben a következők vagyunk:

  • Új űrlap létrehozása
  • Az űrlap neve attribútummal, metódussal és data-netlifyattribútummal rendelkeziktrue
  • 3 űrlapmező létrehozása címkékkel, amelyek mindegyike egy név attribútummal van azonosítva
  • Gomb létrehozása az űrlap elküldéséhez

Amire leginkább figyelni akarunk, az az data-netlifyattribútum és a forma name. Amikor a Netlify elolvassa a webhelyet, látni fogja ezeket a mezőket, és ezeket használja, hogy az űrlapot aktívan működő formává alakítsa.

Hozzáadok egy kis CSS-t is, hogy a címkék kissé következetesebbek legyenek. Opcionálisan hozzáadhatja ezt a dokumentumhoz:

 body { font-family: sans-serif; } label { display: block; margin-bottom: .2em; }  

És ezen a ponton rendelkeznünk kell egy alapformával!

Ezt az űrlapot most fel kell töltenie a GitHub-ra vagy a kedvenc Netlify által támogatott Git-szolgáltatójára, és készen állunk a következő lépésre.

Kövesse az elkötelezettséggel együtt!

2. lépés: Új űrlap beállítása a Netlify segítségével

Miután űrlapunkat a Git szolgáltatónkhoz továbbítottuk, most szinkronizálhatjuk a Netlify-val.

Először hozzon létre egy fiókot, vagy használjon meglévő fiókot a Netlify-val, majd kattintson az Új webhely a Gitből gombra.

Itt válassza ki azt a Git-szolgáltatót, amelyet használt. A példámban a GitHub -ot használom.

Miután kiválasztotta a Git szolgáltatóját, fel fogja kérni a hozzáférés engedélyezését, hogy a Netlify megtalálja az Ön Git adattárát.

Miután sikeresen összekapcsolta fiókját, meg kell jelenítenie azoknak a tárolóknak a listáját, amelyekhez hozzáférést biztosított. Keresse meg azt az adattárat, amelyhez hozzáadta az űrlapját, és válassza ki.

Ha velem együtt jársz, akkor az űrlapunk tiszta HTML, vagyis nem szabad semmilyen felépítési lépést vagy külön könyvtárat közzétenni. De nyugodtan módosítsa ezeket a beállításokat, ha valami mást tett.

Kattintson a Webhely telepítése elemre, amely megnyit egy új oldalt a Netlify-ban, és pillanatok alatt a webhelyet nem telepítik sikeresen.

Végül kattintson a netlify.app végződésű Netlify projekt irányítópultjának tetején található URL-re. Amint betöltődött, látni fogja az űrlapját!

3. lépés: Az űrlap beküldésének megtekintése

Most, hogy megvan a formánk, végül válaszokat akarunk látni.

A kezdéshez adjon meg néhány információt az űrlaphoz, és kattintson a Küldés gombra.

Miután elküldte, észreveszi, hogy egy Netlify oldalra kerül, amely azt mondja, hogy az űrlapot sikeresen elküldték.

Most visszaléphet a Netlify projekt irányítópultjára, és egy kicsit lefelé görgethet, ahol most egy mezőt láthat a Legutóbbi űrlap beküldéseivel , valamint az új beküldésével.

2. rész: Egyéni Netlify űrlap hozzáadása a Next.js React alkalmazáshoz

Ha az űrlap önmagában fog élni, és nem egy nagyobb webhely része, akkor sok előnye van annak, ha az űrlapot tiszta HTML-ként hagyja. De gyakran azt akarjuk, hogy a kapcsolatfelvételi űrlap webhelyünk vagy alkalmazásunk része legyen.

Itt bemutatjuk az űrlap hozzáadását a Next.js alkalmazáshoz.

Megjegyzés: A Next.js használatát bemutató bemutatónk egy statikusan renderelt alkalmazás. Ha az űrlap kliens oldalát tölti be, vagyis az alapul szolgáló HTML nem tartalmazza az űrlapot, a megoldásokkal kapcsolatos további információkért olvassa el az oldal alján található megjegyzéseket.

0. lépés: Next.js alkalmazás létrehozása

A kezdéshez szükségünk van egy alkalmazásra. A Next.js-t fogjuk használni, mivel az új alkalmazást meglehetősen egyszerűen fel tudjuk készíteni a semmiből.

Ehhez navigáljon oda, ahol létre szeretné hozni az alkalmazást és futtatni:

yarn create next-app [project-name] # or npx create-next-app [project-name] 

Meg fogom nevezni a projektemet my-nextjs-netlify-form.

Amint a Next.js befejezte a függőségek telepítését, utasításokat ad, hogy navigáljon a projekt könyvtárába, és elindítsa a fejlesztői kiszolgálót.

És futtatása után yarn devvagy npm run dev, akkor készen kell állnia, hogy menjen el Next.js app:

Kövesse az elkötelezettséggel együtt!

1. lépés: HTML-űrlap hozzáadása a Next.js alkalmazáshoz

Az 1. lépés nagyon hasonlít az 1. részre.

Belül pages/index.jsmeg akarjuk találni a rács burkolónkat, és ezt felhasználjuk az űrlap hozzáadásához.

Keresse meg és cserélje ki a teljes blokkot a következővel:

Name

Email

Message

Send

Ezt csináljuk:

  • Kihasználjuk a Next.js meglévő rácsát
  • Kihasználjuk a meglévő kártyát is, amelybe beletesszük az űrlapunkat
  • A kártya belsejében pontosan ugyanabban a HTML-formában illesztünk be, mint az 1. rész

Ha újratöltjük az oldalt, akkor a kártya belsejében láthatjuk az űrlapunkat, így:

Mielőtt továbblépnénk, 2 dolgot akarunk csinálni.

Először is, mivel ezt az űrlapot egy JavaScript alkalmazásban készítjük, a Netlify azt javasolja, hogy adjunk hozzá egy rejtett bemenetet az űrlapunk nevével.

Az űrlapunkon belül adja hozzá a következő bemenetet az űrlapelem tetejéhez:

Győződjön meg arról, hogy a bemenet értéke megegyezik az űrlap nevével.

Másodszor, mivel az újrafelhasználott kártya linkek listájára szolgál, a Next.js tartalmaz néhány lebegő effektust. Ez zavarosá teszi az űrlap használatát, ezért távolítsuk el azokat

Távolítsa el a következőket styles/Home.module.css:

.card:hover, .card:focus, .card:active { color: #0070f3; border-color: #0070f3; } 

Egy extra bónusz lépésként frissítem az oldal címét a „Kapcsolatfelvétel” címre, és eltávolítom a leírást. Készítsd ezt nyugodtan, amit csak akarsz.

Ha pedig készen áll, hasonlóan a korábbihoz, adja hozzá ezt új tárhelyként a GitHub-hoz vagy a kedvenc Git-szolgáltatójához.

Kövesse az elkötelezettséggel együtt!

2. lépés: A Next.js alkalmazás beállítása és telepítése a Netlify-ra

Alkalmazásunk telepítése a Netlify-ra elég hasonlóan fog kinézni, de mielőtt odaérnénk, be kell állítanunk a Next.js alkalmazást, hogy exportálhassuk az építkezésen.

A Next.js alkalmazásunkban a package.jsonfájl belsejében a buildparancsfájlt a következőkre szeretnénk frissíteni :

"build": "next build && next export", 

A buildparancsfájl futtatásakor az alkalmazás statikus HTML-re, CSS-re és JS-re fordítja a outkönyvtár belsejében . Ez lehetővé teszi, hogy a Netlify-ra telepítsük. Ha akarja, akár helyben is kipróbálhatja.

Ezzel a változtatással hajtsa végre ezt, és nyomja meg a Git szolgáltatónál.

Ezután az alkalmazás telepítése többnyire hasonló lesz az 1. részhez. Az egyetlen különbség az, hogy van egy Next.js alkalmazásunk, hozzá kell adnunk az összeállítás lépéseit.

A kezdéshez szeretnénk csatlakoztatni a Git szolgáltatónkat, csakúgy, mint az 1. részben.

Miután eljutottunk a Telepítési beállítások oldalra, konfigurálni szeretnénk a Build parancsot és a Publish könyvtárat.

A Építőanyag parancs lesz yarn build, vagy npm run buildattól függően, hogy milyen csomagkezelő használtál, és a közzététel könyvtár lesz out.

Ezután kattintson a Webhely telepítése elemre , és ez ugyanúgy elindul, mint korábban.

Miután befejezte a telepítést, készen állunk az alkalmazás megnyitására.

Miután megnyitottuk az alkalmazást, tesztelhetjük az űrlapunkat kitöltéssel és a beküldéssel.

A korábbiakhoz hasonlóan a Netlify sikeroldalára kerülünk. De ha visszamegyünk és belenézünk a Netlify irányítópultunkba, akkor látni fogjuk a beküldésünket!

Kövesse az elkötelezettséggel együtt!

Bónusz: Tartsa meg az embereket a webhelyén egy sikerüzenettel

A Netlify űrlapok másik jó tulajdonsága, hogy lehetővé teszi az űrlap beállítását, hogy az embereket a webhelyén tartsa, az űrlap konfigurálásával közvetlenül az oldalon.

Itt nagyon sok lehetőséged van, legyen szó valakinek átirányításáról egy új oldalra, vagy az üzenetküldés konfigurálásáról azon az oldalon, ahonnan beküldték.

Ehhez a bemutatóhoz fel fogunk állítani egy URL-paramétert, amelyet észlelni tudunk egy sikeres üzenet megjelenítésére, ha látjuk ezt a paramétert.

Ehhez adja meg a HTML-űrlapon a következő attribútumot:

action="/?success=true" 

Ez megmondja a Netlify-nak, hogy szeretnénk a kezdőlapon maradni (mivel csak egy oldalunk van), de alkalmazzuk az URL-paramétert, hogy az alkalmazásunkban észlelhessük.

Ezután a useStateés a useEffecthorgok segítségével megtekinthetjük ezt a paramétert és frissíthetjük az oldalt.

Importálja a fájl tetején ezeket a horgokat:

import { useState, useEffect } from 'react'; 

A tetején lévő Home komponensünk belsejében adjuk hozzá az állapotunkat:

const [success, setSuccess] = useState(false); 

Az URL paraméter észleléséhez használhatjuk a useEffecthorgot:

useEffect(() => { if ( window.location.search.includes('success=true') ) { setSuccess(true); } }, []); 

Megjegyzés: ez egyszerű módja annak, hogy ezt az eredményt elérjük a bemutatón. Ha bonyolultabb alkalmazásod van, érdemes valami logikusabb nevet adni a paraméternek, és megfelelően elemezni az érték URL-paramétereit.

Ez az, amikor a komponens megjelenik, beindítja ezt a useEffecthorgot, ellenőrzi az URL paramétereit és megkeresi success=true. Ha megtalálja, frissíti successállapotváltozónkat true!

Ezután az oldal címe alatt (

), adjuk hozzá a következő részletet:

{success && ( 

Successfully submitted form!

)}

Itt azt keressük, hogy successigaz-e, és ha igen, akkor beillesztünk egy sor szöveget, amely szerint az űrlapot sikeresen elküldték.

Bár nem tudja beküldeni az űrlapot helyben, ezt kipróbálhatja, ha felkeresi a helyben futó alkalmazását az ?success=trueURL-paraméterrel, például:

//localhost:3000/?success=true 

Végül, ezeket a változtatásokat továbbíthatja Git-szolgáltatójához, és a Netlify automatikusan újjáépíti webhelyét.

Miután elkészült, beküldheti az űrlapot, mint korábban, és láthatja a sikerüzenetet.

És nézze meg, hogy az űrlapunk még mindig beküldik!

Kövesse az elkötelezettséggel együtt!

Netlify űrlapok és ügyféloldali kód

A Netlify megoldásánál egy dolgot érdemes figyelembe venni, ez csak statikus HTML oldalaknál működik "egyszerűen".

Ha az oldala a JavaScript használatával kezeli az oldal tartalmát, például csak akkor töltsön fel űrlapot, ha az oldal betöltődik, akkor meg kell néznie a Netlify dokumentációját arról, hogyan lehet ezt egy űrlapattribútummal működtetni.

A Netlify emellett példát mutat be arra, hogyan lehet dinamikusan beküldeni az űrlapot a JavaScript-sel, így egyedi élményt hozhat létre alkalmazásában.

Mi mást tudnál tenni?

Speciális munkafolyamatok beállítása más eszközökkel

A Netlify lehetővé teszi, hogy integrálódjon más eszközökkel, hogy lehetővé tegye az űrlap-beküldések megbirkózását. Nevezetesen a Netlify a Zapierrel működik, vagyis elfogadhatja a beérkező beadványokat, és bármit megtehet velük.

//docs.netlify.com/forms/notifications/

A spam megakadályozása a reCAPTCHA segítségével

A spam is igazi dolog. Nem akarja, hogy a beérkező leveleket elárassza a spam, így kihasználhatja a Netlify beépített Honeypot mezőjének előnyeit, vagy végigvezeti Önt a reCAPTCHA 2 hozzáadásán.

//docs.netlify.com/forms/spam-filters/

Kövessen engem további Javascript, UX és egyéb érdekességekért!

  • ? Kövess a Twitteren
  • ? Feliratkozás a Youtube-ra
  • ✉️ Iratkozzon fel a hírlevelemre
  • ? Támogasson engem