Erstellen und entwerfen Sie Formulare mit dem Elementor-Formular-Widget

Erstellen und entwerfen Sie Formulare mit dem Elementor-Formular-Widget

Jede Website braucht ein Kontaktformular! Kontaktformulare sind für verschiedenste Zwecke hilfreich, egal um welche Art von Website es sich handelt. Sie können Leads generieren, Kontakte und Beziehungen aufbauen, Nutzern ermöglichen, Probleme mit Ihrer Website zu melden und vieles mehr.

Man muss kein Technikexperte sein, um Kontaktformulare in WordPress zu erstellen. Mit dem Elementor Page Builder ist es einfacher denn je, ansprechende Websites zu gestalten.

Um zu demonstrieren, wie man Kontaktformulare mit Elementor erstellt, gehen wir auf die verschiedenen Optionen und alles Wissenswerte über Kontaktformulare in Elementor ein.

Elementor bietet schon seit geraumer Zeit ein Formular-Widget an, was bedeutet, dass Sie nicht mehr woanders hingehen müssen, um Formulare für Ihre WordPress-Website zu erstellen – ein wahrer Segen!

In der Vergangenheit sind Sie beim Erstellen von Formularen mit einigen der verfügbaren pluginmöglicherweise auf Schwierigkeiten gestoßen. Das Entwerfen und Konfigurieren von Formularen kann zeitaufwändig und frustrierend sein. Glücklicherweise ist das Elementor-Formular-Widget für uns alle sehr benutzerfreundlich.

Bevor wir mit dem Elementor-Formulargenerator beginnen, werfen wir einen kurzen Blick auf einige seiner wichtigsten Funktionen.

Eines der herausragendsten Merkmale ist die vollständige Integration in die Elementor-Oberfläche. Dadurch stehen Ihnen zahlreiche Design-, Stil- und Layoutoptionen von Elementor zur Verfügung. Ich glaube nicht, dass Sie ein eigenständiges Formular- plugin mit einem so umfassenden Designsystem finden werden.

Dort können Sie bis zu 18 verschiedene Feldtypen erstellen:

  • Die URL und die Telefonnummer lauten wie folgt:
  • Radiobuttons sind eine Art von Radiobutton.
  • Aus einer Liste auswählen (Dropdown-Menü)
  • Kontrollkästchen werden in Checklisten verwendet.
  • Es gibt nur ein Kontrollkästchen (Zustimmung)
  • reCAPTCHA
  • Honeypots sind eine Art Behälter, der Honig enthält (und Spam verhindert)

Sie können Ihre Formulare auch in mehrere Seiten unterteilen, um mehrstufige Formulare zu erstellen, was insbesondere bei längeren Anträgen von Vorteil ist.

Elementor Pro bietet über 12 Integrationen mit gängigen E-Mail-Marketing-Diensten und CRM-Systemen, damit Sie Ihre Formulare optimal nutzen können. Zusätzlich gibt es eine universelle Zapier-Integration, mit der Sie jedes der Tausenden von Tools auf der Zapier-Plattform verbinden können, falls Ihr gewünschtes Tool nicht aufgeführt ist.

Es gibt auch einige andere interessante Alternativen. Wennampjemand Ihr Formular ausfüllt, können Sie Benachrichtigungen über Slack oder Discord erhalten.

Apropos Benachrichtigungen: Sie können sowohl die E-Mail-Benachrichtigungen, die Sie erhalten, als auch die Benachrichtigungen für Formularabsender personalisieren. Nach dem Absenden des Formulars können Sie die Absender auf eine von Ihnen erstellte, individuelle Dankesseite weiterleiten.

Wie erstellt man am besten ein Formular in Elementor?

Wir beginnen damit, den Elementor-Editor zu öffnen und dann das Formular-Widget per Drag & Drop an die Stelle zu ziehen, an der wir unser Formular erstellen möchten.

So erstellen Sie ein Elementor-Formular

Wie alles andere in Elementor erfolgt auch die Erstellung von Formularen visuell. Es ist weder ein zusätzliches pluginerforderlich, noch müssen Sie als Backend-Entwickler für Ihre Website fungieren.

Elementarbildung auf strukturierte Weise

Sobald Ihr Formular erstellt ist, besteht der erste Schritt darin, die darin enthaltenen Informationen zu strukturieren. Welche Felder benötigen Sie und welche Feldtypen sollen es sein? Wonach suchen Sie?

Im Elementor-Editor werden Formularfelder über den Tab „Inhalt“ hinzugefügt und bearbeitet. Wie Sie im folgendenampsehen, enthalten Formulare einige Standardfelder. Über „Element hinzufügen“ im Dropdown-Menü können Sie neue Felder erstellen.

Das Duplizieren eines Feldes ist auch möglich, indem Sie das Symbol auswählen, das wie zwei übereinanderliegende Dokumente aussieht, und darauf klicken. 

Arten von Feldern in einem Formular

Es stehen viele Formularfeldtypen zur Verfügung, von einfachen Textfeldern bis hin zu Passwort-, ReCaptcha- und Honeypot-Feldern.

Um das Verhalten eines Formularfelds zu ändern, wählen Sie zuerst das Feld aus und klicken Sie dann auf das Dropdown-Menü „Typ“, um die verfügbaren Feldtypen anzuzeigen.

Feldtypen in einem Elementor-Formular

Breite einer Formularspalte

Mit dieser Funktion können Sie zwei Formularfelder in derselben Zeile anzeigen, indem Sie die Spaltenbreite anpassen. Ändern Sie die Fensterbreite, indem Sie im Dropdown-Menü 50 Prozent auswählen. Beachten Sie, dass zwei aufeinanderfolgende Formularfelder in derselben Zeile angezeigt werden.

