So verwenden Sie Formulare und die Suche mit einer statischen Website

Möchten Sie Formulare und eine Suchfunktion zu Ihrer statischen Website hinzufügen? Dieser Leitfaden hilft Ihnen dabei.

Formulare und Suchfunktionen stellen für statische WordPress-Websites ein Problem dar. Es gibt keine herkömmliche Möglichkeit, diese Funktionen zu nutzen. Sie müssen komplexe Konfigurationen vornehmen, um Ihre Website mit Drittanbietern zu verknüpfen und dies zum Laufen zu bringen.

Zum Glück ist Simply Static Studio da, um dies zu vereinfachen und Ihnen zu helfen, es mit nur wenigen Klicks umzusetzen. In diesem Schritt-für-Schritt-Leitfaden zeigen wir Ihnen, wie Sie Ihrer statischen WordPress-Website Formulare und eine Suchfunktion hinzufügen.

Zur Übersicht: Darum geht es in diesem Leitfaden:

• Was Simply Static Studio ist und welche wesentlichen Vorteile es bietet.
• Wie Sie eine statische WordPress-Website mit Simply Static Studio einrichten.
• Wie Sie Formulare auf einer statischen WordPress-Website erstellen und verwalten (Schritt für Schritt).
• Wie Sie eine Suchfunktion auf einer statischen WordPress-Website implementieren (Schritt für Schritt).

Beginnen wir zunächst damit, zu verstehen, was Simply Static Studio ist.

Was ist Simply Static Studio?

Simply Static Studio ist eine vollständig verwaltete All-in-one-Lösung zum Erstellen und Verwalten statischer WordPress-Websites. Diese Lösung baut auf den Funktionen des Simply Static-Plugins auf – einem leistungsstarken Plugin zur Umwandlung von WordPress-Websites in statische Websites.

Simply Static Studio vereint Hosting, Performance-Optimierung, Sicherheit und die Generierung statischer Websites auf einer einzigen Plattform. Warum? Damit Entwickler, Agenturen und Content-Ersteller statische WordPress-Websites erstellen und verwalten können, ohne sich mit den üblichen damit verbundenen Herausforderungen auseinandersetzen zu müssen, wie etwa:

• Webhosting zu beschaffen und Server zu konfigurieren.
• Die Performance der Website zu überwachen und zu verbessern.
• Die Sicherheit ihrer Website im Blick zu behalten.
• Und vieles mehr.

Simply Static Studio macht all das mühelos. Sie können die Anforderungen Ihrer statischen WordPress-Website an einem Ort abdecken.

Das Ziel besteht darin, Ihnen den Großteil der damit verbundenen Arbeit abzunehmen. So können Sie sich auf das konzentrieren, was Ihnen wichtig ist: Websites für sich selbst oder Ihre Kunden zu erstellen.

Sehen wir uns einige der Vorteile von Simply Static Studio an und verstehen wir, warum es Ihre bevorzugte Lösung für statische WordPress-Websites sein sollte.

Die wichtigsten Vorteile von Simply Static Studio:

Die integrierten Funktionen von Simply Static Studio bieten zahlreiche Vorteile, darunter die folgenden.

Zum Erstellen Ihrer statischen Website ist keine komplexe Einrichtung erforderlich

Sie können eine statische WordPress-Website erstellen, indem Sie im Dashboard von Simply Static Studio auf die Schaltfläche „Create Site“ klicken. Es sind keine komplexen Konfigurationen oder zusätzlichen Schritte erforderlich. Simply Static Studio startet nicht nur eine neue WordPress-Website, sondern:

• Installiert WordPress, Ollie (ein WordPress-Block-Theme) und WP Forms (einen WordPress-Formular-Builder) und richtet sie für Sie ein.
• Richtet einen Webserver (NGINX) ein und konfiguriert ihn für Sie.
• Installiert Simply Static und Simply Static Pro und konfiguriert sie.
• Und vieles mehr.

Kurz gesagt: Bei dieser Lösung geht es darum, komplexe Dinge einfach zu machen. Sie müssen lediglich einige Angaben eingeben und auswählen, was Sie bevorzugen. Den Rest erledigt sie.

Ein benutzerfreundliches Dashboard

Sie können statische WordPress-Projekte über ein einziges Dashboard erstellen und verwalten. Über dasselbe Dashboard können Sie mithilfe einer Magic-Link-Anmeldung ganz einfach auf jede Ihrer Websites zugreifen. Dadurch müssen Sie nicht jedes Mal Anmeldedaten eingeben, wenn Sie auf eine der von Ihnen erstellten Websites zugreifen möchten.

