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

Jede Website muss ein Kontaktformular enthalten! Kontaktformulare sind für verschiedene Zwecke hilfreich, unabhängig von der Art Ihrer Website. Sie können Leads generieren, Verbindungen und Beziehungen aufbauen, Benutzern ermöglichen, Probleme mit Ihrer Website zu melden und alles dazwischen.

Um Kontaktformulare in WordPress zu erstellen, ist es nicht notwendig, ein technischer Experte zu sein. Mit dem Elementor-Seitenersteller ist es einfacher denn je, schöne Websites zu erstellen.

Um zu demonstrieren, wie Sie Kontaktformulare mit Elementor erstellen, gehen wir die verschiedenen Optionen und alles Wissenswerte über Kontaktformulare in Elementor durch.

Elementor enthält seit geraumer Zeit ein Formular-Widget, sodass Sie nicht mehr irgendwo anders hingehen müssen, um Formulare für Ihre WordPress-Website zu erstellen, was ein Segen ist!

In der Vergangenheit sind Sie möglicherweise auf Schwierigkeiten beim Erstellen von Formularen mit einigen der verfügbaren plugin gestoßen. Der Prozess des Entwerfens und Konfigurierens von Formularen kann zeitaufwändig und frustrierend sein. Zum Glück für uns alle ist die Arbeit mit dem Elementor-Formular-Widget einfach.

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

Eines der herausragendsten Merkmale ist zunächst einmal, dass es vollständig in die Elementor-Oberfläche integriert ist, was bedeutet, dass Sie Zugriff auf viele Design-/Stil-/Layout-Optionen haben, die in Elementor verfügbar sind. Ich glaube nicht, dass Sie ein eigenständiges Formular- plugin mit einem Designsystem finden werden, das so robust ist wie dieses.

Von dort aus können Sie bis zu 18 verschiedene Feldtypen erstellen:

  • Text-E-Mail-Textbereich Textbereich
  • Die URL und Telefonnummer lauten wie folgt:
  • Optionsfelder sind eine Art Optionsfeld.
  • Wählen Sie aus einer Liste (Dropdown)
  • Kontrollkästchen werden in Checklisten verwendet.
  • Es gibt nur eine Checkbox (Akzeptanz)
  • reCaptcha
  • Honeypots sind eine Art Behälter, der Honig enthält (um Spam zu verhindern)

Sie können Ihre Formulare auch in mehrere Seiten aufteilen, um mehrstufige Formulare zu erstellen, was für lange Bewerbungen von Vorteil ist.

Elementor Pro verfügt über mehr als 12 Integrationen mit beliebten E-Mail-Marketingdiensten und Kundenbeziehungsmanagementsystemen, damit Sie Ihre Formulare optimal nutzen können. Es gibt auch eine umfassende Zapier-Integration, die es Ihnen ermöglicht, eine Verbindung zu einem der Tausenden von Tools herzustellen, die auf der Zapier-Plattform verfügbar sind, wenn Ihr Tool nicht aufgeführt ist.

Es gibt noch einige andere interessante Alternativen. Wenn amp jemand Ihr Formular ausfüllt, können Sie Benachrichtigungen über Slack oder Discord erhalten.

Apropos Benachrichtigungen: Sie können auch die E-Mail-Benachrichtigungen, die Sie erhalten, und die E-Mail-Benachrichtigungen, die Formulareinreicher erhalten, personalisieren. Nachdem sie das Formular abgeschickt haben, können Sie sie auf eine benutzerdefinierte Dankesseite weiterleiten, die Sie erstellen.

Was ist der beste Weg, ein Formular in Elementor zu erstellen?

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 die Erstellung von Formularen visuell. Es ist weder notwendig, ein zusätzliches plugin zu verwenden, noch ist es zwingend erforderlich, als Backend Ihrer Website zu fungieren.

Elementor-Elemente strukturiert bilden

Sobald Ihr Formular vorhanden ist, besteht der erste Schritt darin, die darin enthaltenen Informationen zu organisieren. Welche Felder benötigen Sie und welche Arten von Feldern sollten es sein? Wonach suchst du?

Beim Arbeiten im Elementor-Editor werden Formularfelder über die Registerkarte „Inhalt“ hinzugefügt und bearbeitet. Wie Sie im folgenden amp sehen können, enthalten Formulare einige Standardfelder. Durch Auswahl von Element hinzufügen aus dem Dropdown-Menü können Sie neue Felder erstellen.

Sie können ein Feld auch duplizieren, indem Sie das Symbol auswählen, das wie zwei Dokumente nebeneinander aussieht, und darauf klicken. 

Arten von Feldern in einem Formular

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

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

Arten von Feldern in einem Elementor-Formular

Breite einer Formularspalte

Mit dieser Funktion können Sie zwei Formularfelder in derselben Zeile verwenden, indem Sie die Einstellung für die Spaltenbreite anpassen. Ändern Sie die Breite des Fensters, indem Sie es aus der Dropdown-Auswahl auswählen und 50 Prozent auswählen. Beachten Sie Folgendes: Wenn Sie dies mit zwei aufeinanderfolgenden Formularfeldern tun, werden Sie feststellen, dass diese zusammen in derselben Zeile angezeigt werden.

Formulare in Elementor für das Styling

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

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

Für diejenigen, die bereits mit Elementor vertraut sind, gibt es nicht viel mehr, was sie über die Gestaltung von Elementor-Formularen lernen müssen.

Aktionen auf einem Formular

Im Anschluss an unsere Diskussion zum Erstellen eines Formulars in Elementor schauen wir uns die Konfiguration an, was nach dem Absenden Ihres Formulars geschieht. Dies wird durch Formularaktionen oder, wie sie in Elementor genannt werden, Aktionen nach dem Absenden erreicht.

