at give dine kunder enkle tilmeldings-og registreringsformularer på din hjemmeside er afgørende for at fange kundeemner, udvide din e-mail-liste og øge det samlede salg.
der er kun et problem: HTML.
HTML5 er den standardkode, der bruges til at få de fleste hjemmesider til at fungere. Det er sproget på internettet. Men ligesom ethvert programmeringssprog – fra Javascript til PHP og CSS3—er der en stejl indlæringskurve, især hvis du aldrig har rørt nogen kode.
Frygt ikke. Vi er her for at hjælpe. Vi kan muligvis gøre dig til Bill Gates natten over, men ved hjælp af nogle nyttige eksempler, ved afslutningen af denne tutorial, er du klar til at oprette en grundlæggende registreringsformular ved hjælp af HTML på ingen tid.
Karl før vi begynder: vil du undgå besværet med at bruge HTML? Med en formularbygger som Paperform kan du spare tid og oprette en kraftfuld, professionel registreringsformular på få minutter.
5 trin til oprettelse af en HTML-registreringsformular
du har travlt, vi ved det. Der er en billion artikler at læse. Film til at se. TV-udsendelser til binge. Så lad os komme direkte ind i fem-trins guide til oprettelse af en registreringsformular i HTML.
Trin 1. Vælg en HTML-editor
ligesom du har brug for en tekstbehandler til at oprette et tekstdokument, har du brug for en teksteditor til at oprette HTML-kode. Disse udviklingsværktøjer konverterer den underlige og vidunderlige kode, du skriver, til en registreringsformular.
der er snesevis (hvis ikke hundreder) af HTML-redaktører på markedet, hvoraf de fleste har tendens til at tilbyde lignende funktioner. Vi vil ikke kede dig med detaljerne, men der er et par vigtige ting, der gør dit liv lettere:
fejldetektering: Fremhæv automatisk syntaksfejl for at gøre rettelser lettere.
automatisk færdiggørelse: foreslår relevante HTML-elementer baseret på tidligere ændringer (sparer dig en masse tid med lang kode).
Syntakshøjdepunkter: anvender farver på forskellige HTML-tags baseret på bestemte kategorier for at gøre det lettere at læse og sortere din kode.
Søg og erstat: Find og overskriv alle forekomster af en bestemt kode i stedet for at redigere hver enkelt.
hvis du virkelig kommer ind i kodning, er der flere funktioner at bekymre sig om, men det burde mere end dække dig for denne enkle registreringsformular.
hvilken app du vælger er et spørgsmål om personlig præference. Vil du have noget, du kan bruge i din bro. ser? Prøv Codepen. Barebones? Notepad++. Et minimalistisk brugergrænseflade og intuitivt inputfelt? Sublim tekst hele vejen.
vores medstifter og bosiddende kode-nørd, dekan, sværger ved VS kode.
“fra en nørdet standpunkt VS kode passer snuggly ind Paperform tech stack og har stor remote udvikling plugins, som jeg elsker. Det er også fantastisk til HTML-ting og super tilpasses, hvis du kan lide dine værktøjer til at se godt ud, mens du stadig har al den funktionalitet, du har brug for.
der er ingen grund til at fiksere på dette for meget. Desværre er der ingen HTML-editor, der genererer en registreringsformular til dig, uanset hvor stor den måtte være. Den del er alt på dig.
Trin 2. Opret din HTML-fil
det næste trin er at fortælle din teksteditor, at du har til hensigt at oprette en HTML-fil. Gør dette ved at oprette en ny fil og derefter gemme den med “.html ” udvidelse.
For eksempel ” myform.HTML”. Når du har skiltet til editoren, at du opretter HTML-kode, skal den automatisk generere følgende kode til dig:
<!DOCTYPE html><html><head> <title></title></head><body> </body></html>💡 Tip: nogle redaktører udfylder ikke automatisk. Det er okay. Bare kopiere og indsætte denne kode ovenfor, og det vil have den samme effekt.
Trin 3. Tilføj tekstfelter og opret din formular
okay. Det er på tide at begynde at tilføje den relevante kode og omdanne barebones HTML til en registreringsformular.
nu, hvis du bare er her for den kode, vi forstår. Du finder alt hvad du har brug for et afsnit eller to nedenfor. Du er velkommen til at springe videre.
men hvis du er interesseret i at lære lidt om, hvad du indtaster faktisk betyder, Lad os en hurtig-brand HTML tutorial mellemspil.
en HTML-formular består af “formelementer”. Dette er ting som tekstbokse, radioknapper, afkrydsningsfelter og rullemenuer, der gør det faktisk muligt for folk at interagere med din liveformular.
hvert element har sit eget specifikke tag. For eksempel definerer HTML <form> tag din kode som en formular, mens <tekstområde> kan bruges til at indsamle brugerindgange.
disse elementer er som sko: de kommer altid parvis. Alle tags, du vil medtage i din formular, skal indsættes mellem open <form> og closed </form> tags.
Okay Det er Gnistnoterne. Nu for koden skal du faktisk indtaste. 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 (grundlæggende) HTML-kode udsender noget, der ser sådan ud:
ikke ligefrem den smukkeste ting i verden er det? Men hej, du spurgte, hvordan du opretter en HTML-registreringsformular. Skyd ikke budbringeren.
tagget < tr>fortæller det at arrangere svarene i en række, mens < td> (som står for tabeldata) skilte, som du vil fange, hvad respondenterne skriver. I dette tilfælde tilføjede vi to felter for enkelhedens skyld:
- Indtast e-mail-adresse
- indtast adgangskoder
der er intet, der forhindrer dig i at tilføje yderligere felter. Input typer spænder fra tal og datoer til farver eller endda billeder. Bare kopier koden nedenfor og indsæt den ønskede Inputtype. V3schools har en fantastisk liste til at guide dig.
<tr> <td> Email Address: </td> <td> <input type="text" email=""> </td>💡 Tip: Det er afgørende at vælge den korrekte Inputtype. Det fortæller formularen, hvordan teksten skal vises på skærmen. For eksempel er det sidste, vi ønsker, at en persons adgangskode skal være synlig, når de skriver den, så vi bruger indtastningstypen “adgangskode” til at skjule den.
Trin 4. Tilføj pladsholdere
en pladsholder er tekst i formularfelterne, der beder respondenterne om at svare på en bestemt måde. Det bruges hovedsageligt som et skub i den rigtige retning, men det er også en nyttig strategi for at gøre formularer mere engagerende.
lad os f.eks. sige, at du tilføjer et simpelt navnefelt til din formular. Du kan skrive ” indsæt navn “og være færdig med det, eller du kan spruce ting op ved at skrive” Bruce ” for lidt flair.
uanset hvilken strategi du går efter, er det ret nemt at tilføje pladsholdere til din HTML-registreringsformular. Efter indtastningstypen skal du indsætte” pladsholder= ” med den tekst, 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>indtastning af denne kode vil producere en formular som denne:
smukke barebones. Men det virker. Du kan oprette yderligere muligheder for kunder til at vælge deres demografi som alder eller køn ved hjælp af en kode, der ligner den ovenfor.
for at oprette et kønsfelt skal du indsætte følgende værdier i din kode (lige over det sidste</table > tag). Vi tilføjer også et telefonnummer og rullemenuen ’emne’.
<input type="checkbox" name="Male" value="Male"> Male<br> <input type="checkbox" name="Female" value="Female"> Female<br>dette vil gøre datafeltet til afkrydsningsfelter—en for mand og en for kvinde. Nu er her, hvordan den endelige iteration af din HTML-registreringsformular vil se ud:
ikke nøjagtigt den store afsløring, du forventede, ikke? Kan du forestille dig, at nogen søger din virksomhed på Google og bliver mødt med denne side? Eller dele dette på sociale medier?
det er sikkert at sige, at denne form for HTML-login-formular ikke ligefrem opfordrer nogen til at tilmelde sig din virksomhed. Der ville være et overvældende spørgsmål i deres sind, hvilket sandsynligvis er det samme, du har. . .
Hvorfor er min HTML-registreringsformular så grim?
da du ikke kan se din HTML-formular er ikke særlig attraktiv. Det er lidt af en grim ælling. Hvilket er fint – Vi kan ikke alle være Margot Robbie—men det lokker ikke ligefrem folk til at udfylde det.
og det er problemet. HTML-formularer har tendens til at være:
- kedelig
- kedelig
- svært at tilpasse
- Clunky at styre
dette er ned til den enkle karakter af HTML. Det er en ramme, der hjælper med at gennemføre de nødvendige formhandlinger, men det vinder bestemt ikke nogen designpriser.
den nemme løsning på dette problem er at bruge en dedikeret online formularbygger som Paperform for at undgå tunge løft af HTML eller CSS. Du kan opbygge smuk registrering, kontaktformularer og fulde destinationssider—blandt hundreder af andre kreationer—på få minutter uden en enkelt kodelinje.
men måske er du virkelig indstillet på hele HTML-sagen (eller måske er du bare en sucker for straf). Uanset hvad, hvis du virkelig er forpligtet til din HTML-registreringsformular, kan du forbedre dens udseende ved hjælp af CSS.
Trin 5: Rediger din HTML-registreringsformular med CSS
CSS er et programmeringssprog, der bruges til at style et HTML-dokument. Den tilpasser, hvordan HTML-elementer vises på skærmen, og giver dig mulighed for at tilpasse alt fra skriftfarver og opacitet til at tilføje et baggrundsbillede eller linke til en anden side med et <href> tag.
nu ville du være her hele ugen, hvis vi listede hver eneste CSS-ejendom. Vi kunne gøre det og forsøge at øge SEO på denne side, men det er ikke sjovt for nogen. Hvis du leder efter en omfattende liste, anbefaler vi CSS-referencelisten på 3school.
af hensyn til vores tutorial giver vi vores HTML-registreringsformular en hurtig makeover med CSS. Vi tilpasser tekstfarven, skrifttypestilen og finjusterer margenerne for et allround (lidt) bedre udseende.
krit Tip: den mest almindelige måde at tilføje CSS til en HTML-side er med en ekstern stilarkfil, der er knyttet til elementet. Dette stilark oprettes i den samme teksteditor og gemmes med “.CSS ” udvidelse.
her er koden, vi bruger:
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 den styling magi, din form vil ende med at ligne den nedenfor. Det er lidt som at slå læbestift på en gris, men det er bedre i en lille grad.
hvorfor en HTML-registreringsformular ikke er den bedste løsning
mens du lærer at kode og oprette grundlæggende registreringsformularer er en sjov færdighed at hente, bør du seriøst overveje at bruge dem til ethvert vigtigt formål. Forsøg ikke at bootstrap det, det er bare ikke værd at bruge tid, kræfter og frustration.
uanset om du har brug for en kontaktformular til dine kunder, en login-formular til din virksomhed eller en studenterregistreringsformular til det nye skoleår, vil enhver løsning, der er klistret sammen med HTML og CSS, ende med at se upoleret og uprofessionel ud—især hvis du ikke har nogen tidligere kodningsevner.
heldigvis er der en anden måde at opbygge registreringsformularer, der er meget lettere, hurtigere og mere intuitiv: en online formularbygger som Paperform. Med vores nemme platform kan du være i gang med en smuk, branded form i løbet af få minutter.
med Paperform får du ikke bare en grundlæggende HTML-formular. Du får en dynamisk oplevelse, der giver dig mulighed for at indsamle enhver form for data, du har brug for—fra enkle kontaktoplysninger til komplekse beregninger og endda tage betalinger. Ingen design ekspertise nødvendig.
plus, tilpasning er ubesværet. Tilpas farver og skrifttyper, og juster din formulars brugergrænseflade med et par klik. Derefter, når du er tilfreds med din nye skabelse kan du integrere formularen på din hjemmeside, vært det online gratis, eller integrere det på din hjemmeside med vores plugin.
for at vise, hvor let det er, piskede vi en smart udseende registreringsformular:
har du ikke lyst til at opbygge din egen skabelse? Det er, hvad vores bibliotek med 600+ formularskabeloner er til. Vælg en af vores registreringsskabeloner, føj den til din konto med et enkelt klik, og kom hurtigere i gang, end du kan drikke din morgen espresso.
en registreringsformular er kun begyndelsen på, hvad du kan gøre med Paperform. Prøv det selv med vores 14-dages gratis prøveperiode-intet kreditkort kræves.
registreringsformular i HTML Ofte Stillede Spørgsmål
kan jeg oprette en HTML-registreringsformular uden CSS?
Ja, men det ville ikke være smukt. Faktisk ville det se ud som noget fra Microsofts tidlige dage. Ikke kønt overhovedet.
Hvordan opretter jeg en HTML-registreringsformular med billede upload?
for at tilføje et billedoverførselsfelt skal du bruge indgangstypen “fil”.
kan jeg lave en HTML-formular uden at bruge en tabel?
mens tabelkommandoen hjælper med justering, er det nemt at lave en formular uden den. Indtast bare dine input direkte uden kommandoerne’ tr ‘eller’ td’.
er det muligt at bruge en HTML-registreringsformular til online shopping
Ja. For at oprette en online shopping formular omfatter felter for kontaktoplysninger, leveringsadresse, Produkt-ID og leveringssted. Ting bliver vanskelige, når du indsamler betalinger, hvorfor vi anbefaler Paperforms enkle betalingsformularer.
Hvordan opretter jeg en login-og registreringsside?
vi har dækket, hvordan man opretter disse, men svaret er med en masse kode og finjustering. Det er meget nemmere at bruge en dedikeret online formularbygger som Paperform.