Kontaktformular-Designer
Der Kontaktformular-Designer hilft dir beim Erstellen individueller Kontaktformulare für deine Website. Du kannst verschiedene Feldtypen hinzufügen, die Reihenfolge anpassen und das Aussehen des Formulars konfigurieren. Alle Anfragen werden automatisch per E-Mail an dich weitergeleitet.
Voraussetzungen
- Du hast einen Kontaktformular-Block zu deiner Seite hinzugefügt
- Du befindest dich im Bearbeitungsmodus
- Du hast mindestens eine E-Mail-Adresse für den Empfang der Anfragen
Aufbau des Designers
Allgemeine Einstellungen: Grundlegende Konfiguration für Aussehen und Verhalten
Empfänger-Bereich: Verwaltung der E-Mail-Adressen, die Anfragen erhalten
Felder-Bereich: Erstellung und Verwaltung der Formular-Felder
Allgemeine Einstellungen
Volle Breite verwenden:
- Aktiviert: Das Formular nutzt die gesamte verfügbare Breite
- Deaktiviert: Das Formular wird in einem begrenzten Container angezeigt
- Empfehlung: Für wichtige Kontaktformulare aktivieren
Dunkle Variante:
- Aktiviert: Dunkles Design mit heller Schrift
- Deaktiviert: Helles Design mit dunkler Schrift
- Wähle je nach Hintergrund und Design deiner Website
Hintergrundbild:
- Optional: Füge ein Hintergrundbild zum Formular hinzu
- Das Bild wird automatisch optimiert und responsive dargestellt
- Achte darauf, dass der Text trotzdem gut lesbar bleibt
Animation:
- Wähle eine Einblend-Animation oder "Keine Animation"
- Verfügbare Optionen: fadeIn, slideUp, zoomIn
- Animationen machen das Formular auffälliger
E-Mail-Empfänger verwalten
E-Mail-Adresse hinzufügen:
- Klicke auf "E-Mail hinzufügen"
- Gib eine gültige E-Mail-Adresse ein
- Diese Adresse erhält alle Formular-Anfragen
Mehrere Empfänger:
- Du kannst mehrere E-Mail-Adressen hinzufügen
- Alle Empfänger erhalten eine Kopie jeder Anfrage
- Ideal für Teams oder Vertretungsregelungen
E-Mail-Adresse entfernen:
- Klicke auf "Löschen" neben der entsprechenden E-Mail
- Die Adresse wird sofort aus der Liste entfernt
Formular-Felder erstellen
Neues Feld hinzufügen:
- Klicke auf "Feld hinzufügen"
- Ein neues Feld mit dem Namen "Neues Feld" wird erstellt
- Bearbeite sofort die Eigenschaften
Feld-Eigenschaften konfigurieren
Pflichtfeld:
- Aktiviert: Das Feld muss ausgefüllt werden
- Deaktiviert: Das Feld ist optional
- Empfehlung: Nur wirklich notwendige Felder als Pflicht markieren
Symbol (Icon):
- Wähle ein passendes Symbol aus der Feather-Icon-Bibliothek
- Wird neben dem Feldnamen angezeigt
- Hilft Besuchern beim schnellen Erkennen des Feldtyps
Feldname:
- Beschriftung des Feldes, die Besucher sehen
- Beispiele: "Ihr Name", "E-Mail-Adresse", "Nachricht", "Telefon"
- Sollte klar und verständlich sein
Feldtyp: Wähle den passenden Typ für dein Feld:
- Text: Einzeiliges Textfeld für Namen, Betreff, etc.
- Email: Spezielles E-Mail-Feld mit automatischer Validierung
- Tel: Telefonnummer-Feld, optimiert für mobile Eingabe
- Textarea: Mehrzeiliges Textfeld für längere Nachrichten
- Number: Zahlen-Feld für Mengen, Alter, etc.
- Date: Datums-Auswahl für Termine oder Geburtstage
- Time: Zeit-Auswahl für Uhrzeiten
- Url: URL-Feld für Website-Adressen
Zeilen (nur bei Textarea):
- Bestimmt die Höhe des mehrzeiligen Textfeldes
- Werte zwischen 3-10 sind üblich
- Mehr Zeilen für längere Texte (z.B. Nachrichten)
Felder organisieren
Reihenfolge ändern:
- Nach oben: Verschiebe ein Feld früher im Formular
- Nach unten: Verschiebe ein Feld später im Formular
- Die Reihenfolge sollte logisch und benutzerfreundlich sein
Feld kopieren:
- Klicke auf das Kopieren-Symbol
- Ein identisches Feld wird erstellt
- Bearbeite die Kopie nach deinen Wünschen
Feld löschen:
- Klicke auf das Papierkorb-Symbol
- Das Feld wird sofort entfernt
- Achtung: Diese Aktion kann nicht rückgängig gemacht werden
Empfohlene Formular-Struktur
Standard-Kontaktformular:
- Name (Text, Pflichtfeld)
- E-Mail (Email, Pflichtfeld)
- Betreff (Text, optional)
- Nachricht (Textarea, Pflichtfeld, 5-7 Zeilen)
Erweiterte Kontaktformulare:
- Telefon (Tel, optional)
- Unternehmen (Text, optional)
- Gewünschter Rückruf-Termin (Date + Time)
- Website (Url, optional)
Service-Anfrage:
- Art der Anfrage (Text)
- Budget (Number)
- Gewünschter Starttermin (Date)
- Zusätzliche Informationen (Textarea)
Tipps für benutzerfreundliche Formulare
Einfachheit:
- Frage nur nach wirklich notwendigen Informationen
- Zu viele Felder schrecken Besucher ab
- 3-6 Felder sind meist optimal
Logische Reihenfolge:
- Beginne mit einfachen Feldern (Name)
- E-Mail-Adresse früh platzieren
- Nachricht/Textarea am Ende
Klare Beschriftungen:
- Verwende verständliche Feldnamen
- Vermeide Fachbegriffe oder Abkürzungen
- Erkläre bei Bedarf, was erwartet wird
Pflichtfelder sparsam nutzen:
- Nur wirklich notwendige Felder als Pflicht markieren
- Name und E-Mail sind meist ausreichend
- Telefon nur bei telefonischen Services als Pflicht
Mobile Optimierung:
- Alle Feldtypen sind automatisch mobile-optimiert
- Tel-Felder öffnen automatisch die Telefon-Tastatur
- Email-Felder zeigen das @-Symbol prominent
Datenschutz und Sicherheit
Automatische Funktionen:
- Spam-Schutz ist automatisch aktiviert
- Alle Daten werden verschlüsselt übertragen
- E-Mails enthalten Zeitstempel und IP-Adresse
DSGVO-Konformität:
- Füge bei Bedarf ein Datenschutz-Einverständnis hinzu
- Informiere über die Verwendung der Daten
- Stelle sicher, dass du eine Datenschutzerklärung hast