Sie können diesem Dashboard auch Teammitglieder hinzufügen, die Sie bei der Verwaltung dieser Projekte unterstützen, nicht mehr benötigte Websites löschen und eine benutzerdefinierte Domain hinzufügen. Falls Sie irgendwo nicht weiterkommen, steht Ihnen ein persönlicher Chat-Support zur Verfügung, der Sie dabei unterstützt.

Blitzschnelle Performance für Ihre statischen Websites

Das Hosting von Simply Static Studio bietet eine blitzschnelle Performance und ergänzt damit die Performance-Vorteile einer typischen statischen Website. Wenn Sie Ihre statische Website erstellen, wird sie auf dem leistungsstarken CDN von Simply Static Studio gehostet, das über mehr als 120 weltweit verteilte Rechenzentren verfügt.

Das bedeutet, dass Nutzer überall auf der Welt schnelle Ladezeiten erleben. Betrachtet man die Zahlen, sind es weltweit weniger als 25 Millisekunden. Ihre statischen Websites sind jederzeit bereit, Traffic-Spitzen ohne Leistungseinbußen zu bewältigen.

Ein sicherheitsorientierter Ansatz

Schon für sich genommen sind statische Websites sicherer als dynamische Websites. Der Grund dafür ist, dass Hacker keine Datenbank mithilfe von Techniken wie SQL-Injection ausnutzen können. Simply Static Studio geht noch einen Schritt weiter.

Sicherheitsfunktionen von Simply Static Studio

Sicherheit hat Priorität: Alles in Simply Static Studio wird durch eine einfache Authentifizierung und eine Zero-Trust-Firewall geschützt. Diese Art von Firewall schützt vor externen Bedrohungen aus Ihrem Netzwerk.

Sobald Sie eine statische WordPress-Website erstellen, weist Simply Static Studio WordPress und Ihrer statischen Website automatisch ein SSL-Zertifikat zu.

Zur Absicherung des Magic-Login-Links werden folgende Schritte durchgeführt:

• Der Link ist nur 2 Minuten verfügbar und läuft danach ab.
• Der Link kann nicht geteilt werden, um Man-in-the-Middle-Angriffe zu verhindern.

Im Grunde konzentriert sich Simply Static Studio darauf, komplexe Dinge einfach zu machen. Das zeigt sich auch darin, wie es Formulare und die Suchfunktion auf einer statischen WordPress-Website verarbeitet.

In diesem Artikel erfahren Sie alles über die Einrichtung Ihrer allerersten statischen WordPress-Website.
Springen wir also direkt dazu, wie Sie Formulare und Einsendungen auf Ihrer statischen WordPress-Website in Studio verwalten:

So erstellen und verwalten Sie Formulare auf einer statischen Website

Formulare sind dynamische Funktionen, die stark auf Datenbanken und serverseitige Verarbeitung angewiesen sind. Eine statische Website verzichtet auf diese Komponenten, wodurch die Verwaltung dieser dynamischen Funktionen auf einer statischen WordPress-Website eine Herausforderung darstellt.

Wie bereits erwähnt, gibt es keine herkömmliche Möglichkeit, sie zu verarbeiten. Ohne Simply Static Studio müssten Sie externe Dienste zur Formularverarbeitung nutzen. Das kann insbesondere dann zu Problemen mit der DSGVO-Konformität führen, wenn Sie über Ihre Formulare personenbezogene Daten erfassen.

Ganz zu schweigen davon, dass es komplex ist, Ihre statische Website mit diesen externen Diensten zu verknüpfen.

So verarbeitet Simply Static Studio Formulare auf Ihrer statischen Website

Das Hinzufügen von Formularen zu einer statischen WordPress-Website kann schwierig sein, da die herkömmliche Formularverarbeitung auf Datenbanken und serverseitigen Skripten beruht. Glücklicherweise übernimmt Simply Static Studio diese Aufgabe für Sie und ermöglicht es Ihnen, Formulareinsendungen zu verarbeiten, ohne auf Dienste von Drittanbietern angewiesen zu sein.

Es baut auf den bestehenden Funktionen zur Formularverarbeitung von Simply Static Pro auf und erweitert diese um einen REST-API-Endpunkt für nahtlose Formulareinsendungen.

So funktioniert es:

Simply Static Studio wird mit einem eigenen Webhook ausgeliefert und verwendet einen secret_key, um Formulareinsendungen zu authentifizieren, bevor sie in Ihrer Datenbank gespeichert werden.

Damit alles einfacher ist, wird Ihr eindeutiger Webhook-Endpunkt jedes Mal vorausgefüllt, wenn Sie eine neue Formularintegration in Simply Static erstellen.

Der Webhook und das Secret sind immer eindeutig Ihrer erstellten Website zugeordnet, und keine zwei Websites verwenden exakt dieselbe Kombination.

Sobald jemand ein Formular auf Ihrer statischen Website absendet, wird die Anfrage an WordPress zurückgesendet und die Übermittlung in der Datenbank gespeichert. Sie finden alle Ihre Formularübermittlungen unter Simply Static -> Entries.

Sehen wir uns nun an, wie Sie Formulare auf Ihrer statischen WordPress-Website einrichten.

Schritt 1: Formularintegration in Simply Static aktivieren

Um Formulare auf Ihrer statischen WordPress-Website zu verwenden, müssen Sie zunächst die Formularintegration in Simply Static Pro aktivieren.
Auf allen Websites, die auf Studio laufen, ist sie automatisch aktiviert.

Gehen Sie dazu wie folgt vor:

1. Bewegen Sie im WordPress-Dashboard den Mauszeiger über Simply Static und klicken Sie auf Forms.
2. Klicken Sie oben auf den Schalter mit der Beschriftung „Use Forms?“.

Simply Static Studio legt automatisch die erforderlichen Standardwerte für den Webhook fest. Sie müssen nur die Verbindung zu Ihrem Formular-Plugin konfigurieren.

Schritt 2: Eine neue Formularverbindung erstellen

Unter diesem Schalter sehen Sie die Schaltfläche Create a form connection. Klicken Sie darauf. Dadurch gelangen Sie zur Konfigurationsseite der Formularverbindung, auf der Sie die restlichen Schritte in diesem Abschnitt abschließen.

Beginnen Sie, indem Sie den Formularnamen hinzufügen. Zum Beispiel „Kontaktformular“. Diesen Titel verwenden Sie, um auf das interne Formular zu verweisen.

Schritt 3: Ein Formular-Plugin auswählen

Als Nächstes wählen Sie im Abschnitt Connect your form plugin Ihr bevorzugtes Formular-Plugin aus. 

Hinweis: In diesem Abschnitt wird vorausgesetzt, dass Sie ein Formular auf der Frontend-Seite Ihrer statischen WordPress-Website erstellt und ausgegeben haben.

1. Klicken Sie auf das Dropdown-Menü unter Plugin und wählen Sie Ihr bevorzugtes Formular-Plugin aus. Dies kann Contact Form 7, Gravity Forms, WP Forms usw. sein.
2. Als Nächstes müssen Sie die ID Ihres Formulars verbinden. Je nach Kontaktformular gibt es dafür unterschiedliche Möglichkeiten. Hier ist ein Beispiel für Contact Form 7:

• Rufen Sie das Frontend Ihrer statischen Website auf, klicken Sie mit der rechten Maustaste und wählen Sie Inspect.
• Suchen Sie nach dem div-Element mit der Klasse „wpcf7“ (kurz für WordPress Contact Form 7).
• Kopieren Sie den Wert des ID-Attributs dieses Elements und fügen Sie ihn in das Feld für die Formular-ID ein.

Detaillierte Schritte für verschiedene Kontaktformular-Plugins finden Sie in unserem Leitfaden zu Kontaktformularen.

Schritt 4: Feedback-Nachrichten einrichten

Zum Abschluss passen Sie die Feedback-Nachrichten im Abschnitt Customize Feedback an.

Fügen Sie Folgendes hinzu:

• Die Erfolgsmeldung – zum Beispiel „Ihre Nachricht wurde erfolgreich gesendet“.
• Die Fehlermeldung – Wenn das Formular nicht gesendet werden kann, können Sie eine Nachricht wie „Bei Ihrer Übermittlung ist ein Fehler aufgetreten. Überprüfen Sie bitte die Formularfelder, korrigieren Sie die Fehler und versuchen Sie es erneut“ hinzufügen.
• Oder klicken Sie auf den Schalter „Stattdessen die Seite „Danke“ verwenden“. Dadurch werden Benutzer nach dem Absenden des Formulars auf eine bestimmte Seite weitergeleitet.

Um diese Einrichtung abzuschließen, klicken Sie auf die Schaltfläche Veröffentlichen und anschließend auf Generieren , um mit diesen Einstellungen eine neue statische Version Ihrer Website zu exportieren.

Formulareinträge anzeigen

Ihr Kontaktformular ist nun eingerichtet. Benutzer können jetzt Formularfelder ausfüllen und diese Daten an Ihre WordPress-Website übermitteln. Gehen Sie in Ihrem WordPress Dashboard zu Simply Static > Einträge , um die übermittelten Daten anzuzeigen:

Klicken Sie anschließend auf den Tab Formulareinträge . Die Details des übermittelten Formulars sollten in einer Tabelle angezeigt werden. Entscheidend ist, dass Simply Static Studio Formulareinträge innerhalb Ihrer WordPress-Installation speichert, sodass Sie keine Benutzerdaten an anderer Stelle übermitteln.

Sehen wir uns an, wie Sie die Suchfunktion mit Simply Static Studio einrichten.

So fügen Sie einer statischen Website eine Suche hinzu

Da statische Websites keine Datenbank haben, funktioniert die herkömmliche WordPress-Suche nicht. Das bedeutet jedoch nicht, dass Ihre Website ohne Suchfunktion auskommen muss.

Simply Static Studio macht dies einfach und bietet zwei leistungsstarke Suchoptionen:

• Fuse.js – Eine schlanke, clientseitige Suche, die eine vorab generierte JSON-Datei verwendet. Sie eignet sich hervorragend für einfache Suchvorgänge und erfordert keine externen Dienste.
• Algolia – Ein leistungsstarker Suchdienst mit umfassenden Funktionen, der Ihre Inhalte für blitzschnelle Ergebnisse indexiert und sich daher ideal für komplexere Suchanforderungen eignet.

Beide Optionen lassen sich nahtlos in Simply Static Studio integrieren, sodass Sie das Sucherlebnis an die Anforderungen Ihrer Website anpassen können.

Sehen wir uns nun Schritt für Schritt an, wie Sie die Suche auf Ihrer statischen WordPress-Website einrichten.

Option 1: Fuse JS verwenden

Wenn Sie Ihrer statischen Website mit Fuse.js als Suchmaschine eine einfache Suchfunktion hinzufügen möchten, führen Sie die folgenden Schritte aus:

Hinweis: In diesem Tutorial wird vorausgesetzt, dass Sie auf Ihrer WordPress-Website ein Suchleistenelement erstellt haben. Falls nicht, können Sie WordPress-Blöcke verwenden, um eines hinzuzufügen.

Suchintegration in Simply Static aktivieren

1. Gehen Sie in Ihrem WordPress-Dashboard zu Simply Static > Einstellungen > Suche. Klicken Sie auf den Schalter Suche verwenden?.

2. Dieser Bereich wird erweitert und zeigt einige Einstellungen an. Klicken Sie auf das Dropdown-Menü unter Suchtyp und wählen Sie Fuse JS aus. Simply Static trägt die Einstellungen im Bereich Indexierung vorab ein, zum Beispiel die auszuschließenden URLs, CSS-Selektoren für Titel, Inhalt und Auszug usw.

Sie müssen den CSS-Selektor für Ihr Suchelement eingeben.

Einen CSS-Selektor für das Suchelement hinzufügen

3. Um den CSS-Selektor für Ihr Suchelement abzurufen, öffnen Sie auf Ihrer WordPress-Website das Frontend der Seite, auf der Sie das Suchelement hinzugefügt haben. Klicken Sie mit der rechten Maustaste auf diese Seite und wählen Sie Untersuchen.
4. Suchen Sie in den Entwicklertools unter Elemente nach dem Formularelement mit der Rolle „search“. Prüfen Sie hier die eindeutige Klasse des Sucheingabefelds, die beispielsweise „.wp-block-search,“ lauten kann, und kopieren Sie sie.
5. Gehen Sie zurück zu den Simply Static-Sucheinstellungen und fügen Sie diese eindeutige Kennung im Bereich Fuse.js unter CSS-Selektor ein.

Eine neue statische Version der Website exportieren

6. Klicken Sie auf Speichern , um die Einrichtung abzuschließen.
7. Klicken Sie abschließend auf Generieren , um mit den neuen Einstellungen eine neue statische Version Ihrer Website zu exportieren.

Option 2: Algolia verwenden

Wenn Sie eine komplexere Suchlösung mit Algolia als Suchmaschine wünschen, sollten Sie die folgenden Schritte ausführen:

CSS-Selektor für das Suchelement hinzufügen

1. Wählen Sie nach der Aktivierung der Suche im Dropdown-Menü Algoia API unter Search Type aus. Wie bei Fuse JS sind die Indizierungseinstellungen bereits für Sie vorausgefüllt. Im Gegensatz zu Fuse JS müssen Sie jedoch im Abschnitt Algolia API weiter unten noch einige Einstellungen konfigurieren.
2. Rufen Sie das Frontend Ihrer Website auf (dort, wo Sie das Suchelement hinzugefügt haben), klicken Sie mit der rechten Maustaste und wählen Sie „Untersuchen“. Suchen Sie das Sucheingabeelement und kopieren Sie den zugehörigen Klassennamen (in diesem Fall „wp-block-search_input“).
3. Fügen Sie diesen im Feld für den CSS-Selektor im Abschnitt Algolia API ein. Sie können die Einstellungen vorerst speichern.

Suchindex in Algolia erstellen

Algolia ist ein externer API-Dienst. Daher müssen Sie sich unter algolia.com registrieren. Anschließend werden Sie zu Ihrem Algolia-Dashboard weitergeleitet (eine Beispielanwendung wird bereits für Sie erstellt).

So erstellen Sie einen Index:

1. Klicken Sie in der linken Seitenleiste auf Search und anschließend oben auf Index .
2. Geben Sie einen Namen für Ihren Index ein. Kopieren Sie diesen Namen, da wir ihn zu den Sucheinstellungen in Simply Static hinzufügen werden. 
3. Klicken Sie auf Create Index, und Algolia erstellt einen Index für Sie. 

• Richten Sie eine Suchmaschine eines Drittanbieters ein, um Inhalte zu indizieren.
• Fügen Sie den Search API Key zur Konfiguration von Simply Static hinzu.

Algolia-API-Einstellungen in Simply Static abschließen.

Wechseln Sie zurück zu Simply Static und fügen Sie den Namen Ihres Suchindex in das entsprechende Feld ein. 

1. Gehen Sie zurück zum Algolia-Dashboard. Klicken Sie auf Overview > Settings > API Keys.
2. Hier finden Sie die Application ID, den Admin API Key und den Search-Only API Key. Kopieren Sie diese und fügen Sie sie in die entsprechenden Felder in den Simply-Static-Sucheinstellungen ein.
3. Klicken Sie auf Save Settings , sobald Sie fertig sind.

Letzter Schritt: Suche exportieren und testen

Unabhängig davon, ob Sie Fuse JS oder Algolia als Suchmaschine verwenden, sollte dies Ihr letzter Schritt sein. Klicken Sie in den Simply-Static-Einstellungen auf Activity Log und anschließend auf Generate. 

Rufen Sie das Frontend auf und testen Sie die Suchfunktion, indem Sie nach etwas suchen. Während der Eingabe sollten einige Suchvorschläge angezeigt werden. Wenn Sie Fuse JS verwenden, basieren diese Vorschläge auf einer JSON-Datei; bei Algolia basieren sie hingegen auf der Algolia API.

Wenn Sie im Frontend eine Suche durchführen, sollten einige Suchvorschläge angezeigt werden, die auf einer JSON-Datei basieren.

Erfahren Sie noch heute, wie Sie Formulare und die Suche mit Simply Static Studio einrichten

Simply Static Studio bietet eine verwaltete All-in-one-Plattform für alle Anforderungen Ihrer statischen WordPress-Website. Dazu gehören Hosting, Performance-Optimierung und die Generierung statischer Websites. 

Der Schwerpunkt liegt darauf, alles rund um statische WordPress-Websites einfach zu gestalten – auch den Umgang mit Formularen und der Suche.

Dynamische Funktionen, Formulare und Suchfunktionen stellen für jede statische Website eine Herausforderung dar. Simply Static Studio baut auf den Funktionen von Simply Static Pro auf und ermöglicht es Ihnen, diese dynamischen Funktionen problemlos zu Ihrer statischen WordPress Website hinzuzufügen. 

In diesem Leitfaden haben wir Sie durch die erforderlichen Schritte geführt. Nun sollten Sie in der Lage sein, mit Simply Static Studio Formulare und eine Suche zu Ihrer statischen Website hinzuzufügen.

Richten Sie noch heute Ihre statische WordPress-Website mit Simply Static Studio ein; dieser Leitfaden führt Sie durch das Hinzufügen von Formularen und einer Suchfunktion.