az ügyfelek egyszerű regisztrációs és regisztrációs űrlapjainak biztosítása a webhelyén elengedhetetlen az érdeklődők rögzítéséhez, az e-mail lista bővítéséhez és az Általános eladások növeléséhez.
csak egy probléma van: HTML.
a HTML5 a legtöbb weboldal működéséhez használt szabványos kód. Ez az internet nyelve. De mint minden programozási nyelv—a Javascript-től és a jQuery—től a PHP-ig és a CSS3-ig-van egy meredek tanulási görbe, különösen, ha soha nem érintettél semmilyen kódot.
ne félj. Segíteni jöttünk. Lehet, hogy egyik napról a másikra Bill Gates-vé változtathatjuk Önt, de néhány hasznos példa segítségével az oktatóanyag végére készen áll arra, hogy pillanatok alatt hozzon létre egy alapvető regisztrációs űrlapot a HTML használatával.
mielőtt elkezdenénk: el akarjuk kerülni a HTML használatával járó kellemetlenségeket? Egy olyan űrlapkészítővel, mint a Paperform, időt takaríthat meg, és percek alatt létrehozhat egy hatékony, professzionális regisztrációs űrlapot.
5 lépés a HTML regisztrációs űrlap létrehozásához
elfoglalt vagy, tudjuk. Van egy billió cikket olvasni. Netflix filmeket nézni. TV műsorok a mértéktelen. Tehát menjünk egyenesen az öt lépésből álló útmutatóba a regisztrációs űrlap HTML-ben történő létrehozásához.
1. lépés. Válasszon HTML-szerkesztőt
csakúgy, mint szövegszerkesztőre van szüksége egy szöveges dokumentum létrehozásához, a HTML-kód létrehozásához szövegszerkesztőre is szüksége van. Ezek a Fejlesztőeszközök átalakítják a furcsa és csodálatos kódot, amelyet beír egy regisztrációs űrlapba.
több tucat (ha nem több száz) HTML-szerkesztő van a piacon, amelyek többsége hasonló funkciókat kínál. Nem fogjuk untatni a részleteket, de van néhány kulcsfontosságú dolog, ami megkönnyíti az életét:
hiba észlelése: Automatikusan jelölje ki a szintaktikai hibákat a javítások megkönnyítése érdekében.
Automatikus kiegészítés: a korábbi változtatások alapján releváns HTML elemeket javasol (egy csomó időt takarít meg hosszú kóddal).
szintaxis kiemelések: színeket alkalmaz különböző HTML-címkékre bizonyos kategóriák alapján, hogy megkönnyítse a kód olvasását és rendezését.
Keresés és csere: keresse meg és írja felül egy adott kód összes példányát, ahelyett, hogy mindegyiket külön-külön szerkesztené.
ha tényleg bekerülni kódolás vannak további funkciók aggódni, de ez több, mint fedezi, hogy ezt az egyszerű regisztrációs űrlapot.
melyik app választja kérdése személyes preferencia. Szeretne valamit, amit a böngészőjében használhat? Próbálja Codepen. Csupasz csont? Notepad++. Minimalista felhasználói felület és intuitív beviteli mező? Fenséges szöveg egészen.
társalapítónk és rezidens code-geek, Dean esküszik a VS Code-ra.
“egy idétlen szempontból VS kód jól illeszkedik a Paperform tech stack és nagy távoli fejlesztési plugin, hogy szeretem. Ez nagyszerű a HTML cuccokhoz is, és szuper testreszabható, ha úgy tetszik, hogy az eszközök jól néznek ki, miközben továbbra is rendelkeznek az összes szükséges funkcióval.
ezt nem kell túl sokat rögzíteni. Sajnos nincs olyan HTML-szerkesztő, amely regisztrációs űrlapot generálna az Ön számára, függetlenül attól, hogy milyen nagyszerű lehet. Ez a rész a te hibád.
2.lépés. Hozzon létre HTML fájlt
a következő lépés az, hogy elmondja a szövegszerkesztőnek, hogy HTML fájlt kíván létrehozni. Ehhez hozzon létre egy új fájlt, majd mentse el a”.html ” kiterjesztés.
például: “myform.html”. Miután jelezte a szerkesztőnek, hogy HTML-kódot hoz létre, automatikusan generálnia kell a következő kódot az Ön számára:
<!DOCTYPE html><html><head> <title></title></head><body> </body></html>💡 tipp: egyes szerkesztők nem töltik ki automatikusan. Semmi baj. Csak másolja be a fenti kódot, és ugyanaz lesz a hatása.
3.lépés. Szövegmezők hozzáadása és az űrlap létrehozása
rendben. Itt az ideje, hogy elkezd hozzá a megfelelő kódot, és kapcsolja be, hogy barebones HTML egy regisztrációs űrlapot.
most, ha csak itt a kódot értjük. Az alábbiakban mindent megtalál, amire szüksége van egy-két bekezdéssel. Nyugodtan ugorj előre. 6903>
de ha érdekel, hogy egy kicsit többet megtudj arról, hogy mit is jelent valójában, engedj meg nekünk egy gyors HTML tutorial közjátékot.
a HTML űrlap “űrlapelemekből”áll. Ezek olyan dolgok, mint a szövegdobozok, a rádiógombok, a jelölőnégyzetek és a legördülő menük, amelyek lehetővé teszik az emberek számára, hogy kölcsönhatásba lépjenek az élő űrlappal.
minden elemnek saját címkéje van. Például a HTML <form> címke a kódot űrlapként határozza meg, míg a <textarea> felhasználható felhasználói bemenetek gyűjtésére.
ezek az elemek olyanok, mint a cipők: mindig párban jönnek. Az űrlapba felvenni kívánt összes címkét be kell illeszteni a nyitott <űrlap> és a zárt </űrlap> címkék közé.
Oké, ez a Sparknotes. Most a kódot, amelyet valójában be kell írnia. Itt:
<!DOCTYPE html><html> <head> <h1> Company Registration Form</h1> </head> <body> <form> <table> <tr> <td> Email Address: </td> <td> <input type="text" email=""> </td> </tr> <tr> <td> Password: </td> <td> <input type="Password" name=""> </td> </tr> </table> </form> </body> </html>ez az (alap) HTML kód valami ilyesmit fog kiadni:
nem éppen a legjobban kinéző dolog a világon? De hé, megkérdezte, hogyan lehet létrehozni egy HTML regisztrációs űrlapot. Ne lődd le a hírnököt.
a < tr>címke azt mondja, hogy rendezze el a válaszokat egy sorban, míg a < td> (ami a táblázat adatait jelenti) jelzőtáblákat, amelyeket a válaszadók által beírni kívánt módon szeretne rögzíteni. Ebben az esetben két mezőt adtunk hozzá az egyszerűség kedvéért:
- írja be az e-mail címet
- adja meg a jelszavakat
semmi sem akadályozza meg további mezők hozzáadását. A beviteli típusok a számoktól és a dátumoktól a színekig vagy akár a képekig terjednek. Csak másolja az alábbi kódot, és helyezze be a kívánt beviteli típust. W3Schools van egy nagy listát, hogy végigvezeti Önt.
<tr> <td> Email Address: </td> <td> <input type="text" email=""> </td>💡 tipp: a megfelelő beviteli típus kiválasztása döntő fontosságú. Megmondja az űrlapnak, hogy a szöveg hogyan jelenjen meg a képernyőn. Például az utolsó dolog, amit szeretnénk, hogy valaki jelszava látható legyen, amikor beírja, ezért a “jelszó” beviteli típust használjuk annak elrejtésére.
4.lépés. Helyőrzők hozzáadása
a helyőrző az űrlapmezők belsejében található szöveg, amely arra kéri a válaszadókat, hogy egy adott módon válaszoljanak. Főleg a helyes irányba történő lökésként használják, de hasznos stratégia az űrlapok vonzóbbá tételére is.
tegyük fel például, hogy egy egyszerű név mezőt ad hozzá az űrlaphoz. Beírhatja a “név beszúrása” szót, és kész lehet vele, vagy feldobhatja a dolgokat azzal, hogy “Bruce Wayne” – t ír egy kis hangulathoz.
bármilyen stratégiát is választ, meglehetősen egyszerű helyőrzőket hozzáadni a HTML regisztrációs űrlaphoz. A beviteli típus után illessze be a “helyőrző=” szöveget a megjeleníteni kívánt szöveggel.
<!DOCTYPE html><html><head><h1> Company Registration Form</h1></head><body><form><table><tr><td>Email Address:</td><td><input type="mail" placeholder="Email" name=""></td></tr><tr><td>Password:</td><td><input type="Password" placeholder="Password" name=""></td></tr></table></form> </body></html>ennek a kódnak a beírása egy ilyen űrlapot eredményez:
Pretty barebones. De működik. További lehetőségeket hozhat létre az ügyfelek számára a demográfiai adatok, például az életkor vagy a nem kiválasztásához a fenti kódhoz hasonló kód használatával.
nem mező létrehozásához illessze be a következő értékeket a kódba (közvetlenül az utolsó </táblázat> címke felett). Hozzáadunk egy telefonszámot és egy legördülő ‘tárgy’ opciót is.
<input type="checkbox" name="Male" value="Male"> Male<br> <input type="checkbox" name="Female" value="Female"> Female<br>ez az adatmezőt jelölőnégyzetekké változtatja—az egyik a férfi, a másik a nő számára. Most így fog kinézni a HTML regisztrációs űrlap utolsó iterációja:
nem pontosan az a nagy felfedés, amire számítottál, igaz? El tudod képzelni, hogy valaki keres a vállalkozásodon a Google-on, és találkozik ezzel az oldallal? Vagy megosztja ezt a közösségi médiában?
nyugodtan mondhatjuk, hogy ez a fajta HTML bejelentkezési űrlap nem ösztönözné senkit arra, hogy iratkozzon fel vállalkozására. Lenne egy elsöprő egy kérdés a fejükben, ami valószínűleg ugyanaz van. . .
miért olyan csúnya a HTML regisztrációs Űrlapom?
mivel nem látja, a HTML-űrlap nem különösebben vonzó. Ez egy kicsit csúnya kiskacsa. Ami rendben van—nem lehetünk mindannyian Margot Robbie—, de nem igazán csábítja az embereket, hogy töltsék ki.
és ez a probléma. A HTML űrlapok általában:
- unalmas
- unalmas
- nehéz testre
- nehézkes kezelése
Ez le, hogy az egyszerű jellege HTML. Ez egy olyan keret, amely segít a szükséges űrlapműveletek végrehajtásában, azonban biztosan nem nyer semmilyen tervezési díjat.
a probléma egyszerű megoldása egy dedikált online űrlapkészítő, például a Paperform használata, hogy elkerülje a HTML vagy CSS nehéz emelését. Gyönyörű regisztrációt, kapcsolatfelvételi űrlapokat és teljes nyitóoldalakat készíthet—több száz más alkotás között-percek alatt egyetlen kódsor nélkül.
de lehet, hogy tényleg meg az egész HTML dolog (vagy talán csak egy balek a büntetés). Akárhogy is, ha valóban elkötelezett a HTML regisztrációs űrlap mellett, javíthatja annak megjelenését a CSS használatával.
5. lépés: Szerkessze HTML regisztrációs űrlapját a CSS
segítségével a CSS egy HTML dokumentum stílusához használt programozási nyelv. Testreszabja, hogy a HTML elemek hogyan jelennek meg a képernyőn, és lehetővé teszi, hogy mindent testre szabjon a betűszínektől és az átlátszatlanságtól kezdve a háttérkép hozzáadásáig vagy egy másik oldal <href> címkével történő összekapcsolásáig.
most egész héten itt lennél, ha minden egyes CSS tulajdonságot felsorolnánk. Ezt megtehetjük, és megpróbálhatjuk növelni az oldal SEO-ját, de ez senkinek sem szórakoztató. Ha átfogó listát szeretne, javasoljuk a W3School CSS referencia listáját.
kedvéért a bemutató, adunk a HTML regisztrációs űrlapot egy gyors átalakítása CSS. Testreszabjuk a szöveg színét, a betűstílust, és módosítjuk a margókat a teljes körű (kissé) jobb megjelenés érdekében.
tipp: a CSS HTML oldalhoz történő hozzáadásának leggyakoribb módja az elemhez csatolt külső stíluslapfájl. Ez a stíluslap ugyanabban a szövegszerkesztőben jön létre, és a “.css ” kiterjesztés.
itt van a kód, amelyet használni fogunk:
table {font-family : Arial, Helvetica, sans-serif;font-size : 100%; font-weight: bold; background-color: white} h1 { color: #ea503f; font-family: Arial; text-align: center }ezzel a stílusvarázslattal a formája végül úgy néz ki, mint az alábbi. Kicsit olyan, mintha rúzsot csapna egy disznóra, de kisebb mértékben jobb.
miért egy HTML regisztrációs űrlap nem a legjobb megoldás
míg a tanulás, hogyan kell kódolni, és hozzon létre az alapvető regisztrációs űrlapok egy szórakoztató készség, hogy vegye fel, akkor komolyan újra használja őket bármilyen fontos célra. Ne próbálja meg bootstrap, csak nem éri meg az időt, erőfeszítést és frusztrációt.
függetlenül attól, hogy szüksége van egy kapcsolatfelvételi űrlapra az ügyfelek számára, egy bejelentkezési űrlapra az Ön vállalkozásához, vagy egy hallgatói regisztrációs űrlapra az új tanévre, minden olyan megoldás, amely a HTML-vel és a CSS—vel együtt ragacsos, polírozatlan és szakszerűtlen lesz-különösen, ha nincs előzetes kódolási képessége.
szerencsére van egy másik módja a regisztrációs űrlapok készítésének, amely sokkal könnyebb, gyorsabb és intuitívabb: egy online űrlapkészítő, mint a Paperform. Könnyű platformunkkal percek alatt fel lehet állni egy gyönyörű, márkás formában.
a Paperform nem csak kap egy alapvető HTML formában. Dinamikus élményt kap, amely lehetővé teszi, hogy bármilyen típusú adatot gyűjtsön, amire szüksége van—az egyszerű kapcsolattartási adatoktól a komplex számításokig, sőt a kifizetések felvételéig. Nincs szükség tervezési szakértelemre.
plusz, a Testreszabás könnyű. Csípés színek és betűtípusok és állítsa be a forma UI néhány kattintással. Ezután, ha elégedett az új alkotásával, beágyazhatja az űrlapot a webhelyére, ingyen tárolhatja online, vagy beágyazhatja a WordPress webhelyére a WordPress plugin segítségével.
hogy megmutassuk, milyen egyszerű ez, felvertünk egy snazzy kinézetű regisztrációs űrlapot:
nem érzed magad saját alkotásod építésében? Erre szolgál a több mint 600 űrlapsablonból álló könyvtárunk. Válassza ki az egyik regisztrációs sablonunkat, adja hozzá fiókjához egyetlen kattintással, és gyorsabban keljen fel és fusson, mint amennyit meg tud inni a reggeli eszpresszó.
a regisztrációs űrlap csak a kezdete annak, amit a Papírformával meg lehet csinálni. Próbálja ki magát a 14 napos ingyenes próbaverzióval-nincs szükség hitelkártyára.
regisztrációs űrlap HTML GYIK-ben
létrehozhatok HTML regisztrációs űrlapot CSS nélkül?
igen, de nem lenne szép. Valójában úgy nézne ki, mint valami a Microsoft korai napjaiból. Egyáltalán nem szép.
Hogyan hozhatok létre HTML regisztrációs űrlapot képfeltöltéssel?
képfeltöltési mező hozzáadásához használja a” fájl ” beviteli típust.
készíthetek HTML űrlapot táblázat használata nélkül?
bár a table parancs segít az igazításban, könnyen elkészíthető egy űrlap nélküle. Csak közvetlenül írja be a bemeneteket a ‘tr’ vagy ‘td’ parancsok nélkül.
lehetséges, hogy egy HTML regisztrációs űrlapot az online vásárlás
Igen. Az online vásárlási űrlap létrehozásához adja meg a kapcsolattartási adatokat, a szállítási címet, a termékazonosítót és a szállítási pontot. A dolgok bonyolulttá válnak a kifizetések beszedésekor, ezért javasoljuk a Paperform egyszerű fizetési űrlapjait.
Hogyan hozhatok létre bejelentkezési és regisztrációs oldalt?
áttekintettük, hogyan lehet ezeket létrehozni, de a válasz sok kóddal és csípéssel jár. Sokkal könnyebb használni egy dedikált online űrlapkészítőt, mint például a Paperform.