Formulare mit Elementor Pro erstellen: Kontakt, Registrierung und Mehrschritt

Formulare sind für jede Website unerlässlich – von einfachen Kontaktformularen bis hin zu komplexen mehrstufigen Registrierungsabläufen. Elementor Pro umfasst ein integriertes Formular-Widget, das in vielen Fällen die Notwendigkeit eines separaten Formular-Plugins beseitigt. In diesem Leitfaden zeigen wir, wie man Kontaktformulare, Registrierungsformulare und mehrstufige Formulare mit Elementor Pro erstellt, sowie Integrationsoptionen für E-Mail-Marketing und CRM-Dienste.

Dieses Tutorial erfordert Elementor Pro. Die kostenlose Version von Elementor enthält das Formular-Widget nicht.

Überblick über das Elementor Formular-Widget

Das Elementor Formular-Widget unterstützt diese Feldtypen:

Erstellen eines Kontaktformulars

Schritt 1: Fügen Sie das Formular-Widget hinzu

1. Öffnen Sie eine beliebige Seite im Elementor-Editor
2. Durchsuchen Sie das Widget-Panel nach "Formular"
3. Ziehen Sie das Formular-Widget in Ihr Layout
4. Das Standardformular enthält die Felder Name, E-Mail und Nachricht

Schritt 2: Konfigurieren Sie die Formularfelder

Für ein Standardkontaktformular funktioniert diese Feldkonfiguration gut:

1. Name (Textfeld, erforderlich) – Platzhalter: "Ihr Name"
2. E-Mail (E-Mail-Feld, erforderlich) – Platzhalter: "[email protected]"
3. Betreff (Textfeld, optional) – Platzhalter: "Wie können wir helfen?"
4. Nachricht (Textarea-Feld, erforderlich) – Platzhalter: "Erzählen Sie uns von Ihrem Projekt...", Zeilen: 5
5. reCAPTCHA oder Honeypot zum Schutz vor Spam

Schritt 3: Aktionen nach dem Absenden konfigurieren

Unter dem Abschnitt "Aktionen nach dem Absenden" konfigurieren Sie, was passiert, wenn ein Benutzer das Formular absendet: For related information, see our guide on Elementor complete guide.

• E-Mail: Senden Sie die Formulardaten an Ihre E-Mail-Adresse (oder mehrere Adressen)
• Weiterleitung: Leiten Sie den Benutzer nach dem Absenden auf eine Dankeseite weiter
• Popup: Zeigen Sie ein Bestätigungs-Popup an
• Webhook: Senden Sie Formulardaten an eine externe URL (Zapier, Make, benutzerdefinierte API)
• Mailchimp / ConvertKit / Drip: Fügen Sie Abonnenten zu E-Mail-Marketinglisten hinzu
• Slack: Senden Sie Benachrichtigungen an einen Slack-Kanal
• Discord: Senden Sie Benachrichtigungen an einen Discord-Webhook

Schritt 4: Stylen Sie das Formular

Im Tab Stil passen Sie das visuelle Erscheinungsbild an: For related information, see our guide on Elementor templates and kits.

• Formularlayoutut: Felder gestapelt (volle Breite) oder inline (nebeneinander)
• Feldgestaltung: Rahmen, Hintergrundfarbe, Innenabstand, Rahmenradius, Fokuszustandsfarbe
• Labelgestaltung: Schriftfamilie, Größe, Farbe, Abstand
• Buttongestaltung: Hintergrundfarbe, Textfarbe, Rahmen, Hover-Effekte, Option für volle Breite
• Nachrichten: Farben und Typografie für Erfolgs- und Fehlermeldungen

Erstellen eines mehrstufigen Formulars

Mehrstufige Formulare sind nützlich für lange Formulare (Registrierungen, Bewerbungen, Umfragen), bei denen das Anzeigen aller Felder auf einmal die Benutzer überfordern kann. Elementor Pro unterstützt mehrstufige Formulare nativ. For related information, see our guide on creating landing pages with Elementor.

So richten Sie Schritte ein

1. Fügen Sie ein Formular-Widget zu Ihrer Seite hinzu
2. Fügen Sie in der Liste der Formularfelder einen "Schritt"-Feldtyp zwischen Gruppen von Feldern hinzu
3. Jedes Schrittfeld erstellt einen neuen Schritt mit einem "Weiter"- und "Zurück"-Button
4. Beispielstruktur:
   • Schritt 1: Name, E-Mail, Telefon (Persönliche Informationen)
   • Schritt 2: Unternehmen, Budget, Zeitrahmen (Projektdetails)
   • Schritt 3: Nachricht, Datei-Upload (Zusätzliche Informationen)

Mehrstufige Formulare zeigen einen Fortschrittsindikator an, der zeigt, auf welchem Schritt sich der Benutzer befindet. Dies reduziert die wahrgenommene Komplexität und verbessert die Abschlussraten im Vergleich zum Anzeigen aller Felder auf einmal.

Erstellen eines Benutzerregistrierungsformulars

Elementor Pro kann WordPress-Benutzerregistrierungsformulare ohne ein separates Plugin erstellen:

1. Fügen Sie ein Formular-Widget hinzu und konfigurieren Sie die Felder (Benutzername, E-Mail, Passwort)
2. Unter "Aktionen nach dem Absenden" fügen Sie die "Registrieren"-Aktion hinzu
3. Ordnen Sie jedes Formularfeld dem entsprechenden WordPress-Benutzerfeld zu
4. Setzen Sie die Standardbenutzerrolle für neue Registrierungen
5. Leiten Sie Benutzer optional nach der Registrierung zu ihrer Kontoseite weiter

