tarjoamalla asiakkaille yksinkertaisia rekisteröitymis-ja rekisteröintilomakkeita sivustollasi on välttämätöntä kaapata liidit, kasvaa sähköpostilista, ja parantaa yleistä myyntiä.
on vain yksi ongelma: HTML.
HTML5 on standardi koodi, jolla useimmat verkkosivut saadaan toimimaan. Se on Internetin kieli. Mutta kuten mikä tahansa ohjelmointikieli-Javascript ja jquery PHP ja CSS3-on jyrkkä oppimiskäyrä, varsinkin jos et ole koskaan koskenut mitään koodia.
pelko ei. Tulimme auttamaan. Saatamme pystyä muuttamaan sinut Bill Gatesiksi yhdessä yössä, mutta joidenkin hyödyllisten esimerkkien avulla tämän opetusohjelman loppuun mennessä olet valmis luomaan PERUSREKISTERÖINTILOMAKKEEN HTML: n avulla hetkessä.
💡 ennen kuin aloitamme: Haluatko välttää HTML: n käytön vaivan? Kanssa lomakkeen rakentaja kuten Paperform, voit säästää aikaa ja luoda tehokas, ammatillinen ilmoittautumislomake minuuteissa.
5 askelta HTML-rekisteröintilomakkeen luomiseen
you ’ re busy, we know. Luettavana on biljoona artikkelia. Netflix elokuvia katsella. TV-ohjelmia ahmimiseen. Joten päästä suoraan viiden askeleen opas luoda rekisteröintilomake HTML.
Vaihe 1. Valitse HTML-editori
aivan kuten tarvitset tekstinkäsittelyohjelman luodaksesi tekstidokumentin, tarvitset tekstieditorin HTML-koodin luomiseen. Nämä kehitystyökalut muuntaa outo ja ihana koodi kirjoitat rekisteröintilomake.
markkinoilla on kymmeniä (ellei satoja) HTML-muokkaimia, joista useimmilla on taipumus tarjota samanlaisia ominaisuuksia. Emme pitkästytä sinua yksityiskohdilla, mutta muutama keskeinen asia helpottaa elämääsi:
virheentunnistus: Korosta automaattisesti syntaksivirheet korjausten helpottamiseksi.
automaattinen täydennys: ehdottaa relevantteja HTML-elementtejä aiempien muutosten perusteella (säästää paljon aikaa pitkällä koodilla).
syntaksi highlights: soveltaa värejä eri HTML-tageihin, jotka perustuvat tiettyihin luokkiin, jotta koodin lukeminen ja lajittelu olisi helpompaa.
Etsi ja korvaa: Etsi ja korvaa kaikki tietyn koodin esiintymät sen sijaan, että muokkaisit kutakin erikseen.
jos olet todella pääsemässä koodaamiseen, on enemmän ominaisuuksia, joista huolestua, mutta sen pitäisi kattaa enemmän kuin tämä yksinkertainen rekisteröintilomake.
Which app you select is a matter of personal preference. Haluatko jotain, jota voit käyttää selaimessasi? Kokeile Koodinpätkää. Barebones? Muistio++. Minimalistinen käyttöliittymä ja intuitiivinen syöttökenttä? Ylevää tekstiä koko matkan.
perustajakollegamme Dean vannoo VS-koodin nimeen.
”From a nerdy standpoint VS Code fits snuggly into Paperform’ s tech stack and has great remote development plugins that I love. Se on suuri HTML tavaraa liian, ja super muokattavissa, jos haluat työkaluja näyttää hyvältä, kun vielä kaikki toiminnot tarvitset.
tähän ei tarvitse liikaa takertua. Valitettavasti, ei ole HTML editori, joka luo rekisteröintilomakkeen sinulle, ei väliä kuinka suuri se voi olla. Se on sinun syytäsi.
Vaihe 2. Luo HTML-tiedosto
seuraava vaihe on kertoa tekstieditorillesi, että aiot luoda HTML-tiedoston. Tee tämä luomalla uusi tiedosto ja sitten tallentaa sen kanssa”.html ” laajennus.
esimerkiksi ” myform.html”. Kun olet kirjautunut muokkaimeen, että luot HTML-koodia, sen pitäisi automaattisesti luoda sinulle seuraava koodi:
<!DOCTYPE html><html><head> <title></title></head><body> </body></html>💡 Vihje: jotkut toimittajat eivät automaattisesti Täytä. Ei se mitään. Kopioi ja liitä tämä koodi edellä ja se on sama vaikutus.
Vaihe 3. Lisää tekstikenttiä ja luo oma lomakkeesi
Alright. On aika aloittaa lisäämällä asiaankuuluva koodi ja muuttaa että barebones HTML osaksi rekisteröintilomake.
nyt jos olet täällä vain ymmärtämämme koodin takia. Löydät kaiken mitä tarvitset kappaleen tai kaksi alla. Hypätkää vapaasti eteenpäin. 👇
mutta jos olet kiinnostunut oppimaan hieman siitä, mitä syötät todella tarkoittaa, salli meille pikatulen HTML opetusohjelma välisoitto.
HTML-muoto koostuu ”muotoelementeistä”. Nämä ovat asioita, kuten tekstilaatikot, radiopainikkeet, valintaruudut ja pudotusvalikot, joiden avulla ihmiset voivat olla vuorovaikutuksessa live-lomakkeesi kanssa.
jokaisella alkuaineella on oma täsmälappunsa. Esimerkiksi HTML <lomake> tagi määrittelee koodin lomakkeeksi, kun taas <textarea> voidaan käyttää käyttäjän syötteiden keräämiseen.
nämä elementit ovat kuin kengät: ne tulevat aina pareittain. Kaikki tagit, jotka haluat sisällyttää lomakkeeseesi, on lisättävä avoimen <lomakkeen> ja suljetun </lomakkeen> tagien väliin.
Okay that ’ s the Sparknotes. Nyt koodi, joka sinun on syötettävä. Tässä.:
<!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>tämä (perus) HTML-koodi tulostaa jotain, joka näyttää tältä:
ei ihan maailman komeimmasta päästä ole? Mutta hei, kysyit miten luoda HTML-rekisteröintilomake. Älä ammu viestintuojaa.
merkintä <tr> kertoo sen järjestävän vastaukset peräkkäin, kun taas <td> (joka tarkoittaa taulukkotietoja) opasteet, jotka haluat tallentaa vastaajien tyypin mukaan. Tässä tapauksessa lisäsimme kaksi kenttää yksinkertaisuuden vuoksi:
- Anna sähköpostiosoite
- Anna salasanat
mikään ei estä sinua lisäämästä lisäkenttiä. Syöttötyypit vaihtelevat numeroista ja päivämääristä väreihin tai jopa kuviin. Kopioi alla oleva koodi ja aseta haluamasi syöttötyyppi. W3Schools on hyvä luettelo opastaa.
<tr> <td> Email Address: </td> <td> <input type="text" email=""> </td>💡 Vihje: oikean syöttötyypin valinta on ratkaisevan tärkeää. Se kertoo lomakkeelle, miten teksti tulee näyttää ruudulla. Esimerkiksi, viimeinen asia, jonka haluamme on jonkun salasanan näkyvän, kun he kirjoittavat sitä, joten käytämme ”salasana” syöttötyyppi salata se.
Vaihe 4. Lisää paikkamerkit
paikkamerkki on lomakkeidesi sisällä oleva teksti, joka kehottaa vastaajia vastaamaan tietyllä tavalla. Sitä käytetään lähinnä tönäisynä oikeaan suuntaan, mutta se on myös hyödyllinen strategia tehdä lomakkeista mukaansatempaavampia.
sanotaan esimerkiksi, että lisäät lomakkeeseesi yksinkertaisen nimikentän. Voit kirjoittaa ” lisää nimi ”ja tehdä sen, tai voit parantaa asioita kirjoittamalla” Bruce Wayne ” hieman hohto.
riippumatta strategiasta, on melko helppoa lisätä paikkamerkit HTML-rekisteröintilomakkeeseen. Kun syötetyyppi, lisää” placeholder= ” tekstin haluat näyttää.
<!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>tämän koodin syöttäminen tuottaa tällaisen lomakkeen:
Pretty barebones. Mutta se toimii. Voit luoda lisävaihtoehtoja asiakkaille valita väestötiedot, kuten ikä tai sukupuoli käyttäen samanlaista koodia kuin edellä.
luodaksesi sukupuolikentän, lisää seuraavat arvot koodiisi (aivan viimeisen </taulukon> tagin yläpuolelle). Lisäämme myös puhelinnumeron ja pudotusvalikosta ’aihe’ vaihtoehto.
<input type="checkbox" name="Male" value="Male"> Male<br> <input type="checkbox" name="Female" value="Female"> Female<br>tämä muuttaa tietokentän valintaruuduiksi – yksi miehille ja yksi naisille. Nyt näin HTML-rekisteröintilomakkeen lopullinen iteraatio näyttää:
ei aivan sellainen suuri paljastus kuin odotit, vai mitä? Voitko kuvitella jonkun hakevan yrityksesi Googlesta ja tapaavan tämän sivun? Tai jakaa tämän sosiaalisessa mediassa?
on turvallista sanoa, että tällainen HTML-kirjautumislomake ei varsinaisesti rohkaisisi ketään rekisteröitymään yritykseesi. Heillä olisi mielessään yksi häkellyttävä kysymys, joka on luultavasti sama kuin sinulla. . .
miksi HTML-Rekisteröintilomakkeeni on niin ruma?
koska et näe HTML-lomakettasi ei ole erityisen houkutteleva. Se on vähän ruma ankanpoikanen. Mikä on hienoa – emme voi kaikki olla Margot Robbie-mutta se ei varsinaisesti houkuttele ihmisiä täyttämään sitä.
ja siinä se ongelma onkin. HTML-lomakkeet ovat yleensä:
- tylsää
- tylsää
- vaikeasti muokattavaa
- kömpelöä hallita
tämä johtuu HTML: n yksinkertaisuudesta. Se on kehys, joka auttaa suorittamaan tarvittavat muototoimet, mutta se ei varmasti voita mitään muotoilupalkintoja.
helppo ratkaisu tähän ongelmaan on paperformin kaltaisen verkkolomakkeen rakentajan käyttäminen HTML: n tai CSS: n raskaan nostamisen välttämiseksi. Voit rakentaa kauniita ilmoittautumisia, yhteydenottolomakkeita ja kokonaisia aloitussivuja—satojen muiden luomusten joukkoon—muutamassa minuutissa ilman yhtäkään koodiriviä.
mutta ehkä olet todella asetettu koko HTML juttu (tai ehkä olet vain tikkari rangaistus). Joka tapauksessa, jos olet todella sitoutunut HTML-rekisteröintilomakkeeseen, voit parantaa sen ulkonäköä käyttämällä CSS: ää.
Vaihe 5: Muokkaa HTML-rekisteröintilomaketta CSS
CSS on ohjelmointikieli, jota käytetään HTML-dokumentin tyylittämiseen. Se räätälöi HTML-elementtien näytön ja voit muokata kaikkea fontin väreistä ja peittävyydestä taustakuvan lisäämiseen tai linkittämiseen toiselle sivulle, jossa on <href> tagi.
Now, you would be here all week if we listed every every CSS property. Voisimme tehdä sen ja yrittää lisätä SEO tämän sivun, mutta se ei ole hauskaa kenellekään. Jos olet jälkeen kattava luettelo, suosittelemme W3School CSS Reference list.
opetusohjelman vuoksi annamme HTML-rekisteröintilomakkeellemme nopean muodonmuutoksen CSS: llä. Muokkaamme tekstin väriä, kirjasintyyliä ja muokkaamme marginaaleja niin, että lopputulos on kaikin puolin (hieman) parempi.
💡 Vihje: yleisin tapa lisätä CSS HTML-sivulle on elementin kanssa linkitetty ulkoinen tyylitiedosto. Tämä tyylilevy luodaan samalla tekstieditorilla ja tallennetaan”.CSS ” laajennus.
tässä on koodi, jota käytämme:
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 }ja sillä muotoilutaialla, muotosi päätyy näyttämään alla olevalta. Se on vähän kuin läimäyttäisi huulipunaa sialle, mutta se on jossain määrin parempi.
miksi HTML-rekisteröintilomake ei ole paras ratkaisu
vaikka perusrekisteröintilomakkeiden koodaamisen ja luomisen opettelu on hauska taito poimia, kannattaa harkita vakavasti niiden käyttöä tärkeisiin tarkoituksiin. Älä yritä bootstrap sitä, se ei vain ole vaivan arvoista aikaa, vaivaa ja turhautumista.
tarvitsitpa yhteydenottolomakkeen asiakkaillesi, kirjautumislomakkeen yrityksellesi tai opiskelijarekisteröintilomakkeen uudelle lukuvuodelle, mikä tahansa HTML: n ja CSS: n kanssa teipattu ratkaisu näyttää viimeistelemättömältä ja epäammattimaiselta-varsinkin jos sinulla ei ole aikaisempaa koodaustaitoa.
onneksi on toinenkin tapa rakentaa rekisteröintilomakkeita, jotka ovat paljon helpompia, nopeampia ja intuitiivisempia: paperform-tyyppinen verkkolomakkeen rakentaja. Helpon alustamme avulla voit saada kauniin, brändätyn muodon käyntiin muutamassa minuutissa.
Paperimuodolla ei saada vain HTML-perusmuotoa. Saat dynaamisen kokemuksen, joka antaa sinulle mahdollisuuden kerätä mitä tahansa tarvitsemaasi tietoa yksinkertaisista yhteystiedoista monimutkaisiin laskelmiin ja jopa maksujen vastaanottamiseen. Suunnitteluosaamista ei tarvita.
Plus, räätälöinti on vaivatonta. Nipistä värejä ja fontteja ja säädä lomakkeen käyttöliittymää muutamalla klikkauksella. Sitten, kun olet tyytyväinen uuden luomuksen voit upottaa lomakkeen sivustossasi, isäntä verkossa ilmaiseksi, tai upottaa sen WordPress sivuston meidän WordPress plugin.
näyttääksemme kuinka helppoa se on, vatkasimme siistin näköisen ilmoittautumislomakkeen:
ei huvita rakentaa omaa luomusta? Se on meidän kirjasto 600 + form malleja on varten. Valitse yksi rekisteröintimalleistamme, lisää se tilillesi yhdellä klikkauksella, ja pääset vauhtiin nopeammin kuin ehdit juoda aamuespressosi.
ilmoittautumislomake on vasta alkua sille, mitä Paperiformilla voi tehdä. Kokeile sitä itse meidän 14 päivän ilmainen kokeiluversio-ei tarvita luottokorttia.
rekisteröintilomake HTML-Usein kysyttyjä kysymyksiä
Voinko luoda HTML-rekisteröintilomakkeen ilman CSS: ää?
Kyllä, mutta se ei olisi kaunista. Itse asiassa se näyttäisi joltain Microsoftin alkuajoilta. Ei yhtään kaunista.
Miten luon HTML-rekisteröintilomakkeen kuvan latauksella?
lisätäksesi kuvan lähetyskentän käytä” tiedosto ” – syötetyyppiä.
Voinko tehdä HTML-lomakkeen ilman taulukkoa?
vaikka taulukomento auttaakin linjauksessa, muoto on helppo tehdä ilman sitä. Vain suoraan syöttää syötteet ilman ’ tr ’ tai ’ td ’ komentoja.
onko mahdollista käyttää HTML-rekisteröintilomaketta verkkokaupoissa
Kyllä. Voit luoda verkkokauppalomakkeen sisältävät kentät yhteystiedot, toimitusosoite, tuotetunnus ja toimituspiste. Asiat muuttuvat hankaliksi maksujen perimisessä, minkä vuoksi suosittelemme Paperformin yksinkertaisia maksulomakkeita.
Miten luon kirjautumis-ja rekisteröintisivun?
olemme käyneet läpi, miten näitä luodaan, mutta vastaus on paljon koodaamalla ja säätämällä. Se on paljon helpompi käyttää oma online lomake rakentaja kuten Paperform.