att ge dina kunder enkla registrerings-och registreringsformulär på din webbplats är viktigt för att fånga leads, växa din e-postlista och öka den totala försäljningen.
det finns bara ett problem: HTML.
HTML5 är standardkoden som används för att få de flesta webbsidor att fungera. Det är språket på internet. Men som alla programmeringsspråk—från Javascript och jquery till PHP och CSS3-finns det en brant inlärningskurva, speciellt om du aldrig har rört någon kod.
Frukta inte. Vi är här för att hjälpa till. Vi kanske kan göra dig till Bill Gates över natten, men med hjälp av några användbara exempel, i slutet av denna handledning, är du redo att skapa ett grundläggande registreringsformulär med HTML på nolltid.
Brasilien innan vi börjar: Vill du undvika besväret med att använda HTML? Med en formulärbyggare som Paperform kan du spara tid och skapa ett kraftfullt, professionellt registreringsformulär på några minuter.
5 steg för att skapa ett HTML – Registreringsformulär
du är upptagen, vi vet. Det finns en biljon artiklar att läsa. Netflix filmer att titta på. TV-program till binge. Så låt oss gå rakt in i femstegsguiden för att skapa ett registreringsformulär i HTML.
Steg 1. Välj en HTML-redigerare
precis som du behöver en ordbehandlare för att skapa ett textdokument behöver du en textredigerare för att skapa HTML-kod. Dessa utvecklingsverktyg konverterar den konstiga och underbara koden du skriver in i ett registreringsformulär.
det finns dussintals (om inte hundratals) HTML-redigerare på marknaden, varav de flesta tenderar att erbjuda liknande funktioner. Vi kommer inte att tråka ut dig med detaljerna, men det finns några viktiga saker som kommer att göra ditt liv enklare:
feldetektering: Markera automatiskt syntaxfel för att göra korrigeringar enklare.
automatisk komplettering: föreslår relevanta HTML-element baserat på tidigare ändringar (sparar en massa tid med lång kod).
Syntaxhöjdpunkter: tillämpar färger på olika HTML-taggar baserat på vissa kategorier för att göra det lättare att läsa och sortera din kod.
Sök och ersätt: leta upp och skriv över alla instanser av en viss kod istället för att redigera var och en individuellt.
om du verkligen kommer in i kodning finns det fler funktioner att oroa sig för, men det borde mer än täcka dig för det här enkla registreringsformuläret.
vilken app du väljer är en fråga om personlig preferens. Vill du ha något som du kan använda i din webbläsare? Prova Codepen. Barebones? Anteckningsbok++. Ett minimalistiskt användargränssnitt och intuitivt inmatningsfält? Sublim Text hela vägen.
vår medgrundare och bosatt kod-geek, Dean, svär vid VS-kod.
” från en nördig synvinkel passar vs-koden snuggly i Paperforms tekniska stack och har stora fjärrutvecklingspluggar som jag älskar. Det är bra för HTML-saker också, och super anpassningsbar om du gillar dina verktyg för att se bra ut medan du fortfarande har all funktionalitet du behöver.
det finns ingen anledning att fixera på detta för mycket. Tyvärr finns det ingen HTML-redigerare som genererar ett registreringsformulär åt dig, oavsett hur bra det kan vara. Den delen är allt på dig.
steg 2. Skapa din HTML-fil
nästa steg är att berätta för din textredigerare att du tänker skapa en HTML-fil. Gör detta genom att skapa en ny fil och sedan spara den med ”.html ” förlängning.
till exempel ” myform.HTML”. När du har skyltat till redigeraren att du skapar HTML-kod ska den automatiskt generera följande kod åt dig:
<!DOCTYPE html><html><head> <title></title></head><body> </body></html>💡 tips: vissa redaktörer fyller inte i automatiskt. Det är okej. Bara kopiera och klistra in den här koden ovan och det kommer att ha samma effekt.
steg 3. Lägg till textfält och skapa ditt formulär
okej. Det är dags att börja lägga till relevant kod och förvandla den barebones HTML till ett registreringsformulär.
nu om du bara är här för koden vi förstår. Du hittar allt du behöver ett stycke eller två nedan. Känn dig fri att hoppa framåt.
men om du är intresserad av att lära dig lite om vad du skriver egentligen betyder, låt oss en snabb brand HTML handledning mellanspel.
ett HTML-formulär består av”formelement”. Det här är saker som textrutor, radioknappar, kryssrutor och rullgardinsmenyer som gör det faktiskt möjligt för folk att interagera med din live-form.
varje element har sin egen specifika tagg. Till exempel definierar HTML <form> taggen din kod som ett formulär, medan <textarea> kan användas för att samla in användarinmatningar.
dessa element är som skor: de kommer alltid i par. Alla taggar som du vill inkludera i formuläret måste infogas mellan open<form > och closed</form > taggar.
Okej Det är Sparknotes. Nu för koden måste du faktiskt mata in. Här:
<!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>denna (grundläggande) HTML-kod kommer att mata ut något som ser ut så här:
inte precis det snyggaste i världen är det? Men hej, du frågade hur man skapar ett HTML-registreringsformulär. Skjut inte budbäraren.
taggen <tr> säger att den ska ordna svaren i rad, medan <td> (som står för tabelldata) skyltar som du vill fånga oavsett respondenttyp. I det här fallet har vi lagt till två fält för enkelhetens skull:
- ange e-postadress
- Ange lösenord
det finns inget som hindrar dig från att lägga till ytterligare fält. Inmatningstyper varierar från siffror och datum till färger eller till och med bilder. Kopiera bara koden nedan och sätt in den Inmatningstyp du vill ha. W3Schools har en bra lista för att vägleda dig.
<tr> <td> Email Address: </td> <td> <input type="text" email=""> </td>💡 tips: att välja rätt Inmatningstyp är avgörande. Den berättar formuläret hur texten ska visas på skärmen. Till exempel är det sista vi vill att någons lösenord ska vara synligt när de skriver det, så vi använder inmatningstypen ”lösenord” för att dölja den.
steg 4. Lägg till platshållare
en platshållare är text i dina formulärfält som uppmanar respondenterna att svara på ett visst sätt. Det används främst som en knuff i rätt riktning, men det är också en användbar strategi för att göra former mer engagerande.
låt oss till exempel säga att du lägger till ett enkelt namnfält i ditt formulär. Du kan skriva” infoga namn ”och göras med det, eller du kan spruce saker genom att skriva” Bruce Wayne ” för lite känsla.
oavsett vilken strategi du går för är det ganska enkelt att lägga till platshållare i ditt HTML-registreringsformulär. Efter inmatningstypen sätter du in” placeholder= ” med texten du vill visa.
<!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>inmatning av denna kod kommer att producera ett formulär som detta:
Pretty barebones. Men det fungerar. Du kan skapa ytterligare alternativ för kunder att välja sin demografi som ålder eller kön med en liknande kod som den ovan.
för att skapa ett könsfält, sätt in följande värden i din kod (precis ovanför den sista </tabellen> – taggen). Vi kommer också att lägga till ett telefonnummer och rullgardins ’ämne’ alternativ.
<input type="checkbox" name="Male" value="Male"> Male<br> <input type="checkbox" name="Female" value="Female"> Female<br>detta gör datafältet till kryssrutor-en för man och en för kvinna. Så här ser den slutliga iterationen av ditt HTML-registreringsformulär ut:
inte precis det stora avslöjandet du förväntade dig, eller hur? Kan du föreställa dig att någon söker ditt företag på Google och möts med den här sidan? Eller dela detta på sociala medier?
det är säkert att säga att den här typen av HTML-inloggningsformulär inte skulle uppmuntra någon att registrera sig för ditt företag. Det skulle vara en överväldigande en fråga på deras sinnen, vilket förmodligen är samma som du har. . .
Varför är mitt HTML-Registreringsformulär så fult?
eftersom du inte kan se är ditt HTML-formulär inte särskilt attraktivt. Det är lite av en ful ankunge. Vilket är bra – vi kan inte alla vara Margot Robbie-men det lockar inte precis folk att fylla i det.
och det är problemet. HTML-formulär tenderar att vara:
- tråkig
- tråkig
- svårt att anpassa
- Clunky att hantera
detta beror på HTML: s enkla natur. Det är ett ramverk som hjälper till att slutföra de nödvändiga formuläråtgärderna, men det kommer säkert inte att vinna några designpriser.
den enkla lösningen på detta problem är att använda en dedikerad online-formulärbyggare som Paperform för att undvika tunga lyft av HTML eller CSS. Du kan bygga vacker registrering, kontaktformulär och fullständiga målsidor—bland hundratals andra skapelser—på några minuter utan en enda kodrad.
men kanske är du verkligen inställd på hela HTML-saken (eller kanske är du bara en sucker för straff). Hur som helst, om du verkligen är engagerad i ditt HTML-registreringsformulär kan du förbättra utseendet genom att använda CSS.
Steg 5: Redigera ditt HTML – registreringsformulär med CSS
CSS är ett programmeringsspråk som används för att utforma ett HTML-dokument. Det anpassar hur HTML-element visas på skärmen och låter dig anpassa allt från teckensnittsfärger och opacitet till att lägga till en bakgrundsbild eller länka till en annan sida med en <href> tagg.
nu skulle du vara här hela veckan om vi listade varje CSS-egendom. Vi kan göra det och försöka öka SEO på den här sidan, men det är inte kul för någon. Om du är ute efter en omfattande lista, rekommenderar vi W3School CSS referenslista.
för vår handledning kommer vi att ge vårt HTML-registreringsformulär en snabb makeover med CSS. Vi anpassar textfärgen, teckensnittsstilen och justerar marginalerna för ett allround (något) bättre utseende.
tips: det vanligaste sättet att lägga till CSS på en HTML-sida är med en extern stilarkfil kopplad till elementet. Detta stilark skapas i samma textredigerare och sparas med ”.css ” förlängning.
här är koden vi ska använda:
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 }och med den stylingmagin kommer din form att se ut som den nedan. Det är lite som att slå läppstift på en gris, men det är bättre i liten utsträckning.
varför ett HTML-Registreringsformulär inte är den bästa lösningen
medan du lär dig att koda och skapa grundläggande registreringsformulär är en rolig färdighet att hämta, bör du allvarligt ompröva att använda dem för alla viktiga ändamål. Försök inte att starta upp det, det är bara inte värt tiden, ansträngningen och frustrationen.
oavsett om du behöver ett kontaktformulär för dina kunder, ett inloggningsformulär för ditt företag eller ett studentregistreringsformulär för det nya läsåret, kommer alla lösningar klibbiga tillsammans med HTML och CSS att se opolerade och oprofessionella ut-speciellt om du inte har några tidigare kodningsförmågor.
tack och lov finns det ett annat sätt att bygga registreringsformulär som är mycket enklare, snabbare och mer intuitivt: en online-formulärbyggare som Paperform. Med vår enkla plattform kan du vara igång med en vacker, märkesform på några minuter.
med Paperform får du inte bara ett grundläggande HTML-formulär. Du får en dynamisk upplevelse som ger Dig möjlighet att samla in alla typer av data du behöver—från enkla kontaktuppgifter till komplexa beräkningar och till och med ta emot betalningar. Ingen designkompetens behövs.
Plus, anpassning är enkel. Justera färger och teckensnitt och justera formulärets användargränssnitt med några få klick. När du är nöjd med din nya skapelse kan du bädda in formuläret på din webbplats, vara värd för det gratis online eller bädda in det på din WordPress-webbplats med vårt WordPress-plugin.
för att visa hur lätt det är, piskade vi upp ett snyggt registreringsformulär:
känner du inte för att bygga din egen skapelse? Det är vad vårt bibliotek med 600+ formulärmallar är för. Välj en av våra registreringsmallar, Lägg till den i ditt konto med ett klick och kom igång snabbare än du kan dricka din morgon espresso.
ett registreringsformulär är bara början på vad du kan göra med Paperform. Prova själv med vår 14-dagars gratis provperiod-inget kreditkort krävs.
Registreringsformulär i HTML Vanliga frågor
kan jag skapa ett HTML-registreringsformulär utan CSS?
Ja, men det skulle inte vara vackert. Faktum är att det skulle se ut som något från Microsofts tidiga dagar. Inte söt alls.
Hur skapar jag ett HTML-registreringsformulär med bilduppladdning?
för att lägga till ett bildöverföringsfält använd inmatningstypen ”file”.
kan jag skapa ett HTML-formulär utan att använda en tabell?
medan tabellkommandot hjälper till med justering är det enkelt att skapa ett formulär utan det. Ange bara dina ingångar direkt utan kommandona’ tr ’eller’ td’.
är det möjligt att använda ett HTML-registreringsformulär för online shopping
Ja. För att skapa ett online shoppingformulär inkludera fält för kontaktinformation, leveransadress, Produkt-ID och leveranspunkt. Det blir knepigt när du samlar in betalningar, varför vi rekommenderar Paperforms enkla betalningsformulär.
Hur skapar jag en inloggnings-och registreringssida?
vi har täckt hur man skapar dessa, men svaret är med mycket kod och tweaking. Det är mycket lättare att använda en dedikerad online-formulärbyggare som Paperform.