Die Bereitstellung einfacher Anmelde- und Registrierungsformulare für Ihre Kunden auf Ihrer Website ist unerlässlich, um Leads zu erfassen, Ihre E-Mail-Liste zu erweitern und den Gesamtumsatz zu steigern.
Es gibt nur ein Problem: HTML.
HTML5 ist der Standardcode, mit dem die meisten Webseiten funktionieren. Es ist die Sprache des Internets. Aber wie bei jeder Programmiersprache – von Javascript und jquery bis PHP und CSS3 — gibt es eine steile Lernkurve, besonders wenn Sie noch nie Code berührt haben.
Fürchte dich nicht. Wir sind hier, um zu helfen. Wir könnten Sie über Nacht in Bill Gates verwandeln, aber mit Hilfe einiger nützlicher Beispiele können Sie am Ende dieses Tutorials in kürzester Zeit ein grundlegendes Registrierungsformular mit HTML erstellen.
💡 Bevor wir beginnen: Möchten Sie den Aufwand für die Verwendung von HTML vermeiden? Mit einem Form Builder wie Paperform können Sie Zeit sparen und in wenigen Minuten ein leistungsstarkes, professionelles Registrierungsformular erstellen.
5 Schritte zum Erstellen eines HTML-Registrierungsformulars
Sie sind beschäftigt, wir wissen. Es gibt eine Billion Artikel zu lesen. Netflix-Filme zum Ansehen. TV-Shows zu Binge. Lassen Sie uns also direkt in die fünfstufige Anleitung zum Erstellen eines Registrierungsformulars in HTML einsteigen.
Schritt 1. Wählen Sie einen HTML-Editor
So wie Sie ein Textverarbeitungsprogramm benötigen, um ein Textdokument zu erstellen, benötigen Sie einen Texteditor, um HTML-Code zu erstellen. Diese Entwicklungstools konvertieren den seltsamen und wunderbaren Code, den Sie eingeben, in ein Registrierungsformular.
Es gibt Dutzende (wenn nicht Hunderte) von HTML-Editoren auf dem Markt, von denen die meisten ähnliche Funktionen bieten. Wir werden Sie nicht mit den Details langweilen, aber es gibt ein paar wichtige Dinge, die Ihnen das Leben erleichtern:
Fehlererkennung: Markieren Sie Syntaxfehler automatisch, um Korrekturen zu vereinfachen.
Auto-Vervollständigung: Schlägt relevante HTML-Elemente basierend auf früheren Änderungen vor (spart Ihnen viel Zeit mit langem Code).
Syntax-Highlights: Wendet Farben auf verschiedene HTML-Tags basierend auf bestimmten Kategorien an, um das Lesen und Sortieren Ihres Codes zu erleichtern.
Suchen und Ersetzen: Suchen und überschreiben Sie alle Instanzen eines bestimmten Codes, anstatt sie einzeln zu bearbeiten.
Wenn Sie wirklich in die Codierung einsteigen, gibt es mehr Funktionen, über die Sie sich Sorgen machen müssen, aber das sollte Sie für dieses einfache Registrierungsformular mehr als abdecken.
Welche App Sie auswählen, ist eine Frage der persönlichen Präferenz. Möchten Sie etwas, das Sie in Ihrem Browser verwenden können? Versuchen Sie Codepen. Barebones? Notepad++. Eine minimalistische Benutzeroberfläche und ein intuitives Eingabefeld? Sublime Text den ganzen Weg.
Unser Mitbegründer und Resident Code-Geek, Dean, schwört auf VS Code.
„Aus nerdiger Sicht passt VS Code perfekt in den Tech-Stack von Paperform und verfügt über großartige Remote-Entwicklungs-Plugins, die ich liebe. Es ist auch großartig für HTML-Inhalte und super anpassbar, wenn Sie möchten, dass Ihre Tools gut aussehen und gleichzeitig alle Funktionen haben, die Sie benötigen.
Es ist nicht nötig, sich zu sehr darauf zu fixieren. Leider gibt es keinen HTML-Editor, der ein Registrierungsformular für Sie generiert, egal wie großartig es auch sein mag. Dieser Teil liegt ganz bei dir.
Schritt 2. Erstellen Sie Ihre HTML-Datei
Der nächste Schritt besteht darin, Ihrem Texteditor mitzuteilen, dass Sie eine HTML-Datei erstellen möchten. Erstellen Sie dazu eine neue Datei und speichern Sie sie mit dem „.html“ Erweiterung.
Beispiel: „myform.HTML“. Sobald Sie dem Editor signalisiert haben, dass Sie HTML-Code erstellen, sollte automatisch der folgende Code für Sie generiert werden:
<!DOCTYPE html><html><head> <title></title></head><body> </body></html>💡 Tipp: Einige Editoren werden nicht automatisch ausgefüllt. Schon gut. Kopieren Sie einfach diesen Code oben und fügen Sie ihn ein.
Schritt 3. Fügen Sie Textfelder hinzu und erstellen Sie Ihr Formular
In Ordnung. Es ist an der Zeit, den relevanten Code hinzuzufügen und diesen Barebone-HTML-Code in ein Registrierungsformular umzuwandeln.
Wenn Sie nur wegen des Codes hier sind, den wir verstehen. Unten finden Sie alles, was Sie für ein oder zwei Absätze benötigen. Fühlen Sie sich frei, weiterzumachen. 👇
Aber wenn Sie daran interessiert sind, ein wenig darüber zu lernen, was Sie eingeben, erlauben Sie uns ein schnelles HTML-Tutorial-Intermezzo.
Ein HTML-Formular besteht aus „Formularelementen“. Dies sind Dinge wie Textfelder, Optionsfelder, Kontrollkästchen und Dropdown-Menüs, die es den Leuten tatsächlich ermöglichen, mit Ihrem Live-Formular zu interagieren.
Jedes Element hat sein eigenes spezifisches Tag. Beispielsweise definiert das HTML-Tag <form> Ihren Code als Formular, während <textarea> zum Sammeln von Benutzereingaben verwendet werden kann.
Diese Elemente sind wie Schuhe: Sie kommen immer paarweise. Alle Tags, die Sie in Ihr Formular aufnehmen möchten, müssen zwischen den Tags open <form> und closed </form> eingefügt werden.
Okay, das sind die Sparknotes. Nun zu dem Code, den Sie tatsächlich eingeben müssen. 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>Dieser (grundlegende) HTML-Code gibt etwas aus, das so aussieht:
Nicht gerade das am besten aussehende Ding der Welt, oder? Aber hey, du hast gefragt, wie man ein HTML-Registrierungsformular erstellt. Erschieße den Boten nicht.
Das Tag <tr> weist es an, die Antworten in einer Reihe anzuordnen, während <td> (was für Tabellendaten steht) anzeigt, dass Sie unabhängig vom Typ der Befragten erfassen möchten. In diesem Fall haben wir der Einfachheit halber zwei Felder hinzugefügt:
- E-Mail-Adresse eingeben
- Passwörter eingeben
Nichts hindert Sie daran, zusätzliche Felder hinzuzufügen. Eingabetypen reichen von Zahlen und Daten bis hin zu Farben oder sogar Bildern. Kopieren Sie einfach den folgenden Code und fügen Sie den gewünschten Eingabetyp ein. W3Schools hat eine großartige Liste, um Sie zu führen.
<tr> <td> Email Address: </td> <td> <input type="text" email=""> </td>💡 Tipp: Die Auswahl des richtigen Eingabetyps ist entscheidend. Es teilt dem Formular mit, wie der Text auf dem Bildschirm angezeigt werden soll. Zum Beispiel ist das letzte, was wir wollen, dass das Passwort einer Person sichtbar ist, wenn sie es eingibt, also verwenden wir den Eingabetyp „Passwort“, um es zu verbergen.
Schritt 4. Platzhalter hinzufügen
Ein Platzhalter ist Text in Ihren Formularfeldern, der die Befragten auffordert, auf eine bestimmte Weise zu antworten. Es wird hauptsächlich als Anstoß in die richtige Richtung verwendet, aber es ist auch eine nützliche Strategie, um Formulare ansprechender zu gestalten.
Angenommen, Sie fügen Ihrem Formular ein einfaches Namensfeld hinzu. Sie könnten „Name einfügen“ eingeben und damit fertig sein, oder Sie könnten die Dinge aufpeppen, indem Sie „Bruce Wayne“ für ein bisschen Flair schreiben.
Egal für welche Strategie Sie sich entscheiden, es ist ziemlich einfach, Platzhalter zu Ihrem HTML-Registrierungsformular hinzuzufügen. Fügen Sie nach dem Eingabetyp „placeholder =“ mit dem Text ein, den Sie anzeigen möchten.
<!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>Die Eingabe dieses Codes erzeugt ein Formular wie folgt:
Hübsche Barebones. Aber es funktioniert. Sie können zusätzliche Optionen für Kunden erstellen, um ihre demografischen Daten wie Alter oder Geschlecht mithilfe eines ähnlichen Codes wie oben auszuwählen.
Um ein Gender-Feld zu erstellen, fügen Sie die folgenden Werte in Ihren Code ein (direkt über dem letzten </table> -Tag). Wir fügen auch eine Telefonnummer und die Dropdown-Option ‚Betreff‘ hinzu.
<input type="checkbox" name="Male" value="Male"> Male<br> <input type="checkbox" name="Female" value="Female"> Female<br>Dadurch wird das Datenfeld in Kontrollkästchen umgewandelt – eines für männlich und eines für weiblich. So wird die letzte Iteration Ihres HTML-Registrierungsformulars aussehen:
Nicht gerade die große Enthüllung, die Sie erwartet hatten, oder? Können Sie sich vorstellen, dass jemand Ihr Unternehmen bei Google durchsucht und auf diese Seite trifft? Oder teilen Sie dies in sozialen Medien?
Man kann mit Sicherheit sagen, dass diese Art von HTML-Anmeldeformular niemanden dazu ermutigen würde, sich für Ihr Unternehmen anzumelden. Es würde eine überwältigende Frage in ihren Köpfen geben, die wahrscheinlich die gleiche ist, die Sie haben. . .
Warum ist mein HTML-Registrierungsformular so hässlich?
Wie Sie nicht sehen können, ist Ihr HTML-Formular nicht besonders attraktiv. Es ist ein hässliches Entlein. Was in Ordnung ist – wir können nicht alle Margot Robbie sein -, aber es verleitet die Leute nicht gerade dazu, es auszufüllen.
Und das ist das Problem. HTML-Formulare sind in der Regel:
- Langweilig
- Langweilig
- Schwierig anzupassen
- Klobig zu verwalten
Das liegt an der einfachen Natur von HTML. Es ist ein Framework, das hilft, die notwendigen Formularaktionen abzuschließen, aber es wird sicherlich keine Designpreise gewinnen.
Die einfache Lösung für dieses Problem ist die Verwendung eines speziellen Online-Formular-Generators wie Paperform, um das schwere Heben von HTML oder CSS zu vermeiden. Sie können schöne Registrierung bauen, Kontaktformulare und vollständige Zielseiten—unter Hunderten von anderen Kreationen —in wenigen Minuten ohne eine einzige Codezeile.
Aber vielleicht bist du wirklich auf die ganze HTML-Sache eingestellt (oder vielleicht bist du nur ein Trottel für Bestrafung). So oder so, wenn Sie sich wirklich für Ihr HTML-Registrierungsformular engagieren, können Sie das Aussehen mithilfe von CSS verbessern.
Schritt 5: Bearbeiten Sie Ihr HTML-Registrierungsformular mit CSS
CSS ist eine Programmiersprache, mit der ein HTML-Dokument formatiert wird. Es passt an, wie HTML-Elemente auf dem Bildschirm angezeigt werden und lässt Sie alles von Schriftfarben und Deckkraft anpassen, um ein Hintergrundbild hinzuzufügen oder mit einem < href> -Tag auf eine andere Seite zu verlinken.
Nun, Sie wären die ganze Woche hier, wenn wir jede CSS-Eigenschaft auflisten würden. Wir könnten das tun und versuchen, die SEO dieser Seite zu verbessern, aber das macht niemandem Spaß. Wenn Sie nach einer umfassenden Liste suchen, empfehlen wir die CSS-Referenzliste von W3School.
Für unser Tutorial geben wir unserem HTML-Registrierungsformular eine schnelle Überarbeitung mit CSS. Wir passen die Textfarbe und den Schriftstil an und optimieren die Ränder für ein rundum (etwas) besseres Erscheinungsbild.
💡 Tipp: Die gebräuchlichste Methode zum Hinzufügen von CSS zu einer HTML-Seite ist eine externe Stylesheet-Datei, die mit dem Element verknüpft ist. Dieses Stylesheet wird im selben Texteditor erstellt und mit dem „.css“ Erweiterung.
Hier ist der Code, den wir verwenden werden:
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 }Und mit dieser Styling-Magie wird Ihr Formular am Ende wie das folgende aussehen. Es ist ein bisschen wie Lippenstift auf ein Schwein schlagen, aber es ist besser, zu einem kleinen Grad.
Warum ein HTML-Registrierungsformular nicht die beste Lösung ist
Während das Erlernen des Codierens und Erstellens grundlegender Registrierungsformulare eine unterhaltsame Fähigkeit ist, sollten Sie ernsthaft darüber nachdenken, sie für wichtige Zwecke zu verwenden. Versuchen Sie nicht, es zu booten, es ist einfach nicht die Zeit, Mühe und Frustration wert.
Egal, ob Sie ein Kontaktformular für Ihre Kunden, ein Anmeldeformular für Ihr Unternehmen oder ein Anmeldeformular für Studenten für das neue Schuljahr benötigen, jede Lösung, die mit HTML und CSS verklebt ist, sieht am Ende ungeschliffen und unprofessionell aus – vor allem, wenn Sie keine vorherigen Programmierkenntnisse haben.
Zum Glück gibt es eine andere Möglichkeit, Registrierungsformulare zu erstellen, die viel einfacher, schneller und intuitiver ist: ein Online-Formular-Builder wie Paperform. Mit unserer einfachen Plattform können Sie in wenigen Minuten mit einem schönen, gebrandeten Formular loslegen.
Mit Paperform erhalten Sie nicht nur ein einfaches HTML-Formular. Sie erhalten eine dynamische Erfahrung, mit der Sie jede Art von Daten sammeln können, die Sie benötigen — von einfachen Kontaktdaten über komplexe Berechnungen bis hin zur Entgegennahme von Zahlungen. Kein Design-Know-how erforderlich.
Außerdem ist die Anpassung mühelos. Optimieren Sie Farben und Schriftarten und passen Sie die Benutzeroberfläche Ihres Formulars mit wenigen Klicks an. Sobald Sie mit Ihrer neuen Kreation zufrieden sind, können Sie das Formular in Ihre Website einbetten, kostenlos online hosten oder mit unserem WordPress-Plugin in Ihre WordPress-Website einbetten.
Um zu zeigen, wie einfach es ist, haben wir ein schick aussehendes Registrierungsformular erstellt:
Haben Sie keine Lust, Ihre eigene Kreation zu erstellen? Das ist, was unsere Bibliothek von 600+ Formularvorlagen ist für. Wählen Sie eine unserer Registrierungsvorlagen aus, fügen Sie sie mit einem Klick zu Ihrem Konto hinzu und starten Sie schneller, als Sie Ihren morgendlichen Espresso trinken können.
Ein Anmeldeformular ist nur der Anfang dessen, was Sie mit Paperform tun können. Probieren Sie es selbst aus mit unserer 14-tägigen kostenlosen Testversion — keine Kreditkarte erforderlich.
Anmeldeformular in HTML FAQs
Kann ich ein HTML-Anmeldeformular ohne CSS erstellen?
Ja, aber es wäre nicht schön. In der Tat würde es wie etwas aus den frühen Tagen von Microsoft aussehen. Überhaupt nicht hübsch.
Wie erstelle ich ein HTML-Registrierungsformular mit Bild-Upload?
Um ein Bild-Upload-Feld hinzuzufügen, verwenden Sie den Eingabetyp „Datei“.
Kann ich ein HTML-Formular erstellen, ohne eine Tabelle zu verwenden?
Während der Befehl table bei der Ausrichtung hilft, ist es einfach, ein Formular ohne ihn zu erstellen. Geben Sie Ihre Eingaben einfach direkt ohne die Befehle ‚tr‘ oder ‚td‘ ein.
Ist es möglich, ein HTML-Registrierungsformular für Online-Shopping zu verwenden?
Ja. Um ein Online-Shopping-Formular zu erstellen, fügen Sie Felder für Kontaktinformationen, Lieferadresse, Produkt-ID und Lieferort hinzu. Beim Einzug von Zahlungen wird es schwierig, weshalb wir die einfachen Zahlungsformulare von Paperform empfehlen.
Wie erstelle ich eine Anmelde- und Registrierungsseite?
Wir haben behandelt, wie man diese erstellt, aber die Antwort ist mit viel Code und Optimierungen. Es ist viel einfacher, einen dedizierten Online-Formular-Builder wie Paperform zu verwenden.