Websites, Migration und Astro 7 Min.

Formular und Suche auf einer statischen Website: so geht es

Auf einer statischen Website wird jede dynamische Funktion separat angebunden: Ein Formular sendet seine Daten an eine kleine Serverfunktion, die sie in einer Datenbank speichert und dann per E-Mail benachrichtigt, die interne Suche fragt einen bei der Veröffentlichung erzeugten Index ab, und die wenigen Seiten, die sich bei jedem Besuch ändern, werden auf Abruf gerendert.

Inhalt7
  1. 01Wo läuft der Code einer statischen Website?
  2. 02Wie fügt man einer statischen Website ein Formular hinzu?
  3. 03Wie fügt man eine interne Suche hinzu?
  4. 04Wo liegt die Liste eines Newsletters?
  5. 05Und die Seiten, die sich bei jedem Besuch ändern?
  6. 06Wo anfangen
  7. 07Häufige Fragen

Der Einwand, den man am häufigsten hört, wenn man eine statische Website vorschlägt: „Aber wir haben ein Formular, eine Suche, einen Newsletter.“ Ein Formular oder eine Suche zu einer statischen Website hinzuzufügen, verlangt nicht, die ganze Website in eine Anwendung zu verwandeln: Jeder Bedarf wird separat behandelt, Seite für Seite.

Dieser Leitfaden geht die häufigsten dynamischen Bedürfnisse durch und zeigt, wie man sie anbindet. Er setzt voraus, dass die Entscheidung gefallen ist; ist sie es noch nicht, beginnen Sie mit warum auf eine statische Website mit Astro migrieren.

Wo läuft der Code einer statischen Website?

Eine statische Website erzeugt ihre Seiten bei der Veröffentlichung. Was auf eine Aktion des Besuchers reagieren muss (eine Nachricht senden, ein Wort suchen, sich anmelden), wird einem eigenen Dienst anvertraut, der von der Seite aus aufgerufen wird.

Bei Astro ist die Grenze explizit: Standardmäßig wird die gesamte Website vorab gerendert, als HTML, und eine bestimmte Seite kann mit einer einzigen Zeile auf Abruf gerendert werden, export const prerender = false, sofern ein Adapter für den Hoster installiert ist. Der Rest der Website ändert sich nicht.

Das gilt etwa für einen Webhook, die Adresse, die ein externer Dienst aufruft, um eine bestätigte Zahlung oder eine eingegangene Nachricht zu melden: Sie muss bei jedem Aufruf Code ausführen, was keine im Voraus erzeugte Seite kann.

Wie fügt man einer statischen Website ein Formular hinzu?

Der Ablauf

Ein Kontaktformular auf einer statischen Website funktioniert in drei Schritten:

Der Weg einer Anfrage, vom Formular zu den E-Mails

  1. Das Formular

    Die Seite sendet die Felder an eine kleine Serverfunktion (eine Netlify-Funktion, einen Cloudflare Worker, eine Supabase Edge Function).

  2. Die Speicherung

    Die Funktion prüft die Daten und speichert sie in einer Datenbank oder im CRM.

  3. Die E-Mails

    Sobald gespeichert ist, sendet die Funktion die Benachrichtigungs-E-Mail und die Bestätigung an den Besucher.

Die Regel, die verhindert, dass Anfragen verloren gehen

Die Reihenfolge der Schritte 2 und 3 ist kein Detail. Eine Anfrage, die nur in einer E-Mail existiert, verschwindet spurlos, sobald der Versand scheitert, wegen eines erreichten Kontingents oder einer falsch konfigurierten Adresse.

Aus der Praxis

Bei Palmora Property galt ein fehlgeschlagener Versand als Erfolg

Ein Kunde hat es teuer gelernt. Die Anfragen von Palmora Property, einer Immobilien-Website, die wir betreuen, liefen zunächst nur über E-Mail, ohne Garantie: Ein fehlgeschlagener Versand wurde verschluckt, und der Besucher erhielt trotzdem eine Erfolgsmeldung. Der Ablauf speichert inzwischen jede Anfrage in der Datenbank, bevor auch nur eine E-Mail versendet wird.

Daher die Regel, die überall gilt: zuerst die Datenbank, dann die E-Mail. Eine fehlgeschlagene E-Mail lässt sich erneut senden. Eine nie gespeicherte Anfrage ist verloren.

Fertige Formulardienste

Mehrere Hoster bieten eine integrierte Formularverwaltung an: Man fügt dem HTML-Formular ein Attribut hinzu, und die Einsendungen erscheinen in einer Oberfläche. Das ist praktisch für eine Unternehmenswebsite mit wenigen Anfragen. Drei Fragen sollte man stellen, bevor man sich darauf verlässt:

  • Wo werden die Daten gespeichert, und kann man sie exportieren?
  • Kommen die Anfragen im CRM an, oder muss man sie von Hand abtippen?
  • Was geschieht oberhalb des Kontingents des Tarifs?

