Å Gi kundene dine enkle registrerings-og registreringsskjemaer på nettstedet ditt er viktig for å fange potensielle kunder, øke e-postlisten din og øke det totale salget.
DET er bare ett problem: HTML.
HTML5 er standardkoden som brukes til å få de fleste nettsider til å fungere. Det er språket på internett. Men som alle programmeringsspråk – Fra Javascript og jquery TIL PHP og CSS3 – det er en bratt læringskurve, spesielt hvis du aldri har rørt noen kode.
Frykt ikke. Vi er her for å hjelpe. Vi kan kanskje gjøre Deg Til Bill Gates over natten, men med hjelp av noen nyttige eksempler, ved slutten av denne opplæringen, vil du være klar til å lage et grunnleggende registreringsskjema ved HJELP AV HTML på kort tid.
💡 Før vi begynner: Vil du unngå å måtte BRUKE HTML? Med en skjemabygger Som Paperform kan du spare tid og lage et kraftig, profesjonelt registreringsskjema på få minutter.
5 Trinn For Å Lage ET HTML-Registreringsskjema
du er opptatt, vet vi. Det er en trillion artikler å lese. Netflix filmer å se på. TV-programmer til binge. Så la oss komme rett inn i fem-trinns guide til å lage et registreringsskjema I HTML.
Trinn 1. Velg EN HTML-editor
akkurat som du trenger en tekstbehandler for å lage et tekstdokument, trenger du en tekstredigerer for Å lage HTML-kode. Disse utviklingsverktøyene konverterer den rare og fantastiske koden du skriver inn i et registreringsskjema.
det er dusinvis (om ikke hundrevis) AV HTML-redaktører på markedet, hvorav de fleste har en tendens til å tilby lignende funksjoner. Vi vil ikke kjede deg med detaljene, men det er noen viktige ting som vil gjøre livet ditt enklere:
feilsøking: Automatisk markere syntaksfeil for å gjøre reparasjoner enklere.
automatisk fullføring: Foreslår relevante HTML-elementer basert på tidligere endringer (sparer deg for mye tid med lang kode).
syntakshøydepunkter: Bruker farger på FORSKJELLIGE HTML-koder basert på bestemte kategorier for å gjøre det enklere å lese og sortere koden din.
Søk og erstatt: Finn og overskriv alle forekomster av en bestemt kode i stedet for å redigere hver enkelt.
Hvis du virkelig kommer inn i koding, er det flere funksjoner å bekymre deg for, men det bør mer enn dekke deg for dette enkle registreringsskjemaet.
hvilken app du velger er et spørsmål om personlig preferanse. Vil du ha noe du kan bruke i nettleseren din? Prøv Codepen. Barebones? Notepad++. Et minimalistisk BRUKERGRENSESNITT og intuitivt inngangsfelt? Sublime Tekst hele veien.
vår co-grunnlegger og bosatt kode-geek, Dean, sverger VED VS Kode.
» FRA en nerdete ståsted VS Kode passer snuggly Inn Paperform tech stack og har stor ekstern utvikling plugins som jeg elsker. DET er flott FOR HTML-ting også, og super tilpassbar hvis du liker at verktøyene dine ser bra ut mens du fortsatt har all funksjonaliteten du trenger.
Det er ikke nødvendig å fikse på dette for mye. Dessverre er DET ingen HTML-editor som vil generere et registreringsskjema for deg, uansett hvor flott det kan være. Den delen er alt på deg.
Trinn 2. Lag DIN HTML-fil
det neste trinnet er å fortelle teksteditoren din at du har tenkt å lage EN HTML-fil. Gjør dette ved å opprette en ny fil og deretter lagre den med «.html » forlengelse.
for eksempel «myform.HTML». Når du har skiltet til redaktøren at du lager HTML-kode, skal den automatisk generere følgende kode for deg:
<!DOCTYPE html><html><head> <title></title></head><body> </body></html>💡 Tips: noen redaktører vil ikke automatisk fylle ut. Det er greit. Bare kopier og lim inn denne koden ovenfor, og den vil ha samme effekt.
Trinn 3. Legg til tekstfelt og opprett skjemaet
Ok. Det er på tide å begynne å legge til den aktuelle koden og slå den barebones HTML til et registreringsskjema.
Nå Hvis du bare er her for koden vi forstår. Du finner alt du trenger et avsnitt eller to nedenfor. Føl deg fri til å hoppe videre. 👇
Men hvis du er interessert i å lære litt om hva du skriver inn egentlig betyr, gi oss en rask-brann HTML tutorial interlude.
ET HTML-skjema består av «formelementer». Dette er ting som tekstbokser, radioknapper, avmerkingsbokser og rullegardinmenyer som gjør det faktisk mulig for folk å samhandle med ditt levende skjema.
hvert element har sin egen spesifikke kode. HTML-koden <form> definerer for eksempel koden som et skjema, mens <textarea> kan brukes til å samle inn brukerinnganger.
disse elementene er som sko: de kommer alltid i par. Alle koder du vil inkludere i skjemaet, må settes inn mellom open <form > og closed < / form > tags.
Ok, Det Er Sparknotes. Nå for koden må du faktisk legge inn. Her:
<!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>denne (grunnleggende) HTML-koden vil sende ut noe som ser slik ut:
Ikke akkurat det beste utseende i verden er det? Men hei, du spurte hvordan du lager ET HTML-registreringsskjema. Ikke skyt budbringeren.
taggen <tr> forteller at den skal ordne svarene på rad, mens<td > (som står for tabelldata) skilt som du vil fange opp uansett respondenttype. I dette tilfellet har vi lagt til to felt for enkelhets skyld:
- Skriv inn e-postadresse
- Skriv inn passord
det er ingenting som hindrer deg i å legge til flere felt. Inngangstyper varierer fra tall og datoer til farger eller til og med bilder. Bare kopier koden nedenfor og sett inn inngangstypen du vil ha. W3Schools har en flott liste for å veilede deg.
<tr> <td> Email Address: </td> <td> <input type="text" email=""> </td>💡 Tips: Det Er avgjørende Å Velge riktig inngangstype. Det forteller skjemaet hvordan teksten skal vises på skjermen. For eksempel er det siste vi vil at noens passord skal være synlig når de skriver det, så vi bruker» passord » – inngangstypen for å skjule det.
Trinn 4. Legg til plassholdere
en plassholder er tekst i skjemafeltene som ber respondentene om å svare på en bestemt måte. Det brukes hovedsakelig som et dytt i riktig retning, men det er også en nyttig strategi for å gjøre skjemaer mer engasjerende.
la oss for eksempel si at du legger til et enkelt navnefelt i skjemaet. Du kan skrive «sett inn navn «og bli ferdig med det, eller du kan gran ting opp ved å skrive» Bruce Wayne » for litt flair.
uansett hvilken strategi du går for, er det ganske enkelt å legge til plassholdere I HTML-registreringsskjemaet. Etter inngangstypen, sett inn «placeholder=» med teksten du vil vise.
<!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>Å Skrive inn denne koden vil produsere et skjema som dette:
Ganske barebones. Men det fungerer. Du kan opprette flere alternativer for kundene å velge deres demografi som alder eller kjønn ved hjelp av en lignende kode som den ovenfor.
hvis du vil opprette et kjønnsfelt, setter du inn følgende verdier i koden (rett over den siste </tabellen> – koden). Vi vil også legge til et telefonnummer og drop-down ‘Emne’ alternativ.
<input type="checkbox" name="Male" value="Male"> Male<br> <input type="checkbox" name="Female" value="Female"> Female<br>dette vil gjøre datafeltet til avmerkingsbokser-en for mann og en for kvinne. Nå er det slik den endelige iterasjonen av HTML-registreringsskjemaet ditt vil se ut:
Ikke akkurat den store avsløringen du forventet, ikke sant? Kan du forestille deg noen som søker din bedrift På Google og blir møtt med denne siden? Eller dele dette på sosiale medier?
det er trygt å si at DENNE TYPEN HTML-påloggingsskjema ikke akkurat vil oppfordre noen til å registrere seg for bedriften din. Det ville være en overveldende ett spørsmål på deres sinn, som sannsynligvis er den samme du har. . .
Hvorfor ER HTML-Registreringsskjemaet Mitt Så Stygt?
SIDEN DU ikke kan se HTML-skjemaet ditt, er DET ikke spesielt attraktivt. Det er litt av en stygg andunge. Det er greit-vi kan ikke alle Være Margot Robbie-men det lokker ikke akkurat folk til å fylle det ut.
Og det er problemet. HTML-skjemaer pleier å være:
- Kjedelig
- Kjedelig
- Vanskelig å tilpasse
- Clunky å administrere
DETTE er ned TIL DEN enkle natur HTML. Det er et rammeverk som bidrar til å fullføre de nødvendige skjemahandlingene, men det vil absolutt ikke vinne noen designpriser.
den enkle løsningen på dette problemet er å bruke en dedikert online skjemabygger som Paperform for å unngå tunge løft AV HTML eller CSS. Du kan bygge vakre registrering, kontaktskjemaer og fulle destinasjonssider—blant hundrevis av andre kreasjoner – i løpet av minutter uten en eneste linje med kode.
Men kanskje du er virkelig satt på HELE HTML-tingen (eller kanskje du bare er en sucker for straff). Uansett, hvis du virkelig er forpliktet TIL HTML-registreringsskjemaet, kan du forbedre utseendet ved Å bruke CSS.
Trinn 5: Rediger HTML-Registreringsskjemaet MED CSS
CSS er et programmeringsspråk som brukes til å style ET HTML-dokument. Den tilpasser HVORDAN HTML-elementer vises på skjermen, og lar deg tilpasse alt fra skriftfarger og opasitet til å legge til et bakgrunnsbilde eller koble til en annen side med en <href > tag.
nå vil du være her hele uken hvis vi oppførte hver ENESTE CSS-eiendom. Vi kunne gjøre det og prøve Å øke SEO på denne siden, men det er ikke moro for noen. Hvis Du er ute etter en omfattende liste, anbefaler Vi W3School CSS Referanseliste.
for å få til vår tutorial, vil vi gi VÅR HTML registreringsskjema en rask makeover MED CSS. Vi vil tilpasse tekstfarge, skriftstil og justere margene for en all-around (litt) bedre utseende.
💡 Tips: den vanligste måten å legge CSS til EN HTML-side er med en ekstern stilarkfil koblet til elementet. Dette stilarket er opprettet i samme tekstredigerer og lagret med «.css » forlengelse.
her er koden vi bruker:
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 }og med det styling magi, skjemaet vil ende opp med å se ut som den nedenfor. Det er litt som å slå leppestift på en gris, men det er bedre i liten grad.
Hvorfor ET HTML-Registreringsskjema Ikke Er Den Beste Løsningen
mens du lærer å kode og lage grunnleggende registreringsskjemaer, er det en morsom ferdighet å plukke opp, bør du seriøst revurdere å bruke dem til noe viktig formål. Ikke prøv å bootstrap det, det er bare ikke verdt tiden, innsatsen og frustrasjonen.
enten du trenger et kontaktskjema for kundene dine, et innloggingsskjema for bedriften din eller et studentregistreringsskjema for det nye skoleåret, vil enhver løsning klebrig tapet sammen MED HTML og CSS ende opp med å se upolert og uprofesjonelt—spesielt hvis du ikke har noen tidligere kodingsferdigheter.
Heldigvis er Det En annen måte å bygge registreringsskjemaer som er mye enklere, raskere og mer intuitiv: en online skjemabygger som Paperform. Med vår enkle plattform kan du være i gang med en vakker, merket form i løpet av minutter.
Med Paperform får du ikke bare et grunnleggende HTML-skjema. Du får en dynamisk opplevelse som lar deg samle inn alle typer data du trenger—fra enkle kontaktdetaljer til komplekse beregninger og til og med ta betalinger. Ingen designkompetanse nødvendig.
i Tillegg er tilpasning uanstrengt. Tweak farger og fonter og justere skjemaet UI med noen få klikk. Så, når du er fornøyd med din nye skapelse, kan du legge inn skjemaet på nettstedet ditt, være vert for det gratis på nettet, eller legge det inn På WordPress-siden din med Vår WordPress-plugin.
for å vise hvor enkelt det er, pisket vi opp en snazzy ser registreringsskjema:
har du ikke lyst til å bygge din egen kreasjon? Det er hva vårt bibliotek med 600 + skjemamaler er for. Velg en av våre registreringsmaler, legg den til kontoen din med ett klikk, og kom deg opp raskere enn du kan drikke din morgen espresso.
et registreringsskjema er bare begynnelsen på Hva Du kan gjøre Med Paperform. Prøv det selv med vår 14-dagers gratis prøveversjon – ingen kredittkort kreves.
Registreringsskjema I HTML Vanlige Spørsmål
kan jeg opprette ET HTML-registreringsskjema uten CSS?
Ja, men det ville ikke være pent. Faktisk vil Det se ut som Noe Fra Microsofts tidlige dager. Ikke pen i det hele tatt.
hvordan oppretter JEG ET HTML-registreringsskjema med bildeopplasting?
for å legge til et bildeopplastingsfelt, bruk inndatatypen «fil».
Kan JEG lage ET HTML-skjema uten å bruke et bord?
mens bordkommandoen hjelper med justering, er det enkelt å lage et skjema uten det. Bare skriv inn dine innganger direkte uten’ tr ‘eller’ td ‘ kommandoer.
Er DET mulig å bruke ET HTML-registreringsskjema for online shopping
Ja. For å opprette et online shoppingskjema inkluderer felt for kontaktinformasjon, leveringsadresse, produkt-ID og leveringssted. Ting blir vanskelig når du samler inn betalinger, og derfor anbefaler Vi Paperforms enkle betalingsskjemaer.
hvordan oppretter jeg en påloggings-og registreringsside?
Vi har dekket hvordan du lager disse, men svaret er med mye kode og tweaking. Det er mye enklere å bruke en dedikert online skjemabygger som Paperform.