Formulare Übersicht - Webflow Hilfe
Formulare sind eines der leistungsstärksten Werkzeuge im Web, mit denen Sie Informationen effizient erfassen können, sei es für Newsletter-Anmeldungen oder Arbeitsanfragen von potenziellen Kunden. Mit Webflow können Sie Ihre Formulare vollständig anpassen und optimieren, um Ihren Anforderungen gerecht zu werden. Sie können einen Formularblock zu Ihrer Website hinzufügen über Add panel → Elements → Forms.
Formularaufbau
Der Formularblock übernimmt die volle Breite seines übergeordneten Elements und enthält drei untergeordnete Elemente:
- Formular — enthält alle Ihre Formulareingaben und Elemente
- Erfolgsmeldung — die Nachricht, die zurückgegeben wird, wenn das Formular erfolgreich übermittelt wurde
- Fehlermeldung — die Nachricht, die zurückgegeben wird, wenn es ein Problem mit der Formularübermittlung gibt
Formularstruktur
Sie können die folgenden Formularelemente innerhalb des Formulars hinzufügen oder löschen, um Ihr Formular nach Bedarf anzupassen:
| Formularelement | Zweck |
|---|---|
| Feldbeschriftung | Dient zur Beschreibung der Funktion oder des Zwecks eines Formularfelds. Feldbeschriftungen sind entscheidend für die Barrierefreiheit. |
| Eingabe | Dient zur Erfassung von einzeiligen Daten, wie eine kurze Antwort auf eine Frage (z.B. Name oder E-Mail-Adresse) |
| Dateiupload | Ermöglicht es Besuchern der Website, eine Datei an ihre Formularübermittlung anzuhängen |
| Textbereich | Ermöglicht es Besuchern der Website, mehrzeilige Daten einzugeben, wie eine längere Nachricht |
| Kontrollkästchen | Wird für Eingabedaten verwendet, bei denen Besucher der Website eine oder mehrere Optionen wählen können |
| Optionsfeld | Wird für Eingabedaten verwendet, bei denen Besucher der Website nur eine von vielen Optionen wählen können |
| Auswahl | Ermöglicht es Besuchern der Website, Optionen aus einer Dropdown-Liste auszuwählen. Mehrfachauswahl möglich |
| reCAPTCHA | Google-Dienst, der Formular-Spam verhindert |
| Absenden-Button | Übermittelt alle im Formular gesammelten Daten. Kein Formular ist ohne den Absenden-Button vollständig |
So konfigurieren Sie Formularelemente
Sie können ein Formularelement (z.B. Eingabefeld, Absenden-Button) doppelklicken, um seine Einstellungen zu öffnen. Jedes Formularelement hat je nach Typ unterschiedliche Eingabeeinstellungen:
| Eingabeeinstellung | Zweck | Zusätzliche Hinweise |
|---|---|---|
| Name | Identifiziert das Feld bei Formularübermittlungen | n/a |
| Erforderlich | Ermöglicht es, ein Formularfeld auszufüllen, um das Formular abzusenden | Blockiert leere Übermittlungen |
| Platzhalter | Zeigt Text im Eingabefeld, der beim Tippen verschwindet; sollte KEINE Labels oder wichtige Anweisungen ersetzen | Nicht verfügbar für unterstützende Technologien oder Übersetzungstools; stilisierbar über das Zustandsmenü |
| Texttyp | Gibt den Eingabetyp an (z.B. E-Mail, Telefon, Passwort) | Telefon akzeptiert Zeichen & zeigt Tastatur; Passwort verbirgt eingegebene Zeichen |
| Autofokus | Entscheidet, ob das Feld beim Laden der Seite automatisch fokussiert wird | Achten Sie auf Scroll-/Sprungprobleme oder versteckte Felder, die Übermittlungen blockieren |
Absenden-Button
Die Einstellungen des Absenden-Buttons ermöglichen es Ihnen, festzulegen:
- Button-Text: Was auf dem Button erscheint (Standard: „Absenden“)
- Warte-Text: Was den Button ersetzt, nachdem er geklickt wurde & bevor die Übermittlung abgeschlossen ist (Standard: „Bitte warten...“)
So verwalten Sie Formulareinstellungen
Erfolgs- und Fehlermeldungen anpassen
Wählen Sie den Formularblock aus und gehen Sie zu Formularblock-Einstellungen, um:
- Normal: Standardzustand
- Erfolg: Nachricht nach einer erfolgreichen Übermittlung
- Fehler: Nachricht nach einer fehlgeschlagenen Übermittlung
Formularnamen festlegen
Der von Ihnen festgelegte Name verknüpft das Formular mit seinen Übermittlungsdaten. Wenn Sie keine eindeutigen Namen festlegen, erscheinen alle Übermittlungsdaten unter „E-Mail-Formular“. Geben Sie beschreibende Namen, um Formulare zu unterscheiden.
Formularübermittlungen und Benachrichtigungen verwalten
- Empfänger in den Formularblock-Einstellungen angeben.
- Erweiterte Benachrichtigungen in Website-Einstellungen → Formulare → Formularbenachrichtigungen aufrufen.
- Für vollständige Website-Besitzer: Zugriff/Verwaltung der Formulardaten in Website-Einstellungen → Formulare → Formularübermittlungen.
Besucher bei Formularübermittlung umleiten
Fügen Sie eine URL im Weiterleitungsfeld hinzu, um Benutzer nach der Übermittlung woanders hin zu senden.
Benutzerdefinierte Aktion festlegen
Fügen Sie eine benutzerdefinierte Aktion hinzu, um Übermittlungen woanders hin zu senden (z.B. HubSpot). Wenn Sie dies hinzufügen, verarbeitet oder sendet Webflow keine Benachrichtigung. Sie können auch Apps für mehr Integrationen verbinden.
App-Verbindungen anzeigen
Verbundene Apps erscheinen unter Verbindungen. Hinweis: Formulardaten an Webflow senden erscheint immer, es sei denn, Sie umgehen die Webflow-Verarbeitung vollständig.
Formulardaten und DSGVO
- Wenn Sie personenbezogene Daten von EU-Bürgern erheben (einschließlich durch Formulare), sind Sie ein Datenverantwortlicher gemäß DSGVO.
- Holen Sie die entsprechende Zustimmung zur Datenerhebung ein.
- Wenn Sie für Kunden bauen, informieren Sie sie über ihre Verantwortlichkeiten.
- Überprüfen Sie die Verantwortlichkeiten, wenn Sie Daten an Dritte (z.B. Zapier) weiterleiten.
Erfahren Sie mehr:
Fehlerbehebung
Wenn Ihr Formular nicht übermittelt werden kann:
- Wenn Sie reCAPTCHA aktiviert haben, stellen Sie sicher, dass es in allen Formularen enthalten ist. Andernfalls schlagen Übermittlungen fehl.
- Wenn Sie versteckte Felder haben, stellen Sie sicher, dass Autofokus für diese deaktiviert ist.
- Kostenlose/nicht gehostete Websites sind auf insgesamt 50 Formularübermittlungen begrenzt. Aktualisieren Sie Ihren Website-Plan, um die Begrenzung zu entfernen.
Wenn Probleme weiterhin bestehen, wenden Sie sich an den Kundensupport.