Hinweis: WordPress erfordert standardmäßig, dass ein Administrator neue Benutzer genehmigt. Sie können dies unter Einstellungen → Allgemein → Mitgliedschaft ändern, wenn Sie möchten, dass Benutzer sich frei registrieren können.

Integration mit E-Mail-Marketing-Diensten

Elementor Pro integriert sich direkt mit beliebten E-Mail-Marketing-Plattformen:

Für jede Integration besteht der Prozess darin, den API-Schlüssel Ihres Dienstes in den Integrations Einstellungen von Elementor einzugeben und dann den Dienst als "Aktion nach dem Absenden" in Ihrem Formular auszuwählen. Ordnen Sie Ihre Formularfelder den Feldern des Dienstes zu, und Abonnenten werden automatisch hinzugefügt, wenn das Formular abgesendet wird.

Spam-Schutzstrategien

Kontaktformulare ziehen Spam-Bots an. Elementor Pro bietet mehrere Optionen zur Spam-Prävention:

• Google reCAPTCHA v3: Unsichtbare Spam-Erkennung, die Einsendungen ohne Benutzerinteraktion bewertet. Empfohlen für die meisten Formulare
• reCAPTCHA v2: Das "Ich bin kein Roboter"-Kontrollkästchen. Sichtbarer, kann jedoch die Formularabschlüsse verringern
• Honeypot-Feld: Ein unsichtbares Feld, das Bots ausfüllen. Wenn das Feld Daten enthält, wird die Einsendung abgelehnt. Keine Benutzerinteraktion erforderlich
• Akzeptanzfeld: Ein erforderliches Kontrollkästchen (GDPR-Zustimmung, Annahme der Bedingungen), das auch als Abschreckung für Bots dient

Wir empfehlen die Verwendung von reCAPTCHA v3 in Kombination mit einem Honeypot-Feld. Dies bietet zwei Schichten von Spam-Schutz ohne sichtbare Auswirkungen auf die Benutzererfahrung.

In der Benutzererfahrung.

Elementor-Formulare vs. Dedizierte Formular-Plugins

Elementor-Formulare sind ausreichend für Kontaktformulare, Newsletter-Anmeldungen und einfache Registrierungsformulare. Für komplexe Formulare, die eine Zahlungsabwicklung, erweiterte bedingte Logik oder eine ausgeklügelte Eintragsverwaltung erfordern, sind dedizierte Formular-Plugins wie Gravity Forms oder WPForms geeigneter.

Häufig gestellte Fragen

Kann ich Elementor-Formulare ohne Elementor Pro verwenden?

Nein. Das Formular-Widget ist exklusiv für Elementor Pro. Wenn Sie Formulare mit der kostenlosen Version von Elementor benötigen, verwenden Sie ein separates Formular-Plugin wie Contact Form 7 (kostenlos), WPForms Lite (kostenlos) oder Gravity Forms (Premium).

Wo werden die Einreichungen von Elementor-Formularen gespeichert?

Formulareinreichungen werden in der WordPress-Datenbank gespeichert und sind im Admin-Panel unter Elementor → Einreichungen zugänglich. Sie können Einreichungen anzeigen, exportieren (CSV) und löschen. Einreichungen werden auch an die E-Mail-Adressen gesendet, die Sie in der E-Mail-Aktion konfigurieren.

Kann Elementor-Formulare Datei-Uploads akzeptieren?

Ja. Fügen Sie Ihrem Formular einen Dateiupload-Feldtyp hinzu. Sie können akzeptierte Dateitypen (PDF, JPG, PNG, DOCX usw.) und die maximale Dateigröße konfigurieren. Hochgeladene Dateien werden in der WordPress-Mediathek gespeichert und mit der Formulareinreichung verknüpft.

Wie füge ich bedingte Logik zu Elementor-Formularen hinzu?

Elementor Pro unterstützt grundlegende bedingte Logik: Felder basierend auf dem Wert eines anderen Feldes anzeigen oder ausblenden. Aktivieren Sie in den Feldeinstellungen "Bedingt" und legen Sie die Bedingungen fest (z. B. das "Unternehmens"-Feld nur anzeigen, wenn die Radio-Schaltfläche "Ich bin ein Unternehmen" ausgewählt ist). Für erweiterte bedingte Logik (Berechnungen, mehrstufige Bedingungen) kann ein dediziertes Formular-Plugin geeigneter sein.

Kann ich Popup-Formulare mit Elementor erstellen?

Ja. Erstellen Sie eine Popup-Vorlage in Elementor, fügen Sie ein Formular-Widget hinzu und legen Sie Auslösebedingungen fest (Klick, Scroll-Prozentsatz, Exit-Intent, Zeitverzögerung). Dies ist nützlich für Newsletter-Anmeldungen, Lead-Magnete und Werbeangebote, ohne ein Formular in das Hauptseitenlayout einzufügen.

Wie verhindere ich Spam bei Elementor-Formularen?

Verwenden Sie Google reCAPTCHA v3 (unsichtbar) in Kombination mit einem Honeypot-Feld für einen zweischichtigen Schutz. Dies blockiert automatisierte Bots, ohne echten Benutzern Friktionen hinzuzufügen. Bei Formularen mit hohem Spam-Aufkommen sollten Sie in Betracht ziehen, ein Akzeptanzfeld (erforderliches Kontrollkästchen) als dritte Schicht hinzuzufügen.