Wie man Formulare in statische Websites implementiert

Websites unterscheiden sich in Design, Zweck und Komplexität, sind aber in der Regel statisch oder dynamisch. Statische Websites sind vorgerendert und bieten allen Besuchern den gleichen Inhalt. Durch ihre einfache Struktur sind sie in der Regel leicht zu verwalten und haben schnelle Ladezeiten. Dynamische Websites hingegen generieren ihre Inhalte mithilfe von serverseitigen Programmiersprachen im Handumdrehen.

Statische Websites bieten keine native Unterstützung für interaktive Elemente wie Formulare, da diese serverseitige Verarbeitungsfunktionen, wie z. B. die Datenspeicherung, erfordern. Das ist aber nicht ideal: Formulare sind ein Kommunikationskanal mit deinen Nutzern. Sie können dir helfen, wertvolles Feedback in Form von Vorschlägen oder Fragen zu sammeln, damit du das Nutzererlebnis durch die Anpassung der Inhalte verbessern kannst.

In diesem Leitfaden erfährst du, wie du ein Formular für deine statische Website erstellst, einen Formularverarbeitungsdienst hinzufügst und deine Website mit Hilfe des Statische-Seiten-Hosting-Dienstes von Kinsta bereitstellst.

Wähle einen Formularbearbeitungsdienst

Ein Formularverarbeitungsdienst ist ein Drittanbieter, der Formulardaten für statische Websites sammelt und verarbeitet. Sie stellen die serverseitige Infrastruktur zur Verfügung, die für die Bearbeitung von Formularen benötigt wird, und verbessern die Funktionalität und Interaktivität deiner Websites, ohne die Vorteile einer statischen Website zu beeinträchtigen.

Wenn ein Nutzer ein Formular absendet, werden die Daten an den Endpunkt des Formularverarbeitungsdienstes gesendet. Der Dienst verarbeitet dann die Daten, speichert sie sicher und sendet Benachrichtigungen an die entsprechenden Empfänger.

Es gibt viele Formularverarbeitungsdienste. Schauen wir uns die beliebtesten an.

1. Formspree

Formspree ist ein benutzerfreundlicher Formularservice, der das Hinzufügen von Formularen und die Verwaltung von Formularen auf statischen Websites vereinfacht. Es gibt ein kostenloses Angebot mit grundlegenden Funktionen, wie z. B. 50 Formularübermittlungen pro Monat, und ein kostenpflichtiges Angebot mit erweiterten Funktionen, wie z. B. sichere Einträge und Spamschutz.

2. Formbucket

FormBucket bietet eine bequeme Möglichkeit, Formulareingaben zu sammeln und zu verwalten, indem sie in „Buckets“ gespeichert werden, die jeweils eine eigene URL haben. Auf der benutzerfreundlichen Dashboard-Seite von Formbucket kannst du Felder definieren und Validierungsregeln für Formulare festlegen, die mit dem Branding deiner Website übereinstimmen.

3. Getform

Getform ist eine Formular-Backend-Plattform, die eine einfache und sichere Möglichkeit bietet, Formular-Eingaben zu verarbeiten. Getform bietet eine intuitive Benutzeroberfläche für die Verwaltung von Formulareingaben, E-Mail-Benachrichtigungen und Integrationen mit beliebten Diensten wie Slack und Google Sheets.

Vergleich der Dienste von Formspree, Formbucket und Getform

Um den Vergleich zu erleichtern, findest du unten eine Tabelle, in der die drei oben genannten Dienste und ihre wichtigsten Funktionen verglichen werden:

Wenn du dich für einen Formularverarbeitungsdienst entscheidest, musst du die Einfachheit der Integration, die gewünschten Funktionen, den Preis und die Kompatibilität mit deiner Hosting-Plattform berücksichtigen. Beurteile die spezifischen Anforderungen deines Formulars und vergleiche jeden Formularverarbeitungsdienst, um die beste Lösung für deine Bedürfnisse zu finden.

