So integrierst du Sendform in deinen Website-Builder (Webflow, WordPress, Wix, Hugo, etc.)

Wenn du deiner Website leistungsstarke Formularfunktionen hinzufügen möchtest, ist es ein kluger Schritt zu lernen, wie du Sendform integrieren kannst. Sendform bietet eine einfache No-Code-Lösung für die Verwaltung von Kontaktformularen, Lead-Generierung und Benutzereingaben auf beliebten Plattformen wie Webflow, WordPress, Wix und Hugo. Egal ob du Entwickler oder Geschäftsinhaber mit begrenzten technischen Kenntnissen bist – dieser Leitfaden führt dich Schritt für Schritt durch den Integrationsprozess und stellt sicher, dass du schnell und sicher Formulardaten sammeln kannst.

Warum Sendform für deine Website-Formulare wählen

Bevor wir in die technischen Schritte eintauchen, lohnt es sich zu verstehen, warum Sendform unter den Formularlösungen heraussticht. Anders als traditionelle Formular-Plugins, die ein Backend-Setup und Datenbankverwaltung erfordern, funktioniert Sendform als SaaS-Plattform, die die ganze schwere Arbeit für dich übernimmt.

Die Plattform bietet Spam-Schutz, Datei-Uploads, E-Mail-Benachrichtigungen und Webhook-Integrationen, ohne dass serverseitiger Code erforderlich ist. Das macht sie perfekt für statische Site-Generatoren wie Hugo und Jekyll sowie für traditionelle CMS-Plattformen. Du kannst Sendform integrieren, unabhängig von deinem Hosting-Setup oder technischen Hintergrund.

Schritt-für-Schritt-Anleitung zur Integration für beliebte Plattformen

Der Integrationsprozess variiert je nach Website-Builder leicht, aber das Grundkonzept bleibt gleich. Du erstellst einen Formular-Endpunkt in Sendform und verbindest dann dein HTML-Formular mit diesem Endpunkt. Lass uns den Prozess für jede wichtige Plattform aufschlüsseln.

Sendform mit Webflow integrieren

Webflow-Nutzer können Sendform auf zwei Arten integrieren. Die erste Methode beinhaltet die Verwendung von Webflows nativem Formularelement und das Hinzufügen benutzerdefinierter Attribute. Erstelle zunächst dein Formular im Webflow Designer und füge dann dem Formularelement ein benutzerdefiniertes Attribut mit dem Namen "action" und deiner Sendform-Endpunkt-URL als Wert hinzu.

Alternativ kannst du benutzerdefinierten Code direkt in deine Webflow-Seite einbetten. Dies gibt dir mehr Kontrolle über Formular-Styling und Validierung. Füge einfach ein Embed-Element zu deiner Seite hinzu und füge deinen Sendform-HTML-Code ein. Denke daran, die Formularmethode auf "POST" zu setzen und alle notwendigen Eingabefelder mit korrekten Name-Attributen einzuschließen.

WordPress-Integrationsmethoden

WordPress bietet mehrere Integrationsoptionen. Der einfachste Ansatz ist die Verwendung des Custom HTML-Blocks im Gutenberg-Editor. Erstelle deinen Formular-HTML-Code mit der Sendform-Action-URL und füge ihn dann in einen Custom HTML-Block ein, wo immer du das Formular anzeigen möchtest.

Für eine Integration auf Theme-Ebene kannst du den Formularcode direkt in deine Theme-Dateien einfügen. Bearbeite dein Seitentemplate (wie page.php oder ein benutzerdefiniertes Template) und füge den Formular-HTML-Code an der gewünschten Stelle ein. Wenn du einen Page Builder wie Elementor oder Divi verwendest, nutze deren HTML- oder Code-Module, um deinen Sendform-Code einzubetten.

Sendform mit Wix integrieren

Wix erfordert aufgrund seines geschlossenen Ökosystems einen etwas anderen Ansatz. Du musst die Custom Element-Funktion von Wix verwenden, die das Einbetten von externem Code ermöglicht. Navigiere zum Add-Panel, wähle Embed und dann Custom Element. Füge deinen Sendform-HTML-Code in den Code-Editor ein.

Beachte, dass Wix sein eigenes Styling anwendet, sodass du möglicherweise das CSS deines Formulars anpassen musst, um es an dein Site-Design anzupassen. Verwende Inline-Styles oder Wix' Design-Tools, um sicherzustellen, dass dein Formular kohärent mit dem Rest deiner Website aussieht.

Statische Site-Generatoren (Hugo, Jekyll, Eleventy)

Statische Site-Generatoren sind der Bereich, in dem Sendform wirklich glänzt. Da diese Plattformen statische HTML-Dateien ohne serverseitige Verarbeitung generieren, ist die traditionelle Formularverarbeitung herausfordernd. Sendform löst dieses Problem elegant.

Erstelle für Hugo ein Partial-Template für dein Formular mit dem Sendform-Endpunkt. Füge dieses Partial überall dort ein, wo du ein Formular benötigst, indem du Hugos Template-Syntax verwendest. Das gleiche Prinzip gilt für Jekyll und Eleventy – erstelle eine wiederverwendbare Komponente oder Include-Datei mit deinem Formularcode.

Das Schöne an diesem Ansatz ist, dass deine Formulare sofort nach dem Deployment funktionieren, ohne Server-Konfiguration oder zusätzliche Dienste. Deine statische Site bleibt schnell und sicher und bietet dennoch volle Formularfunktionalität.

Dein Formular anpassen und die Integration testen

Sobald du den grundlegenden Formularcode zu deinem Website-Builder hinzugefügt hast, ist die Anpassung der nächste Schritt. Sendform ermöglicht es dir, E-Mail-Benachrichtigungen zu konfigurieren, benutzerdefinierte Erfolgsmeldungen einzurichten und Validierungsregeln über dein Dashboard hinzuzufügen.

Du kannst das Erscheinungsbild des Formulars mit CSS anpassen, um es an deine Marke anzupassen. Die meisten Website-Builder erlauben benutzerdefiniertes CSS entweder global oder auf Komponentenebene. Füge deinen Formularelementen Klassen hinzu und style sie entsprechend deinem Design-System.

Testen ist entscheidend, bevor du dein Formular öffentlich startest. Sende Testeinträge, um zu überprüfen, dass die Daten korrekt in deinem Sendform-Dashboard ankommen und dass E-Mail-Benachrichtigungen wie erwartet funktionieren. Überprüfe, dass die Validierung von Pflichtfeldern ordnungsgemäß funktioniert und dass Erfolgsmeldungen korrekt angezeigt werden. Teste Datei-Uploads, falls dein Formular diese enthält, und verifiziere, dass der Spam-Schutz aktiv ist.

Fazit

Sendform mit deinem Website-Builder zu integrieren ist ein unkomplizierter Prozess, der leistungsstarke Formularfunktionen ohne technische Komplexität eröffnet. Egal ob du Webflow, WordPress, Wix, Hugo oder eine andere Plattform verwendest – die Integration folgt ähnlichen Prinzipien: Erstelle deinen Endpunkt, füge den Formularcode zu deiner Site hinzu und passe ihn nach Bedarf an. Die plattformunabhängige Natur von Sendform bedeutet, dass du konsistente Formularfunktionalität beibehalten kannst, selbst wenn du in Zukunft den Website-Builder wechselst. Beginne mit einem einfachen Kontaktformular, um dich mit dem Prozess vertraut zu machen, und erweitere dann zu komplexeren Formularen, wenn deine Anforderungen wachsen.

FAQ