het aanbieden van eenvoudige aanmeldings-en registratieformulieren op uw website is essentieel voor het vastleggen van leads, het vergroten van uw e-maillijst en het stimuleren van de totale verkoop.
er is slechts één probleem: HTML.
HTML5 is de standaardcode die wordt gebruikt om de meeste webpagina ‘ s te laten werken. Het is de taal van het internet. Maar zoals elke programmeertaal-van Javascript en jquery tot PHP en CSS3-er is een steile leercurve, vooral als je nog nooit een code hebt aangeraakt.
Vrees niet. We zijn hier om te helpen. We kunnen je misschien ‘ s nachts veranderen in Bill Gates, maar met behulp van enkele handige voorbeelden, ben je aan het einde van deze tutorial klaar om een basisregistratieformulier te maken met behulp van HTML in een mum van tijd.
💡 voordat we beginnen: wilt u het gedoe van het gebruik van HTML vermijden? Met een form builder zoals Paperform, kunt u tijd besparen en maak een krachtige, professionele registratie formulier in minuten.
5 stappen om een HTML-registratieformulier aan te maken
u bent bezig, dat weten we. Er zijn een biljoen artikelen te lezen. Netflix films om naar te kijken. TV-programma ‘ s om te binge. Dus laten we meteen in de vijf-stap handleiding voor het maken van een registratieformulier in HTML.
Stap 1. Kies een HTML-editor
net zoals u een tekstverwerker nodig hebt om een tekstdocument aan te maken, heeft u een tekstverwerker nodig om HTML-code aan te maken. Deze ontwikkeltools zetten de vreemde en prachtige code die u typt in een registratieformulier.
er zijn tientallen (zo niet honderden) HTML-editors op de markt, waarvan de meeste vergelijkbare functies hebben. We zullen u niet vervelen met de details, maar er zijn een paar belangrijke dingen die uw leven gemakkelijker maken:
foutdetectie: Markeer automatisch syntaxisfouten om fixes gemakkelijker te maken.
Auto-completion: suggereert relevante HTML-elementen op basis van eerdere wijzigingen (bespaart u een hoop tijd met lange code).
syntaxis highlights: Past kleuren toe op verschillende HTML-tags op basis van bepaalde categorieën om het lezen en sorteren van uw code te vergemakkelijken.
zoeken en vervangen: Zoek en overschrijf alle exemplaren van een bepaalde code in plaats van elk afzonderlijk te bewerken.
als je echt aan het coderen bent, zijn er meer mogelijkheden om je zorgen over te maken, maar dat zou meer dan genoeg moeten zijn voor dit eenvoudige registratieformulier.
welke app u selecteert is een kwestie van persoonlijke voorkeur. Wilt u iets dat u kunt gebruiken in uw browser? Probeer Codepen. Barebones? Notitieboekje++. Een minimalistische gebruikersinterface en intuïtief invoerveld? Sublieme tekst helemaal.
onze medeoprichter en resident code-geek, Dean, zweert bij VS Code.
“vanuit een nerdy standpunt VS Code past snuggly in Paperform’ s tech stack en heeft grote externe ontwikkeling plugins die ik hou. Het is geweldig voor HTML spullen ook, en super aanpasbaar als je wilt dat uw tools om er mooi uitzien, terwijl nog steeds met alle functionaliteit die u nodig hebt.
het is niet nodig om hier te veel op te fixeren. Helaas is er geen HTML-editor die een registratieformulier voor u genereert, hoe geweldig het ook mag zijn. Dat is jouw schuld.
Stap 2. Maak uw HTML-bestand
de volgende stap is om uw teksteditor te vertellen dat u van plan bent een HTML-bestand aan te maken. Doe dit door een nieuw bestand aan te maken en het vervolgens op te slaan met de “.html ” extensie.
bijvoorbeeld ” myform.HTML”. Zodra u naar de editor hebt aangegeven dat u HTML-code maakt, moet deze automatisch de volgende code voor u genereren:
<!DOCTYPE html><html><head> <title></title></head><body> </body></html>💡 Tip: sommige editors zullen niet automatisch invullen. Dat geeft niet. Kopieer en plak deze code hierboven en het zal hetzelfde effect hebben.
Stap 3. Voeg tekstvelden toe en maak uw formulier
goed. Het is tijd om te beginnen met het toevoegen van de relevante code en zet die barebones HTML in een registratieformulier.
als u hier alleen bent voor de code die we begrijpen. Je vindt alles wat je nodig hebt een paragraaf of twee hieronder. Ga gerust verder. 👇
maar als je geïnteresseerd bent in het leren van een beetje over wat je eigenlijk invoert betekent, laat ons een quick-fire HTML tutorial interlude.
een HTML-formulier bestaat uit”formulierelementen”. Dit zijn dingen zoals tekstvakken, keuzerondjes, selectievakjes en dropdown menu ‘ s die het eigenlijk mogelijk maken voor mensen om te communiceren met uw live-vorm.
elk element heeft zijn eigen specifieke tag. Bijvoorbeeld, de html <form> tag definieert uw code als een formulier, terwijl <textarea> kan worden gebruikt om gebruikersinvoer te verzamelen.
deze elementen zijn als schoenen: ze komen altijd in paren. Alle tags die u in uw formulier wilt opnemen, moeten tussen de open <form> en closed </form> tags worden ingevoegd.
Oké, dat zijn de Sparknotes. Nu voor de code die je eigenlijk moet invoeren. Hier:
<!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>deze (basis) HTML-code zal iets uitvoeren dat er zo uitziet:
niet echt het knapste ding ter wereld is het wel? Maar hey, je vroeg hoe je een HTML registratie formulier te maken. Schiet de boodschapper niet neer.
de tag <tr> vertelt het om de antwoorden op een rij te rangschikken, terwijl <td> (wat staat voor tabelgegevens) wegwijzers geeft die u wilt vastleggen welk respondenttype. In dit geval hebben we twee velden toegevoegd omwille van de eenvoud:
- voer e-mailadres in
- voer wachtwoorden in
er is niets dat u ervan weerhoudt extra velden toe te voegen. Invoertypen variëren van getallen en datums tot kleuren of zelfs afbeeldingen. Kopieer gewoon de onderstaande code en voer het gewenste invoertype in. W3Schools heeft een geweldige lijst om u te begeleiden.
<tr> <td> Email Address: </td> <td> <input type="text" email=""> </td>💡 Tip: Het selecteren van het juiste invoertype is cruciaal. Het vertelt de vorm hoe de tekst moet worden weergegeven op het scherm. Bijvoorbeeld, het laatste wat we willen is dat iemands wachtwoord zichtbaar is wanneer ze het typen, dus we gebruiken het” wachtwoord ” invoertype om het te verbergen.
Stap 4. Plaatshouders toevoegen
een plaatshouder is tekst in uw formuliervelden die respondenten ertoe aanzet op een bepaalde manier te antwoorden. Het wordt voornamelijk gebruikt als een duwtje in de goede richting, maar het is ook een nuttige strategie om vormen boeiender te maken.
bijvoorbeeld, stel dat u een eenvoudig naamveld aan uw formulier toevoegt. Je zou “insert name” kunnen typen en er klaar mee zijn, of je zou dingen kunnen opfleuren door “Bruce Wayne” te schrijven voor een beetje flair.
welke strategie u ook kiest, het is vrij eenvoudig om plaatsaanduidingen toe te voegen aan uw HTML-registratieformulier. Na het invoertype voegt u “placeholder=” in met de tekst die u wilt weergeven.
<!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>het invoeren van deze code zal een formulier als dit produceren:
vrij barebones. Maar het werkt. U kunt extra opties voor klanten om hun demografie te selecteren, zoals leeftijd of geslacht met behulp van een soortgelijke code als hierboven.
om een gender-veld aan te maken, voegt u de volgende waarden toe aan uw code (rechts boven de laatste </table> tag). We zullen ook een telefoonnummer en drop-down ‘onderwerp’ optie toe te voegen.
<input type="checkbox" name="Male" value="Male"> Male<br> <input type="checkbox" name="Female" value="Female"> Female<br>dit zal het gegevensveld veranderen in selectievakjes—één voor mannen en één voor vrouwen. Nu hier is hoe de definitieve iteratie van uw HTML registratie formulier eruit zal zien:
niet precies de grote onthulling die u verwachtte, toch? Kun je je voorstellen dat iemand zoeken uw bedrijf op Google en wordt voldaan met deze pagina? Of dit Delen op sociale media?
het is veilig om te zeggen dat dit soort HTML-inlogformulier niet echt iemand zou aanmoedigen om zich aan te melden voor uw bedrijf. Er zou één overweldigende vraag op hun hoofd zijn, die waarschijnlijk dezelfde is die jij hebt. . .
Waarom Is mijn HTML-registratieformulier zo lelijk?
omdat u niet kunt zien is uw HTML-formulier niet bijzonder aantrekkelijk. Het is een beetje een lelijk eendje. Wat prima is—We kunnen niet allemaal Margot Robbie zijn-maar het verleidt mensen niet echt om het in te vullen.
en dat is het probleem. HTML-formulieren hebben de neiging om:
- saai
- saai
- moeilijk aan te passen
- moeilijk aan te passen
dit komt door het eenvoudige karakter van HTML. Het is een framework dat helpt bij het voltooien van de nodige vorm acties, maar het zal zeker geen design awards winnen.
de eenvoudige oplossing voor dit probleem is het gebruik van een speciale online formulierbouwer zoals Paperform om het zware werk van HTML of CSS te voorkomen. U kunt prachtige registratie, contactformulieren en volledige landingspagina ‘ s bouwen—tussen honderden andere creaties—in een kwestie van minuten zonder een enkele regel code.
maar misschien ben je echt ingesteld op het hele HTML ding (of misschien ben je gewoon een sucker voor straf). Hoe dan ook, als je echt toegewijd bent aan je HTML registratieformulier kun je het uiterlijk verbeteren met behulp van CSS.
Stap 5: Bewerk uw HTML-registratieformulier met CSS
CSS is een programmeertaal die wordt gebruikt om een HTML-document op te stylen. Het past aan hoe HTML-elementen op het scherm worden weergegeven en laat u alles aanpassen, van lettertypekleuren en dekking tot het toevoegen van een achtergrondafbeelding of het linken naar een andere pagina met een <href> tag.
nu zou je hier de hele week zijn als we elke CSS-eigenschap zouden vermelden. We zouden dat kunnen doen en proberen de SEO van deze pagina te stimuleren, maar dat is voor niemand leuk. Als u op zoek bent naar een uitgebreide lijst, raden wij W3School ‘ s CSS referentielijst.
omwille van onze handleiding geven we ons HTML-registratieformulier een snelle makeover met CSS. We passen de tekstkleur, de letterstijl aan en passen de marges aan voor een allround (iets) beter uiterlijk.
Tip Tip: de meest voorkomende manier om CSS toe te voegen aan een HTML-pagina is met een extern style sheet-bestand gekoppeld aan het element. Dit typogram wordt in dezelfde teksteditor gemaakt en opgeslagen met de “.CSS ” extensie.
hier is de code die we zullen gebruiken:
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 }en met die styling magie, zal uw vorm uiteindelijk op zoek naar de onderstaande. Het is een beetje als lippenstift op een varken slaan, maar het is beter tot op zekere hoogte.
waarom een HTML-registratieformulier niet de beste oplossing is
terwijl het leren programmeren en aanmaken van basisregistratieformulieren een leuke vaardigheid is om op te pikken, moet u serieus overwegen om ze voor elk belangrijk doel te gebruiken. Probeer het niet op te starten, het is gewoon de tijd, moeite en frustratie niet waard.
of u nu een contactformulier voor uw klanten, een inlogformulier voor uw bedrijf of een studentenregistratieformulier voor het nieuwe schooljaar nodig hebt, elke oplossing die met HTML en CSS is geplakt, zal er ongepolijst en onprofessioneel uitzien-vooral als u nog geen coderingsvaardigheden hebt.
gelukkig is er een andere manier om registratieformulieren te bouwen die veel eenvoudiger, sneller en intuïtiever is: een online formulierbouwer zoals Paperform. Met ons easy platform kunt u binnen enkele minuten aan de slag met een mooie, merkbare vorm.
met Paperform krijgt u niet alleen een basis HTML-formulier. U krijgt een dynamische ervaring die u in staat stelt om alle soorten gegevens te verzamelen die u nodig hebt—van eenvoudige contactgegevens tot complexe berekeningen en zelfs betalingen. Geen ontwerpexpertise nodig.
Plus, maatwerk is moeiteloos. Tweak kleuren en lettertypen en pas uw formulier UI met een paar klikken. Dan, zodra u tevreden bent met uw nieuwe creatie kunt u het formulier insluiten op uw website, hosten online gratis, of insluiten op uw WordPress site met onze WordPress plugin.
om te laten zien hoe eenvoudig het is, hebben we een mooi uitziend registratieformulier gemaakt:
heb je geen zin om je eigen creatie te bouwen? Dat is waar onze bibliotheek van 600 + form templates voor is. Selecteer een van onze registratiesjablonen, voeg deze toe aan uw account met één klik, en ga sneller aan de slag dan u uw ochtend espresso kunt drinken.
een registratieformulier is slechts het begin van wat u kunt doen met Paperform. Probeer het zelf uit met onze gratis proefperiode van 14 dagen – geen creditcard vereist.
registratieformulier in HTML FAQs
kan ik een HTML-registratieformulier zonder CSS aanmaken?
Ja, maar het zou niet mooi zijn. In feite zou het eruit zien als iets uit de begindagen van Microsoft. Helemaal niet mooi.
Hoe maak ik een HTML-registratieformulier aan met het uploaden van afbeeldingen?
gebruik het invoertype “file” om een uploadveld toe te voegen.
kan ik een HTML-formulier maken zonder een tabel te gebruiken?
hoewel het table Commando helpt bij het uitlijnen, is het eenvoudig om een formulier zonder te maken. Voer gewoon direct uw ingangen in zonder de’ tr ‘of’ td ‘commando’ s.
is het mogelijk om een HTML-registratieformulier te gebruiken voor online winkelen
Ja. Om een online shopping formulier te maken omvatten velden voor contactgegevens, verzendadres, Product-ID en punt van levering. Dingen worden lastig bij het innen van betalingen, daarom raden we Paperform ‘ s eenvoudige betalingsformulieren aan.
Hoe maak ik een inlog-en registratiepagina aan?
we hebben besproken hoe deze te maken, maar het antwoord is met veel code en tweaken. Het is veel gemakkelijker om een speciale online form builder zoals Paperform gebruiken.