So fügen Sie E-Mail-Felder zu WordPress-Formularen hinzu

E-Mail ist das Lebenselixier der Online-Kommunikation. Jedes Kontaktformular, jede Newsletter-Anmeldung und jede Registrierung benötigt eine zuverlässige E-Mail-Adresse. E-Mail-FeldEin einfaches Texteingabefeld reicht jedoch nicht aus – Sie benötigen eine Validierung, um Tippfehler zu erkennen, eine optionale Bestätigung zur Sicherstellung der Genauigkeit und eine korrekte Formatierung für nutzbare Daten. Hier erfahren Sie, wie Sie funktionierende E-Mail-Felder hinzufügen.

Warum ein separates E-Mail-Feld verwenden?

Probleme mit Textfeldern für E-Mails

• Keine Formatvalidierung
• Tippfehler bleiben unentdeckt
• Ungültige Einträge werden akzeptiert
• Keine E-Mail-Tastatur auf dem Handy
• Vergeudete Folgeversuche

Vorteile von E-Mail-Feldern

• Integrierte Formatvalidierung
• Erkennt häufige Fehler
• E-Mail-Tastatur auf Mobilgeräten
• Standardisierte Datenerhebung
• Bessere Zustellbarkeit von Folgeanfragen

Hinzufügen eines E-Mail-Felds

Schritt 1: Feld hinzufügen

1. Öffnen Sie Ihr Formular in AFB
2. Finde E-Mail in Feldtypen
3. Ziehen Sie es in Ihr Formular.

Schritt 2: Grundeinstellungen konfigurieren

• Etikette: „E-Mail-Adresse“ oder „Ihre E-Mail-Adresse“
• Platzhalter: "[E-Mail geschützt] "
• Erforderlich: In der Regel ja für Kontaktformulare
• Hilfetext: Optionale Anweisungen

Schritt 3: Speichern und testen

1. Speichern Sie Ihr Formular
2. Vorschau im Frontend
3. Versuchen Sie, eine ungültige E-Mail-Adresse einzugeben.
4. Überprüfen Sie, ob die Validierung funktioniert

E-Mail-Bestätigung

Was wird validiert

E-Mail-Felder auf korrektes Format prüfen:

Gültig: ✓ [E-Mail geschützt] 
✓ [E-Mail geschützt] 
✓ [E-Mail geschützt] 

Ungültig: ✗ userexample.com (fehlendes @) ✗ [E-Mail geschützt]  (Fehlende Domain) ✗ user@example (Fehlende Top-Level-Domain) ✗ @example.com (Fehlender Benutzername)

Validierungsfehlermeldungen

Standard: „Bitte geben Sie eine gültige E-Mail-Adresse ein.“ Benutzerdefiniert: „Das sieht nicht nach einer E-Mail-Adresse aus. Bitte überprüfen Sie Ihre Angaben und versuchen Sie es erneut.“

Was die Validierung nicht prüft

• Ob E-Mail tatsächlich existiert
• Ob das Postfach aktiv ist
• Zustellbarkeit

Die Formatvalidierung gewährleistet die korrekte Struktur, nicht die Existenz des Systems.

E-Mail-Bestätigungsfeld

What Is It?

Ein zweites E-Mail-Feld, in dem Benutzer ihre Adresse erneut eingeben. Beide müssen übereinstimmen, damit die Eingabe abgeschickt werden kann.

Email: [[E-Mail geschützt]     ] E-Mail bestätigen: [[E-Mail geschützt]     ] ✓ Übereinstimmungen

Warum eine Bestätigung verwenden?

• Erkennt Tippfehler (am häufigsten: falsche Domain)
• Zwingt Benutzer zur doppelten Überprüfung
• Reduziert fehlgeschlagene E-Mail-Kommunikation
• Entscheidend für wichtige Transaktionen

Wann zu verwenden

• Konto Registrierung
• Newsletter-Anmeldungen
• Auftragsbestätigungen
• Jede Form, bei der die Genauigkeit der E-Mail-Adresse von entscheidender Bedeutung ist

Wann überspringen

• Einfache Kontaktformulare
• Schnellanfragen
• Wenn die Reduzierung der Reibung Priorität hat

Bestätigung aktivieren

1. Wählen Sie Ihr E-Mail-Feld aus
2. Option „Bestätigungsfeld“ suchen
3. Umschalten
4. Das zweite Feld erscheint automatisch

Bestätigungsverhalten

E-Mail: [E-Mail geschützt] 
Bestätigen: [E-Mail geschützt]   ← Tippfehler! Fehler: „E-Mail-Adressen stimmen nicht überein“

Domain-Einschränkungen

Was sind Domänenbeschränkungen?

Beschränken Sie die zulässigen E-Mail-Domänen:

• Weiße Liste: Nur bestimmte Domains zulassen
• Schwarze Liste: Blockieren Sie bestimmte Domänen

Anwendungsfälle für die Whitelist

Nur E-Mails von bestimmten Domains akzeptieren:

Zulässig: @company.com, @company.org Abgelehnt: Alle anderen Verwendungszweck: - Interne Firmenformulare - Mitarbeiterregistrierung - Zugriff nur für Organisationsmitglieder

Anwendungsfälle für Blacklists

Bestimmte Domains blockieren:

Blockiert: @mailinator.com, @tempmail.com, @guerrillamail.com Erlaubt: Alle anderen Verwendungszweck: - Verhinderung von Wegwerf-E-Mail-Adressen - Reduzierung von Spam-Anmeldungen - Sicherstellung echter Kontaktadressen

Domänenbeschränkungen konfigurieren

1. E-Mail-Feld auswählen
2. Domainbeschränkungseinstellungen finden
3. Wählen Sie den Whitelist- oder Blacklist-Modus.
4. Geben Sie die Domänen ein (eine pro Zeile)

Beispiel: Nur Firmen-E-Mails

Modus: Domains auf die Whitelist setzen: company.com company.org Fehler: „Bitte verwenden Sie Ihre geschäftliche E-Mail-Adresse“

Beispiel: Wegwerf-E-Mails blockieren

Modus: Domains auf die Blacklist gesetzt: mailinator.com tempmail.com guerrillamail.com 10minutemail.com throwaway.email Fehler: „Bitte verwenden Sie eine permanente E-Mail-Adresse.“

Konfigurationsbeispiele

Beispiel 1: Einfaches Kontaktformular

Bezeichnung: "E-Mail-Adresse" Platzhalter: "[E-Mail geschützt] Erforderlich: Ja Bestätigung: Nein Domänenbeschränkungen: Keine

Beispiel 2: Newsletter-Anmeldung

Bezeichnung: „Ihre E-Mail-Adresse“ Platzhalter: „Geben Sie Ihre E-Mail-Adresse ein…“ Erforderlich: Ja Bestätigung: Ja Domainbeschränkungen: Wegwerf-E-Mail-Adressen blockieren Hilfetext: „Wir geben Ihre E-Mail-Adresse niemals weiter.“

Beispiel 3: Kontoregistrierung

Bezeichnung: "E-Mail (wird Ihr Benutzername sein)" Platzhalter: "[E-Mail geschützt] Erforderlich: Ja Bestätigung: Ja Domänenbeschränkungen: Keine Hilfetext: „Bitte verwenden Sie eine E-Mail-Adresse, die Sie regelmäßig abrufen.“

Beispiel 4: Mitarbeiterformular

Bezeichnung: "Arbeits-E-Mail" Platzhalter: "[E-Mail geschützt] Erforderlich: Ja Bestätigung: Nein Domainbeschränkungen: Nur company.com auf die Whitelist setzen Hilfetext: „Verwenden Sie Ihre offizielle Firmen-E-Mail-Adresse“

Beispiel 5: Leadgenerierung

Bezeichnung: "Geschäftliche E-Mail" Platzhalter: "[E-Mail geschützt] Erforderlich: Ja Bestätigung: Nein Domainbeschränkungen: gmail.com und yahoo.com blockieren (nur B2B) Hilfetext: „Bitte verwenden Sie für geschäftliche Anfragen Ihre geschäftliche E-Mail-Adresse.“

Mobile Optimierung

