So baut man Formulare in statische Websites ein

Was sind statische Websites?

Viele der heutigen Websites werden mit einem datenbankgestützten CMS wie WordPress betrieben. Diese Art von Webseite kann langsam laden, für Betreiber mühsam zu warten und anfällig für Hacker sein. Eine statische Website kann viele dieser Probleme lösen und ist für Ihre Anforderungen möglicherweise besser geeignet.

Eine statische Website nutzt vorgefertigte HTML-, CSS- und JavaScript-Dateien zur Übermittlung an den Webbrowser, im Gegensatz zu herkömmlichen dynamischen Websites, bei denen der Quellcode der Webseite zum Zeitpunkt der Anfrage gerendert wird.

Statische Websites ermöglichen es Ihnen, mehr Flexibilität bei der Bereitstellung Ihrer Inhalte erhalten, da die Inhaltserstellung unabhängig von den Einschränkungen und Eigenheiten eines CMS ist. Kosteneffizienz ist ein weiterer Grund, warum Unternehmen auf eine statische Website umsteigen, denn statische Dateien sind leichtgewichtig und oft schneller und kostengünstiger im Betrieb.

Vorteile von statischen Websites

Performance und Ladezeit

Die Seitengeschwindigkeit ist in aller Regel schneller, da eine statische Website als leichtgewichtige, statische HTML-Dateien vorgerendert wird. Es ist effizienter, eine vorgefertigte Webseite zu rendern, als die Webseite für jeden Besucher neu zu erstellen. Bessere Ladezeiten führen zu einer höheren Nutzerzufriedenheit und können sich auch in besseren Suchmaschinen-Rankings niederschlagen.

Flexibilität

Statische Websites können mit einer Vielzahl von Frameworks gerendert werden. Die Entwickler können mit ihrer bevorzugten Sprache und ihrem bevorzugten Framework arbeiten (z. B. JavaScript, Ruby, React, Vue usw.), was die Erstellung und Wartung erleichtert. Weitere Vorteile sind die bessere Ausnutzung Ihrer Cloud-Infrastruktur und die Vereinfachung der Website-Entwicklung dank weniger Abhängigkeiten.

Skalierbarkeit

Mit einer statischen Website können Sie Inhalte über mehrere Kanäle hinweg präsentieren, ohne diese neu erstellen zu müssen. Außerdem lässt sich eine statische Struktur leicht an die sich ändernden Anforderungen Ihrer Website oder App anpassen.

Sicherheit

Bei einer klassischen dynamischen Website haben Hacker mehrere potenzielle Angriffspunkte, um in Ihre Daten einzudringen, da das gesamte System miteinander verbunden ist. Bei einer statischen Website hingegen existiert Ihre Inhaltsdatenbank unabhängig von Ihrer Website-Präsentation. Dadurch gibt es für Hacker weniger Einstiegspunkte und Ihre Daten sind sicherer. Website-Besucher stellen nicht bei jedem Aufruf Ihrer Website eine Verbindung zur Inhaltsdatenbank her, was einen weiteren Sicherheits- und Geschwindigkeitsvorteil im Vergleich zu datenbankgestützten Websites darstellt.

Wie statische Websites erstellt werden

Aus Ihren Inhalten und einer Designvorlage für das Erscheinungsbild der Website werden mithilfe eines Static-Site-Generators die fertigen und statischen Website-Dateien gerendert. Es gibt eine Menge solcher Generatorprogramme, die mit verschiedenen Programmiersprachen und Frameworks verwendet werden. Bei der Wahl des passenden Static-Site-Generators sollten auch Faktoren wie Größe der Website, Hauptzweck und Funktionalität berücksichtigt werden.

Hier eine kleine Auswahl beliebter Frameworks zur Generierung von statischen Websites:

• Hugo
  Ein Framework mit schneller Seitengenerierung.
• Gatsby
  Der beliebteste auf React basierende Generator.
• Jekyll
  Wird vielfach genutzt und basiert auf Ruby.
• Eleventy
  Nutzt JavaScript und wird immer beliebter.
• Astro
  Ein besonders schneller Generator.
• Hexo
  Leistungsfähiges Framework für Blogs.

Formular in statische Website einbauen

Bei der Erstellung einer statischen HTML-Website oder der Verwendung von Generatoren kann die Einrichtung von Formularen mit E-Mail-Zustellung einige Probleme verursachen. Der Verzicht auf eine serverseitige Sprache ist einer der Hauptvorteile statischer HTML-Websites in Bezug auf Leistung und Sicherheit, verhindert jedoch den typischen Weg, ein Kontaktformular für die Sendungsübertragung einzurichten.

Das Formular funktionstüchtig machen

Viele Websites nutzen dafür einen einfachen Mailto-Link ein. Die Technik haben wir hier beschrieben: Mailto-Link in HTML-Code. Bei diesem Ansatz gibt allerdings einige Probleme, wie beispielsweise die unzureichende Unterstützung seitens der Webbrowser und der einfache Missbrauch durch Spamer.

Eine zuverlässigere Technik ist Nutzung eines professionellen Backend-Service, welcher sich um die Entgegennahme der Formularsendungen kümmert. Diese bietet auch eine Reihe von Features, um die Verarbeitung der Sendungen nach den eigenen Wünschen und Anforderungen anzupassen. Dazu gehören Einstellungen zur Sendungsbenachrichtung und Sicherheitsfunktionen, um zuverlässig Spam zu bekämpfen.

Form.taxi bietet Ihnen einen solchen Backend-Service. Diesen können Sie in wenigen Schritten für Ihr eigenes Online-Formular einrichten. Dieser Service bietet eine ganze Reihe von Features für eine zuverlässige Übertragung der Formularsendungen.

• kostenlose Basisnutzung
• Absicherung gegen Spam und Missbrauch
• Benachrichtigung per E-Mail und Smartphone-App
• Datenschutzkonform

Für die Nutzung ist nur die Registrierung Ihres Formulars bei Form.taxi nötig, um eine individuelle Sendeadresse zu erhalten. Die Adresse fügen Sie im action-Attribut Ihres HTML-Formulars ein und schon können die Sendungen übertragen werden.

Hier ein Beispiel eines ganz einfachen Kontaktformulars in HTML.

<form action="SENDEADRESSE" method="post">
  <label for="name">Ihr Name</label>
  <input type="text" id="name" name="Name">
  <label for="email">E-Mail-Adresse</label>
  <input type="email" id="email" name="Email">
  <label for="msg">Ihre Nachricht</label>
  <textarea id="msg" name="Nachricht"></textarea>
  <button type="submit">Abschicken</button>
</form>

An der Stelle von „SENDEADRESSE“ wird die individuelle Sendeadresse für das Formular eingefügt und schon werden beim Absenden des Formulars alle Eingaben an die Adresse zur weiteren Verarbeitung übermittelt. Sie können den Backend-Service natürlich für jedes HTML-Formular mit beliebigen Eingabefeldern nutzen.

Fordern Sie gleich hier eine Sendeadresse bei Form.taxi an, um Ihr statisches Formular in wenigen Minuten mit der Sendefunktion fertigzustellen.

Die Verwaltungsoberfläche von Form.taxi bietet eine Reihe von Einstellungsmöglichkeiten, um die Sendungsverarbeitung optimal anzupassen. Eine genaue Beschreibung zu allen Funktionen finden Sie in der Dokumentation.