Beim Absenden eines Formulars sendet das System häufig eine E-Mail und leitet den Benutzer auf eine andere Webseite weiter. Selbstverständlich können Sie beliebig viele Aktionen in Ihre Formulare einbinden und diese beliebig kombinieren. Wie zu erwarten ist, gibt es ein spezifisches Selektorfeld, für das keine Codierung erforderlich ist.

Jede der von Ihnen hinzugefügten Aktionen wird als separate Registerkartenoption im Hauptmenü angezeigt. Wir haben derzeit eine Tab-Option für E-Mail, aber wenn ich eine Weiterleitung in das Feld „Aktion hinzufügen“ einfügen würde, würde in meinen Tab-Optionen auch „Umleitung“ angezeigt, wie im amp unten gezeigt.

Abschließend zeige ich Ihnen, wie Sie das Formular so konfigurieren, dass es Übermittlungen per E-Mail akzeptiert, der am häufigsten gestellten Frage zu Formularen.

Wenn Sie im Editor auf der Registerkarte „Inhalt“ die Option „E-Mail“ auswählen, wird der unten gezeigte Bildschirm angezeigt. Hier können Sie die Absender-E-Mail und die Antwort-E-Mail personalisieren und jedem, der eine Kopie der Einsendungen aus dem Formular erhalten soll, ein CC oder BCC hinzufügen.

Erstellen einer Kontaktformular-Nachrichtenvorlage in Elementor

Viele Menschen sind überrascht zu erfahren, dass der Formulareditor von Elementor leistungsfähiger ist, als es auf den ersten Blick scheint, und eine der fortschrittlicheren Funktionen ist die Möglichkeit, die Nachrichten für jedes Formular anzupassen.

Es ist möglich, die Formularnachrichten anzupassen, um dem Endbenutzer, der Ihr Formular ausgefüllt hat, einen persönlicheren Feedbackprozess zu bieten, anstatt wie ein langweiliger Roboter zu klingen. Aber im Einzelnen können Sie folgende Nachrichten für Ihr Elementor-Kontaktformular anpassen:

Zunächst müssen Sie benutzerdefinierte Nachrichten aktivieren, indem Sie im Dropdown-Menü „Zusätzliche Optionen“ auswählen und dann den Kippschalter 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 anpassen können, darunter die unten aufgeführten:

Nach dem Absenden des Formulars und der Überprüfung, ob das Formular korrekt ausgefüllt wurde (z. B. keine fehlenden Pflichtfelder usw.), wird dem Endbenutzer eine Erfolgsmeldung angezeigt.

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

Erforderliche Nachricht – wird angezeigt, wenn ein erforderliches Formularfeld nicht ausgefüllt ist, das Formular gesendet wird und das Formular nicht ausgefüllt wird.

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

Die Möglichkeit, die Nachrichten zu bearbeiten, ermöglicht es Ihnen, kreativ und eigenwillig zu sein, oder formeller und sachlicher zu sein, wenn Sie eine Unternehmenswebsite betreiben. Das Beste daran ist, dass sie vollständig editierbar sind, sodass Sie tun und lassen können, was Sie wollen!

Abschluss

Mit dem Elementor-Formular-Widget ist es mühelos, ein Kontaktformular zu erstellen. Es verfügt über einen intuitiven Drag-and-Drop-Kontaktformular-Builder und eine Vielzahl von Anpassungsoptionen, die es von den anderen auf dem Markt erhältlichen Kontaktformular- plugin unterscheiden. Sie können das Design und das Farbschema ganz einfach an das Erscheinungsbild Ihres Unternehmens anpassen. Ebenfalls enthalten sind verschiedene weitere attraktive Widgets, mehr als 300 professionelle Vorlagen und ein Pop-up-Builder in einem praktischen Paket. Dieser WordPress-Seitenersteller mit vollem Funktionsumfang umfasst alle notwendigen Widgets und Funktionen, sodass Sie keine zusätzlichen Seitenersteller kaufen müssen, um Ihre Website weiter anzupassen. Darüber hinaus ermöglicht es die Integration von mehr als 30 Marketingdiensten, weshalb es heute eines der am häufigsten gekauften plugin auf dem Markt ist.

Hanson F.

kürzliche Posts

So verwenden Sie Kopf- und Fußzeilen mit Elementor

Kopf- und Fußzeilen einer Website sind wesentliche Elemente. In den meisten Fällen dient der Header der Navigation …

6. Januar 2022

WordPress-Theme-Vergleich: Astra vs OceanWP

Zwei der beliebtesten WordPress-Themes auf dem Markt sind Astra und OceanWP. Fachmann…

2. Januar 2022

Vergleich des WordPress-News-Themes: Zeitung vs. Astra

Um eine hervorragende Nachrichten-Website zu erstellen, müssen Sie kein Webdesigner werden. Wir…

25. Oktober 2021

Erstellen Sie eine nachrichtenbezogene Website mit dem Zeitungsthema

Das Newspaper-Theme ist eines der bedeutendsten WordPress-Themes, das von tagDiv entworfen wurde, einem…

18. Oktober 2021

So erstellen Sie einen E-Commerce mit dem Avada WooCommerce Builder

Wenn es um die Einrichtung eines Online-Shops geht, ist WooCommerce das plugin -in der Wahl. Es…

4. Oktober 2021

So verwenden Sie Sticky-Header- und Scrolling-Effekte mit Elementor

Ein Header ist im Allgemeinen das Erste, was eine Person sieht, wenn sie Ihre Website besucht.

21. September 2021