Einrichten des Formularbearbeitungsdienstes mit Getform

Der Einsatz eines Formularverarbeitungsdienstes wie Getform kann die Verwaltung von Formularübermittlungen auf deiner Website erheblich vereinfachen. Wenn eine Nutzerin oder ein Nutzer ein Formular abschickt, übernimmt Getform den Prozess und macht eine Backend-API zur Verarbeitung und Speicherung der Eingaben überflüssig.

Diese nahtlose Integration ermöglicht es dir, alle Antworten effizient in einem eigenen Posteingang zu verwalten. Um zu beginnen, solltest du ein Grundverständnis von HTML, CSS und JavaScript haben und die folgenden Schritte befolgen:

1. Melde dich für ein Getform-Konto an.
2. Navigiere zu deinem Getform-Konto-Dashboard und klicke auf die Schaltfläche + Erstellen.
3. Vergewissere dich im erscheinenden Dialogfeld, dass die Option Formular ausgewählt ist. Gib einen beschreibenden Endpunktnamen an und wähle die entsprechende Zeitzone. Klicke dann auf Erstellen.

   

   Getform generiert eine Endpunkt-URL für die Formularübermittlung, die du dem Attribut action deines Formularelements hinzufügen musst.

Erstelle dein Formular mit HTML und CSS

Jetzt, wo du den Formularverarbeitungsdienst eingerichtet hast, kannst du dein Formular mit HTML, CSS und JavaScript erstellen.

1. Erstelle in deinem Terminal einen Projektordner mit dem Namen forms und wechsele das aktuelle Verzeichnis in das Verzeichnis des Projekts:

   mkdir forms
   cd forms

2. Füge die folgenden Projektdateien hinzu:

   #unix-based systems
   touch index.html styles.css script.js 
   
   #windows
   echo. > index.html & echo. > styles.css & echo. > script.js

3. Als nächstes erstellst du ein HTML-Formular. Für die Zwecke dieses Leitfadens hilft dir der unten stehende Code, ein Formular zu erstellen, das Eingabefelder für einen Namen und eine E-Mail-Adresse, einen Textbereich für Nachrichten und eine Schaltfläche zum Absenden enthält. Du kannst diesen Code in deine index.html-Datei einfügen:

   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <title>Contact Form</title>
       <link rel="stylesheet" href="styles.css">
   </head>
   <body>
       <div class="container">
           <h1 class="form-title">Contact Us</h1>
           <form class="contact-form" name="contactForm" action="<Getform URL>" method="POST">
               <div class="input-group">
                   <label for="name" class="form-label">Name:</label>
                   <input type="text" id="name" name="name" class="form-input" required>
   
                   <label for="email" class="form-label">Email:</label>
                   <input type="email" id="email" name="email" class="form-input" required>
   
                   <label for="message" class="form-label">Message:</label>
                   <textarea id="message" name="message" class="form-textarea" rows="4" required>
                   </textarea>
               </div>
   
               <div class="form-control">
                   <button type="submit" id="submitBtn" class="form-submit">Submit</button>
               </div>  
           </form>
       </div>
       <script src="script.js"></script>
   </body>
   </html>

4. Navigiere zum Getform Dashboard und kopiere die Endpunkt-URL. Füge diese URL dann in das Attribut action im öffnenden Tag deines Formulars im HTML-Code ein.
5. Schließlich kannst du in der Datei styles.css CSS-Stile hinzufügen, um das Design und Aussehen des Formulars anzupassen.

Datenvalidierung mit JavaScript implementieren

Bei der Datenvalidierung wird geprüft, ob die Benutzereingaben bestimmte Kriterien und Validierungsregeln erfüllen, bevor sie verarbeitet oder gespeichert werden.