Formulare in Elementor für die Gestaltung

Gestalten Sie Ihre Formulare in Elementor auf die gleiche Weise wie andere Widgets, indem Sie zum Stil-Panel innerhalb der Elementor-Bearbeitungsoberfläche navigieren.

Das Formular selbst, die Felder, Schaltflächen, alle Schritte, Fehlermeldungen und Bestätigungsmeldungen können individuell angepasst werden.

Für diejenigen, die bereits mit Elementor vertraut sind, gibt es nicht mehr viel Neues zu lernen, wenn es um die Gestaltung von Elementor-Formularen geht.

Aktionen auf einem Formular

Nach unserer Diskussion über das Erstellen eines Formulars in Elementor schauen wir uns nun an, wie man konfiguriert, was nach dem Absenden des Formulars passiert; dies geschieht über Formularaktionen oder, wie sie in Elementor genannt werden, Aktionen nach dem Absenden.

Nach dem Absenden eines Formulars versendet das System üblicherweise eine E-Mail und leitet den Nutzer auf eine andere Webseite weiter. Selbstverständlich können Sie beliebig viele Aktionen in Ihre Formulare einbinden und diese nach Belieben kombinieren. Wie zu erwarten, gibt es ein spezielles Auswahlfeld, das ohne Programmierung auskommt.

Jede hinzugefügte Aktion erscheint als separate Registerkarte im Hauptmenü. Aktuell gibt es eine Registerkarte für E-Mail. Wenn ich jedoch eine Weiterleitung im Feld „Aktion hinzufügen“ einfüge, wird mir auch die Option „Weiterleitung“ in denampangezeigt, wie im folgenden Beispiel dargestellt.

Zum Schluss zeige ich Ihnen, wie Sie das Formular so konfigurieren, dass es Einsendungen per E-Mail akzeptiert – die am häufigsten gestellte Frage zu Formularen.

Wenn Sie im Editor auf der Registerkarte „Inhalt“ die Option „E-Mail“ auswählen, wird Ihnen der unten dargestellte Bildschirm angezeigt. Hier können Sie die Absender-E-Mail und die Antwort-E-Mail personalisieren und außerdem eine Kopie (CC) oder eine Kopie (BCC) für alle Personen hinzufügen, die eine Kopie der Formulareingaben erhalten sollen.

Erstellen einer Kontaktformular-Nachrichtenvorlage in Elementor 

Viele sind überrascht, wenn sie erfahren, dass der Formular-Editor von Elementor leistungsfähiger ist, als es auf den ersten Blick scheint, und eine der fortgeschritteneren Funktionen ist die Möglichkeit, die Nachrichten für jedes Formular individuell anzupassen.

Sie können die Formularnachrichten anpassen, um dem Nutzer, der Ihr Formular ausgefüllt hat, ein persönlicheres Feedback zu geben und nicht wie ein langweiliger Roboter zu klingen. Konkret können Sie folgende Nachrichten für Ihr Elementor-Kontaktformular anpassen:

Zunächst müssen Sie die benutzerdefinierten Nachrichten aktivieren, indem Sie im Dropdown-Menü „Zusätzliche Optionen“ auswählen und dann den Schalter für „Benutzerdefinierte Nachrichten“ auf „Ja“ stellen

Anpassung des Elementor-Kontaktformular-Widgets durch Hinzufügen benutzerdefinierter Nachrichten

Wie Sie sehen, gibt es vier verschiedene Nachrichten, die Sie individuell anpassen können, darunter die unten aufgeführten:

Dem Endbenutzer wird eine Erfolgsmeldung angezeigt, nachdem das Formular abgeschickt und überprüft wurde, ob das Formular korrekt ausgefüllt wurde (z. B. keine Pflichtfelder ausgefüllt wurden usw.).

Fehlermeldung – eine Meldung, die dem Endbenutzer angezeigt wird, wenn beim Absenden des Formulars ein unbekannter Fehler auftritt.

Erforderliche Meldung – erscheint, wenn ein Pflichtfeld im Formular nicht ausgefüllt wird, das Formular abgeschickt wird und das Formular nicht vollständig ausgefüllt ist.

Wenn etwas im Formular falsch ist und nicht gesendet werden kann, wird dem Endbenutzer die Meldung „Ungültige Nachricht“ angezeigt.

Die Möglichkeit, die Nachrichten zu bearbeiten, erlaubt Ihnen, kreativ und unkonventionell zu sein oder, falls Sie eine Unternehmenswebsite betreiben, einen formelleren und professionelleren Stil zu verwenden. Das Beste daran ist, dass sie vollständig editierbar sind – Sie können also machen, was Sie wollen!

Abschluss

Mit dem Elementor-Formular-Widget erstellen Sie mühelos Kontaktformulare. Der intuitive Drag-and-Drop-Formulargenerator und die zahlreichen Anpassungsmöglichkeiten heben es von anderen Kontaktformular- pluginauf dem Markt ab. Sie können Design und Farbschema ganz einfach an das Erscheinungsbild Ihres Unternehmens anpassen. Zusätzlich erhalten Sie verschiedene attraktive Widgets, über 300 professionelle Vorlagen und einen Pop-up-Generator – alles in einem praktischen Paket. Dieser vollwertige WordPress-Seiteneditor enthält alle notwendigen Widgets und Funktionen, sodass Sie keine weiteren Seiteneditor für die individuelle Gestaltung Ihrer Website benötigen. Darüber hinaus ermöglicht er die Integration von über 30 Marketingdiensten und gehört daher zu den beliebtesten pluginauf dem Markt.

Hinterlassen Sie einen Kommentar.

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit *