Wenn du eine Unternehmenswebseite betreibst, sind Formulare unentbehrlich. Sie erleichtern es den Kunden, mit dir in Kontakt zu treten und dir wichtige Informationen und Feedback zu geben. Es kann jedoch eine Herausforderung sein, herauszufinden, wie man sie erstellt.
Wenn du auf der Suche nach einer einfachen, unkomplizierten Strategie bist, empfehlen wir dir die Formulare von Elementor. Dieser beliebte Page Builder bietet Lösungen für die Erstellung einer Vielzahl von Formularen, die sowohl ästhetisch ansprechend als auch einfach zu bedienen sind.
In diesem Beitrag gehen wir zunächst darauf ein, warum du Elementor-Formulare erstellen solltest. Dann zeigen wir dir, wie du das machst, und gehen auf einige hilfreiche Addons und Tipps zur Fehlerbehebung ein. Los geht’s!
Warum Elementor-Formulare erstellen?
Es hat viele Vorteile, Formulare für deine WordPress-Webseite zu erstellen. Zunächst einmal kannst du deinen Besuchern eine schnelle und einfache Methode bieten, mit dir zu kommunizieren. Außerdem kannst du sie nutzen, um Leads zu generieren und wichtige Informationen von deinem Publikum zu erhalten.
Formulare können auch nützlich sein, um deine Nutzer/innen zu registrieren und Zahlungen anzunehmen. Wenn du ein Formular in deine WordPress-Webseite einbauen willst, musst du ein Plugin verwenden. Alternativ kannst du auch einen Page Builder wie Elementor verwenden.
Mit Elementor kannst du beeindruckende Formulare erstellen, ohne auch nur eine Zeile Code anzufassen. Mit dem Drag-and-Drop-Editor kannst du responsive Formulare erstellen, die zu deinem Branding und der Ästhetik deiner Webseite passen.
Außerdem kannst du aus mehreren Formulartypen wählen, darunter:
- Elementor Contact Forms: Du kannst diese Funktion nutzen, um ein einfaches Formular zu erstellen, mit dem Nutzer mit dir in Kontakt treten können.
- Elementor Gravity Forms: Das Gravity Forms Widget bietet dir mehr Flexibilität bei der Anpassung und Gestaltung deiner Formulare.
- Elementor Register Forms: Mit dieser Funktion kannst du Formulare zur Nutzerregistrierung auf deiner Webseite einrichten.
Wie du sehen kannst, hat jedes dieser Formulare seinen eigenen Anwendungsfall und kann die Funktionalität deiner Webseite verbessern. Als Nächstes zeigen wir dir, wie du ein Kontaktformular mit Elementor erstellst.
Wie man ein Elementor-Kontaktformular in WordPress erstellt (in 6 Schritten)
Jetzt, wo wir mehr darüber wissen, warum du Elementor-Formulare verwenden solltest, schauen wir uns an, wie du ein solches Formular in ein paar einfachen Schritten erstellen kannst. Für diese Anleitung gehen wir davon aus, dass du Elementor bereits auf deiner Webseite installiert und aktiviert hast.
Es gibt ein kostenloses Tool und ein kostenpflichtiges Plugin. Um die Formularfunktionen nutzen zu können, brauchst du die Premium-Version.
Schritt 1: Füge das Elementor Kontakt-Widget hinzu
Um loszulegen, navigiere zu der Seite oder dem Beitrag, in den du dein Kontaktformular einfügen möchtest. Klicke dann auf die Schaltfläche Mit Elementor bearbeiten am oberen Rand des Bildschirms:
Dadurch wird die Elementor-Editoroberfläche geöffnet. Suche unter den Widgets auf der linken Seite nach dem Formular-Widget und wähle es aus:
Dann kannst du das Widget per Drag and Drop auf deine Seite ziehen. Dadurch wird ein Standard-Kontaktformular eingefügt.
Schritt 2: Richte die Felder deines Kontaktformulars ein
Sobald du dein Kontaktformular auf der Seite platziert hast, gibt es eine Handvoll Einstellungen, die du vornehmen kannst. Konzentrieren wir uns erst einmal auf die Einrichtung der Formularfelder.
Du kannst die grundlegenden Formularfelder bearbeiten, indem du auf das Widget klickst und den Text anpasst (wenn du eine der Standardoptionen ändern möchtest). Wenn du zusätzliche Felder hinzufügen möchtest, kannst du das tun, indem du Element hinzufügen wählst:
Du kannst die Art des Feldes, das du hinzufügen möchtest, aus der Dropdown-Liste auswählen. Als Nächstes kannst du eine Beschriftung hinzufügen, das ist der Name des Formularfeldes. Damit zeigst du deinen Besuchern, welche Eingabe erwartet wird.
Mit der Option Platzhalter kannst du den Text anpassen, der in dem Formularfeld erscheint, bevor der Nutzer seine Daten eingibt. Damit kannst du den Besuchern Beispiele für die Daten geben, die sie eingeben sollen.
Außerdem kannst du die Einstellung Erforderlich aktivieren und die Spaltenbreite ändern. Du kannst auch auf das Feld Schaltflächen klicken, um das Aussehen deiner Formularschaltflächen anzupassen. Du kannst die Größe, die Schriftart und die Farben ändern.
Schritt 3: Konfiguriere deine Formular-Eingaben
Nachdem du die Formularfelder erstellt hast, musst du im nächsten Schritt die Einstellungen für die Formularübermittlung konfigurieren. Du kannst im Elementor-Editor zu E-Mail navigieren, um auf die verschiedenen Optionen zuzugreifen.
Du kannst zum Beispiel deine E-Mail-Adresse in das Feld „An“ eingeben, an die die Beiträge gesendet werden sollen. Du kannst auch mehrere E-Mail-Adressen eingeben, wenn du möchtest:
Du kannst auch den Betreff der E-Mail und die Nachricht anpassen. Wenn du alle Optionen eingestellt hast, musst du deine Änderungen speichern.
Schritt 4: Anpassungen der Kontaktformulardaten
Wenn du dein Kontaktformular weiter personalisieren möchtest, kannst du benutzerdefinierte Nachrichten aktivieren. Wähle Zusätzliche Optionen und schiebe dann den Kippschalter für Benutzerdefinierte Nachrichten auf Ja:
Es gibt vier Arten von Nachrichten, die du ändern kannst:
- Erfolgsmeldung: Sie erscheint, sobald ein Nutzer das Formular abschickt
- Fehlermeldung: Sie wird angezeigt, wenn während des Anmeldevorgangs ein Problem auftritt
- Erforderliche Nachricht: informiert die Nutzer darüber, dass ein bestimmtes Feld nicht ausgefüllt wurde
- Ungültige Nachricht: informiert die Nutzer darüber, dass bei der Übermittlung des Formulars etwas nicht in Ordnung ist
Du kannst diese Nachrichten so anpassen, dass sie zu deiner Marke und deinem Stil passen. Du kannst zum Beispiel den Wortlaut ändern, um deiner Marke etwas Persönlichkeit zu verleihen.
Schritt 5: Gestaltung deines Elementor-Kontaktformulars
Sobald du dich um den grundlegenden Text und die Felder deines Formulars gekümmert hast, kannst du mit der Gestaltung des Designs deines Elementor-Kontaktformulars beginnen. Du kannst zum Beispiel dafür sorgen, dass es zu deinem Branding passt.
Um damit zu beginnen, kannst du oben im Widget-Editor auf die Registerkarte Stil klicken:
Hier findest du eine Vielzahl von Optionen und Einstellungen, mit denen du das Design deines Kontaktformulars anpassen kannst. Du kannst zum Beispiel den Abstand und die Polsterung anpassen sowie die Farben, die Größe, die Beschriftungen und die Schaltflächen ändern.
Schritt 6: Speichere und veröffentliche dein Formular
Wenn du mit dem Aussehen und dem Inhalt deines Elementor-Kontaktformulars zufrieden bist, musst du es nur noch speichern und veröffentlichen. Dazu klickst du auf die Schaltfläche Veröffentlichen unten links auf dem Bildschirm.
Das war’s schon! Dann kannst du dein Kontaktformular im Frontend in der Vorschau ansehen, um zu überprüfen, ob es so aussieht, wie du es haben möchtest.
Die besten Addons für Elementor-Formulare
Der Elementor Page Builder bietet von Haus aus viele Optionen für die Erstellung von Formularen für deine WordPress-Webseite. Du kannst aber auch Plugins hinzufügen, um die Funktionalität deiner Formulare zu erweitern. Wir werfen einen Blick auf einige Optionen.
Master Addons für Elementor
Das Master Addons for Elementor Plugin ist ein Freemium-Tool, das eine Sammlung hilfreicher Tools zur Verbesserung des Page Builders und damit deiner Webseite bietet. Es umfasst die folgenden Funktionen:
- Kopfzeile, Fußzeile und Kommentarformular
- Mega-Menü-Builder
- Bild-Hover-Effekte
- Anzeigebedingungen
Es ist außerdem mit einer Vielzahl von Formular-Plugins kompatibel. Dazu gehören Contact Form 7, Ninja Forms, WP Forms und Caldera Forms. Um alle Funktionen des Plugins nutzen zu können, musst du die Pro-Version kaufen, die für 39 US-Dollar pro Jahr erhältlich ist.
Die Plus Addons
Ein weiteres praktisches Tool, das du mit Elementor nutzen kannst, ist Plus Addons. Dieses Plugin enthält über 8.000 Anpassungsoptionen und über 300 User Interface (UI) Blöcke, mit denen du deine Seiten und Formulare ganz einfach erstellen und gestalten kannst.
Zu seinen Funktionen gehören:
- Icon-Boxen
- Kartenabschnitte
- Formulare
- Preistabellen
Außerdem gibt es mehr als 18 Vorlagen, aus denen du wählen kannst. Diese wurden speziell für bestimmte Arten von Unternehmen entwickelt, darunter Agenturen, Restaurants, Salons und mehr.
Es ist eine kostenlose Version verfügbar. Um jedoch alle nützlichen Funktionen nutzen zu können, empfehlen wir den Kauf einer Premium-Lizenz, die für 39 US-Dollar pro Jahr erhältlich ist.
Zusätzliche Tipps und Tricks für die Erstellung von Elementor-Formularen
Wenn du Elementor-Kontaktformulare für deine WordPress-Webseite erstellen möchtest, ohne für eine Premium-Lizenz zu bezahlen, gibt es verschiedene Möglichkeiten, dies zu tun. Dazu musst du den Page Builder mit einem anderen WordPress-Formular-Plugin wie WPForms oder Formidable Forms kombinieren.
Nehmen wir an, du entscheidest dich für Formidable Forms. Sobald du das Plugin auf deiner Webseite installiert und aktiviert hast, kannst du zu Formidable > Formulare > Neu hinzufügen navigieren:
Als Nächstes kannst du Kontaktformulare aus der Liste der Optionen auswählen und aus einer Handvoll vorgefertigter Vorlagen wählen. Wenn du mit der Erstellung deines Formulars fertig bist, rufst du die Seite auf, auf der du es platzieren möchtest, und öffnest die Elementor-Editoroberfläche.
Suche im linken Bereich nach dem Widget Formidable Forms und wähle es aus. Du kannst das Format, die Farben, die Schaltflächen, den Text usw. anpassen:
Wenn du fertig bist, kannst du deine Änderungen speichern und veröffentlichen. Diese Methode erfordert etwas mehr Zeit und Aufwand als das Elementor Pro Plugin. Sie kann dir aber helfen, Geld zu sparen, wenn du keinen Premium-Plan kaufen willst.
Fehlersuche bei Elementor-Formularen
Elementor-Kontaktformulare sind ziemlich unkompliziert und einfach zu benutzen. Dennoch kannst du bei der Verwendung auf Probleme stoßen. Eines der häufigsten Probleme, von denen Leute berichten, sind nicht zugestellte E-Mails.
Elementor verwendet die Funktion wp_mail, um seine E-Mails zu verteilen. Das bedeutet, dass dein Hosting-Anbieter die gesendeten E-Mails entgegennimmt und zustellt.
Manche Hosts deaktivieren jedoch die PHP-Funktion, die normalerweise für den Versand von E-Mails verwendet wird, weshalb dieses Problem auftreten kann. Um diesen Fehler zu beheben, empfehlen wir dir, dich mit deinem Hosting-Anbieter in Verbindung zu setzen und ihn zu bitten, die send_mail-Funktion zu aktivieren.
Alternativ kannst du auch einen SMTP-Server (Simple Mail Transfer Protocol) verwenden. Das ist ein E-Mail-Server, der deine E-Mails in Formularen an den Posteingang deiner Kunden weiterleitet, indem er eine externe Quelle wie Gmail nutzt. Das kann die Wahrscheinlichkeit verringern, dass deine E-Mails in Spam-Ordnern landen. Um SMTP einzurichten, kannst du ein Plugin wie WP MAIL SMTP verwenden.
Zusammenfassung
Formulare spielen auf Webseiten eine zentrale Rolle. Sie ermöglichen es Kunden, mit dir in Kontakt zu treten, sich für ein Konto zu registrieren, Zahlungsinformationen zu übermitteln und vieles mehr. Es kann jedoch eine Herausforderung sein, ästhetisch ansprechende Formulare für deine Webseite zu entwerfen. Zum Glück ist das mit Elementor ganz einfach.
Sobald du das Elementor-Formular-Widget zu deiner Seite hinzufügst, kannst du deine Felder einrichten und die Formulareinstellungen konfigurieren. Du kannst auch das Design deines Formulars anpassen, damit es mit deinem Branding übereinstimmt.
Hast du noch Fragen zur Erstellung von Elementor-Formularen in WordPress? Lass es uns im Kommentarbereich unten wissen!
Salman Ravoof ist ein autodidaktischer Webentwickler, Autor, Kreativer und ein großer Bewunderer von Free and Open Source Software (FOSS). Neben Technik begeistert er sich für Wissenschaft, Philosophie, Fotografie, Kunst, Katzen und Essen. Erfahre mehr über ihn auf seiner Website und trete mit Salman auf X in Kontakt.
Schreibe einen Kommentar