Widget Eintragungsformular-Test

Leadgeneireungs-Widget

Wie kannst Du in Elementor ein Formular zur Leadgewinnung im Widget machen?

Heute habe ich mal einige Versuche gemacht um Dir zeigen zu können, ist es überhaupt möglich einen Beitrag oder eine Seite so zu gestalten, dass diese in einem Widget in der Seitenleiste sichtbar wird und Du damit eine Formular zu Leadgewinnung erstellen kannst.

Und ja, es ist gelungen. jetzt willst Du sicherlich wissen, wie kannst Du das auch realisieren. Du sieht unten das Ergebnis, das ich als Dummy-Vorlage hier erstellt habe. Und das Du jetzt in der rechten Seitenleiste sehen kannst. 

Gib hier deine Überschrift ein

Kurzer Text

Die einzelnen Schritte

Zuerst habe ich mit einem Beitrag (Post) wie diesem hier experimentiert und war da mit dem Einfügen in ein Widget auf dem Holzweg. Also nächster Versuch und kam dann über das Backend unter Design in den Widget-Einstellung dahinter, dass nur Seiten scheinbar in ein Widget angezeigt werden können. Also nächster Versuch:

  • Seite erstellen.
  • Abschnitt mit Überschrift anfertigen
  • dann Text-Widget darunter.
  • Bild-Widget hinzufügen und
  • anschließend das Formularfeld,
  • sowie alternativ ein Listenelement-Widget.
  • Im weiteren Verlauf, den Abschnitt zum bearbeiten anklicken und
  • Jetzt die Inhaltsbreite auf 240 px einstellen
  • Sodann die Headline Schriftgröße und Farbe einrichten
  • Bild des Reports hinzufügen und eventuell Größe anpassen.
  • Nachfolgend das Formular mit Autoresponder (MailChimp, MailPoet oder passenden von Elementor vorgegebenen) verbinden
  • Und weitere Einstellungen am Formular nach Wunsch vornehmen
  • Zum Schluss kannst Du um das Element (Die Spalte) in der Mitte noch weitere Anpassungen realisieren, wie Rahmen, Hintergrundfarbe etc.

Und das Ganze dann entweder als Vorlage speichern oder die Seite veröffentlichen. Ich habe es als Vorlage gespeichert und als privat veröffentlicht, damit es nich gefunden wird.

Der nächste Schritt

Nachdem das geschafft war, habe ich mich im Backend unter Design, Widget, die Elementor Bibliothek in die Seitenleiste gezogen und dort kannst Du dann einstellen welche Seite angezeigt werden soll. Abschließend alles überprüfen und wenn alles OK aussieht ist das geschafft.

So kannst Du also mit eigenen Mitteln und Ohne zusätzliche kostenpflichtige Plugins auch ein solches Formular einbinden. Und ja, es ist nicht 100 % perfekt. Warum, weil Du keinen einfachen Splittest damit machen kannst.

Wenn Dir dieser Beitrag gefallen hat, freue ich mich über einen Kommentar unten. 

Hol Dir Jetzt den GRATIS Report!

erfolgreiche Landingpages mit Elementor

Trag unten Deine E-Mail Adresse und Du erhältst den REPORT gratis und sofort!

Elementor: Visueller Formular-Editor

Elementor-Kontaktformular

Interessant: Der visuelle Formular-Editor für WordPress​

Formular Widget (Pro)

So verwendest Du das Elementor Form Widget

Mit dem Formular-Editor – Widget musst Du die Seite, die Du gestalten willst, nicht verlassen, wenn Du ein neues Formular erstellst. In diesem Tutorial werden wir alle verfügbaren Optionen dieses Widgets durchgehen.

So verwendest Du das Elementor Form Widget

Formularname – Hier kannst Du den Namen des Formulars eingeben.
Formularfelder – Eine Liste aller Felder des Formulars. Sie können Felder beliebig duplizieren, hinzufügen oder löschen. Du kannst sie auch per Drag & Drop verschieben, um die Reihenfolge zu ändern.
Wenn Du direkt auf eines der Felder klicken, werden alle seine Einstellungen angezeigt.

  • Typ – Wählen Sie den gewünschten Feldtyp aus.
  • Label – Der Name des Feldes, das auf dem Formular und in der E-Mail angezeigt wird, die Sie vom Benutzer erhalten.
  • Platzhalter – Der Text innerhalb des Feldes, der dem Benutzer hilft, das Feld auszufüllen.
  • Erforderlich – Setzen Sie das Feld wie gewünscht, wenn Sie dem Benutzer nicht die Möglichkeit geben möchten, das Feld zu überspringen.
  • Spaltenbreite – Ermöglicht es Ihnen, die Breite des Feldes festzulegen. Dies ist nützlich, wenn Sie mehrere Felder in einer Zeile erhalten möchten. Wenn Sie z.B. 3 Felder in einer Zeile erhalten möchten, müssen Sie jedes Feld mit einer Breite von 33% setzen.
  • Nachricht – Ein Textfeld, in dem Sie die Anzahl der angezeigten Zeilen festlegen können.