Für ein Unternehmen, das von seinen eingehenden Anfragen lebt, bevorzugen wir eine Funktion, die die Anfrage speichert und dann im CRM anlegt. Sie kommt dort mit ihrer Quelle an, ohne erneute Eingabe.

Gegen Bots

Ein öffentliches Formular erhält automatische Einsendungen. Drei einfache Netze, alle serverseitig geprüft: ein verstecktes Feld, das nur ein Bot ausfüllt, eine Mindestzeit auf der Seite vor dem Absenden und eine Grenze für Einsendungen pro Stunde. Es sind die Netze der Newsletter-Anmeldung des Blogs von Challenge Us, einer App für Gruppenherausforderungen, die wir entwickelt haben, zusätzlich mit einem Double-Opt-in: Die Adresse wird erst nach einem Klick in der Bestätigungs-E-Mail eingetragen.

Wie fügt man eine interne Suche hinzu?

Ein bei der Veröffentlichung erzeugter Index

Eine interne Suche braucht keinen Suchserver. Bei der Veröffentlichung durchläuft ein Skript die Seiten und erzeugt einen Index; im Browser fragt ein kleines Programm diesen Index ab.

Pagefind, eine vollständig statische Suchbibliothek, zerlegt ihren Index in Teile, und eine Suche lädt nur einen kleinen Teil davon. Ihre Autoren geben das insgesamt zu übertragende Volumen an:

300 KB

sind die Obergrenze für eine Volltextsuche auf einer Website mit 10 000 Seiten, Bibliothek eingeschlossen

100 KB

sind eher das Volumen für die meisten Websites

Quelle: Pagefind, Vorstellungsseite der Bibliothek

Challenge Us hat einen eigenen Index geschrieben, in zwei Dateien: eine für den Blog, eine für die Wissensdatenbank, bei der Veröffentlichung aus denselben Listen wie die Seiten erzeugt und beim ersten Tastendruck im Feld geladen, rund 130 KB komprimiert für die des Blogs im September 2026. Beide Ansätze laufen auf einem statischen Hosting, ohne zu bezahlenden Dienst.

Was man vorsehen sollte

  • Akzente und Großschreibung egal: „reunion“ muss „Réunion“ finden.
  • Ein Auszug, der zeigt, warum das Ergebnis erscheint. Ein Titel allein genügt nicht, wenn das gesuchte Wort im Text der Seite steht.
  • Keine Adresse pro Suche. Wird jede eingetippte Suche zu einer Seite, die Suchmaschinen crawlen können, füllt sich die Website mit Seiten ohne eigenen Inhalt. Die Suche findet in der Seite statt, ohne neue Adresse.

Wo liegt die Liste eines Newsletters?

Die Anmeldung zu einem Newsletter folgt dem Ablauf des Formulars. Zwei Entscheidungen zählen:

  • Wo die Liste liegt. Sie kann bei einem E-Mail-Dienst liegen oder in Ihrer Datenbank und von dort an den Dienst übertragen werden. Die Liste bei sich zu behalten, erlaubt es, den Nachweis der Einwilligung aufzubewahren (der angekreuzte Satz, das Datum, die Seite) und den Dienst zu wechseln, ohne jemanden zu verlieren.
  • Das Double-Opt-in. Es schützt vor Anmeldungen durch Bots oder mit der Adresse eines anderen, und es ist der einfachste Nachweis, dass die Einwilligung vom Inhaber der Adresse stammt.

Und die Seiten, die sich bei jedem Besuch ändern?

Manche Seiten lassen sich nicht im Voraus erzeugen: ein Kundenbereich, ein Warenkorb, ein Dashboard. Bei Astro werden sie auf Abruf gerendert, eine nach der anderen, während der Rest der Website statisch bleibt. Die Kosten sind die der ausgeführten Funktionen, ein Punkt, den man beim Hoster im Auge behalten sollte: Wir beschreiben, was je nach Hoster berechnet wird.

Wenn diese Seiten zahlreich werden und die ganze Website von Daten abhängt, die sich im Laufe des Tages ändern (ein Immobilienkatalog, Verfügbarkeiten), ist ein bewusst gewähltes serverseitiges Rendering mit einem gut eingestellten Cache einfacher als eine zusammengebastelte statische Website.

Das Wichtigste

Statisch bleibt die richtige Wahl, solange sich der Großteil der Seiten im Rhythmus der Veröffentlichungen ändert, nicht der Besuche.

Wo anfangen

