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.
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.
jrothhardt
Jörg Rothhardt ist der Betreiber dieser Webseite zu den Themen: Affiliate-Marketing, WordPress und dem Elementor Pagebuilder inkl. der Gestaltung von Landingpages. Er beschäftigt sich seit 2009 mit WordPress. Seine Liebe und Leidenschaft ist es Menschen zu helfen WordPress und seine tollen Möglichkeiten verstehen zu lernen und das ohne hunderte oder gar tausende für Kurse und Trainings ausgeben zu müssen.