Die Datenvalidierung hilft dabei, die Übermittlung falscher oder bösartiger Daten zu vermeiden, gibt den Nutzern ein unmittelbares Feedback über Eingabefehler und stellt sicher, dass nur gültige Daten weiterverarbeitet werden. Sie spielt eine wichtige Rolle bei der Wahrung der Datenintegrität und -genauigkeit.

Es gibt verschiedene Möglichkeiten, die Datenvalidierung zu implementieren, z. B. mit JavaScript für die clientseitige Validierung, die serverseitige Validierung oder eine Kombination aus beiden Ansätzen. In diesem Leitfaden wollen wir die clientseitige Validierung für das Kontaktformular implementieren, um sicherzustellen, dass die Nutzer keine leeren Felder ausfüllen und dass die angegebene E-Mail das richtige Format hat.

1. Definiere zunächst die Validierungsfunktion, indem du den folgenden Code in die Datei script.js einfügst:

   function validateForm() {
       const name = document.getElementById('name').value;
       const email = document.getElementById('email').value;
       const message = document.getElementById('message').value;
       if (name.trim() === '' || message.trim() === '') {
           alert('Please fill out all fields.');
           return false;
       }
       const emailRegex = /^[^s@]+@[^s@]+.[^s@]+$/;
       if (!emailRegex.test(email)) {
           alert('Please enter a valid email address.');
           return false;
       }
       return true;
   }

   Die Funktion validateForm() dient zwei Zwecken: Zunächst prüft sie, ob die Felder Name und Nachricht leer sind, dann validiert sie das E-Mail-Feld mithilfe eines regulären Ausdrucks und überprüft, ob die E-Mail-Adresse ein gültiges Format hat.

   Wenn die Felder leer sind oder das E-Mail-Format ungültig ist, wird die Funktion ausgelöst und eine Warnmeldung angezeigt. Wenn hingegen alle Formularfelder diese Überprüfungen bestehen, gibt die Funktion true zurück und das Formular wird abgeschickt.

   Du kannst auch andere Überprüfungsregeln hinzufügen, um die Richtigkeit und Integrität der übermittelten Daten sicherzustellen. Du kannst z. B. die Länge der Benutzereingaben überprüfen oder verhindern, dass Benutzer bestimmte Zeichen in der Nachricht eingeben, um potenzielle Sicherheitslücken wie Injektionsangriffe zu verhindern.

2. Als Nächstes rufst du die obige Funktion auf, um die Validierung mit einem click Event Listener Callback zu aktivieren. Dieser Callback löst die Funktion jedes Mal aus, wenn ein Nutzer auf die Schaltfläche Senden klickt. Um die Funktion aufzurufen, füge den folgenden Code in deine script.js-Datei ein:

   document.addEventListener('DOMContentLoaded', function () {
   	const submitButton = document.getElementById('submitBtn');
   
   	if (submitButton) {
   		submitButton.addEventListener('click', function (event) {
   			event.preventDefault();
   			if (validateForm()) {
   				document.forms['contactForm'].submit();
   				resetFormAfterSubmission();
   			}
   			return false;
   		});
   	}
   });
   
   function resetFormAfterSubmission() {
   	setTimeout(function () {
   		const contactForm = document.forms['contactForm'];
   		contactForm.reset();
   	}, 500);
   }

   Beachte, dass die Funktion preventDefault() im Code enthalten ist, um die standardmäßige Formularübermittlung zu verhindern. Auf diese Weise kannst du das Formular validieren, bevor du die Informationen an Getform übermittelst.

   Außerdem wird nach der erfolgreichen Validierung und Übermittlung die Funktion resetFormAfterSubmission() ausgelöst, die das Formular nach einer halben Sekunde zurücksetzt, um weitere Übermittlungen zu ermöglichen.

Bereitstellen deiner statischen Website mit Kinsta

Kinsta bietet eine Managed-Hosting-Lösung an, die es dir ermöglicht, verschiedene Webprojekte und Datenbanken zu hosten. Mit dem kostenlosen Tarif kannst du bis zu 100 statische Websites direkt von GitHub, GitLab oder Bitbucket hosten.

Um deine statische Website mit Kinsta einzurichten, musst du zunächst deine Codes zu deinem bevorzugten Git-Anbieter pushen. Befolge dann diese Schritte:

1. Logge dich in das MyKinsta-Dashboard ein.
2. Klicke auf dem Dashboard auf das Dropdown-Menü Service hinzufügen und wähle Statische Website.
3. Wenn du zum ersten Mal ein Projekt bei Kinsta hostest, wähle deinen bevorzugten Git-Dienstanbieter aus und aktiviere ihn.
4. Wähle dein Projekt-Repository aus.
5. Wähle den Zweig aus, den du bereitstellen willst, und gib einen eindeutigen Site-Namen an.
6. Gib den Hauptpfad des Veröffentlichungsverzeichnisses an, das die HTML-Dateien und Assets für die Bereitstellung enthält, indem du einen Punkt hinzufügst.
7. Klicke abschließend auf Website erstellen.

Innerhalb weniger Sekunden wird MyKinsta deine Website bereitstellen.

Um das Formular nahtlos in eine bestehende Website zu integrieren, kopierst du den HTML-Code des Formulars und fügst ihn direkt in den gewünschten Bereich der Website ein. Achte darauf, dass du die zugehörigen CSS-Eigenschaften und den JavaScript-Code einfügst, um ein einheitliches Styling und Funktionalität zu gewährleisten.

Da du das Formular bereits separat bereitgestellt hast, kannst du den Nutzern auch die URL – als Hyperlink oder Schaltfläche – zur Verfügung stellen, auf die sie klicken können, um das Formular aufzurufen.

Um die Funktionalität der Live-Website zu testen, klicke auf die angegebene URL der Site. Gib die erforderlichen Eingaben ein, um sicherzustellen, dass das Formular wie erwartet funktioniert. Bestätige, dass das Formular die Benutzereingaben prüft, gegebenenfalls Fehlermeldungen anzeigt und gültige Daten zur weiteren Verarbeitung übermittelt.

Nach dem Absenden des Formulars leitet Getform dich auf eine Bestätigungs- oder Dankesseite weiter, die anzeigt, dass die Übermittlung erfolgreich war.

Um die Antworten auf das Formular zu überprüfen, navigiere zu deinem Getform-Dashboard und sieh dir die Übermittlungen in dem dafür vorgesehenen Nachrichteneingang an.

Zusammenfassung

Jetzt, wo du das Formular erfolgreich implementiert hast, gibt es unzählige Möglichkeiten, es anzupassen. Du kannst zum Beispiel das Design und die Funktionalität des Formulars verbessern, indem du es mit CSS oder deiner bevorzugten Präprozessorsprache weiter gestaltest und erweiterte Validierungstechniken implementierst.

Neben dem Statische-Seiten-Hosting-Dienst bietet Kinsta auch einen Anwendungs-Hosting-Dienst an, der für dynamischere Anwendungen entwickelt wurde – wie z. B. Webanwendungen, die serverseitige Verarbeitung, Datenbankinteraktionen und andere komplexe Funktionalitäten benötigen.

Mit dem Zugang zu beiden Diensten erhalten Nutzer/innen eine umfassende Hosting-Lösung für die Verwaltung einer Reihe von Webprojekten unter einem einzigen Ökosystem, von einfachen statischen Websites bis hin zu komplexen Webanwendungen.

Du kannst deine statische Website jetzt mit Formularverarbeitungsdiensten in ein dynamisches Erlebnis verwandeln. Welchen Dienst bevorzugst du oder hast du Erfahrung damit? Teile sie in den Kommentaren unten mit.

Jeremy Holcombe Kinsta

Content & Marketing Editor bei Kinsta, WordPress Web Developer und Content Writer. Außerhalb von WordPress genieße ich den Strand, Golf und Filme. Außerdem habe ich Probleme mit großen Menschen ;).

• LinkedIn