Elementor Form Widget - Die Feldtypen

  • Text – Ein einfaches Textfeld. Als Beispiel, das diesen Typ verwendet: Name
  • Tel – Vom Typ – Telefonnummern. Die Tastatur stellt sich automatisch auf diesen Typ ein.
  • E-Mail – Ein Feld vom Typ – E-Mail. Inklusive Validierung für E-Mail.
  • Textarea – Ein Textbereichs-Feld, mit dem Sie die Anzahl der Zeilen festlegen können.
  • Zahl – Ein Nummernfeld. Die Tastatur stellt sich automatisch auf diesen Typ ein.
  • Auswahl – Mit einem Auswahlfeld kann der Benutzer aus einer Dropdown-Liste von Optionen auswählen. Die Optionen werden durch das Schreiben getrennter Textzeilen in der Einstellung Optionen erstellt.
  • URL – Mit diesem Typ kann der Benutzer seine Website-URL eingeben.
  • Kontrollkästchen – Ein Kontrollkastchenfeld (CheckBox) ermöglicht es dem Benutzer, eine oder mehrere der Optionen zu aktivieren. Die Optionen werden wieder durch das Schreiben von getrennten Textzeilen in der Einstellung “Optionen” erzeugt. Bei diesem Typ haben Sie auch die Einstellung”Inline-Liste”, mit der Du die Ankreuzfelder in einer horizontalen Linie darstellen können.
  • Radio – Ein Feld vom Typ Radio ermöglicht es dem Benutzer, eine Option zu aktivieren. Die Optionen werden wiederum durch das Schreiben von getrennten Zeilen erzeugt. Bei diesem Typ hast Du wieder die Einstellung”Inline-Liste”.
  • reCAPTCHA – Füge Deinem Formular einen reCAPTCHA hinzu, um sicherzustellen, dass der Benutzer kein Roboter ist. Du kannst die Größe als normal oder kompakt und den Stil als hell oder dunkel einstellen.
  • Honeypot – Diese Anti-Spam-Technik funktioniert durch Hinzufügen eines Feldes, das für den Benutzer nicht sichtbar ist, aber dennoch von Spambots gesehen wird. Auf diese Weise, wenn der Spambot das Feld automatisch ausfüllt, kann die Spam-Einsendung erkannt und blockiert werden.
  • Versteckt – Füge ein verstecktes Feld hinzu, das für den Benutzer nicht sichtbar ist, aber ein Feld als Teil des Kontaktformulars übermittelt.

Eingabegröße – Lege die Größe der Felder fest, von extra klein bis extra groß.

Beschriftungen – Du kannst die Beschriftungen auf dem Formular ein- oder ausblenden.

Elementor Form Widget - Der Absenden-Button

  • Text – Wählen Sie den Text, der auf der Schaltfläche”Senden” angezeigt wird.
  • Größe – Legt die Größe der Schaltfläche”Senden” fest.
  • Spaltenbreite – Legt die Breite des Buttons in Prozent fest.
  • Textarea – Ein Textbereichs-Feld, mit dem Sie die Anzahl der Zeilen festlegen können.
  • Ausrichtung – Legt die Ausrichtung rechts, zentriert, links oder ausgerichtet fest.
  • Icon – Fügt dem Absende -Button ein Icon aus der Font “Awesome Icon-Liste” hinzu.
  • Icon Position – Vor oder nach dem Text in der Schaltfläche.
  • Icon Abstand – Legt den Abstand zwischen dem Symbol und dem Schaltflächentext fest.