E-Mail-Tastatur

E-Mail-Felder lösen eine spezielle mobile Tastatur aus:

• Das @-Symbol ist leicht zugänglich
• .com-Tastenkombination auf vielen Tastaturen
• Reduzierte Autokorrekturstörungen
• Schnellerer Einstieg

Bewährte Verfahren für Mobilgeräte

• Klares, gut lesbares Etikett
• Hilfreicher Platzhaltertext
• Angemessene Gewindeschneidgröße
• Klare Fehlermeldungen

Häufige Fehler bei E-Mail-Feldern

1. Text statt E-Mail verwenden

Falsch: Rechts:

Der E-Mail-Typ ermöglicht die Validierung und die Nutzung der mobilen Tastatur.

2. Nicht als erforderlich festlegen, wenn es nötig ist

Falls Sie antworten müssen, ist eine E-Mail-Adresse erforderlich.

3. Verwirrender Platzhalter für Etikett

Falsch: Nur ein Platzhalter, keine Beschriftung. Richtig: Klare Beschriftung + hilfreicher Platzhalter.

4. Übermäßig strenge Validierung

Manche gültige E-Mails sehen ungewöhnlich aus:

Gültig, aber unüblich: - [E-Mail geschützt] 
- [E-Mail geschützt] 
- [E-Mail geschützt] 

Gültige Formate dürfen nicht abgelehnt werden.

5. Kein Fehlermeldungskontext

Falsch: "Ungültige Eingabe" Richtig: "Bitte geben Sie eine gültige E-Mail-Adresse ein (Beispiel: [E-Mail geschützt] )"

E-Mail-Feldbezeichnungen

Gute Beispiele für Etiketten

• "E-Mail-Adresse"
• „Ihre E-Mail-Adresse“
• "Email"
• „Arbeits-E-Mail“
• „Kontakt-E-Mail“

Kontextspezifische Bezeichnungen

• „E-Mail (zur Bestellbestätigung)“
• „E-Mail (wohin wir Ihnen den Download senden)“
• „Firmen-E-Mail“
• „Bevorzugte E-Mail-Adresse“

Platzhalterbeispiele

• "[E-Mail geschützt] "
• „Geben Sie Ihre E-Mail-Adresse ein…“
• "[E-Mail geschützt] "
• "[E-Mail geschützt] "

Ideen für Hilfetexte

Datenschutz

„Wir geben Ihre E-Mail-Adresse niemals an Dritte weiter.“ „Ihre E-Mail-Adresse wird vertraulich behandelt.“ „Wir respektieren Ihre Privatsphäre.“

Erklärung zur Verwendung

„Wir senden Ihnen hier Ihre Bestätigung.“ „Wohin sollen wir Ihnen den Download-Link senden?“ „Sie erhalten Updates an diese Adresse.“

Formatvorgaben

"Verwenden Sie ein gültiges E-Mail-Format (Beispiel: [E-Mail geschützt] Bitte verwenden Sie eine E-Mail-Adresse, die Sie regelmäßig abrufen. Geben Sie die mit Ihrem Konto verknüpfte E-Mail-Adresse ein.

Mehrere E-Mail-Felder

Wann mehrere verwenden

• Primärer und sekundärer Kontakt
• Private und geschäftliche E-Mail-Adresse
• Rechnungs- und Versandbenachrichtigungen

Beispiel: Primär/Sekundär

Primäre E-Mail-Adresse: [________________] (erforderlich) Sekundäre E-Mail-Adresse: [________________] (optional) Hilfetext: „Sekundäre E-Mail-Adresse für den Ersatzkontakt“

Beispiel: Konto + Benachrichtigungen

E-Mail-Adresse des Kontos: [________________] Benachrichtigungs-E-Mail-Adresse: [________________] ☐ Gleiche E-Mail-Adresse wie Konto-E-Mail-Adresse

Bearbeitung von Einreichungen

In E-Mail-Benachrichtigungen

Die Werte des E-Mail-Felds werden in Ihrer Benachrichtigung angezeigt:

Neue Eingabe aus dem Kontaktformular: Name: John Smith E-Mail: [E-Mail geschützt]   ← Zum Antworten klicken Nachricht: ...

Antwort-an-Konfiguration

Legen Sie das E-Mail-Feld als Antwortadresse fest:

• Durch Klicken auf „Antworten“ gelangt man zum Absender.
• Unkomplizierte Nachkommunikation

Im Exportbereich

CSV-Spalte: E-Mail-Werte: [E-Mail geschützt] , [E-Mail geschützt] ...

Zusammenfassung der bewährten Vorgehensweisen

Do

• ✓ Verwenden Sie den dedizierten E-Mail-Feldtyp
• ✓ Klares Etikett hinzufügen
• ✓ Hilfreichen Platzhalter einfügen
• ✓ Bei Bedarf als erforderlich markieren
• ✓ Bestätigung für wichtige Formulare verwenden
• ✓ Datenschutzfreundliche Hilfetexte hinzufügen
• ✓ Auf Mobilgeräten testen

Nicht

• ✗ Textfeld für E-Mail verwenden
• ✗ Validierung überspringen
• ✗ Platzhalter nur als Etikett verwenden
• ✗ Zu starke Einschränkung gültiger Domains
• ✗ Vergessen Sie die Optimierung der mobilen Tastatur.

Problemlösung

Gültige E-Mail-Adresse abgelehnt

• Überprüfen Sie die Einstellungen zur Domänenbeschränkung.
• Prüfen Sie, ob das E-Mail-Format dem Standard entspricht.
• Bei einigen ungewöhnlichen TLDs kann eine Prüfung erforderlich sein.

Bestätigung stimmt nicht überein

• Prüfen Sie, ob zusätzliche Leerzeichen vorhanden sind.
• Groß-/Kleinschreibung beachten (normalerweise kein Problem)
• Beim Kopieren und Einfügen können versteckte Zeichen enthalten sein.

Mobile Tastatur, nicht E-Mail-Typ

• Prüfen Sie, ob der E-Mail-Feldtyp verwendet wird.
• Die Browser/Geräte variieren.
• Überprüfen Sie den Eingabetyp im Code

Einsendungen enthalten ungültige E-Mail-Adressen

• Stellen Sie sicher, dass die Validierung aktiviert ist.
• Überprüfen Sie, ob die clientseitige Validierung funktioniert
• Serverseitige Validierungssicherung hinzufügen

Zusammenfassung

Hinzufügen von E-Mail-Feldern zu WordPress-Formularen:

1. E-Mail-Feld hinzufügen – Zum Formen ziehen
2. Bezeichnung festlegen – Klar, beschreibend
3. Platzhalter hinzufügen – Formatbeispiel
4. Erforderliche Werkzeuge herstellen – Falls für eine Nachverfolgung erforderlich
5. Bestätigung aktivieren – Für höchste Genauigkeit
6. Domänenbeschränkungen festlegen – Bei der Beschränkung von Domänen
7. Hilfetext hinzufügen – Datenschutz- oder Nutzungshinweise
8. Testen Sie gründlich – Gültig, ungültig, mobil

Fazit

Das E-Mail-Feld ist oft das wichtigste Feld in Ihrem Formular – es ist der Weg, wie Sie den Absender erreichen. Die Verwendung eines dedizierten E-Mail-Feldtyps gewährleistet eine korrekte Validierung, mobile Optimierung und Datenqualität. Fügen Sie eine Bestätigung hinzu, wenn Genauigkeit entscheidend ist, und erwägen Sie Domainbeschränkungen, um Einsendungen zu filtern. Ein gut konfiguriertes E-Mail-Feld bedeutet weniger unzustellbare E-Mails und eine bessere Kommunikation.

Automatischer Formulargenerator Beinhaltet ein vollumfängliches E-Mail-Feld mit integrierter Validierung, optionaler Bestätigung und Domainbeschränkung. Sammeln Sie E-Mail-Adressen zuverlässig.

Sind Sie bereit, E-Mail-Felder hinzuzufügen? Laden Sie den automatischen Formulargenerator herunter. und beginnen Sie noch heute mit dem Sammeln gültiger E-Mail-Adressen.