Listen Sie alles auf, was auf Ihrer aktuellen Website reagieren muss: Formulare, Suche, Anmeldungen, Kundenbereich. Jede Zeile findet ihren Platz in einem der oben beschriebenen Abläufe, und diese Liste sagt, was das Hosting ausführen und berechnen muss.

Läuft Ihre Website heute unter WordPress, Drupal oder Joomla, geht unsere Migration auf eine statische Website von einer Bestandsaufnahme Ihrer Seiten aus und vergleicht jede Seite vor dem Livegang mit der alten Website.

Häufige Fragen

Ist ein Formular auf einer statischen Website weniger sicher?

Nein, oft sicherer. Es gibt weder ein Administrationspanel noch Plug-ins, die exponiert wären: Nur eine kleine Funktion empfängt die Daten. Sie muss jedes Feld serverseitig validieren, die Zahl der Einsendungen begrenzen und dem Besucher nie eine detaillierte Fehlermeldung zurückgeben. Die Zugangsschlüssel zum CRM oder zum E-Mail-Dienst bleiben in der Funktion, nie im Code der Seite.

Kann man das Formular direkt an das CRM anbinden?

Ja. Die Serverfunktion ruft die API des CRM auf (Twenty, Odoo, HubSpot oder ein anderes) und legt den Kontakt oder die Anfrage an. Fügen Sie jeder Einsendung die Herkunftsseite, die Sprache und die Kampagnenparameter (UTM) hinzu: Ohne sie lässt sich nicht erkennen, welcher Kanal die Anfragen bringt. Und behalten Sie die Speicherung in der Datenbank vor dem Aufruf des CRM bei, damit dessen Ausfall nichts verloren gehen lässt.

Braucht man für die interne Suche einen kostenpflichtigen Dienst?

Nicht für eine Website mit einigen Hundert oder Tausend Seiten. Ein bei der Veröffentlichung erzeugter Index genügt, und er wird wie die anderen Dateien der Website ausgeliefert. Ein eigener Dienst lohnt sich für einen sehr umfangreichen Katalog mit Filtern, Synonymen und Sortierung nach kommerzieller Relevanz, oder wenn die Ergebnisse einem Bestand folgen müssen, der sich im Laufe des Tages ändert.

Was passiert, wenn die Funktion des Formulars ausfällt?

Die Seiten bleiben online, da es Dateien sind: Nur das Absenden scheitert. Sehen Sie auf der Seite eine klare Fehlermeldung mit einer Ausweich-E-Mail-Adresse vor, statt eines Buttons, der endlos lädt, und eine Warnung, die Sie über den Ausfall informiert. Fällt der E-Mail-Dienst aus, geht die bereits in der Datenbank gespeicherte Anfrage nicht verloren.

Wie veröffentlichen Marketingteams auf einer statischen Website?

Über einen Editor, nicht im Code. Der Inhalt liegt in Markdown-Dateien oder in einem Headless-CMS wie Sanity, und jede Veröffentlichung baut die Website neu, mit einer Vorschau vor dem Livegang und der Möglichkeit, zur vorherigen Version zurückzukehren. Das richtige Werkzeug hängt davon ab, wer veröffentlicht und in welchem Rhythmus: Wir beschreiben es in unserem Artikel über Astro und Sanity.

Quellen

  1. Standardmäßig wird die gesamte Website vorab gerendert (neuer Tab)docs.astro.build
Quelle 1

Standardmäßig wird die gesamte Website vorab gerendert

Auf docs.astro.build lesen(neuer Tab)

Jim · Gründer von Brain Plus AI

Ebenfalls lesenswert zu websites, migration und astro

  • Verstehen8 Min. Der Leitfaden zum Thema

    Zu einer statischen Website mit Astro migrieren, ohne SEO zu verlieren

    Eine von Astro erzeugte statische Website ersetzt ein in die Jahre gekommenes WordPress oder Drupal, ohne die Adressen zu ändern: reine HTML-Seiten aus einem CDN, kein Plugin zum Patchen und eine Veröffentlichungskette mit Rücksprung. Was sich ändert, wie man migriert und wann man es lassen sollte.

  • Auswählen und kalkulieren7 Min.

    Statische Website hosten: Cloudflare, Netlify oder ein VPS

    Eine statische Website lässt sich fast überall ausliefern, aber nicht zum selben Preis und nicht mit denselben Fallstricken. Was bei Cloudflare und Netlify gezählt wird, welche Einstellungen überraschen und wann sich ein eigener Server lohnt.

  • Auswählen und kalkulieren6 Min.

    Was eine Firmenwebsite 2026 kostet

    Eine Firmenwebsite bezahlt man zweimal: bei der Erstellung und dann jedes Jahr. Was den ersten Preis verändert, was den zweiten aufbläht, und die Fragen, die zwei Angebote endlich vergleichbar machen.

WhatsApp