Elementor Form Widget - E-Mails & Optionen

  • E-Mail an – Legt fest, wohin die E-Mail gesendet wird. Sie können mehrere E-Mails einstellen, indem Sie jede E-Mail mit einem Komma trennen.
  • Betreff der E-Mail – Legt die Betreffzeile der E-Mail fest.
  • Von E-Mail – Hiermit wird das Feld von E-Mail festgelegt.
  • Von Name – Hiermit wird der Name der Person festgelegt, die die E-Mail gesendet hat.
  • Antwort auf – Wenn Du die E-Mail erhältst und auf Antwort klickst, ist dies die E-Mail, an die die Antwort gesendet wird. Um dem Benutzer, der die Nachricht gesendet hat, zu antworten, wählen Sie die Option “E-Mail-Feld”.
  • Metadaten – Füge weitere Informationen wie Datum, Uhrzeit, Seiten-URL, User Agent, Remote IP und Credit in die E-Mail ein.
  • HTML senden – Diese Option sendet die E-Mail-Benachrichtigungen in HTML.
  • Redirect to – Fügen Sie den Link hinzu, zu dem der Benutzer automatisch weitergeleitet wird, nachdem er das Formular erfolgreich abgeschickt hat.
  • Benutzerdefinierte Nachrichten – Bearbeiten Sie die Nachrichten, die der Benutzer sehen wird: Erfolgsmeldung, Fehlermeldung, Pflichtfeldnachricht und ungültige Nachricht.
Bitte beachte, dass das Formular-Widget eine neue Benutzeroberfläche hat. Stelle daher sicher, dass Du den folgenden Artikel unseres Blogs gelesen hast, um den neuen Speicherort der Einstellungen zu finden: https://elementor.com/pro-v140-form-integrations/ Leider nur auf Englisch. Aber ein Tipp, nutzen zum Übersetzen diesen sehr guten Online-Übersetzer: Deepl.com

Elementor Form Widget - MailPoet & MailChimp-Integration

Für uns interessant! Du kannst auch in MailChimp und MailPoet mit der eingebauten Integration von Elementor arbeiten. Sieh Dir dazu dieses MailChimp-Tutorial-Video an.

Elementor Form Widget - Formular Design

Formular

  • Spaltenabstand – Legt den exakten Abstand zwischen den Spalten der Formularfelder fest.
  • Zeilenabstand – Legt den Abstand zwischen den Zeilen fest.

Etikett

  • Abstand – Legt den Abstand zwischen den Beschriftungen und den Feldern fest.
  • Textfarbe – Legt die Farbe der Feldbeschriftungen fest.
  • Typografie – Passt die Typografie des Etiketts an.

Feld

  • Textfarbe – Legt die Farbe der Feldbeschriftungen fest (Der Text, den der Benutzer ausfüllt).
  • Typografie – Legt die Typografie des eingegebenen Textes fest.
  • Hintergrundfarbe – Legt die Hintergrundfarbe der Felder fest.
  • Randfarbe – Legt die Randfarbe der Felder fest.
  • Rahmenbreite – Legt die Breite der Feldgrenzen fest.
  • Radius des Randes – Legt den Radius des Randes fest. Die Standardeinstellung hat einen abgerundeten Rand

Taste/Schalter (Button)

  • Normal / Hover – Wählen Sie diese Option, um die Schaltflächeneinstellungen für Normal- und Hover-Status zu ändern.

Normal

  • Textfarbe – Legt die Textfarbe der Schaltfläche fest.
  • Typografie – Legt die Typografie für den Text der Schaltflächen fest.
  • Hintergrundfarbe – Legt die Hintergrundfarbe für die Schaltfläche fest.
  • Rahmentyp – Wähle den Typ des Knopfrahmens aus.
  • Breite – Legt die Breite des Rahmens fest.
  • Farbe – Legt die Farbe des Rahmens fest.
  • Rand Radius – Verleiht dem Button eine abgerundete Kantenform.
  • Text-Padding – Fügt einen Abstand zwischen dem Text und dem Rand des Buttons ein.

Hover (Schweben)

  • Textfarbe – Legt die Textfarbe für die Schaltfläche für den Hover-Modus fest.
  • Hintergrundfarbe – Legt die Hintergrundfarbe für die Schaltfläche für den Hover-Modus fest.
  • Randfarbe – Legt die Randfarbe im Hover-Modus fest.
  • Animation – Fügt der Schaltfläche eine Hover-Animation hinzu.

Bitte beachte, dass das Formular-Widget eine neue Benutzeroberfläche hat. Stelle daher sicher, dass Du den folgenden Artikel unseres Blogs gelesen hast, um den neuen Speicherort der Einstellungen zu finden:

https://elementor.com/pro-v140-form-integrations/

Leider nur auf Englisch. Aber ein Tipp, nutzen zum Übersetzen diesen sehr guten Online-Übersetzer: Deepl.com

Generelle Hilfe bekommst Du, leider wiederum nur auf Englisch, auf der Dokumenten-Seite von Elementor.